# Chip
URL: /lynx/components/chip
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/chip.mdx

사용자가 선택하거나 실행할 수 있는 짧은 값을 표시하는 컴포넌트입니다.

사용 가능 버전: @seed-design/lynx-react@0.5.0, @seed-design/lynx-css@0.9.0

## Preview

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { Chip, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="chip-preview">
        <view className="chip-preview__row">
          <Chip.Button>
            <Chip.Label>Button Chip</Chip.Label>
          </Chip.Button>
          <Chip.Toggle defaultChecked>
            <Chip.Label>Toggle Chip</Chip.Label>
          </Chip.Toggle>
        </view>
        <Chip.RadioRoot defaultValue="first">
          <view className="chip-preview__row">
            <Chip.RadioItem value="first" variant="outlineStrong">
              <Chip.Label>Radio 1</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="second" variant="outlineStrong">
              <Chip.Label>Radio 2</Chip.Label>
            </Chip.RadioItem>
          </view>
        </Chip.RadioRoot>
      </view>
    </page>
  );
}

root.render(<Root />);
```

## Installation

- npm: npm install @seed-design/lynx-react @seed-design/lynx-css
- pnpm: pnpm add @seed-design/lynx-react @seed-design/lynx-css
- yarn: yarn add @seed-design/lynx-react @seed-design/lynx-css
- bun: bun add @seed-design/lynx-react @seed-design/lynx-css

<Callout>
  Lynx `Chip`은 별도 `ui:chip` snippet 없이 `@seed-design/lynx-react` 패키지에서 직접 제공합니다.
</Callout>

## Props

### `Chip.Button`

### `Chip.Toggle`

### `Chip.RadioRoot`

### `Chip.RadioItem`

### Slots

## Examples

### Button

일반 액션은 `Chip.Button`을 사용하고 `bindtap`으로 탭 이벤트를 처리합니다.

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { Chip, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="chip-preview">
        <Chip.Button bindtap={() => console.log("필터 열기")}>
          <Chip.Label>필터 열기</Chip.Label>
        </Chip.Button>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Toggle

독립적인 선택 상태는 `Chip.Toggle`을 사용합니다. `checked`와 `onCheckedChange`를 함께 전달하면 controlled 상태로 사용할 수 있습니다.

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { Chip, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="chip-preview">
        <Chip.Toggle
          defaultChecked
          onCheckedChange={(checked) => console.log("거래 가능", checked)}
        >
          <Chip.Label>거래 가능</Chip.Label>
        </Chip.Toggle>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Radio Group

한 항목만 선택해야 하면 `Chip.RadioRoot`와 `Chip.RadioItem`을 조합합니다.

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { Chip, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <Chip.RadioRoot defaultValue="recent" onValueChange={(value) => console.log("정렬", value)}>
        <view className="chip-preview">
          <view className="chip-preview__row">
            <Chip.RadioItem value="recent">
              <Chip.Label>최신순</Chip.Label>
            </Chip.RadioItem>
            <Chip.RadioItem value="nearby">
              <Chip.Label>가까운 순</Chip.Label>
            </Chip.RadioItem>
          </view>
        </view>
      </Chip.RadioRoot>
    </page>
  );
}

root.render(<Root />);
```

### Sizes and Variants

React 버전과 동일하게 `size="small" | "medium" | "large"`와 `variant="solid" | "outlineStrong" | "outlineWeak"`를 지원합니다.

```tsx
import "./styles";

import { root } from "@lynx-js/react";
import { Chip, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="chip-preview">
        <view className="chip-preview__row">
          <Chip.Button size="small" variant="solid">
            <Chip.Label>Small</Chip.Label>
          </Chip.Button>
          <Chip.Button size="medium" variant="solid">
            <Chip.Label>Medium</Chip.Label>
          </Chip.Button>
          <Chip.Button size="large" variant="solid">
            <Chip.Label>Large</Chip.Label>
          </Chip.Button>
        </view>
        <view className="chip-preview__row">
          <Chip.Button variant="solid">
            <Chip.Label>Solid</Chip.Label>
          </Chip.Button>
          <Chip.Button variant="outlineStrong">
            <Chip.Label>Outline Strong</Chip.Label>
          </Chip.Button>
          <Chip.Button variant="outlineWeak">
            <Chip.Label>Outline Weak</Chip.Label>
          </Chip.Button>
        </view>
      </view>
    </page>
  );
}

root.render(<Root />);
```

