insystem-atoms 0.1.0 → 0.1.2

package/README.md

@@ -21,12 +21,14 @@ npm install insystem-atoms styled-components
 ## 빠른 시작
 
 ```tsx
-import { Button, Input, Checkbox } from 'insystem-atoms';
+import { IsButton, Input, Checkbox } from 'insystem-atoms';
 
 function App() {
   return (
     <>
-      <Button variant="primary" onClick={handleSave}>저장</Button>
+      <IsButton variant="solid" color="primary" onClick={handleSave}>
+        저장
+      </IsButton>
       <Input label="이름" required placeholder="홍길동" />
       <Checkbox label="동의합니다" checked={agreed} onChange={setAgreed} />
     </>
@@ -62,28 +64,123 @@ configureTokens({
 
 ## 컴포넌트
 
-### Button
+### IsButton
+
+Figma **IsButton** 스펙에 맞춘 버튼입니다. 색·타이포·패딩 등은 디자인 파일과 동일하게 고정되어 있으며, `borderRadius` / `padding` 같은 인라인 스타일 오버라이드 props는 제공하지 않습니다. (앱 전역 톤은 `configureTokens`로 조정.)
 
 ```tsx
-import { Button } from 'insystem-atoms';
+import { IsButton } from 'insystem-atoms';
 
-<Button variant="primary">저장</Button>
-<Button variant="secondary" size="sm">취소</Button>
-<Button variant="danger" loading>삭제 중...</Button>
-<Button variant="primary" fullWidth>전체 너비</Button>
-<Button leftIcon={<PlusIcon />}>추가</Button>
+<IsButton variant="solid" color="primary">저장</IsButton>
+<IsButton variant="outlined" color="primary" size="sm">취소</IsButton>
+<IsButton variant="solid" color="secondary" loading>처리 중…</IsButton>
+<IsButton variant="solid" color="primary" leftIcon leftIconSlot={<PlusIcon />}>추가</IsButton>
+<IsButton variant="solid" color="primary" iconOnly iconSlot={<SearchIcon />} aria-label="검색" />
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
 |------|------|--------|------|
