@nurihaus/web-design-system 3.0.3 → 3.1.0

package/dist/ai/components.md

@@ -43,6 +43,15 @@ import '@nurihaus/web-design-system/components.css';
 - [TextField](#textfield)
 - [Radio](#radio)
 - [Checkbox](#checkbox)
+- [Switch](#switch)
+- [TextArea](#textarea)
+- [Toast](#toast)
+- [ToastProvider](#toastprovider)
+- [Pagination](#pagination)
+- [Modal](#modal)
+- [Drawer](#drawer)
+- [Skeleton](#skeleton)
+- [Breadcrumb](#breadcrumb)
 - [DropDown](#dropdown)
 - [CollapsibleMenu](#collapsiblemenu)
 - [Text](#text)
@@ -282,7 +291,7 @@ import { TextField } from '@nurihaus/web-design-system';             // 루트.
 | prop | 타입 | 필수 | 기본값 |
 | --- | --- | --- | --- |
 | `className` | `string` |  |  |
-| `size` | `'s' \| 'm'` | 예 | `'s'` |
+| `size` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl'` | 예 | `'s'` |
 | `title` | `ReactNode` |  |  |
 | `name` | `string` | 예 |  |
 | `value` | `string` |  |  |
@@ -358,6 +367,299 @@ import { Checkbox } from '@nurihaus/web-design-system';             // 루트.
 
 이 밖에 React·HTML 기본 속성 2개를 받는다.
 
+## Switch
+
+```ts
+import { Switch } from '@nurihaus/web-design-system/switch';   // 이 컴포넌트만 싣는다 (권장)
+import { Switch } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 알림 켜기처럼 켜고 끄는 설정 하나를 바로 반영할 때 쓴다. `onChange`는 바뀐 켜짐 상태(boolean)를 받는다. `className`·`style`은 루트 버튼에 붙는다. `label`을 주지 않으면 `aria-label`로 이름을 준다.
+
+**쓰지 않는다.** 제출 버튼을 눌러야 반영되는 폼 항목이나 동의 여부는 Checkbox를, 여러 선택지 중 하나는 Radio를 쓴다.
+
+```tsx
+<Switch id="push-alarm" label="푸시 알림 받기" checked={true} onChange={() => {}} />
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `className` | `string` |  |  |
+| `size` | `'s' \| 'm' \| 'l'` |  | `'m'` |
+| `label` | `ReactNode` |  |  |
+| `disabled` | `boolean` |  |  |
+| `defaultChecked` | `boolean` |  |  |
+| `id` | `string` | 예 |  |
+| `onChange` | `((checked: boolean) => void)` |  |  |
+| `checked` | `boolean` |  |  |
+
+이 밖에 React·HTML 기본 속성 270개를 받는다.
+
+## TextArea
+
+```ts
+import { TextArea } from '@nurihaus/web-design-system/text-area';   // 이 컴포넌트만 싣는다 (권장)
+import { TextArea } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 메모·설명처럼 여러 줄 텍스트를 입력받을 때 쓴다. 위 라벨(`title`), 아래 안내 문구(`helperText`)를 함께 붙일 수 있고, `isError`가 true면 `helperText`가 오류 스타일로 바뀐다. 높이는 `rows`가 정하고 `size`는 글자 크기와 안쪽 여백만 바꾼다. `resize`는 `'vertical'`(기본)·`'none'` 중 고른다. `className`·`style`은 textarea를 감싸는 테두리 요소에 붙고, `ref`는 textarea 요소를 가리킨다.
+
+**쓰지 않는다.** 한 줄 입력은 TextField를 쓴다. 정해진 값 중에서 고르는 입력은 DropDown이나 Radio를 쓴다.
+
+```tsx
+<TextArea name="memo" title="메모" placeholder="내용을 입력하세요" rows={4} />
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `className` | `string` |  |  |
+| `size` | `'s' \| 'm'` |  | `'s'` |
+| `title` | `ReactNode` |  |  |
+| `name` | `string` | 예 |  |
+| `value` | `string` |  |  |
+| `defaultValue` | `string` |  |  |
+| `width` | `string \| number` |  | `'100%'` |
+| `resize` | `'none' \| 'vertical'` |  | `'vertical'` |
+| `helperText` | `ReactNode` |  |  |
+| `isError` | `boolean` |  |  |
+
+이 밖에 React·HTML 기본 속성 275개를 받는다.
+
+## Toast
+
+```ts
+import { Toast } from '@nurihaus/web-design-system/toast';   // 이 컴포넌트만 싣는다 (권장)
+import { Toast } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 저장 완료·삭제 완료처럼 사용자의 행동 결과를 짧게 알리고 스스로 사라져야 할 때 쓴다. `title`은 필수, `description`은 한 줄 보충 설명이다. `variant`(`default · secondary · success · warning · error`)가 바탕색을 정한다. 기본은 Tooltip과 같은 진보라, `secondary`는 CTAButton secondary와 같은 연보라(어두운 글자), `success`는 초록, `warning`은 주황, `error`는 confirm 버튼과 같은 빨강이고 이 셋은 앞에 상태 아이콘(체크·느낌표·X)이 붙는다. secondary 외에는 글자가 흰색이다. `action`을 주면 되돌리기 같은 작은 버튼(CTAButton xs·neutral)이 하나 붙고 누르면 토스트가 닫힌다. `showClose={false}`로 닫기 버튼을 뺄 수 있다. `duration`(ms)은 이 토스트만의 표시 시간이다. `className`·`style`은 토스트 루트(`li`)에 붙는다. 반드시 ToastProvider 안에서 쓴다.
+
+**쓰지 않는다.** 사용자의 확인이나 선택이 필요한 내용은 ModalWithDoubleButton을 쓴다. 입력 오류처럼 그 자리에서 고쳐야 하는 안내는 TextField의 helper text를 쓴다.
+
+```tsx
+<Toast open title="저장했습니다" description="변경 사항이 반영됐습니다." variant="success" onOpenChange={() => {}} />
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `className` | `string` |  |  |
+| `style` | `CSSProperties` |  |  |
+| `title` | `ReactNode` | 예 |  |
+| `onPause` | `(() => void)` |  |  |
+| `variant` | `'secondary' \| 'default' \| 'success' \| 'warning' \| 'error'` |  | `'default'` |
+| `onResume` | `(() => void)` |  |  |
+| `open` | `boolean` |  |  |
+| `defaultOpen` | `boolean` |  |  |
+| `onOpenChange` | `((open: boolean) => void)` |  |  |
+| `duration` | `number` |  |  |
+| `description` | `ReactNode` |  |  |
+| `action` | `ToastAction` |  |  |
+| `showClose` | `boolean` |  | `true` |
+
+이 밖에 React·HTML 기본 속성 262개를 받는다.
+
+## ToastProvider
+
+```ts
+import { ToastProvider } from '@nurihaus/web-design-system/toast';   // 이 컴포넌트만 싣는다 (권장)
+import { ToastProvider } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 앱 루트에 한 번 둔다. 토스트가 쌓이는 자리(Viewport)를 그리고 `position`(`top-right · bottom-right · bottom-center`, 기본 `bottom-right`)으로 화면 어느 모서리에 둘지 고른다. `duration`(ms)은 안의 모든 Toast 에 적용되는 기본 표시 시간이다(기본 5000). Toast 가 `duration`을 주면 그 값이 앞선다. `label`은 스크린 리더가 읽는 이름이고 기본은 `알림`이다. 다른 언어 서비스에서만 바꾼다.
+
+**쓰지 않는다.** 화면마다 여러 개 두지 않는다. Provider 가 둘이면 토스트 자리가 둘로 갈린다.
+
+```tsx
+<ToastProvider position="bottom-right" duration={5000}>
+  <Toast open title="저장했습니다" onOpenChange={() => {}} />
+</ToastProvider>
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | 예 |  |
+| `duration` | `number` |  |  |
+| `position` | `'top-right' \| 'bottom-right' \| 'bottom-center'` |  | `'bottom-right'` |
+| `label` | `string` |  | `'알림'` |
+
+## Pagination
+
+```ts
+import { Pagination } from '@nurihaus/web-design-system/pagination';   // 이 컴포넌트만 싣는다 (권장)
+import { Pagination } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 목록이나 검색 결과가 여러 페이지로 나뉘어 있고 사용자가 번호로 페이지를 고를 때 쓴다. `totalPages`는 필수다. 현재 페이지는 `page`(controlled)·`defaultPage`(uncontrolled)로 주고, `onPageChange`는 새 페이지 번호(1부터)를 받는다. 1과 마지막 페이지는 항상 보이고, 현재 페이지 양옆 `siblingCount`(기본 1)개를 보이며 사이가 벌어지면 `…`를 넣는다. `className`·`style`은 루트 `nav`에 붙는다. `aria-label`을 주면 nav 이름을 바꾼다(기본 "페이지 탐색").
+
+**쓰지 않는다.** 스크롤로 계속 불러오는 목록이나 "더 보기" 버튼으로 이어 붙이는 목록에는 쓰지 않는다. 화면 안의 내용 영역을 바꾸는 탭 전환은 Tabs를 쓴다.
+
+```tsx
+<Pagination totalPages={10} page={3} onPageChange={() => {}} />
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `size` | `'s' \| 'm'` |  | `'m'` |
+| `disabled` | `boolean` |  |  |
+| `page` | `number` |  |  |
+| `totalPages` | `number` | 예 |  |
+| `defaultPage` | `number` |  |  |
+| `onPageChange` | `((page: number) => void)` |  |  |
+| `siblingCount` | `number` |  | `1` |
+
+이 밖에 React·HTML 기본 속성 266개를 받는다.
+
+## Modal
+
+```ts
+import { Modal } from '@nurihaus/web-design-system/modal';   // 이 컴포넌트만 싣는다 (권장)
+import { Modal } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 제목과 본문, 버튼 영역이 자유로운 일반 대화상자에 쓴다. `open · defaultOpen · onOpenChange`로 열고 닫고, `trigger`를 주면 그 요소를 클릭해 열린다. `title`은 필수이고 dialog의 접근성 이름이 된다. `footer`에는 CTAButton 을 넣는다. `className`·`style`은 dialog 요소(Content)에 붙는다. X 아이콘(`showCloseIcon`, 기본 true)·Escape·오버레이 클릭으로 닫힌다.
+
+**쓰지 않는다.** 확인·취소 두 버튼으로 끝나는 확인 대화상자는 ModalWithDoubleButton 을 쓴다.
+
+```tsx
+<Modal
+  open
+  title="필터 설정"
+  description="조건을 고르세요."
+  footer={<CTAButton text="적용" onClick={() => {}} />}
+  onOpenChange={() => {}}
+>
+  본문
+</Modal>
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `trigger` | `ReactElement<any, string \| JSXElementConstructor<any>>` |  |  |
+| `title` | `ReactNode` | 예 |  |
+| `description` | `ReactNode` |  |  |
+| `children` | `ReactNode` |  |  |
+| `footer` | `ReactNode` |  |  |
+| `showCloseIcon` | `boolean` |  | `true` |
+| `size` | `'s' \| 'm' \| 'l'` |  | `'m'` |
+| `open` | `boolean` |  |  |
+| `defaultOpen` | `boolean` |  |  |
+| `onOpenChange` | `((open: boolean) => void)` |  |  |
+| `className` | `string` |  |  |
+| `style` | `CSSProperties` |  |  |
+
+이 밖에 React·HTML 기본 속성 2개를 받는다.
+
+## Drawer
+
+```ts
+import { Drawer } from '@nurihaus/web-design-system/drawer';   // 이 컴포넌트만 싣는다 (권장)
+import { Drawer } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 상세 정보나 필터처럼 현재 화면을 떠나지 않고 옆이나 아래에서 패널을 꺼내 보여줄 때 쓴다. `trigger`에 넘긴 요소를 클릭하면 열리고, `open`·`defaultOpen`·`onOpenChange`로 제어한다. `title`은 필수이며 dialog 의 접근성 이름이 된다. `side`(`right`·`left`·`bottom`, 기본 `right`)와 `size`(`s`·`m`·`l`, 기본 `m`)로 방향과 폭(bottom 은 높이)을 고른다. Escape·바깥 클릭·X 버튼으로 닫히고, `className`·`style`은 패널에 붙는다.
+
+**쓰지 않는다.** 삭제 확인처럼 결정 하나만 받는 짧은 대화상자는 ModalWithDoubleButton 을 쓴다. 페이지 자체 내비게이션이나 항상 보이는 사이드바에는 쓰지 않는다.
+
+```tsx
+<Drawer open title="상세 정보" side="right" onOpenChange={() => {}}>
+  본문
+</Drawer>
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `trigger` | `ReactElement<any, string \| JSXElementConstructor<any>>` |  |  |
+| `title` | `ReactNode` | 예 |  |
+| `description` | `ReactNode` |  |  |
+| `children` | `ReactNode` |  |  |
+| `footer` | `ReactNode` |  |  |
+| `side` | `'bottom' \| 'left' \| 'right'` |  | `'right'` |
+| `size` | `'s' \| 'm' \| 'l'` |  | `'m'` |
+| `showCloseIcon` | `boolean` |  | `true` |
+| `open` | `boolean` |  |  |
+| `defaultOpen` | `boolean` |  |  |
+| `onOpenChange` | `((open: boolean) => void)` |  |  |
+| `className` | `string` |  |  |
+| `style` | `CSSProperties` |  |  |
+
+이 밖에 React·HTML 기본 속성 2개를 받는다.
+
+## Skeleton
+
+```ts
+import { Skeleton } from '@nurihaus/web-design-system/skeleton';   // 이 컴포넌트만 싣는다 (권장)
+import { Skeleton } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 데이터를 기다리는 동안 들어올 내용의 자리를 같은 모양으로 비워 둘 때 쓴다. 한 줄 글은 `shape="text"`, 여러 줄은 `lines`, 이미지·카드는 `rect`에 `width`·`height`, 아바타는 `circle`에 `width`를 준다. `className`·`style`은 루트 `span`에 붙고 `width`·`height`는 루트 style 에 들어간다. 보조기기에는 숨기므로(`aria-hidden`) 불러오는 중이라는 알림은 감싸는 영역이 `aria-busy`로 알린다.
+
+**쓰지 않는다.** 짧은 처리 중 표시는 InlineLoading, 버튼 로딩은 CTAButton의 `loading`, 화면 전체를 막아야 하면 OverlayLoading을 쓴다. 들어올 내용의 모양을 모를 때는 쓰지 않는다.
+
+```tsx
+<Skeleton shape="text" lines={3} />
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `width` | `string \| number` |  | `'100%'` |
+| `height` | `string \| number` |  |  |
+| `shape` | `'circle' \| 'rect' \| 'text'` |  | `'text'` |
+| `lines` | `number` |  | `1` |
+| `animated` | `boolean` |  | `true` |
+
+이 밖에 React·HTML 기본 속성 266개를 받는다.
+
+## Breadcrumb
+
+```ts
+import { Breadcrumb } from '@nurihaus/web-design-system/breadcrumb';   // 이 컴포넌트만 싣는다 (권장)
+import { Breadcrumb } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 계층이 있는 화면에서 현재 위치와 상위 경로를 한 줄로 보여 줄 때 쓴다. `items`의 마지막 항목이 현재 위치라 링크가 아니고 `aria-current="page"`가 붙는다. `href`가 있는 항목은 `<a>` 링크로, `onItemClick`은 클릭한 항목의 `id`를 받는다. Next.js 나 React Router 안에서는 `linkComponent={Link}`를 넘겨 라우터 링크로 그린다. 넘기지 않으면 일반 `<a>`라 페이지가 새로 고쳐진다. `className`·`style`은 `nav` 루트에 붙는다.
+
+**쓰지 않는다.** 같은 깊이의 화면을 오가는 데는 Tabs를, 사이드바 메뉴에는 CollapsibleMenu를 쓴다. 계층이 한 단계뿐이면 쓰지 않는다.
+
+```tsx
+<Breadcrumb
+  items={[
+    { id: 'home', label: '홈', href: '/' },
+    { id: 'list', label: '목록', href: '/list' },
+    { id: 'detail', label: '상세' },
+  ]}
+/>
+```
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `items` | `BreadcrumbItem[]` | 예 |  |
+| `size` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl'` |  | `'m'` |
+| `onItemClick` | `((id: string) => void)` |  |  |
+| `separator` | `ReactNode` |  |  |
+| `linkComponent` | `ElementType` |  |  |
+| `className` | `string` |  |  |
+| `style` | `CSSProperties` |  |  |
+
+이 밖에 React·HTML 기본 속성 2개를 받는다.
+
 ## DropDown
 
 ```ts
@@ -388,7 +690,7 @@ import { DropDown } from '@nurihaus/web-design-system';             // 루트.
 
 | prop | 타입 | 필수 | 기본값 |
 | --- | --- | --- | --- |
-| `size` | `'s' \| 'm'` |  | `'s'` |
+| `size` | `'xs' \| 's' \| 'm' \| 'l' \| 'xl'` |  | `'s'` |
 | `defaultValue` | `string` |  |  |
 | `value` | `string` |  |  |
 | `onValueChange` | `((value: string) => void)` |  |  |
@@ -601,7 +903,7 @@ import { ModalWithDoubleButton } from '@nurihaus/web-design-system';
 
 **언제 쓴다.** 삭제 확인처럼 제목, 설명, 버튼 두 개로 된 확인 대화상자에 쓴다. `ModalWithDoubleButton.Row`는 버튼을 가로로, `ModalWithDoubleButton.Column`은 세로로 배치하며, `left`와 `right`는 CTAButton props를 그대로 받는다.
 
-**쓰지 않는다.** `open` prop이 없고 렌더되는 동안 항상 보이므로, 표시 여부는 부모가 조건부 렌더링으로 정하고 버튼 `onClick`에서 언마운트한다. `showCloseIcon`의 X 아이콘은 클릭해도 동작이 없으므로 닫기 수단으로 쓰지 않는다. 버튼이 하나이거나 세 개 이상인 모달은 이 라이브러리에 없다.
+**쓰지 않는다.** `open` prop이 없고 렌더되는 동안 항상 보이므로, 표시 여부는 부모가 조건부 렌더링으로 정하고 버튼 `onClick`에서 언마운트한다. `showCloseIcon`의 X 아이콘은 클릭해도 동작이 없으므로 닫기 수단으로 쓰지 않는다. 일반 모달은 Modal 을 쓴다.
 
 ```tsx
 <ModalWithDoubleButton.Row
@@ -728,15 +1030,7 @@ import { OverlayLoading } from '@nurihaus/web-design-system';             // 루
 
 | 필요한 것 | 지금 있는 것 |
 | --- | --- |
-| 페이지네이션 | 없음 |
-| 토스트·스낵바 | 없음 |
-| 스위치(토글) | 없음. 켜고 끄는 값은 Checkbox |
-| 여러 줄 입력(textarea) | 없음. TextField 는 한 줄 `<input>` 이다 |
 | 날짜 선택 | 없음 |
-| 드로어·사이드 패널 | 없음 |
-| 스켈레톤 | 없음. 불러오는 중에는 InlineLoading |
-| 브레드크럼 | 없음 |
 | 아이콘 세트 | 없음. 패키지 안 아이콘은 컴포넌트 내부용이라 내보내지 않는다 |
-| 확인용이 아닌 일반 모달 | 없음. 버튼 두 개짜리 확인 모달 ModalWithDoubleButton 만 있다 |
 
 없는 것이 필요하면 쓰는 쪽 저장소에서 `tokens.md` 의 변수로 만든다. 그리고 디자인 시스템에 추가할 후보라고 알린다.

package/dist/ai/tokens.md

@@ -266,11 +266,11 @@
 
 | 변수 | 값 | 용도 |
 | --- | --- | --- |
-| `--control-height-xs` | `30px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
-| `--control-height-s` | `40px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
-| `--control-height-m` | `50px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
-| `--control-height-l` | `54px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
-| `--control-height-xl` | `60px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-xs` | `28px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-s` | `36px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-m` | `40px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-l` | `44px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
+| `--control-height-xl` | `48px` | 한 줄에 나란히 놓이는 컨트롤: button, drop-down, text-field |
 | `--label-height-xs` | `28px` | 라벨: badge |
 | `--label-height-s` | `32px` | 라벨: badge |
 | `--label-height-m` | `36px` | 라벨: badge |
@@ -284,14 +284,28 @@
 | `--checkbox-size-l` | `24px` | 정사각 |
 | `--radio-size` | `18px` | 정사각 |
 | `--radio-dot-size` | `8px` | 정사각 |
-| `--avatar-size-s` | `40px` | 정사각 |
-| `--avatar-size-m` | `58px` | 정사각 |
-| `--avatar-size-l` | `74px` | 정사각 |
-| `--avatar-size-xl` | `124px` | 정사각 |
-| `--avatar-badge-size-s` | `18px` | 정사각 |
-| `--avatar-badge-size-m` | `24px` | 정사각 |
-| `--avatar-badge-size-l` | `30px` | 정사각 |
-| `--avatar-badge-size-xl` | `48px` | 정사각 |
+| `--switch-width-s` | `32px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-width-m` | `40px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-width-l` | `48px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-height-s` | `18px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-height-m` | `22px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-height-l` | `26px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--switch-thumb-inset` | `2px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-size-s` | `40px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-size-m` | `58px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-size-l` | `74px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-size-xl` | `124px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-badge-size-s` | `18px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-badge-size-m` | `24px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-badge-size-l` | `30px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--avatar-badge-size-xl` | `48px` | 스위치: 트랙 폭·높이. 손잡이는 트랙 높이에서 inset 을 뺀 정사각이다 |
+| `--drawer-width-s` | `320px` | 폭 |
+| `--drawer-width-m` | `400px` | 폭 |
+| `--drawer-width-l` | `520px` | 폭 |
+| `--drawer-height-s` | `320px` | 폭 |
+| `--drawer-height-m` | `400px` | 폭 |
+| `--drawer-height-l` | `520px` | 폭 |
+| `--toast-width` | `360px` | 폭 |
 | `--modal-width-s` | `400px` | 폭 |
 | `--modal-width-m` | `450px` | 폭 |
 | `--modal-width-l` | `500px` | 폭 |
@@ -300,8 +314,17 @@
 | `--icon-size-l` | `24px` | 그 밖의 치수 |
 | `--tooltip-arrow` | `8px` | 그 밖의 치수 |
 | `--spinner-stroke` | `3px` | 그 밖의 치수 |
+| `--overlay-spinner-size` | `64px` | 그 밖의 치수 |
+| `--overlay-spinner-stroke` | `8px` | 그 밖의 치수 |
 | `--tab-indicator-thickness` | `3px` | 그 밖의 치수 |
 | `--checkbox-border` | `1.5px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-xs` | `12px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-s` | `14px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-m` | `16px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-l` | `18px` | 그 밖의 치수 |
+| `--breadcrumb-chevron-xl` | `20px` | 그 밖의 치수 |
+| `--skeleton-text-height` | `16px` | 그 밖의 치수 |
+| `--skeleton-last-line-width` | `60%` | 그 밖의 치수 |
 | `--hairline` | `1px` | 그 밖의 치수 |
 | `--shadow-popover` | `0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)` | 그림자 |
 | `--z-base` | `0` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
@@ -312,8 +335,10 @@
 | `--z-popover` | `5` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
 | `--z-overlay` | `9998` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
 | `--z-modal` | `9999` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
+| `--z-toast` | `10000` | 레이어. 값이 같아도 역할이 다르면 이름을 따로 둔다 |
 | `--motion-fast` | `160ms` | 모션 |
 | `--motion-base` | `300ms` | 모션 |
 | `--motion-ease` | `ease` | 모션 |
 | `--spinner-duration` | `1.2s` | 모션 |
+| `--skeleton-duration` | `1.5s` | 모션 |
 | `--spinner-ease` | `cubic-bezier(0.5, 0, 0.5, 1)` | 모션 |

package/dist/avatar.js

@@ -4,7 +4,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
 /******/ var __webpack_modules__ = ({
 
-/***/ 468
+/***/ 5468
 (__unused_webpack_module, __webpack_exports__, __nuri_require__) {
 
 
@@ -16,15 +16,15 @@ __nuri_require__.d(__webpack_exports__, {
 // EXTERNAL MODULE: external {"root":"jsx-runtime","commonjs2":"react/jsx-runtime","commonjs":"react/jsx-runtime","amd":"react/jsx-runtime","module":"react/jsx-runtime"}
 var jsx_runtime_ = __nuri_require__(612);
 // EXTERNAL MODULE: external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react","module":"react"}
-var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(41);
+var external_root_React_commonjs2_react_commonjs_react_amd_react_module_react_ = __nuri_require__(1041);
 // EXTERNAL MODULE: ./helpers/utils/classNames.js
-var classNames = __nuri_require__(274);
+var classNames = __nuri_require__(3274);
 // EXTERNAL MODULE: ./helpers/utils/getMergedProps.ts
-var getMergedProps = __nuri_require__(335);
+var getMergedProps = __nuri_require__(7335);
 // EXTERNAL MODULE: ./components/core/composer/index.tsx
-var composer = __nuri_require__(777);
+var composer = __nuri_require__(2777);
 // EXTERNAL MODULE: ./helpers/props/common-props.ts
-var common_props = __nuri_require__(298);
+var common_props = __nuri_require__(7298);
 ;// ./components/avatar/avatar-props.ts
 
 var sizes = ['s', 'm', 'l', 'xl'];
@@ -167,7 +167,7 @@ module.exports = x({ ["Avatar"]: () => (__WEBPACK_EXTERNAL_MODULE_radix_ui_3bc96
 
 /***/ },
 
-/***/ 41
+/***/ 1041
 (module, __unused_webpack_exports, __nuri_require__) {
 
 var x = (y) => {
@@ -329,7 +329,7 @@ module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [364,777,298], () => (__nuri_require__(468)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [364,777,298], () => (__nuri_require__(5468)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };