@pantoia/ui 0.10.0 → 0.10.2

package/README.md

@@ -31,12 +31,3 @@ npm install
 npm run verify   typecheck, check, lint, test
 npm pack         tarball
 ```
-
-## 구조
-
-```
-<이름>/               컴포넌트
-cli/                  CLI
-docs/decisions/       결정 기록
-.claude/rules/        일하는 규칙
-```

package/package.json

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

package/skills/pantoia-design/SKILL.md

@@ -5,7 +5,6 @@ description: PANTOIA Design System(@pantoia/ui)으로 화면을 만들거나 고
 
 # @pantoia/ui
 
-React 디자인 시스템이다. Base UI 위에 스타일을 얹고 Tailwind CSS 4로 토큰을 노출한다.
 사람이 보는 문서는 https://design.pantoia.com 에 있다.
 
 ## 설치
@@ -21,19 +20,16 @@ tailwindcss   4.0 이상. Tabs의 스크롤바 모양은 4.3부터
 npx @pantoia/ui init
 ```
 
-init은 컴포넌트를 저장할 위치와 전역 CSS 파일을 묻고 `components.json`을 만든다.
-글꼴 패키지 `pretendard`, `@fontsource/jetbrains-mono`는 설치할지 묻는다.
 전역 CSS에는 `@import "tailwindcss";` 바로 아래에 이 줄이 들어간다.
 
 ```css
 @import "@pantoia/ui/tailwind.css";
 ```
 
-다크 모드는 `.dark` 클래스로 켠다. `html`이나 `body`에 `.dark`를 두면 그 안의 토큰이 모두 바뀐다.
+다크 모드는 `.dark` 클래스로 켠다.
 next-themes를 쓸 때는 `attribute="class"`로 둔다.
 
 React Router 프레임워크 모드는 `react-router.config.ts`에 `future: { unstable_optimizeDeps: true }`를 더한다.
-없으면 개발 서버에서 처음 여는 route마다 페이지가 새로고침된다.
 
 ## 쓰는 법
 
@@ -48,13 +44,12 @@ import { Button } from '@/components/ui/button'
 import { Field, FieldLabel, FieldHelp } from '@/components/ui/field'
 ```
 
-import 경로는 저장 위치와 프로젝트의 경로 별칭을 따른다. 위는 저장 위치가 `components/ui`이고 별칭이 `@/`인 예다.
+import 경로는 저장 위치와 프로젝트의 경로 별칭을 따른다.
 패키지는 컴포넌트와 `tv`를 export하지 않는다. `add`로 복사한 파일만 import한다.
 
-제어 속성은 Base UI 규약을 따른다. `value`와 `defaultValue`, `onValueChange`를 짝으로 쓴다.
+`value`와 `defaultValue`, `onValueChange`를 짝으로 쓴다.
 고르지 않은 상태는 `null`이다. Select, RadioGroup, Combobox, NumberField가 같다.
-Select와 RadioGroup의 state는 `useState<string | null>`로 둔다. 문자열만 받는 setter를 `onValueChange`에 넘기면 타입 오류가 난다.
-컴포넌트마다의 속성과 이벤트는 https://design.pantoia.com 의 각 페이지에 있다.
+Select와 RadioGroup의 state는 `useState<string | null>`로 둔다.
 
 ## 디자인 규칙
 
@@ -78,7 +73,7 @@ Select와 RadioGroup의 state는 `useState<string | null>`로 둔다. 문자열
 
 ### Surface
 
-경계를 만드는 유틸리티가 4개다.
+경계를 만드는 유틸리티다.
 
 ```
 frame   배경과 선. 페이지 안의 영역
