open-index/open-npm huggingface dataset:
npm package: @melio-ui/accordion
Description: ```javascript <Accordion.Root>   <Accordion.Item>     <Accordion.Header>       <div>Panel Title1</div>       <Accordion.ArrowIcon />     </Accordion.Header>     <Accordion.Content>Content1</Accordion.Content>   </Accordion.Item>
Latest version: 0.3.0

## Accordion

```javascript
<Accordion.Root>
  <Accordion.Item>
    <Accordion.Header>
      <div>Panel Title1</div>
      <Accordion.ArrowIcon />
    </Accordion.Header>
    <Accordion.Content>Content1</Accordion.Content>
  </Accordion.Item>

  <Accordion.Item>
    <Accordion.Header>
      <div>Panel Title2</div>
      <Accordion.ArrowIcon />
    </Accordion.Header>
    <Accordion.Content>Content2</Accordion.Content>
  </Accordion.Item>

  <Accordion.Item>
    <Accordion.Header>
      <div>Panel Title3</div>
      <Accordion.ArrowIcon />
    </Accordion.Header>
    <Accordion.Content>Content3</Accordion.Content>
  </Accordion.Item>
</Accordion.Root>
```
npm package: @melio-ui/alert
Description: ### 기본
Latest version: 0.3.0

## Alert

### 기본

```javascript
<Alert.Root>
  <Alert.StatusIcon />
  <Alert.Content>This is an info alert</Alert.Content>
</Alert.Root>
```

### 타이틀

```javascript
<Alert.Root>
  <Alert.StatusIcon />
  <Alert.Content>
    <div>information</div>
    <div>This is an info alert</div>
  </Alert.Content>
</Alert.Root>
```

### 아이콘

```javascript
<Alert.Root>
  <CheckIcon />
  <Alert.Content>This is an custom icon alert</Alert.Content>
</Alert.Root>

<Alert.Root>
  <Alert.StatusIcon
    info={<CheckIcon />}
    success={<SuccessIcon />}
    warning={<WarningIcon />}
    error={<ErrorIcon />}
  />
  <Alert.Content>
    This is an custom icon alert by AlertStatusIcon
  </Alert.Content>
</Alert.Root>
```
npm package: @melio-ui/avatar
Description: ### 기본
Latest version: 0.3.0

## Avatar

### 기본

```javascript
<Avatar.Root>
  <UserIcon />
</Avatar.Root>
```

### 이미지

```javascript
<Avatar.Root>
  <Avatar.Img src="/images/avatar.png" />
</Avatar.Root>
```

### 그룹핑

```javascript
<Avatar.Group>
  <Avatar.GroupContent>
    <Avatar.Root>
      <UserIcon />
    </Avatar.Root>
    <Avatar.Root>
      <UserIcon />
    </Avatar.Root>
    <Avatar.Root>
      <UserIcon />
    </Avatar.Root>
  </Avatar.GroupContent>
  <Avatar.Extra />
</Avatar.Group>
```
npm package: @melio-ui/badge
Description: ### 기본
Latest version: 0.3.0

## Badge

### 기본

```javascript
<Badge.Root>
  <Badge.Content>{2}</Badge.Content>
  <UserIcon />
</Badge.Root>
```

### Max

```javascript
<Badge.Root max={99}>
  <Badge.Content>{100}</Badge.Content>
  <UserIcon />
</Badge.Root>
```

### Size

```javascript
<Badge.Root>
  <Badge.Content
    style={{
      minWidth: 20,
      height: 20,
      fontSize: 'calc(20px - 3px)',
      borderRadius: 'calc(20px / 2)',
      lineHeight: '20px',
    }}
  >
    large
  </Badge.Content>
  <UserIcon />
</Badge.Root>
```

### Color

```javascript
<Badge.Root>
  <Badge.Content style={{ backgroundColor: '#ffff00', color: 'black' }}>#ffff00</Badge.Content>
  <UserIcon />
</Badge.Root>
```

### Placement

```javascript
<Badge.Root placement="top-left">
  <Badge.Content>top-left</Badge.Content>
  <UserIcon />
</Badge.Root>
```

### BadgeOnly

```javascript
<Badge.Root>
  <Badge.Content />