### Affixes and Icon Only

`Chip.PrefixIcon`, `Chip.PrefixAvatar`, `Chip.SuffixIcon` 슬롯으로 앞뒤 콘텐츠를 배치할 수 있습니다. Lynx 아이콘은 `@seed-design/lynx-react`의 `Icon`, `PrefixIcon`, `SuffixIcon`과 `@karrotmarket/lynx-monochrome-icon` 요소를 사용합니다. `layout="iconOnly"`에서는 `Icon` 자식과 `accessibility-label`을 함께 전달해야 합니다.

```tsx
import "./styles";

import IconChevronRightFill from "@karrotmarket/lynx-monochrome-icon/IconChevronRightFill";
import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
import { root } from "@lynx-js/react";
import { Chip, Icon, useSeedClassName } from "@seed-design/lynx-react";

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <view className="chip-preview">
        <view className="chip-preview__row">
          <Chip.Button>
            <Chip.PrefixIcon icon={<IconPlusFill />} />
            <Chip.Label>추가</Chip.Label>
          </Chip.Button>
          <Chip.Button>
            <Chip.PrefixAvatar>
              <view className="chip-preview__avatar">
                <text className="chip-preview__avatar-label">A</text>
              </view>
            </Chip.PrefixAvatar>
            <Chip.Label>프로필</Chip.Label>
          </Chip.Button>
          <Chip.Button>
            <Chip.Label>다음</Chip.Label>
            <Chip.SuffixIcon icon={<IconChevronRightFill />} />
          </Chip.Button>
        </view>
        <Chip.Button layout="iconOnly" accessibility-label="추가">
          <Icon icon={<IconPlusFill />} />
        </Chip.Button>
      </view>
    </page>
  );
}

root.render(<Root />);
```

## 웹 버전과의 차이

<Callout type="warning">
  Lynx `Chip`은 React `Chip`과 같은 Button, Toggle, Radio 구성과 size/variant 이름을 사용하지만 다음 차이가 있습니다.

  - **렌더링 요소**: HTML `<button>` / `<label>` / `<input>` 대신 네이티브 `<view>` / `<text>`를 렌더링합니다.
  - **이벤트 핸들링**: `onClick` 대신 `bindtap`, `onChange` 대신 `onCheckedChange` 또는 `onValueChange`를 사용합니다.
  - **상태 스타일**: 웹 pseudo selector 대신 touch 상태와 선택 상태를 Lynx recipe의 `pressed`, `selected` variant로 연결합니다.
  - **아이콘 렌더링**: SVG `currentColor` 대신 Lynx monochrome icon과 `<image tint-color>` 기반 Icon wrapper를 사용합니다.
  - **공개 표면**: React의 registry wrapper 역할을 Lynx package API가 직접 제공하므로 별도 snippet을 설치하지 않습니다.
</Callout>

## Lynx 미지원 기능

현재 Lynx 런타임 모델 차이로 다음 기능은 지원하지 않습니다.

| 기능                                      | 설명                                           |
| --------------------------------------- | -------------------------------------------- |
| HiddenInput / `inputProps`              | Lynx에 HTML input과 form 제출 모델이 없습니다.          |
| `name` / `required` / native form value | HTML form 속성을 연결할 대상이 없습니다.                  |
| raw DOM `onChange`                      | `onCheckedChange` 또는 `onValueChange`로 대체합니다. |
| 키보드 focus / `focusVisible`              | Lynx에는 웹과 같은 키보드 focus 모델이 없습니다.             |
| `asChild`                               | Lynx는 웹 Slot 기반 다형 렌더링을 지원하지 않습니다.           |