open-index/open-npm huggingface dataset:
npm package: @jdesignlab/box
Description: Box는 스타일링을 위한 기본적인 UI 컴포넌트입니다. 기본적으로 `div`로 렌더링되며, `as` 속성을 사용하여 원하는 요소로 변경할 수 있습니다.
Latest version: 0.8.2

# Box

Box는 스타일링을 위한 기본적인 UI 컴포넌트입니다. 기본적으로 `div`로 렌더링되며, `as` 속성을 사용하여 원하는 요소로 변경할 수 있습니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/layout-box--basic)

```jsx
<Box style={{ width: '64px', height: '64px' }}>Some Content..</Box>
```

## Props

### Box

| Property        | Allow Types         | Description                   | Default       |
| --------------- | ------------------- | ----------------------------- | ------------- |
| as              | `React.ElementType` | Elemenet Type                 | `div`         |
| backgroundColor | `ColorToken`        | Background 색상을 지정합니다. | `transparent` |
| color           | `CorlorToken`       | Color 색상을 지정합니다.      |               |
| style           | `CssObject`         | 추가적인 스타일을 지정합니다. |               |
npm package: @jdesignlab/button
Description: 사용자의 클릭으로 특정 동작을 실행하는데 사용됩니다. 다양한 액션을 트리거하거나, 사용자에게 여러 선택지를 제공하는 등 다양한 용도로 사용될 수 있습니다.
Latest version: 0.12.1

# Button

사용자의 클릭으로 특정 동작을 실행하는데 사용됩니다. 다양한 액션을 트리거하거나, 사용자에게 여러 선택지를 제공하는 등 다양한 용도로 사용될 수 있습니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/actions-button--basic)

```jsx
<Button>버튼</Button>
```

## Props

| Property | Allow Types                                 | Description                                                    | Default       |
| -------- | ------------------------------------------- | -------------------------------------------------------------- | ------------- |
| onClick  | `() => void`                                | 버튼 클릭 시 이벤트를 이벤트를 호출합니다.                     | `undefined`   |
| variant  | `solid` `outline` `ghost` `link` `unstyled` | 버튼의 시각적 요소를 변경하여 다양한 버튼 디자인을 제공합니다. | `solid`       |
| size     | `sm` `md` `lg` `xl`                         | 버튼의 크기를 조절합니다.                                      | `md`          |
| disabled | `boolean`                                   | 버튼을 비활성화합니다.                                         | `false`       |
| color    | `ColorToken`                                | 버튼의 색상을 지정합니다.                                      | `primary-500` |
| full     | `boolean`                                   | 버튼의 너비를 부모요소의 전체 너비만큼 확장합니다.             | `false`       |
| icon     | `React.ReactElement`                        | 버튼 좌측에 아이콘을 삽입합니다.                               | `undefined`   |
| as       | `React.ElementType`                         | html 태그를 별도로 지정해줍니다.                               | `button`      |
npm package: @jdesignlab/card
Description: Card 컴포넌트는 `Flexible`한 UI 컴포넌트 입니다. 특정 주제에 대한 제목과 내용을 담고 있으며 수직 및 수평 방향을 모두 지원합니다.
Latest version: 0.11.1

# Card

Card 컴포넌트는 `Flexible`한 UI 컴포넌트 입니다. 특정 주제에 대한 제목과 내용을 담고 있으며 수직 및 수평 방향을 모두 지원합니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/data-display-card--basic)

```jsx
<Card>
  <Card.Header>Title</Card.Header>
  <Card.Divider />
  <Card.Body>Body Content..</Card.Body>
  <Card.Divider />
  <Card.Footer>Footer Content..</Card.Footer>
</Card>
```

## Props

### Card

| Property  | Allow Types                                         | Description                                                | Default       |
| --------- | --------------------------------------------------- | ---------------------------------------------------------- | ------------- |
| as        | `React.ElementType`                                 | Element Type                                               | `div`         |
| style     | `CssObject`                                         | 추가적인 스타일을 지정합니다.                              |               |
| variant   | `elevated` `outlined` `filled`                      | Card 스타일을 지정합니다.                                  | `elevated`    |
| color     | `ColorToken`                                        | Color 색상을 지정합니다. **filled 스타일에만 적용됩니다.** | `primary-500` |
| direction | `vertical`,`horizontal`                             | Card의 방향을 지정합니다.                                  | `vertical`    |
| align     | `start` `end` `center` `between` `around` `stretch` | Card의 `align-items` 속성을 지정합니다.                    | `start`       |
| justify   | `start` `end` `center` `between` `around` `stretch` | Card의 `justify-content` 속성을 지정합니다.                | `start`       |
| size      | `sm` `md` `lg`                                      | Card의 기본 크기를 지정합니다.                             | `md`          |