@@ -92,7 +87,7 @@ well    bg-bg-well. 파인 면
 
 ```
 간격     gap-tight 4, gap-stack 16, gap-block 32, gap-section 48, gap-gutter 16
-둥글기   rounded-r2부터 rounded-r24까지 10단계
+둥글기   rounded-r2부터 rounded-r24까지
 글자     text-display, text-title, text-section, text-subsection, text-prose,
          text-value, text-label, text-caption, text-micro
 크기만   text-t10부터 text-t64까지
@@ -105,14 +100,14 @@ well    bg-bg-well. 파인 면
 
 ```
 임의 값          bg-[#fff], p-[13px]. 토큰을 쓰거나 토큰을 더한다
-dark: 변형자      토큰이 이미 양쪽 모드를 담는다
+dark: 변형자
 Tailwind 기본 색  bg-blue-500, text-gray-700. 역할 토큰을 쓴다
 px 직접 지정      간격과 둥글기는 토큰으로 쓴다
 ```
 
 ## 커스텀 값 추가
 
-전역 CSS에 적는다. 값은 라이트와 다크 양쪽에 모두 적는다. `:root`에만 적으면 다크가 따라오지 않는다.
+전역 CSS에 적는다. 값은 라이트와 다크 양쪽에 모두 적는다.
 
 ```css
 /* 모드와 무관한 값 */
@@ -121,15 +116,15 @@ px 직접 지정      간격과 둥글기는 토큰으로 쓴다
   --spacing-wide: 64px;
 }
 
-/* 모드마다 다른 값 */
-:root, .light { --pds-bg-brand-solid: #2563eb; }
-.dark { --pds-bg-brand-solid: #3b82f6; }
+/* 모드마다 적는 값 */
+:root, .light { --pds-bg-brand-solid: #9c63e4; }
+.dark { --pds-bg-brand-solid: #9c63e4; }
 
 /* 새 유틸리티 */
 @utility raised { @apply bg-bg-panel shadow-s2; }
 ```
 
-토큰 이름을 더했으면 저장 위치의 `tv.ts`에 있는 `twMergeConfig`의 그룹 목록에도 더한다. 빠지면 className으로 덮어쓸 때 겹치는 클래스가 함께 남는다.
+토큰 이름을 더했으면 저장 위치의 `tv.ts`에 있는 `twMergeConfig`의 그룹 목록에도 더한다.
 
 색 역할을 더하려면 팔레트 10단계를 양쪽 모드에 적고, 토큰 6개를 만든다.
 
@@ -139,7 +134,7 @@ px 직접 지정      간격과 둥글기는 토큰으로 쓴다
 --pds-line-<역할>          --pds-line-<역할>-weak
 ```
 
-토큰을 덮어쓸 때 미치는 범위는 3가지다.
+토큰을 덮어쓸 때 미치는 범위다.
 
 ```
 팔레트 단계   그 단계를 참조하는 토큰이 모두 바뀐다
@@ -149,8 +144,6 @@ className     그 한 곳만 바뀐다
 
 ## 컴포넌트
 
-`variant`는 tailwind-variants로 만든 스타일 축이다. `-`는 축이 없다는 뜻이다.
-
 | 컴포넌트 | add | 하위 컴포넌트 | variant |
 |---|---|---|---|
 | Accordion | accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | - |
@@ -198,7 +191,7 @@ Field는 라벨, 도움말, 오류 메시지를 입력 컨트롤에 묶는다. I
 Select는 고른 항목의 `SelectItemText`나 글자를 트리거에 보인다. `SelectItem`을 다른 컴포넌트로 감싸면 `items`로 라벨을 넘긴다.
 Combobox 항목이 `{ value, label }`이 아닌 객체면 `itemToStringLabel`로 `ComboboxInput`에 보일 글자를 정한다.
 
-앱에 한 번만 두는 것이 2개다. 플로팅 요소가 페이지의 z-index에 가려지지 않게 앱은 `isolate`로 감싼다.
+앱에 한 번만 두는 것이다. 앱은 `isolate`로 감싼다.
 
 ```tsx
 import { Toast, toast } from '@/components/ui/toast'
@@ -218,11 +211,8 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 
 ```sh
 npx @pantoia/ui list          추가할 수 있는 컴포넌트를 확인한다
-npx @pantoia/ui add button    소스를 components.json의 위치로 복사한다
 npx @pantoia/ui diff          복사한 파일을 설치된 패키지의 파일과 비교한다
 ```
 
-`add`는 함께 필요한 파일까지 복사하고 `components.json`에 버전을 적는다.
+`add`는 `components.json`에 버전을 적는다.
 복사한 파일을 고치면 패키지를 올려도 그 파일은 그대로다. `diff`로 달라진 곳을 확인하고 직접 반영한다.
-
-복사한 파일도 위의 디자인 규칙을 따른다. 임의 값과 `dark:` 변형자를 쓰지 않는다.