-| `variant` | `primary` \| `secondary` \| `success` \| `warning` \| `danger` \| `ghost` \| `admin` \| `neutral` \| `conversion` \| `icon` | `primary` | 버튼 스타일 |
-| `size` | `xs` \| `sm` \| `md` \| `lg` | `md` | 크기 |
-| `loading` | `boolean` | `false` | 로딩 스피너 표시 |
-| `fullWidth` | `boolean` | `false` | 컨테이너 전체 너비 |
-| `width` | `string \| number` | — | 고정 너비 |
-| `leftIcon` | `ReactNode` | — | 좌측 아이콘 슬롯 |
-| `rightIcon` | `ReactNode` | — | 우측 아이콘 슬롯 |
-| `iconOnly` | `boolean` | `false` | 아이콘 전용 (텍스트 숨김) |
+| `variant` | `solid` \| `outlined` | `solid` | Figma Variant |
+| `color` | `primary` \| `secondary` | `primary` | Figma Color |
+| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | XSmall ~ XLarge |
+| `loading` | `boolean` | `false` | 로딩 스피너 |
+| `disabled` | `boolean` | `false` | 비활성 |
+| `iconOnly` | `boolean` | `false` | 아이콘만 표시 |
+| `leftIcon` | `boolean` | `false` | 좌측 아이콘 영역 사용 시 `true` + `leftIconSlot` |
+| `rightIcon` | `boolean` | `false` | 우측 아이콘 영역 사용 시 `true` + `rightIconSlot` |
+| `leftIconSlot` | `ReactNode` | — | 좌측 아이콘 노드 |
+| `rightIconSlot` | `ReactNode` | — | 우측 아이콘 노드 |
+| `iconSlot` | `ReactNode` | — | `iconOnly`일 때 아이콘 (없으면 `children` 사용) |
+| `interaction` | `boolean` | `true` | 호버/포커스/프레스 오버레이 (Figma Interaction) |
+
+허용 문자열 상수는 `IS_BUTTON_PROP_VALUES` export로 확인할 수 있습니다.
+
+### IsTextButton
+
+Figma **IsTextButton** 스펙의 텍스트형 버튼입니다. 배경 없이 라벨·아이콘·로딩만 표시하며, 색·타이포·패딩·인터랙션 오버레이는 디자인 파일과 동일하게 고정되어 있습니다.
+
+```tsx
+import { IsTextButton } from 'insystem-atoms';
+
+<IsTextButton color="primary">더보기</IsTextButton>
+<IsTextButton color="secondary" size="sm">취소</IsTextButton>
+<IsTextButton color="primary" loading>처리 중…</IsTextButton>
+<IsTextButton color="primary" leftIcon leftIconSlot={<PlusIcon />}>추가</IsTextButton>
+```
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `color` | `primary` \| `secondary` | `primary` | Figma Color |
+| `size` | `md` \| `sm` | `md` | Medium / Small |
+| `loading` | `boolean` | `false` | 로딩 스피너 |
+| `disabled` | `boolean` | `false` | 비활성 |
+| `leftIcon` | `boolean` | `false` | 좌측 아이콘 영역 + `leftIconSlot` |
+| `rightIcon` | `boolean` | `false` | 우측 아이콘 영역 + `rightIconSlot` |
+| `leftIconSlot` | `ReactNode` | — | 좌측 아이콘 |
+| `rightIconSlot` | `ReactNode` | — | 우측 아이콘 |
+| `interaction` | `boolean` | `true` | 호버/포커스/프레스 오버레이 (Primary는 `#0066FF`, Secondary는 `#171719` 레이어) |
+
+허용 문자열은 `IS_TEXT_BUTTON_PROP_VALUES`로 확인할 수 있습니다.
+
+### IsChip
+
+Figma **IsChip** 스펙의 칩(토글)입니다. Solid / Outlined, 네 가지 크기, Active·Disable·좌우 아이콘·Interaction 오버레이가 디자인 파일과 동일하게 고정되어 있습니다. (기존 `Chip`은 레거시·토큰 오버라이드용으로 남겨 두었습니다.)
+
+```tsx
+import { IsChip } from 'insystem-atoms';
+
+<IsChip variant="solid" size="md">필터</IsChip>
+<IsChip variant="outlined" active>선택됨</IsChip>
+<IsChip variant="solid" active disabled>비활성 선택</IsChip>
+<IsChip variant="outlined" leftIcon leftIconSlot={<PlusIcon />}>추가</IsChip>
+```
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `variant` | `solid` \| `outlined` | `solid` | Figma Variant |
+| `size` | `xs` \| `sm` \| `md` \| `lg` | `md` | XSmall / Small / Medium / Large |
+| `active` | `boolean` | `false` | 선택(pressed) 상태 |
+| `disabled` | `boolean` | `false` | 비활성 |
+| `leftIcon` | `boolean` | `false` | 좌측 아이콘 + `leftIconSlot` |
+| `rightIcon` | `boolean` | `false` | 우측 아이콘 + `rightIconSlot` |
+| `leftIconSlot` | `ReactNode` | — | 좌측 아이콘 |
+| `rightIconSlot` | `ReactNode` | — | 우측 아이콘 |
+| `interaction` | `boolean` | `true` | 호버/포커스/프레스 오버레이 |
+
+허용 문자열은 `IS_CHIP_PROP_VALUES`로 확인할 수 있습니다.
+
+### IsInputSearch
+
+Figma **IsInputSearch** (178:244) 스펙의 검색 입력입니다. 크기·상태·라벨 위치·Prefix/Suffix/Clearable/Placeholder 표시는 디자인과 동일한 고정 토큰입니다.
+
+```tsx
+import { IsInputSearch } from 'insystem-atoms';
+
+<IsInputSearch size="md" suffix suffixSlot={<SearchIcon />} />
+<IsInputSearch labelPosition="row" prefix prefixSlot={<SearchIcon />} suffix={false} />
+<IsInputSearch clearable suffix suffixSlot={<SearchIcon />} defaultValue="검색" />
+<IsInputSearch error="올바른 형식이 아닙니다." suffix suffixSlot={<SearchIcon />} />
+```
+
+| Prop | 타입 | 기본값 | Figma 대응 |
+|------|------|--------|------------|
+| `size` | `xs` \| `sm` \| `md` \| `lg` | `md` | XSmall ~ Large |
+| `labelPosition` | `column` \| `row` | `column` | Position |
+| `labelShow` | `boolean` | `true` | LabelShow |
+| `label` | `string` | `Label` | 라벨 텍스트 |
+| `required` | `boolean` | — | 라벨 `*` (선택) |
+| `prefix` | `boolean` | `false` | Prefix |
+| `prefixSlot` | `ReactNode` | — | 접두 아이콘 |
+| `suffix` | `boolean` | `true` | Suffix |
+| `suffixSlot` | `ReactNode` | — | 접미 아이콘 |
+| `clearable` | `boolean` | `false` | Clearable |
+| `placeholderShown` | `boolean` | `true` | Placeholder |
+| `placeholder` | `string` | `입력해주세요.` | placeholder |
+| `error` | `string` | — | 에러 메시지(있으면 테두리 `#FF4242`) |
+| `fullWidth` | `boolean` | `true` | — |
+| `width` | `string` \| `number` | — | 고정 너비 |
+
+허용 문자열은 `IS_INPUT_SEARCH_PROP_VALUES`로 확인할 수 있습니다. 에러 문구 예시는 `IS_INPUT_SEARCH_FIGMA_ERROR_MESSAGE`와 동일합니다.
 
 ---
 