### Card.Header

| Property | Allow Types         | Description                   | Default |
| -------- | ------------------- | ----------------------------- | ------- |
| as       | `React.ElementType` | Element Type                  | `div`   |
| style    | `CssObject`         | 추가적인 스타일을 지정합니다. |         |

### Card.Body

| Property | Allow Types         | Description                   | Default |
| -------- | ------------------- | ----------------------------- | ------- |
| as       | `React.ElementType` | Element Type                  | `div`   |
| style    | `CssObject`         | 추가적인 스타일을 지정합니다. |         |

### Card.Footer

| Property | Allow Types         | Description                   | Default |
| -------- | ------------------- | ----------------------------- | ------- |
| as       | `React.ElementType` | Element Type                  | `div`   |
| style    | `CssObject`         | 추가적인 스타일을 지정합니다. |         |
npm package: @jdesignlab/checkbox
Description: 사용자가 선택하거나 선택을 해제할 수 있는 체크박스 입력 요소를 나타냅니다.
Latest version: 0.8.1

# Checkbox

사용자가 선택하거나 선택을 해제할 수 있는 체크박스 입력 요소를 나타냅니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/forms-checkbox--basic)

```jsx
<Checkbox>선택</Checkbox>
```

## Props

### Checkbox

| Property       | Allow Types                            | Description                                                             | Default       |
| -------------- | -------------------------------------- | ----------------------------------------------------------------------- | ------------- |
| value          | `string` `number`                      | 체크박스가 선택되었을 때 해당 체크박스의 값을 나타냅니다.               | `undefined`   |
| checked        | `boolean`                              | 체크박스의 선택 상태를 나타냅니다.                                      | `false`       |
| defaultChecked | `boolean`                              | 체크박스의 기본 선택 상태를 나타냅니다.                                 | `false`       |
| disabled       | `string` `number`                      | 체크박스를 비활성화합니다                                               | `false`       |
| onChange       | `(event: CheckboxChangeEvent) => void` | 체크박스의 선택 상태가 변경되었을 때 호출되는 이벤트 핸들러 함수입니다. | `undefined`   |
| color          | `ColorToken`                           | 체크박스의 색상을 지정합니다.                                           | `primary-500` |

### Checkbox.Group

| Property     | Allow Types | Description | Default                                      |
| ------------ | ----------- | ----------- | -------------------------------------------- | ---- |
| defaultValue | `(string    | number)[]`  | 체크박스 그룹의 기본 선택 상태를 지정합니다. | `[]` |
npm package: @jdesignlab/drawer
Description: Drawer 컴포넌트는 마치 서랍 처럼 화면 사이드에서 정보를 출력하는 UI 입니다.
Latest version: 0.8.2

# Drawer

Drawer 컴포넌트는 마치 서랍 처럼 화면 사이드에서 정보를 출력하는 UI 입니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/actions-drawer--basic)

```jsx
<>
  <Button
    onClick={e => {
      setDrawerOpen(true);
    }}
  >
    OPEN Drawer.
  </Button>
  <Drawer
    open={open}
    onClose={() => {
      setDrawerOpen(false);
    }}
    onOpen={() => {
      setDrawerOpen(true);
    }}
  >
    <Drawer.Content>
      <Drawer.Header>Drawer Title</Drawer.Header>
      <Drawer.Body>
        <h3>Body</h3>
        <p>본문내용</p>
        <p>본문내용</p>
        <p>본문내용</p>
      </Drawer.Body>
      <Drawer.Footer>
        <Flex justify="space-around" items="center">
          <div>
            <Button
              color="red-base"
              onClick={e => {
                setDrawerOpen(false);
              }}
            >
              닫기
            </Button>
          </div>
          <div>
            <Button color="blue-base">저장</Button>
          </div>
        </Flex>
      </Drawer.Footer>
    </Drawer.Content>
  </Drawer>
</>
```

## Props

### Drawer

| Property | Allow Types  | Description                              | Default |
| -------- | ------------ | ---------------------------------------- | ------- |
| open     | `boolean`    | Drawer의 `open` 상태를 지정합니다.       | `false` |
| full     | `boolean`    | full size 형태의 Drawer로 사용합니다.    | `false` |
| onOpen   | `() => void` | Drawer가 열릴 때 발생하는 이벤트 입니다. |         |
| onClose  | `() => void` | Drawer가 닫힐 때 발생하는 이벤트 입니다. |         |

### Drawer.Header

| Property | Allow Types       | Description                     | Default |
| -------- | ----------------- | ------------------------------- | ------- |
| children | `React.ReactNode` | Drawer.Header 자식 요소 입니다. |         |

### Drawer.Body

