@pantoia/ui 0.16.1 → 0.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/skills/pantoia-design/SKILL.md +5 -5
- package/toast/index.tsx +12 -2
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ description: PANTOIA Design System(@pantoia/ui)으로 화면을 만들거나 고
|
|
|
5
5
|
|
|
6
6
|
# @pantoia/ui
|
|
7
7
|
|
|
8
|
-
사람이 보는 문서는 https://design.pantoia.com
|
|
8
|
+
사람이 보는 문서는 `https://design.pantoia.com`에 있다.
|
|
9
9
|
|
|
10
10
|
## 설치
|
|
11
11
|
|
|
@@ -78,8 +78,8 @@ Select와 RadioGroup의 state는 `useState<string | null>`로 둔다.
|
|
|
78
78
|
```
|
|
79
79
|
frame 배경과 선. 페이지 안의 영역
|
|
80
80
|
card 배경과 그림자. 목록의 항목
|
|
81
|
-
float
|
|
82
|
-
well bg-bg-well
|
|
81
|
+
float 배경, 선, 그림자. 페이지나 overlay 위에 뜨는 것
|
|
82
|
+
well bg-bg-well
|
|
83
83
|
```
|
|
84
84
|
|
|
85
85
|
### 간격, 둥글기, 글자, 그림자
|
|
@@ -92,7 +92,7 @@ well bg-bg-well. 파인 면
|
|
|
92
92
|
크기만 text-t10부터 text-t64까지
|
|
93
93
|
그림자 shadow-s1, shadow-s2, shadow-s3
|
|
94
94
|
전환 transition-state, animate-enter, animate-exit
|
|
95
|
-
|
|
95
|
+
z-index z-sticky 10, z-overlay 50, z-toast 60
|
|
96
96
|
```
|
|
97
97
|
|
|
98
98
|
### 쓰지 않는 것
|
|
@@ -252,7 +252,7 @@ import { TooltipProvider } from '@/components/ui/tooltip'
|
|
|
252
252
|
</TooltipProvider>
|
|
253
253
|
```
|
|
254
254
|
|
|
255
|
-
알림은 일어난 일에 맞는 함수로 띄운다. 예시는 https://design.pantoia.com/toast
|
|
255
|
+
알림은 일어난 일에 맞는 함수로 띄운다. 예시는 `https://design.pantoia.com/toast/`에 있다.
|
|
256
256
|
|
|
257
257
|
```
|
|
258
258
|
toast.success 요청한 작업을 끝냈다
|
package/toast/index.tsx
CHANGED
|
@@ -55,7 +55,17 @@ const toastRoot = tv({
|
|
|
55
55
|
+ ' data-multiline:rounded-r20 data-multiline:w-full data-multiline:items-start data-multiline:px-4 data-multiline:py-3',
|
|
56
56
|
})
|
|
57
57
|
|
|
58
|
-
const toastIcon = tv({
|
|
58
|
+
const toastIcon = tv({
|
|
59
|
+
base: 'shrink-0 in-data-multiline:pt-px',
|
|
60
|
+
variants: {
|
|
61
|
+
kind: {
|
|
62
|
+
success: 'text-fg-success',
|
|
63
|
+
error: 'text-fg-danger',
|
|
64
|
+
warning: 'text-fg-warning',
|
|
65
|
+
info: 'text-fg-info',
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
})
|
|
59
69
|
|
|
60
70
|
const toastContent = tv({ base: 'min-w-0 flex-1' })
|
|
61
71
|
|
|
@@ -137,7 +147,7 @@ function ToastItem({ item, front, swipe }: { item: Item, front: boolean, swipe:
|
|
|
137
147
|
data-multiline={multiline ? '' : undefined}
|
|
138
148
|
className={toastRoot({ className: s.toast })}
|
|
139
149
|
>
|
|
140
|
-
{icon && <div className={toastIcon()}>{icon}</div>}
|
|
150
|
+
{icon && <div className={toastIcon({ kind: item.type as Kind })}>{icon}</div>}
|
|
141
151
|
<ToastPrimitive.Content className={toastContent()}>
|
|
142
152
|
<ToastPrimitive.Title ref={title} className={toastTitle()} />
|
|
143
153
|
<ToastPrimitive.Description className={toastDescription()} />
|