</Badge.Root>
```
npm package: @melio-ui/breadcrumb
Description: ### 기본
Latest version: 0.3.0

## Breadcrumb

### 기본

```javascript
<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page">Page</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>Current</Breadcrumb.Item>
</Breadcrumb.Root>
```

### CustomSeparator

```javascript
<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator>{'>'}</Breadcrumb.Separator>

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page">Page</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator>{'>'}</Breadcrumb.Separator>

  <Breadcrumb.Item>Current</Breadcrumb.Item>
</Breadcrumb.Root>
```

### Icon

```javascript
<Breadcrumb.Root>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">
      <UserIcon />
      Home
    </Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page">
      <UserIcon />
      Page
    </Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <UserIcon />
    Current
  </Breadcrumb.Item>
</Breadcrumb.Root>
```

### Collapsed

```javascript
<Breadcrumb.Root maxItems={5} collapse={<Breadcrumb.Collapse />}>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page1">Page1</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page2">Page2</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page3">Page3</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>
    <Breadcrumb.Link href="/page4">Page4</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />

  <Breadcrumb.Item>Current</Breadcrumb.Item>
</Breadcrumb.Root>
```
npm package: @melio-ui/checkbox
Description: ### 기본
Latest version: 0.3.0

## Checkbox

### 기본

```javascript
<Checkbox.Root>
  <Checkbox.Indicator>
    <Checkbox.Icon />
  </Checkbox.Indicator>
  <Checkbox.Label>체크박스</Checkbox.Label>
</Checkbox.Root>
```

### Custom

```javascript
<Checkbox.Root>
  <Checkbox.Indicator>
    {(checked: boolean) => {
      if (checked) return <CheckedUserIcon />;
      return <UncheckedUserIcon />;
    }}
  </Checkbox.Indicator>
  <Checkbox.Label>체크박스</Checkbox.Label>
</Checkbox.Root>

<Checkbox.Root>
  <Checkbox.Indicator>
    <Checkbox.Icon
      checkedIcon={<CheckedUserIcon />}
      uncheckedIcon={<UncheckedUserIcon />}
    />
  </Checkbox.Indicator>
  <Checkbox.Label>체크박스</Checkbox.Label>
</Checkbox.Root>
```

### CheckboxGroup

```javascript
<Checkbox.Group>
  <Checkbox.Root value={0}>
    <Checkbox.Indicator>
      <Checkbox.Icon />
    </Checkbox.Indicator>
    <Checkbox.Label>체크박스1</Checkbox.Label>
  </Checkbox.Root>
  <Checkbox.Root value={1}>
    <Checkbox.Indicator>
      <Checkbox.Icon />
    </Checkbox.Indicator>
    <Checkbox.Label>체크박스2</Checkbox.Label>
  </Checkbox.Root>
  <Checkbox.Root value={2}>
    <Checkbox.Indicator>
      <Checkbox.Icon />
    </Checkbox.Indicator>
    <Checkbox.Label>체크박스3</Checkbox.Label>
  </Checkbox.Root>
</Checkbox.Group>
```
npm package: @melio-ui/circular-progress
Description: ### 기본
Latest version: 0.3.0

## CircularProgress

### 기본

```javascript
<CircularProgress.Root value={30}>
  <CircularProgress.Indicator />
  <CircularProgress.Label>30%</CircularProgress.Label>
</CircularProgress.Root>
```

### Indeterminate

```javascript
<CircularProgress.Root indeterminate>
  <CircularProgress.Indicator />
</CircularProgress.Root>
```

### Custom

```javascript
<CircularProgress.Root value={50} style={{ fontSize: 100, width: 100, height: 100 }}>
  <CircularProgress.Indicator barStyle={{ stroke: '#1976d2' }} />
  <CircularProgress.Label>50%</CircularProgress.Label>