| Property | Allow Types       | Description                             | Default |
| -------- | ----------------- | --------------------------------------- | ------- |
| children | `React.ReactNode` | Drawer.Body 자식 요소 자식 요소 입니다. |         |

### Drawer.Footer

| Property | Allow Types       | Description                               | Default |
| -------- | ----------------- | ----------------------------------------- | ------- |
| children | `React.ReactNode` | Drawer.Footer 자식 요소 자식 요소 입니다. |         |
npm package: @jdesignlab/dropdown
Description: 사용자에게 선택할 수 있는 옵션들을 제공해줍니다.
Latest version: 0.13.0

# Dropdown

사용자에게 선택할 수 있는 옵션들을 제공해줍니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/layout-dropdown--basic)

```jsx
<Dropdown>
  <Dropdown.Trigger />
  <Dropdown.Menu>
    <Dropdown.MenuItem />
    <Dropdown.MenuItem hasSub>
      <Dropdown.SubMenu>
        <Dropdown.SubMenuItem />
      </Dropdown.SubMenu>
    </Dropdown.MenuItem>
  </Dropdown.Menu>
</Dropdown>
```

## Props

### Dropdown

| Property  | Allow Types                   | Description                                   | Default  |
| --------- | ----------------------------- | --------------------------------------------- | -------- |
| width     | `number`                      | 드랍다운 메뉴의 가로 너비를 지정합니다        | `200`    |
| placement | `top` `right` `bottom` `left` | 드랍다운 메뉴의 위치를 지정합니다.            | `bottom` |
| gap       | `number` `string`             | 트리거 컴포넌트와 메뉴간의 간격을 지정합니다. | `0`      |

### Dropdown.MenuItem

| Property | Allow Types  | Description                                                                                     | Default     |
| -------- | ------------ | ----------------------------------------------------------------------------------------------- | ----------- |
| onClick  | `() => void` | 아이템 클릭 시 이벤트를 호출합니다                                                              | `undefined` |
| disabled | `boolean`    | 해당 아이템을 비활성화합니다.                                                                   | `false`     |
| hasSub   | `boolean`    | 해당 아이템에 서브메뉴가 있음을 지정해줍니다. (`Dropdown.SubMenu`로 서브메뉴를 만들어아합니다.) | `false`     |

### Dropdown.SubMenuItem

| Property | Allow Types  | Description                        | Default     |
| -------- | ------------ | ---------------------------------- | ----------- |
| onClick  | `() => void` | 아이템 클릭 시 이벤트를 호출합니다 | `undefined` |
| disabled | `boolean`    | 해당 아이템을 비활성화합니다.      | `false`     |
npm package: @jdesignlab/flex
Description: 요소들을 유연하게 정렬하고 배치하기 위한 컴포넌트입니다.
Latest version: 0.9.1

# Flex

요소들을 유연하게 정렬하고 배치하기 위한 컴포넌트입니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/layout-flex--basic)

```jsx
<Flex>
  <Flex.Item>Hello</Flex.Item>
  <Flex.Item>World</Flex.Item>
</Flex>
```

## Props

### Flex

| Property  | Allow Types                                                                    | Description                                                                    | Default      |
| --------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------ |
| as        | `React.ElementType`                                                            | html 태그를 별도로 지정해줍니다.                                               | `div`        |
| style     | `CSSObject`                                                                    | 별도의 커스텀 스타일을 지정해줍니다.                                           | `row`        |
| direction | `row` `row-reverse` `column` `column-reverse`                                  | 요소들의 배치 방향을 지정해줍니다.(`flex-direction`)                           | `row`        |
| wrap      | `nowrap` `wrap ` `wrap-reverse`                                                | 요소들의 줄바꿈 형식을 지정해줍니다 (`flex-wrap`)                              | `nowrap`     |
| justify   | `flex-start` `flex-end` `center` `space-between` `space-around` `space-evenly` | 컨테이너 내부 요소들의 가로방향 정렬 방식을 지정해줍니다 (`justify-content`)   | `flex-start` |
| items     | `stretch` `flex-start` `flex-end` `center` `baseline`                          | 컨테이너 내부 요소들의 세로방향 정렬 방식을 지정해줍니다 (`align-items`)       | `flex-start` |
| content   | `stretch` `flex-start` `flex-end` `space-between` `space-around`               | 컨테이너 내부 요소들 사이의 여유 공간을 조절하는 속성입니다. (`align-content`) | `flex-start` |
| gap       | `number` `string`                                                              | 요소들의 간격을 지정해줍니다.                                                  | `0`          |

### Flex.Item

