@pantoia/ui 0.16.1 → 0.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.16.1",
+  "version": "0.16.3",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {

package/skills/pantoia-design/SKILL.md

@@ -5,7 +5,7 @@ description: PANTOIA Design System(@pantoia/ui)으로 화면을 만들거나 고
 
 # @pantoia/ui
 
-사람이 보는 문서는 https://design.pantoia.com 에 있다.
+사람이 보는 문서는 `https://design.pantoia.com`에 있다.
 
 ## 설치
 
@@ -78,8 +78,8 @@ Select와 RadioGroup의 state는 `useState<string | null>`로 둔다.
 ```
 frame   배경과 선. 페이지 안의 영역
 card    배경과 그림자. 목록의 항목
-float   배경과 선과 그림자. 페이지나 overlay 위에 뜨는 것
-well    bg-bg-well. 파인 면
+float   배경, 선, 그림자. 페이지나 overlay 위에 뜨는 것
+well    bg-bg-well
 ```
 
 ### 간격, 둥글기, 글자, 그림자
@@ -92,7 +92,7 @@ well    bg-bg-well. 파인 면
 크기만   text-t10부터 text-t64까지
 그림자   shadow-s1, shadow-s2, shadow-s3
 전환     transition-state, animate-enter, animate-exit
-층       z-sticky 10, z-overlay 50, z-toast 60
+z-index  z-sticky 10, z-overlay 50, z-toast 60
 ```
 
 ### 쓰지 않는 것
@@ -151,7 +151,7 @@ disabled는 이럴 때만 준다.
 ```
 팔레트 단계   그 단계를 참조하는 토큰이 모두 바뀐다
 토큰          그 토큰을 쓰는 곳이 모두 바뀐다
-className     그 한 곳만 바뀐다
+className     그 1곳만 바뀐다
 ```
 
 ## 컴포넌트
@@ -211,15 +211,15 @@ Select와 Combobox            목록에서 고르면 Select, 입력해서 찾으
 Checkbox와 Switch            여러 개를 고르면 Checkbox, 설정을 바로 켜고 끄면 Switch
 Toggle과 Switch              도구 모음에서 상태를 누르면 Toggle, 설정이면 Switch
 Badge와 Button               누를 수 없으면 Badge, 누르면 Button
-Tabs와 Accordion             한 번에 하나만 보이면 Tabs, 여러 개를 펴 두면 Accordion
+Tabs와 Accordion             한 번에 1개만 보이면 Tabs, 여러 개를 펴 두면 Accordion
 SegmentedControl과 Tabs      같은 내용의 보기 방식을 바꾸면 SegmentedControl, 다른 내용으로 바꾸면 Tabs
-SegmentedControl과 Toggle    여럿 중 하나를 고르면 SegmentedControl, 하나를 켜고 끄면 Toggle
+SegmentedControl과 Toggle    여럿 중 1개를 고르면 SegmentedControl, 1개를 켜고 끄면 Toggle
 SegmentedControl과 ToggleGroup   이어진 트랙 안에서 고르면 SegmentedControl, 떨어진 pill 여러 개 중에 고르면 ToggleGroup
-Collapsible과 Accordion      한 영역을 접으면 Collapsible, 여러 영역을 함께 다루면 Accordion
+Collapsible과 Accordion      영역 1개를 접으면 Collapsible, 여러 영역을 함께 다루면 Accordion
 Tooltip과 Popover            짧은 설명이면 Tooltip, 안에서 조작하면 Popover
 ```
 
-Avatar의 배경색은 color나 seed 중 하나로 정한다. seed에는 사용자 id처럼 바뀌지 않는 값을 넘기고, 같은 seed는 어느 앱에서나 같은 색이다.
+Avatar의 배경색은 color나 seed 중 1개로 정한다. seed에는 사용자 id처럼 바뀌지 않는 값을 넘기고, 같은 seed는 어느 앱에서나 같은 색이다.
 
 Dialog, AlertDialog, Drawer, BottomSheet의 Footer는 layout으로 버튼을 배치한다. end, between, fill, grow-last 중에 고르고, 화면 폭마다 다르면 { narrow, wide }를 넘긴다. 기준은 sm이고, ModalFooter는 Dialog 모양이면 wide, BottomSheet 모양이면 narrow를 쓴다.
 
@@ -238,7 +238,7 @@ Field는 라벨, 도움말, 오류 메시지를 입력 컨트롤에 묶는다. I
 Select는 고른 항목의 `SelectItemText`나 글자를 트리거에 보인다. `SelectItem`을 다른 컴포넌트로 감싸면 `items`로 라벨을 넘긴다.
 Combobox 항목이 `{ value, label }`이 아닌 객체면 `itemToStringLabel`로 `ComboboxInput`에 보일 글자를 정한다.
 
-앱에 한 번만 두는 것이다. 앱은 `isolate`로 감싼다.
+아래 컴포넌트는 앱에 1번만 둔다. 앱은 `isolate`로 감싼다.
 
 ```tsx
 import { Toast, toast } from '@/components/ui/toast'
@@ -252,7 +252,7 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 </TooltipProvider>
 ```
 
-알림은 일어난 일에 맞는 함수로 띄운다. 예시는 https://design.pantoia.com/toast/ 에 있다.
+알림은 일어난 일에 맞는 함수로 띄운다. 예시는 `https://design.pantoia.com/toast/`에 있다.
 
 ```
 toast.success   요청한 작업을 끝냈다

package/toast/index.tsx

@@ -55,7 +55,17 @@ const toastRoot = tv({
     + ' data-multiline:rounded-r20 data-multiline:w-full data-multiline:items-start data-multiline:px-4 data-multiline:py-3',
 })
 
-const toastIcon = tv({ base: 'shrink-0 in-data-multiline:pt-px' })
+const toastIcon = tv({
+  base: 'shrink-0 in-data-multiline:pt-px',
+  variants: {
+    kind: {
+      success: 'text-fg-success',
+      error: 'text-fg-danger',
+      warning: 'text-fg-warning',
+      info: 'text-fg-info',
+    },
+  },
+})
 
 const toastContent = tv({ base: 'min-w-0 flex-1' })
 
@@ -137,7 +147,7 @@ function ToastItem({ item, front, swipe }: { item: Item, front: boolean, swipe:
       data-multiline={multiline ? '' : undefined}
       className={toastRoot({ className: s.toast })}
     >
-      {icon && <div className={toastIcon()}>{icon}</div>}
+      {icon && <div className={toastIcon({ kind: item.type as Kind })}>{icon}</div>}
       <ToastPrimitive.Content className={toastContent()}>
         <ToastPrimitive.Title ref={title} className={toastTitle()} />
         <ToastPrimitive.Description className={toastDescription()} />