</CircularProgress.Root>
```
npm package: @melio-ui/dialog
Description: ### 기본
Latest version: 0.3.0

## Dialog

### 기본

```javascript
<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Content>
      <Dialog.Close asChild>
        <button type="button">X</button>
      </Dialog.Close>
      <div>Dialog Content</div>
      <div>
        <Dialog.Close asChild>
          <button type="button">닫기</button>
        </Dialog.Close>
      </div>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```

### Backdrop

```javascript
<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop backdrop />
    <Dialog.Content>
      <Dialog.Close asChild>
        <button type="button">X</button>
      </Dialog.Close>
      <div>Dialog Content</div>
      <div>
        <Dialog.Close asChild>
          <button type="button">닫기</button>
        </Dialog.Close>
      </div>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```

### DestroyOnClose

```javascript
<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Content destroyOnClose={false}>
      <Dialog.Close asChild>
        <button type="button">X</button>
      </Dialog.Close>
      <div>Dialog Content</div>
      <div>
        <Dialog.Close asChild>
          <button type="button">닫기</button>
        </Dialog.Close>
      </div>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```

### ForceMount

```javascript
<Dialog.Root>
  <Dialog.Trigger asChild>
    <button type="button">Open Dialog</button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Content forceMount>
      <Dialog.Close asChild>
        <button type="button">X</button>
      </Dialog.Close>
      <div>Dialog Content</div>
      <div>
        <Dialog.Close asChild>
          <button type="button">닫기</button>
        </Dialog.Close>
      </div>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>
```
npm package: @melio-ui/drawer
Description: ### 기본
Latest version: 0.3.0

## Drawer

### 기본

```javascript
<Drawer.Root>
  <Drawer.Trigger asChild>
    <button type="button">Open</button>
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Content>
      <Drawer.Header>Title</Drawer.Header>
      <Drawer.Close asChild>
        <button type="button">Close</button>
      </Drawer.Close>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

### Placement

```javascript
<Drawer.Root placement="left">
  <Drawer.Trigger asChild>
    <button type="button">Open</button>
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Content>
      <Drawer.Header>Title</Drawer.Header>
      <Drawer.Close asChild>
        <button type="button">Close</button>
      </Drawer.Close>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

### Custom

```javascript
<Drawer.Root>
  <Drawer.Trigger asChild>
    <button type="button">Open</button>
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Content style={{ width: '60%' }}>
      <Drawer.Header>Title</Drawer.Header>
      <Drawer.Close asChild>
        <button type="button">Close</button>
      </Drawer.Close>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

### destroyOnClose

```javascript
<Drawer.Root>
  <Drawer.Trigger asChild>
    <button type="button">Open</button>
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Backdrop />
    <Drawer.Content destroyOnClose={false}>
      <Drawer.Header>Title</Drawer.Header>
      <Drawer.Close asChild>
        <button type="button">Close</button>
      </Drawer.Close>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```
npm package: @melio-ui/dropdown
Description: ### 기본
Latest version: 0.3.0

## Dropdown

### 기본

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content>
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```

### DestroyOnClose

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content destroyOnClose={false}>
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```

### ForceMount

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content forceMount>
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```

### Position

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content
      triggerPosition={{ vertical: 'bottom', horizontal: 'right' }}
      contentPosition={{ vertical: 'top', horizontal: 'left' }}
    >
      <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
      <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```

### Custom

```javascript
<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <button type="button">Dropdown</button>
  </Dropdown.Trigger>
  <Dropdown.Portal>
    <Dropdown.Content>
      <div>
        <div>제목1</div>
        <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
        <Dropdown.Item disabled>DropdownItem - 2</Dropdown.Item>
        <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
      </div>
      <div role="separator" />
      <div>
        <div>제목2</div>
        <Dropdown.Item>DropdownItem - 1</Dropdown.Item>
        <Dropdown.Item>DropdownItem - 2</Dropdown.Item>
        <Dropdown.Item>DropdownItem - 3</Dropdown.Item>
      </div>
    </Dropdown.Content>
  </Dropdown.Portal>
</Dropdown.Root>
```
npm package: @melio-ui/modal
Description: ### 기본
Latest version: 0.0.4

## Modal

### 기본