| Property | Allow Types                                                  | Description                                                      | Default |
| -------- | ------------------------------------------------------------ | ---------------------------------------------------------------- | ------- |
| as       | `React.ElementType`                                          | html 태그를 별도로 지정해줍니다.                                 | `div`   |
| style    | `CSSObject`                                                  | 별도의 커스텀 스타일을 지정해줍니다.                             | `{}`    |
| flex     | `number`                                                     | 해당 요소의 크기를 유연하게 조절합니다. (`flex-basis`)           | `1`     |
| self     | `auto` `stretch` `flex-start` `flex-end` `center` `baseline` | 개별 요소에 적용되는 세로 정렬 방식을 지정합니다. (`align-self`) | `auto`  |
| order    | `number`                                                     | 컨테이너 개별 요소의 순서를 지정해줍니다.                        | `0`     |
npm package: @jdesignlab/input
Description: 사용자로부터 텍스트 입력을 받기 위한 UI요소입니다.
Latest version: 0.10.0

# TextInput

사용자로부터 텍스트 입력을 받기 위한 UI요소입니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/forms-textinput--basic)

```jsx
<TextInput>
  <TextInput.Label>
  <TextInput.Message>
<TextInput>
```

## Props

### TextInput

| Property  | Allow Types          | Description                                                                            | Default     |
| --------- | -------------------- | -------------------------------------------------------------------------------------- | ----------- |
| type      | `text` `password`    | 텍스트의 입력 타입을 지정합니다.                                                       | `text`      |
| size      | `sm` `md` `lg`       | 컴포넌트의 크기를 조정합니다.                                                          | `md`        |
| clearable | `boolean`            | 사용자가 입력 필드의 내용을 초기화 할 수 있는 아이콘을 컴포넌트 우측 내부에 생성합니다 | `false`     |
| width     | `number`             | 컴포넌트의 가로 너비를 조절합니다.                                                     | `100%`      |
| maxLength | `number`             | 입력 필드에 입력 가능한 최대 문자수를 나타냅니다.                                      | `256`       |
| icon      | `React.ReactElement` | 컴포넌트 좌측 내부에 아이콘을 삽입합니다.                                              | `undefined` |

### TextInput.Label

| Property | Allow Types | Description                    | Default |
| -------- | ----------- | ------------------------------ | ------- |
| children | `string`    | 컴포넌트의 라벨을 지정해줍니다 | ``      |

### TextInput.Message

| Property   | Allow Types | Description                     | Default |
| ---------- | ----------- | ------------------------------- | ------- |
| consistent | `boolean`   | 메세지를 지속적으로 보여줍니다. | `false` |
npm package: @jdesignlab/modal
Description: 사용자에게 모달(팝업) 형태로 컨텐츠를 표시하는 UI요소입니다.
Latest version: 0.9.3

# Modal

사용자에게 모달(팝업) 형태로 컨텐츠를 표시하는 UI요소입니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/actions-modal--basic)

```jsx
<Modal>
  <Modal.Trigger />
  <Modal.Header />
  <Modal.Body />
  <Modal.Footer />
</Modal>
```

## Props

### Modal

| Property     | Allow Types  | Description                                                                                             | Default     |
| ------------ | ------------ | ------------------------------------------------------------------------------------------------------- | ----------- |
| open         | `boolean`    | 모달의 열림/ 닫힘 상태를 나타내는 프로퍼티입니다. `true`일 경우 모달이 열리며, `false`일 경우 닫힙니다. | `false`     |
| onOpen       | `() => void` | 모달이 열릴 때 실행되는 콜백함수를 지정합니다.                                                          | `undefined` |
| onClose      | `() => void` | 모달이 닫힐 때 실행되는 콜백함수를 지정합니다.                                                          | `undefined` |
| hasCloseIcon | `boolean`    | 모달 우측 상단에 닫기 아이콘을 표시할지 여부를 지정합니다. 기본값은 뒷 배경을 누르면 닫힙니다.          | `false`     |
| width        | `number`     | 모달의 가로너비를 지정합니다.                                                                           | `500`       |
| lazy         | `boolean`    | 모달의 내용을 지연 로딩하여 필요한 때만 렌더링하도록 지정합니다.                                        | `false`     |

### Modal.Trigger

| Property | Allow Types       | Description                     | Default |
| -------- | ----------------- | ------------------------------- | ------- |
| children | `React.ReactNode` | Modal.Trigger 자식 요소 입니다. |         |

### Modal.Header

| Property | Allow Types       | Description                    | Default |
| -------- | ----------------- | ------------------------------ | ------- |
| children | `React.ReactNode` | Modal.Header 자식 요소 입니다. |         |

### Modal.Body

| Property | Allow Types       | Description                  | Default |
| -------- | ----------------- | ---------------------------- | ------- |
| children | `React.ReactNode` | Modal.Body 자식 요소 입니다. |         |

### Modal.Footer