@@ -232,6 +329,8 @@ import { Badge } from 'insystem-atoms';
 
 ### Chip
 
+디자인 시스템 **IsChip**과 동일한 UI가 필요하면 `IsChip`을 사용하세요. 아래 `Chip`은 `label`·`count`·`activeColor` 등 토큰 기반 오버라이드가 필요한 기존 API입니다.
+
 ```tsx
 import { Chip } from 'insystem-atoms';
 
@@ -300,22 +399,20 @@ const [visible, setVisible] = useState(false);
 
 ## 스타일 오버라이드 Props
 
-모든 컴포넌트에 아래 props를 사용해 인라인으로 스타일을 변경할 수 있습니다.
+대부분의 컴포넌트에 아래 props로 인라인 스타일을 덮어쓸 수 있습니다. **IsButton**은 Figma 고정 스펙이라 해당 오버라이드를 지원하지 않습니다.
 
 ```tsx
-<Button borderRadius="20px">둥근 버튼</Button>
-<Button backgroundColor="#7C3AED" textColor="#fff">보라 버튼</Button>
 <Input borderColor="#7C3AED" borderRadius="8px" />
 <Badge backgroundColor="#f0fdf4" textColor="#166534">커스텀</Badge>
 ```
 
 | Prop | 컴포넌트 | 설명 |
 |------|----------|------|
-| `borderRadius` | 전체 | 모서리 반경 |
-| `borderColor` | 전체 | 테두리 색상 |
-| `textColor` | 전체 | 텍스트/전경 색상 |
-| `backgroundColor` | 전체 | 배경색 |
-| `padding` | Button, Input, TextArea | 내부 여백 |
+| `borderRadius` | Input, TextArea, Badge 등 | 모서리 반경 |
+| `borderColor` | Input, TextArea, Badge 등 | 테두리 색상 |
+| `textColor` | Input, TextArea, Badge 등 | 텍스트/전경 색상 |
+| `backgroundColor` | Input, TextArea, Badge 등 | 배경색 |
+| `padding` | Input, TextArea 등 | 내부 여백 |
 | `checkColor` | Checkbox, Radio | 체크/선택 활성 색상 |
 | `activeColor` | Chip, Pagination | 활성 상태 색상 |
 
@@ -356,7 +453,15 @@ resetTokens();
 모든 컴포넌트는 완전한 타입을 지원합니다.
 
 ```ts
-import type { ButtonProps, InputProps, Size, Variant } from 'insystem-atoms';
+import type {
+  IsButtonProps,
+  IsChipProps,
+  IsInputSearchProps,
+  IsTextButtonProps,
+  InputProps,
+  Size,
+  Variant,
+} from 'insystem-atoms';
 ```
 
 ---