@pantoia/ui 0.15.1 → 0.15.3

package/alert-dialog/index.tsx

@@ -86,7 +86,7 @@ export const alertDialogHeader = tv({
     root: 'flex items-start gap-stack',
     lead: 'shrink-0',
     body: 'flex min-w-0 grow flex-col gap-tight',
-    trail: 'shrink-0',
+    trail: 'flex h-(--text-section--line-height) shrink-0 items-center',
   },
 })
 

package/bottom-sheet/index.tsx

@@ -56,7 +56,7 @@ export const bottomSheetHeader = tv({
     root: 'flex items-start gap-stack',
     lead: 'shrink-0',
     body: 'flex min-w-0 grow flex-col gap-tight',
-    trail: 'shrink-0',
+    trail: 'flex h-(--text-section--line-height) shrink-0 items-center',
   },
 })
 

package/dialog/index.tsx

@@ -86,7 +86,7 @@ export const dialogHeader = tv({
     root: 'flex items-start gap-stack',
     lead: 'shrink-0',
     body: 'flex min-w-0 grow flex-col gap-tight',
-    trail: 'shrink-0',
+    trail: 'flex h-(--text-section--line-height) shrink-0 items-center',
   },
 })
 

package/drawer/index.tsx

@@ -79,7 +79,7 @@ export const drawerHeader = tv({
     root: 'flex items-start gap-stack',
     lead: 'shrink-0',
     body: 'flex min-w-0 grow flex-col gap-tight',
-    trail: 'shrink-0',
+    trail: 'flex h-(--text-section--line-height) shrink-0 items-center',
   },
 })
 

package/package.json

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

package/skills/pantoia-design/SKILL.md

@@ -104,6 +104,19 @@ Tailwind 기본 색  bg-blue-500, text-gray-700. 역할 토큰을 쓴다
 px 직접 지정      간격과 둥글기는 토큰으로 쓴다
 ```
 
+### 비활성
+
+disabled는 이럴 때만 준다.
+
+```
+처리 중인 버튼과 메뉴 항목        끝날 때까지 다시 누르지 못하게 한다
+값을 고르거나 입력하는 컨트롤     Checkbox, RadioGroup, Select와 그 항목, Switch, NumberField. 이유를 설명이나 도움말에 적는다
+확인 문구를 입력해야 하는 버튼    입력하기 전까지
+아직 갈 수 없는 단계              단계 표시의 다음 단계
+```
+
+그 밖의 버튼과 메뉴 항목은 조건이 맞지 않아도 disabled로 두지 않는다. 누르면 이유를 `toast.warning`으로 알린다.
+
 ## 커스텀 값 추가
 
 전역 CSS에 적는다. 값은 라이트와 다크 양쪽에 모두 적는다.
@@ -235,7 +248,18 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 </TooltipProvider>
 ```
 
-알림은 `toast('저장했어요.')`로 띄운다. `toast.success`, `toast.error`, `toast.warning`, `toast.info`, `toast.dismiss`도 있다.
+알림은 일어난 일에 맞는 함수로 띄운다. 예시는 https://design.pantoia.com/toast/ 에 있다.
+
+```
+toast.success   요청한 작업을 끝냈다
+toast.error     요청이 실패했거나 대상을 찾을 수 없다
+toast.warning   작업이 일부만 끝났다. 권한, 상태, 규칙 때문에 할 수 없는 동작을 눌렀다
+toast.info      작업이 진행 중이다. 작업을 되돌렸다
+toast()         결과와 함께 다음 할 일이나 보이는 위치를 알린다. 바뀐 것이 없다
+toast.dismiss   띄운 알림을 닫는다
+```
+
+고쳐야 할 입력은 알림으로 띄우지 않고 FieldError나 Callout으로 화면에 남긴다. FieldError를 둘 곳이 없을 때만 `toast.warning`을 쓴다.
 
 ## 컴포넌트 내려받기