| Property | Allow Types       | Description                    | Default |
| -------- | ----------------- | ------------------------------ | ------- |
| children | `React.ReactNode` | Modal.Footer 자식 요소 입니다. |         |
npm package: @jdesignlab/popover
Description: Popover 컴포넌트는 특정 요소 위에 표시 할 내용을 띄울 수 있습니다.
Latest version: 0.8.2

# Popover

Popover 컴포넌트는 특정 요소 위에 표시 할 내용을 띄울 수 있습니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/actions-popover--basic)

```jsx
export const PopoverExample = () => {
  const [isOpen, setPopoverOpen] = useState(false);
  return (
    <Popover
      open={isOpen}
      onOpen={() => {
        setPopoverOpen(true);
      }}
      onClose={() => {
        setPopoverOpen(false);
      }}
    >
      <Popover.Trigger>
        <Button color="blue-lighten2">Left Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Popover.Header>Confirm</Popover.Header>
        <Popover.Body>Popover Content</Popover.Body>
        <Popover.Footer>
          <Flex gap="8px" justify="flex-end" items="center">
            <Button
              size="sm"
              color="shades-white"
              onClick={e => {
                setPopoverOpen(false);
              }}
            >
              Cancel
            </Button>
            <Button size="sm" color="blue-lighten2">
              Apply
            </Button>
          </Flex>
        </Popover.Footer>
      </Popover.Content>
    </Popover>
  );
};
```

## Props

### Popover

| Property | Allow Types                   | Description                               | Default  |
| -------- | ----------------------------- | ----------------------------------------- | -------- |
| open     | `top`,`right`,`bottom`,`left` | Popover가 열리는 방향을 지정합니다.       | `bottom` |
| open     | `boolean`                     | Popover의 `open` 상태를 지정합니다.       | `false`  |
| arrow    | `boolean`                     | Popover의 arrow 여부를 지정합니다.        | `true`   |
| onOpen   | `() => void`                  | Popover가 열릴 때 발생하는 이벤트 입니다. |          |
| onClose  | `() => void`                  | Popover가 닫힐 때 발생하는 이벤트 입니다. |          |

### Popover.Trigger

| Property | Allow Types       | Description                                                | Default |
| -------- | ----------------- | ---------------------------------------------------------- | ------- |
| children | `React.ReactNode` | Popover `open` 이벤트를 발생시킬 수 있는 자식 요소 입니다. |         |
npm package: @jdesignlab/radio
Description: Radio 컴포넌트는 정의된 옵션에서, 특정 옵션 값을 선택할 수 있는 UI 컴포넌트입니다. 단일 값만 선택할 수 있습니다.
Latest version: 0.8.1

# Radio

Radio 컴포넌트는 정의된 옵션에서, 특정 옵션 값을 선택할 수 있는 UI 컴포넌트입니다. 단일 값만 선택할 수 있습니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/forms-radio--basic)

```jsx
const RadioExample = args => {
  const [value, setValue] = useState(null);
  const handleRadioChange = e => {
    setValue(e.target.value);
  };

  return (
    <>
      <p>Select Value : {value}</p>
      <Radio.Group defaultValue="mario" onChange={handleRadioChange}>
        <Radio defaultChecked color="red-base" value="mario">
          Mario
        </Radio>
        <Radio value="luigi" color="green-base">
          Luigi
        </Radio>
        <Radio value="peach" color="pink-lighten3">
          Peach
        </Radio>
      </Radio.Group>
    </>
  );
};
```

### Radio

| Property       | Allow Types                 | Description                                                                                       | Default |
| -------------- | --------------------------- | ------------------------------------------------------------------------------------------------- | ------- |
| color          | `Color`                     | Radio의 색상을 지정합니다.                                                                        | `font`  |
| name           | `string`                    | Radio의 `name`을 지정합니다.                                                                      |         |
| value          | `string`,`number`,`boolean` | Radio의 `value`를 지정합니다.                                                                     |         |
| size           | `sm`, `md`, `lg`            | Radio UI의 크기를 지정합니다.                                                                     | `md`    |
| disabled       | `boolean`                   | 비활성화 여부를 지정합니다. `true` 일 경우, 선택되지 않습니다.                                    | `false` |
| readonly       | `boolean`                   | 읽기 전용 속성 입니다. 일반 Radio와 동일한 스타일을 유지하지만 `true` 일 경우, 선택되지 않습니다. | `false` |
| defaultChecked | `boolean`                   | 렌더링 시 기본적으로 선택 상태임을 지정합니다.                                                    | `false` |

### Radio.Group

| Property     | Allow Types       | Description                               | Default |
| ------------ | ----------------- | ----------------------------------------- | ------- |
| children     | `React.ReactNode` | Radio 요소들을 그룹화시킬 수 있습니다.    |         |
| defaultValue | `string`          | 그룹 내 Radio에서의 기본 값을 지정합니다. |         |
npm package: @jdesignlab/select
Description: Select 컴포넌트는 정의된 여러 옵션에서, 특정 옵션 값을 선택할 수 있는 UI 컴포넌트입니다. 사용자에게 펼침, 닫힘 효과가 나타납니다.
Latest version: 0.10.0