```javascript
<Modal.Root>
  <Modal.Trigger asChild>
    <button type="button">Open Modal</button>
  </Modal.Trigger>
  <Modal.Portal>
    <Modal.Backdrop />
    <Modal.Content>
      <Modal.Close asChild>
        <Modal.CloseButton />
      </Modal.Close>
      <div>Modal Content</div>
      <div>
        <Modal.Close asChild>
          <button type="button">닫기</button>
        </Modal.Close>
      </div>
    </Modal.Content>
  </Modal.Portal>
</Modal.Root>
```

### Backdrop

```javascript
<Modal.Root>
  <Modal.Trigger asChild>
    <button type="button">Open Modal</button>
  </Modal.Trigger>
  <Modal.Portal>
    <Modal.Backdrop backdrop />
    <Modal.Content>
      <Modal.Close asChild>
        <Modal.CloseButton />
      </Modal.Close>
      <div>Modal Content</div>
      <div>
        <Modal.Close asChild>
          <button type="button">닫기</button>
        </Modal.Close>
      </div>
    </Modal.Content>
  </Modal.Portal>
</Modal.Root>
```

### DestroyOnClose

```javascript
<Modal.Root>
  <Modal.Trigger asChild>
    <button type="button">Open Modal</button>
  </Modal.Trigger>
  <Modal.Portal>
    <Modal.Backdrop />
    <Modal.Content destroyOnClose={false}>
      <Modal.Close asChild>
        <Modal.CloseButton />
      </Modal.Close>
      <div>Modal Content</div>
      <div>
        <Modal.Close asChild>
          <button type="button">닫기</button>
        </Modal.Close>
      </div>
    </Modal.Content>
  </Modal.Portal>
</Modal.Root>
```

### ForceMount

```javascript
<Modal.Root>
  <Modal.Trigger asChild>
    <button type="button">Open Modal</button>
  </Modal.Trigger>
  <Modal.Portal>
    <Modal.Backdrop />
    <Modal.Content forceMount>
      <Modal.Close asChild>
        <Modal.CloseButton />
      </Modal.Close>
      <div>Modal Content</div>
      <div>
        <Modal.Close asChild>
          <button type="button">닫기</button>
        </Modal.Close>
      </div>
    </Modal.Content>
  </Modal.Portal>
</Modal.Root>
```
npm package: @melio-ui/number-input
Description: ### 기본
Latest version: 0.3.0

## NumberInput

### 기본

```javascript
<NumberInput.Root>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>

<NumberInput.Root>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus asChild>
      <button type="button">+</button>
    </NumberInput.Plus>
    <NumberInput.Minus asChild>
      <button type="button">-</button>
    </NumberInput.Minus>
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```

### Disabled

```javascript
<NumberInput.Root disabled>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```

### ReadOnly

```javascript
<NumberInput.Root readOnly>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```

### Min/Max

```javascript
<NumberInput.Root min={0} max={100} step={5}>
  <NumberInput.Field />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```

### Custom(Invalid)

```javascript
<NumberInput.Root style={{ border: '1px solid', borderColor: 'var(--es-error)' }}>
  <NumberInput.Field style={{ border: 'none', outline: 'none', boxShadow: 'none' }} />
  <NumberInput.ButtonGroup>
    <NumberInput.Plus />
    <NumberInput.Minus />
  </NumberInput.ButtonGroup>
</NumberInput.Root>
```
npm package: @melio-ui/popover
Description: ### 기본
Latest version: 0.3.0

## Popover

### 기본

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content>
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

### CloseOnBlur

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content closeOnBlur={false}>
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

### DestroyOnClose

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content destroyOnClose={false}>
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

### ForceMount

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content forceMount>
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```

### Position

```javascript
<Popover.Root>
  <Popover.Trigger asChild>
    <button type="button">Open Popover</button>
  </Popover.Trigger>
  <Popover.Portal>
    <Popover.Content
      triggerPosition={{ vertical: 'bottom', horizontal: 'right' }}
      contentPosition={{ vertical: 'top', horizontal: 'left' }}
    >
      <div>This is a Popover Content</div>
    </Popover.Content>
  </Popover.Portal>
</Popover.Root>
```
npm package: @melio-ui/progress
Description: ### 기본
Latest version: 0.3.0

## Progress

### 기본

```javascript
<Progress.Root value={30}>
  <Progress.Indicator />
