@pantoia/ui 0.16.0 → 0.16.2

package/date-picker/index.tsx

@@ -202,7 +202,7 @@ function Calendar({ value, min, max, today, onPick }: CalendarProps) {
     <div className={ui.root()}>
       <div className={ui.head()}>
         <NavButton label="이전 달" direction="left" onClick={() => showMonth(view.year, view.month - 1)} />
-        <button type="button" aria-label="연월 고르기" className={ui.titleButton()} onClick={() => setMode('months')}>
+        <button type="button" aria-label="연월 선택" className={ui.titleButton()} onClick={() => setMode('months')}>
           {view.year}년 {view.month + 1}월
         </button>
         <NavButton label="다음 달" direction="right" onClick={() => showMonth(view.year, view.month + 1)} />
@@ -347,8 +347,8 @@ export function DatePicker({
   min,
   max,
   today,
-  title = '날짜 고르기',
-  placeholder = '날짜를 고르세요',
+  title = '날짜 선택',
+  placeholder = '날짜를 선택하세요',
   format = fullDate,
   ...trigger
 }: DatePickerProps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "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
 ```
 
 ### 쓰지 않는 것
@@ -252,7 +252,7 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 </TooltipProvider>
 ```
 
-알림은 일어난 일에 맞는 함수로 띄운다. 예시는 https://design.pantoia.com/toast/ 에 있다.
+알림은 일어난 일에 맞는 함수로 띄운다. 예시는 `https://design.pantoia.com/toast/`에 있다.
 
 ```
 toast.success   요청한 작업을 끝냈다

package/swatch-picker/index.tsx

@@ -134,7 +134,7 @@ export interface SwatchPickerCustomProps {
   disabled?: boolean
 }
 
-export function SwatchPickerCustom({ label = '직접 고르기', disabled }: SwatchPickerCustomProps) {
+export function SwatchPickerCustom({ label = '직접 선택', disabled }: SwatchPickerCustomProps) {
   const { size, value, choose, known } = use(Context)
   const ui = swatchPicker({ size })
   const input = useRef<HTMLInputElement>(null)

package/time-picker/index.tsx

@@ -103,8 +103,8 @@ export function TimePicker({
   defaultValue = null,
   onValueChange,
   step = 1,
-  title = '시각 고르기',
-  placeholder = '시각을 고르세요',
+  title = '시각 선택',
+  placeholder = '시각을 선택하세요',
   ...trigger
 }: TimePickerProps) {
   const [open, setOpen] = useState(false)

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()} />