# Select

Select 컴포넌트는 정의된 여러 옵션에서, 특정 옵션 값을 선택할 수 있는 UI 컴포넌트입니다. 사용자에게 펼침, 닫힘 효과가 나타납니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/forms-select--basic)

```jsx
const SelectExample = args => {
  const [skill, setSkill] = useState('');
  return (
    <>
      <h2>Selectbox</h2>
      <strong>SelectValue: {skill || '값을 선택해주세요.'}</strong>
      <Select
        color="purple-lighten3"
        defaultValue="react"
        onValueChange={value => {
          setSkill(value);
        }}
      >
        <Select.Trigger placeholder="programming-languages" />
        <Select.Option value="javascript">JavaScript</Select.Option>
        <Select.Option value="typescript">TypeScript</Select.Option>
        <Select.Option value="html5">HTML</Select.Option>
        <Select.Option value="vue" disabled>
          Vue.js
        </Select.Option>
        <Select.Option value="react">React</Select.Option>
        <Select.Option value="java">Java</Select.Option>
      </Select>
    </>
  );
};
```

## Props

### Select

| Property      | Allow Types        | Description                                      | Default |
| ------------- | ------------------ | ------------------------------------------------ | ------- |
| color         | `Color`            | Select의 색상을 지정합니다.                      | `font`  |
| defaultValue  | `string`, `number` | Select의 기본 선택 값을 지정합니다.              |         |
| onValueChange | `(value) => void`  | Select Option이 변경될 때 발생하는 이벤트입니다. |         |

### Select.Trigger

| Property    | Allow Types       | Description                                | Default |
| ----------- | ----------------- | ------------------------------------------ | ------- |
| Input       | `React.ReactNode` | Combobox에서 사용될 Input 컴포넌트 입니다. |         |
| placeholder | `string`          | Select의 기본 선택 값을 지정합니다.        |         |

### Select.Option

| Property | Allow Types        | Description                                              | Default |
| -------- | ------------------ | -------------------------------------------------------- | ------- |
| value    | `string`, `number` | Select Optionvalue 값 입니다.                            |         |
| disabled | `boolean`          | 비활성화 여부 입니다. `true` 일 경우, 선택되지 않습니다. | `false` |
npm package: @jdesignlab/stack
Description: Stack 컴포넌트는 요소들을 공통으로 그룹화하고, 요소 사이에 수평&수직 레이아웃을 간편하게 배치시킬 수 있는 레이아웃입니다.
Latest version: 0.7.1

# Stack

Stack 컴포넌트는 요소들을 공통으로 그룹화하고, 요소 사이에 수평&수직 레이아웃을 간편하게 배치시킬 수 있는 레이아웃입니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/layout-stack--basic)

```jsx
<Stack direction="vertical" justify="stretch" spacing="20px">
  <div style={{ height: '64px', width: '64px', backgroundColor: '#ff4d4d' }}>first</div>
  <div style={{ height: '64px', width: '64px', backgroundColor: '#3ae374' }}>second</div>
  <div style={{ height: '64px', width: '64px', backgroundColor: '#18dcff' }}>third</div>
  <div style={{ height: '64px', width: '64px', backgroundColor: '#7d5fff' }}>fourth</div>
</Stack>
```

## Props

### Stack

| Property   | Allow Types                                         | Description                                      | Default       |
| ---------- | --------------------------------------------------- | ------------------------------------------------ | ------------- |
| children   | `React.ReactNode`                                   | Stack의 자식 요소입니다.                         |               |
| as         | `React.ElementType`                                 | 별도의 ElementType을 지정합니다.                 | `div`         |
| spacing    | `xs` `sm` `md` `lg` `xl`                            | 요소 사이의 간격을 지정합니다.                   | `transparent` |
| align      | `start` `end` `center` `between` `around` `stretch` | `align` 속성을 지정합니다.                       | `start`       |
| justify    | `start` `end` `center` `between` `around` `stretch` | `justify-content` 속성을 지정합니다.             | `start`       |
| direction  | `vertical` `horizontal`                             | 레이아웃의 방향을 지정합니다.                    | `horizontal`  |
| wrap       | `boolean`                                           | `nowrap` 여부를 지정합니다.                      | `false`       |
| responsive | `boolean`                                           | 디바이스 UI에 맞춰 반응형으로 방향을 결정합니다. | `false`       |
npm package: @jdesignlab/tabs
Description: 사용자가 여러개의 탭 중 하나를 선택할 수 있는 UI 요소입니다. 각 탭은 관련된 컨텐츠를 표시하고, 사용자는 탭을 선택하여 해당 컨텐츠를 전환할 수 있습니다.
Latest version: 0.11.0