</Progress.Root>
```

### Indeterminate

```javascript
<Progress.Root indeterminate>
  <Progress.Indicator />
</Progress.Root>
```

### Custom

```javascript
<Progress.Root>
  <Progress.Indicator style={{ backgroundColor: '#ff4d4f' }} />
</Progress.Root>
```
npm package: @melio-ui/radio
Description: ### 기본
Latest version: 0.0.2

## Radio

### 기본

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```

### Custom Checked(함수)

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```

### Custom Checked(props)

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```
npm package: @melio-ui/radio-group
Description: ### 기본
Latest version: 0.3.0

## RadioGroup

### 기본

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      <Radio.Icon />
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```

### Custom Checked(함수)

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      {(checked: boolean) => {
        if (checked) return <CheckedUserIcon />;
        return <UncheckedUserIcon />;
      }}
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```

### Custom Checked(props)

```javascript
<Radio.Group>
  <Radio.Root value="1">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오1</Radio.Label>
  </Radio.Root>

  <Radio.Root value="2">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오2</Radio.Label>
  </Radio.Root>

  <Radio.Root value="3">
    <Radio.Indicator>
      <Radio.Icon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
    </Radio.Indicator>
    <Radio.Label>라디오3</Radio.Label>
  </Radio.Root>
</Radio.Group>
```
npm package: @melio-ui/react
Description: ## 배포(루트에서 작업)
Author: AHN HYUNGRO
Latest version: 0.3.0

# @melio-ui/react

## 배포(루트에서 작업)

```sh
$ pnpm build // 정상 빌드 확인
$ pnpm changeset
// 배포할 패키지 선택하고 버전 선택
// spacebar 로 선택
// major 선택되지 않은 패키지는 minor 버전으로 업데이트

$ pnpm run version
$ pnpm build
$ pnpm release
```
npm package: @melio-ui/slider
Description: ### 기본
Latest version: 0.3.0

## Slider

### 기본

```javascript
<Slider.Root>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>
```

### ThumbLabel

```javascript
<Slider.Root>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb>
    <Slider.ThumbLabel />
  </Slider.Thumb>
</Slider.Root>

<Slider.Root>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb>
    <Slider.ThumbLabel auto />
  </Slider.Thumb>
</Slider.Root>
```

### Min/Max

```javascript
<Slider.Root min={10} max={120} step={10}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>
```

### Orientation

```javascript
<Slider.Root orientation="vertical">
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
</Slider.Root>
```

### Range

```javascript
<Slider.Root defaultValue={[10, 30]}>
  <Slider.Track>
    <Slider.Range />
  </Slider.Track>
  <Slider.Thumb />
  <Slider.Thumb />
</Slider.Root>
```
npm package: @melio-ui/steps
Description: ### 기본
Latest version: 0.3.0

## Steps

### 기본

```javascript
<Steps.Root>
  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step01</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step02</div>
      <div>This is a description</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step03</div>
    </Steps.Content>
  </Steps.Step>
</Steps.Root>
```

### ChildrenByFunc

```javascript
<Steps.Root>
  <Steps.Step>
    <Steps.Indicator>
      {(status: StepStatusValue) => (status === 'finish' ? '완료' : status)}
    </Steps.Indicator>
    <Steps.Content>
      {(status: StepStatusValue) =>
        status === 'finish' ? (
          <div>Step01 - {status}</div>
        ) : (
          <>
            <div>Step01 - {status}</div>
            <div>This is a description</div>
          </>
        )
      }
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step02</div>
      <div>This is a description</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step03</div>
    </Steps.Content>
  </Steps.Step>
</Steps.Root>
```

### CustomStatus

```javascript
<Steps.Root>
  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status finish={<UserIcon />} error={<UserIcon color="red" />} />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step01</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status finish={<UserIcon />} error={<UserIcon color="red" />} />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step02</div>
      <div>This is a description</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      {(status: StepStatusValue) =>
        status === 'wait' ? <UserIcon color="gray" /> : <UserIcon />
      }
    </Steps.Indicator>
    <Steps.Content>
      <div>Step03</div>
    </Steps.Content>
  </Steps.Step>
</Steps.Root>
```

### Orientation