# Tabs

사용자가 여러개의 탭 중 하나를 선택할 수 있는 UI 요소입니다. 각 탭은 관련된 컨텐츠를 표시하고, 사용자는 탭을 선택하여 해당 컨텐츠를 전환할 수 있습니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/navigation-tabs--basic)

```jsx
<Tabs>
  <Tabs.List>
    <Tabs.Trigger value="tab1" />
    <Tabs.Trigger value="tab2" />
  </Tabs.List>
  <Tabs.Content value="tab1" />
  <Tabs.Content value="tab2" />
</Tabs>
```

## Props

### Tabs

| Property     | Allow Types            | Description                                                    | Default        |
| ------------ | ---------------------- | -------------------------------------------------------------- | -------------- |
| variant      | `enclosed` `underline` | 컴포넌트의 스타일을 변형합니다.                                | `underline`    |
| defaultValue | `string`               | 탭의 `value`로 초기 렌더링 시 선택될 탭을 지정합니다.          | `undefined`    |
| onChange     | `() => void`           | 탭이 변경될 때 발생하는 이벤트를 지정합니다.                   | `undefined`    |
| size         | `sm` `md` `lg`         | 컴포넌트의 크기를 조정합니다.                                  | `md`           |
| lazy         | `boolean`              | 탭의 내용을 지연 로딩하여 필요한 때만 렌더링하도록 지정합니다. | `false`        |
| full         | `boolean`              | 컴포넌트가 부모 컨테이너의 전체너비를 차지하도록 지정합니다.   | `false`        |
| accentColor  | `ColorToken`           | 탭의 강조 색상을 지정합니다.                                   | `grey-darken4` |
| baseColor    | `ColorToken`           | 탭의 기본 색상을 지정합니다.                                   | `grey-base`    |

### Tabs.List

| Property | Allow Types       | Description                                | Default |
| -------- | ----------------- | ------------------------------------------ | ------- |
| children | `React.ReactNode` | Tabs.Trigger를 감싸고 있는 부모요소입니다. |         |

### Tabs.Trigger

| Property | Allow Types       | Description                                                        | Default  |
| -------- | ----------------- | ------------------------------------------------------------------ | -------- |
| children | `React.ReactNode` | Tab의 컨텐츠를 변경하기 위한 트리거 요소입니다.                    |          |
| value    | `string`          | 각 트리거의 값을 지정해 화면에 보여줄 `Tabs.Content`와 연결합니다. | `bottom` |
| disabled | `boolean`         | 탭을 비활성화합니다.                                               | `false`  |

### Tabs.Content

| Property | Allow Types | Description                                                                  | Default  |
| -------- | ----------- | ---------------------------------------------------------------------------- | -------- |
| value    | `string`    | 값을 지정해 동일한 값을 가진 `Tabs.Trigger`가 선택될 경우 화면에 보여줍니다. | `bottom` |
npm package: @jdesignlab/textarea
Description: Textarea 컴포넌트는 여러 줄을 허용하는 텍스트 입력 공간입니다. `smart` 속성을 통해 자동으로 높이 조절을 제공합니다.
Latest version: 0.11.2

# Textarea

Textarea 컴포넌트는 여러 줄을 허용하는 텍스트 입력 공간입니다. `smart` 속성을 통해 자동으로 높이 조절을 제공합니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/forms-textarea--basic)

```jsx
<Textarea />
<Textarea resize="smart" placeholder="내용을 입력해주세요." />
<Textarea maxWidth={640} defaultValue={'안녕하세요.'} resize="horizontal" />
<Textarea maxWidth={640} defaultValue={'Red Style!'} color="red-darken4" resize="none" />
<Textarea
  maxWidth={640}
  onClick={e => alert(e.target.value)}
  defaultValue={'Click to Alert Message!'}
  color="green-base"
  resize="none"
/>
<Textarea resize="vertical">
  <Textarea.Label id="asd">Article</Textarea.Label>
</Textarea>
```

## Props

### Textarea

| Property     | Allow Types                            | Description                                                                                                    | Default     |
| ------------ | -------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------- |
| resize       | `vertical` `horizontal` `smart` `none` | 자동으로 사이즈를 결정 짓는 방향을 선택 합니다. `smart` 일 경우 높이가 자동으로 텍스트 길이에 따라 변화합니다. | `none`      |
| appearance   | `standard` `none`                      | Textarea UI 모양을 지정합니다. `none` 일 경우 외곽선이 표시되지 않습니다.                                      | `standard`  |
| color        | `Color`                                | Textarea의 색상을 지정합니다.                                                                                  | `grey-base` |
| disabled     | `boolean`                              | Textarea의 비활성화 여부를 지정합니다.                                                                         | `false`     |
| maxWidth     | `number`                               | Textarea의 최대 너비를 지정합니다.                                                                             | `480`       |
| maxHeight    | `number`                               | Textarea의 최대 높이를 지정합니다.                                                                             | `64`        |
| defaultValue | `string`, `number`                     | Textarea의 기본 값을 지정합니다.                                                                               |             |
npm package: @jdesignlab/tooltip
Description: 사용자에게 모달(팝업) 형태로 컨텐츠를 표시하는 UI요소입니다.
Latest version: 0.7.2

# Tooltip

사용자에게 모달(팝업) 형태로 컨텐츠를 표시하는 UI요소입니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/data-display-tooltip--basic)

```jsx
<Tooltip>
  <Tooltip.Target />
  <Tooltip.Content />
</Tooltip>
```

## Props

### Tooltip

| Property  | Allow Types                                                                                                                           | Description                      | Default |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
| placement | `top-left` `top` `top-right` `right` `right-top` `right-bottom` `left` `left-top` `left-bottom` `bottom-right` `bottom` `bottom-left` | 툴팁이 나타날 위치를 조정합니다. | `top`   |
| gap       | `number`                                                                                                                              | 툴팁의 간격을 조정합니다.        | `4`     |
npm package: @jdesignlab/typography
Description: Text 컴포넌트를 사용한다면, 목적에 맞는 컨텐츠를 표현하기 위해 간편하게 타이포그라피를 적용하실 수 있습니다.
Latest version: 0.8.1

# Text

Text 컴포넌트를 사용한다면, 목적에 맞는 컨텐츠를 표현하기 위해 간편하게 타이포그라피를 적용하실 수 있습니다.

## Usage

[Storybook](https://designsystemlab.github.io/design-system/?path=/docs/typography-text--basic)

```jsx
  <Text variant="heading" size="2xl">
    2XL Heading
  </Text>
  <Text variant="heading" size="xl">
    XL Heading
  </Text>
  <Text variant="heading" size="lg">
    Large Heading
  </Text>
  <Text variant="heading" size="md">
    Medium Heading
  </Text>
  <Text variant="heading" size="sm">
    Small Heading
  </Text>
  <hr />
  <Text variant="label" size="2xl">
    2XL Label
  </Text>
  <Text variant="label" size="xl">
    XL Label
  </Text>
  <Text variant="label" size="lg">
    Large Label
  </Text>
  <Text variant="label" size="md">
    Medium Label
  </Text>
  <Text variant="label" size="sm">
    Small Label
  </Text>
  <hr />
  <Text size="2xl">2XL Paragraph</Text>
  <Text size="xl">XL Paragraph</Text>
  <Text size="lg">Large Paragraph</Text>
  <Text size="md">Medium Paragraph</Text>
  <Text size="sm">Small Paragraph</Text>
```

## Props

### Text

| Property   | Allow Types                                  | Description                                                                        | Default     |
| ---------- | -------------------------------------------- | ---------------------------------------------------------------------------------- | ----------- |
| size       | `sm` `md` `lg` `xl` `2xl`                    | Text의 크기를 지정합니다.                                                          | `md`        |
| variant    | `paragraph` `label` `heading`                | Text의 스타일을 지정합니다.                                                        | `paragraph` |
| bold       | `light` `medium` `semi` `extra` `number`     | Text의 굵기를 지정합니다. 정의된 타입을 사용하거나 크기를 직접 정하실 수 있습니다. |             |
| decoration | `none` `underline` `line-through` `overline` | Text의 `decoration` 스타일을 지정합니다.                                           | `none`      |
| transform  | `none` `capitalize` `uppercase` `lowercase`  | Text의 `transform` 스타일을 지정합니다.                                            | `none`      |
| align      | `start` `end` `center` `justify`             | Text의 `align` 스타일을 지정합니다.                                                | `start`     |
| fontstyle  | `italic` `oblique` `normal`                  | Text의 `fontStyle` 스타일을 지정합니다.                                            | `normal`    |
| as         | `React.ElementType`                          | Element Type                                                                       | `p`         |
| color      | `ColorToken`                                 | 폰트의 Color 색상을 지정합니다.                                                    | `font`      |
npm package: @jdetyy-xxb/mobile-pro
Description: @ytu-mf/ytu-mobile-biz
Latest version: 1.0.1

@ytu-mf/ytu-mobile-biz

## Getting Started

Install dependencies,

```bash
$ npm i @ytu-mf/ytu-mobile-biz
```

use Component

```javascript
import { Loading } from '@ytu-mf/ytu-mobile-biz'
```