```javascript
<Steps.Root orientation="vertical">
  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step01</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step02</div>
      <div>This is a description</div>
    </Steps.Content>
    <Steps.Separator />
  </Steps.Step>

  <Steps.Step>
    <Steps.Indicator>
      <Steps.Status />
    </Steps.Indicator>
    <Steps.Content>
      <div>Step03</div>
    </Steps.Content>
  </Steps.Step>
</Steps.Root>
```
npm package: @melio-ui/switch
Description: ### 기본
Latest version: 0.3.0

## Switch

### 기본

```javascript
<Switch.Root>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>
```

### Label

```javascript
<Switch.Root>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
  <Switch.Label>Label</Switch.Label>
</Switch.Root>
```

### Disabled

```javascript
<Switch.Root disabled>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>
```

### ReadOnly

```javascript
<Switch.Root readOnly>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>
```
npm package: @melio-ui/tabs
Description: ### 기본
Latest version: 0.3.0

## Tabs

### 기본

```javascript
<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab>Tab1</Tabs.Tab>
    <Tabs.Tab>Tab2</Tabs.Tab>
    <Tabs.Tab>
      <UserIcon />
      Tab3
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Content>
    <p>TabContent1</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent2</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent3</p>
  </Tabs.Content>
</Tabs.Root>
```

### Orientation

```javascript
<Tabs.Root orientation="vertical">
  <Tabs.List>
    <Tabs.Tab>Tab1</Tabs.Tab>
    <Tabs.Tab>Tab2</Tabs.Tab>
    <Tabs.Tab>
      <UserIcon />
      Tab3
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Content>
    <p>TabContent1</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent2</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent3</p>
  </Tabs.Content>
</Tabs.Root>
```

### RenderMode

- selecting: 선택한 tab만 랜더링 (default)
- selected: 선택되었던 tab 랜더링
- force: 모두 랜더링

```javascript
<Tabs.Root renderMode="selecting">
  <Tabs.List>
    <Tabs.Tab>Tab1</Tabs.Tab>
    <Tabs.Tab>Tab2</Tabs.Tab>
    <Tabs.Tab>
      <UserIcon />
      Tab3
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Content>
    <p>TabContent1</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent2</p>
  </Tabs.Content>
  <Tabs.Content>
    <p>TabContent3</p>
  </Tabs.Content>
</Tabs.Root>
```
npm package: @melio-ui/toast
Description: ### 기본
Latest version: 0.3.0

## Toast

### 기본

```javascript
const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>
```

### Placement

```javascript
const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport placement="bottom-right" />
</Toast.Root>
```

### Duration

```javascript
const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root duration={1000} open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>
```

### Close

```javascript
const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
    <Toast.Close asChild>
      <button type="button">Undo</button>
    </Toast.Close>
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>
```
npm package: @melio-ui/tooltip
Description: ### 기본
Latest version: 0.3.0

## Tooltip

### 기본

```javascript
<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <button type="button">Tooltip</button>
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content>tooltip message</Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>
```

### Arrow

```javascript
<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <button type="button">Tooltip</button>
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content>
      tooltip message
      <Tooltip.Arrow />
    </Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>
```

### Position

```javascript
<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <button type="button">Tooltip</button>
  </Tooltip.Trigger>
  <Tooltip.Portal>
    <Tooltip.Content side="bottom" align="end">
      tooltip message
    </Tooltip.Content>
  </Tooltip.Portal>
</Tooltip.Root>
```
npm package: @meliplatform/web-core
Description: Copyright © 2023 Melisoft. All rights reserved. 
Author: Melisoft
Latest version: 1.0.7

# COPYRIGHT
All rights reserved by melisoft.vn © 2023 Melisoft. Registered copyright.

# CONTACT INFORMATION
For instructions on how to use, please contact:
- Phone: +84 966 298 666
- Email: contact@melisoft.vn
- Address: NV18, Trung Van urban area, Trung Van, Nam Tu Liem, Ha Noi, Viet Nam

# TERMS AND CONDITIONS
Please read our [privacy policy](https://melisoft.vn/privacy-policy) and [terms of service](https://melisoft.vn/terms-of-service) carefully.