@olundot/ui 0.17.1 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @olundot/ui
 
+## 0.19.0
+
+### Minor Changes
+
+- 42d2650: `Button`·`IconButton`에 새 축 `appearance`(`filled`·`outline`·`ghost`) × `tone`(`primary`·`neutral`·`danger`)을 추가했습니다. 옛 `variant`는 0.18과 똑같이 그려지고, 사용 중단 예정으로 표시됩니다. 0.20에서 삭제합니다.
+
+  - **쓸 수 있는 조합 다섯 개** — `filled` × `primary`·`neutral`·`danger`, `outline` × `neutral`, `ghost` × `neutral`. 나머지 네 조합은 타입 오류입니다. 새 축과 `variant`를 함께 줘도 타입 오류입니다.
+  - **두 컴포넌트가 같은 모양** — 같은 조합이면 `Button`과 `IconButton`의 색·테두리·hover가 같습니다. 크기는 아래 "크기 단계 하나"를 따릅니다.
+  - **기본값** — 아무것도 주지 않으면 지금과 같습니다(`Button` = `filled` + `primary`, `IconButton` = `ghost` + `neutral`). 한쪽만 주면 나머지를 채웁니다. `tone`이 없으면 `filled`는 `primary`, `outline`·`ghost`는 `neutral`입니다.
+  - **`IconButton` 글자** — `label="추가"` 또는 children으로 글자를 넣습니다. 둘을 함께 주면 타입 오류입니다. 글자가 있으면 `aria-label`은 필수가 아니고, 폭은 글자에 맞춥니다. 아이콘 위치는 `iconPosition="start" | "end"`(기본 `start`)입니다. 아이콘만일 때는 지금처럼 정사각형이고 누르는 영역은 44px입니다.
+  - **크기 단계 하나** — `appearance`나 `tone`을 준 `IconButton`은 `size`를 `Button`과 같은 5단계로 읽습니다: `xs` 28 · `sm` 30 · `md` 32 · `lg` 36 · `xl` 40(기본 `md`). 같은 `size`면 `Button`·글자 포함 `IconButton`·아이콘만 `IconButton`의 높이와 아이콘 크기·선 굵기가 같습니다(`xs` 14/1.75, `sm`·`md` 16/2, `lg`·`xl` 18/2). 아이콘만은 정사각형이고 누르는 영역은 사방 44px입니다.
+  - **옛 크기** — 축을 주지 않은 `IconButton`은 지금처럼 3단계 `sm` 28 · `md` 32 · `lg` 40으로 읽고 출력도 0.18과 같습니다. 새 축으로 옮길 때 `sm` → `xs`, `lg` → `xl`로 바꿉니다(`md`는 그대로). 축 없이 `xs`·`xl`을 주면 타입 오류입니다. 축 없이 글자를 넣으면 높이는 같은 높이의 `Button`(`xs`·`md`·`xl`)을 따릅니다.
+  - **옛 값 → 새 값**
+    - `Button` `variant`: `primary`·`default` → `filled` + `primary` / `secondary`·`outline`·`subtle` → `outline` + `neutral` / `ghost` → `ghost` + `neutral` / `danger`·`destructive`·`emergency` → `filled` + `danger` / `link` → 대체 없음(링크 컴포넌트 예정)
+    - `Button` `size="icon"`·`"icon-xs"` → 새 축 `IconButton` `lg`·`md`(36·32, 높이 그대로), `leadingIcon`·`trailingIcon` → 글자 포함 `IconButton`
+    - `IconButton` `variant`: `ghost` → `ghost` + `neutral` / `outline` → `outline` + `neutral` / `subtle` → `filled` + `neutral` / `danger` → `filled` + `danger`. `size`는 `sm` → `xs`, `lg` → `xl`
+  - **옮길 때 모양이 바뀌는 곳** — `IconButton` `variant="danger"`(연한 빨강)는 `filled` + `danger`(진한 빨강 채움)로 바뀝니다. `IconButton` `variant="outline"`은 `outline` + `neutral`로 옮기면 아이콘 색이 `text-secondary`에서 `foreground`로, hover 테두리가 `--border-strong`에서 `--border`로 바뀝니다(`Button` `secondary`와 같은 모양). 옛 값을 그대로 쓰는 동안에는 바뀌지 않습니다.
+  - `ButtonProps`는 interface에서 type(union)으로 바뀌었습니다. `interface X extends ButtonProps`로 확장하던 곳은 `type X = ButtonProps & { … }`로 바꿔야 합니다.
+
+### Patch Changes
+
+- 2e965c7: OlunSymbol now has two optical sizes. Above 32px it follows the brand concept sheet (thicker ring, smaller dot clearly apart from the ring); at 32px and below it keeps the current icon geometry.
+
+  OlunLogo drops the wordmark period when the symbol is shown, so the lime orbit dot is not repeated. The wordmark alone still reads `OLUN.`.
+
+- 11d8450: Tabs: 세로 탭 활성 표시가 구분선 위에 겹치도록 수정하고, `sm` 미만에서는 가로 탭 규칙으로 표시합니다. line 탭의 focus-visible ring이 목록 overflow에 잘리지 않도록 ring을 안쪽으로 그립니다.
+- Updated dependencies [89a385a]
+- Updated dependencies [2fa68e9]
+  - @olundot/tokens@0.17.0
+
+## 0.18.0
+
+### Minor Changes
+
+- e7b9183: 0.18.0 첫 묶음 — Tabs 간격 소유권 이전(#68) · Button 보조 계열 단일화(#58) · Button xs·sm 터치 영역(#69).
+
+  - **마이그레이션 필요** — `Tabs` 가로(`line`·`contained`) 탭 줄 아래 여백 24px(`mb-[var(--space-6)]`)을 없앴습니다. 탭과 패널 사이 간격은 이제 소비자가 정합니다. 탭 아래 여백 24px을 부모 gap으로 옮겨야 합니다: 가로 `Tabs` 루트(또는 부모)에 `className="flex flex-col gap-6"`(`gap-6` = `--space-6` = 24px)처럼 gap을 주세요. 주지 않으면 탭 줄과 패널이 붙습니다. 여백을 없애려고 `listClassName="mb-0"`, 줄이려고 `mb-3`·`-mt-3`을 둔 곳은 그 패치를 지우고 gap 값으로 정합니다. 세로(`orientation="vertical"`)는 바뀌지 않았습니다.
+  - `DetailLayout`은 탭 줄과 패널 사이 24px을 자체 gap으로 유지합니다 — 화면은 그대로입니다.
+  - `Button` `outline`·`subtle` variant를 deprecated로 표시했습니다(JSDoc `@deprecated`, 개발 경고 없음). 둘 다 `secondary`로 옮기세요 — 다음 breaking 릴리스에서 제거됩니다. 지금은 렌더링이 그대로입니다. 액션 위계는 `primary`(주 결정 1개) · `secondary`(보조 표준) · `ghost`(아이콘 크롬 — `IconButton` 기본값) · `danger`(파괴 확정) 4계열입니다.
+  - 화면이 달라지는 곳 — DS 내부의 `outline` 사용을 `secondary`로 옮겼습니다. 테두리가 조금 옅어지고(`--border` → `--border-subtle`) 배경이 `--bg-surface`로 채워집니다: `CopyButton` 기본 variant, `ErrorState` 다시 시도 버튼, `Toast` 액션 버튼. `DataTable` 모바일 정렬 버튼은 선택 안 됨 = `secondary`, 선택됨 = 중립 surface-lift(`--action-selected` + `--border-strong`)로 바꿨습니다 — 전에는 선택된 쪽이 오히려 옅은 테두리였습니다.
+  - `Button` `xs`(28px)·`sm`(30px)의 터치 영역을 세로 44px로 넓혔습니다. 보이지 않는 `::before`가 위아래로만 늘어나므로 보이는 높이, 라벨 위치, focus ring은 그대로이고 가로로 붙은 버튼끼리는 겹치지 않습니다. 이 두 크기는 이제 `position: relative`입니다. 세로로 쌓거나 줄바꿈되는 `xs`·`sm` 버튼은 줄 간격을 `xs` 8px·`sm` 7px 이상 두세요 — 더 좁으면 아래 버튼의 터치 영역이 위 버튼 가장자리를 덮습니다. `overflow: hidden` 부모 안에서는 터치 영역이 잘립니다.
+
+- e7b9183: 0.18.0 두 번째 묶음 — 모바일 하단 시트 (olun-app #1772 앱 규칙).
+
+  - `DialogContent`에 `mobilePresentation?: "center" | "sheet"`를 추가했습니다(기본 `"center"` — 렌더 결과가 이전과 같습니다). `"sheet"`이면 900px 미만에서 하단 시트가 됩니다: 아래 가장자리에 붙고, 전체 폭, 위 모서리만 둥글고, 높이는 85dvh까지이며 넘치면 시트 안에서 스크롤, 홈 인디케이터 영역(safe-area)만큼 아래를 띄웁니다. 진입·퇴장은 `Sheet` bottom keyframe과 `--sheet-motion-*`을 그대로 씁니다(동작 줄이기 설정이면 움직이지 않음). CSS만으로 바뀌므로 SSR·hydration 결과가 폭과 무관하게 같고 깜빡임이 없습니다. 900px 이상은 기존 가운데 카드 그대로입니다.
+  - `ConfirmDialog`·`FormModal`·`InfoModal`이 같은 `mobilePresentation`을 받습니다. 각 부품의 기본값은 `"center"`로 그대로입니다. 타입 `DialogMobilePresentation`을 내보냅니다.
+  - 앱 로컬 `ResponsiveModal`(JS `matchMedia(1024)`로 Dialog↔Sheet 교체)은 `DialogContent mobilePresentation="sheet"`로 대체할 수 있습니다. 기준 폭이 1024에서 DS 공통 900으로 바뀌어 900–1023px 태블릿에서는 시트 대신 가운데 카드가 뜹니다.
+  - 새 `ActionSheet` — 페이지 더보기(⋯)의 모바일 명령 목록 하단 시트입니다. `title`(시트 머리이자 접근 가능한 이름, 필수)·`description?`·`items: ActionSheetItem[]`·`closeLabel?`(기본 "닫기"). 행 모양은 하나로 고정입니다: 높이 48px, 아이콘 17px, 행 사이 구분선, 좌우 16px, 13px/500. `destructive` 행은 오류 전경색, `disabled` 행은 비활성 색(비활성이 파괴 색보다 우선). 항목을 고르면 시트가 먼저 닫히고, 닫힘이 끝나 포커스가 트리거로 돌아온 뒤 `onSelect`가 실행됩니다 — 확인 Dialog를 여는 항목도 두 모달이 겹치지 않고, 확인 Dialog가 닫히면 포커스가 트리거로 돌아갑니다. 데스크톱은 같은 `items` 배열을 `DropdownMenuItem`으로 그립니다(문서 예시).
+  - `ConfirmDialog`가 닫힐 때 연 요소로 포커스를 돌려줍니다. 전에는 바깥 버튼으로 연(제어형) 확인 Dialog가 닫히면 포커스가 `<body>`로 떨어졌습니다 — Radix Dialog는 자기 `Dialog.Trigger`로만 포커스를 돌려줍니다.
+
+- e7b9183: 0.18.0 세 번째 묶음 — 모양(모서리·그림자·푸터 버튼) + floating 라이브 영역 + 포커스 복귀. 움직임(모션·전환)과 Dialog 계열 톤온톤은 0.19.0입니다.
+
+  - **컨트롤 모서리 8** — 독립 컨트롤의 모서리를 `--radius-sm`(6px)에서 `--radius-md`(8px)로 올렸습니다: `Button`·`IconButton`·`Pagination` 버튼·`ModeToggle` 트랙·닫기 버튼(`Dialog`·`Sheet`·`SheetDrawer`·`Toast`·`Alert`)·`BulkActionBar` 버튼·`WizardLayout` 단계 버튼·`Checkbox`/`Radio` plain 행·`FileUploadZone` compact·`ThemeToggle`·`ThemeFab`(square). `Sheet` 닫기 버튼은 4px이었는데 다른 닫기 버튼과 같은 8px이 됩니다. 다른 컨트롤 안의 조밀 항목(메뉴 항목·contained 탭·Tree 행)과 `Badge`는 6px 그대로입니다. `ModeToggle` 선택 항목은 트랙과 동심으로 6px(전 4px)입니다. 토큰 값은 바뀌지 않았습니다.
+  - **떠 있는 레이어 그림자** — `DropdownMenu`(와 `ContextMenu`)·`Popover`·`Select` 목록·`Sheet`(`SheetDrawer`·`ActionSheet` 포함) 패널을 `--shadow-16`으로 올렸습니다(전 `--shadow-2`/`--shadow-4`). `DropdownMenu` 패널 모서리는 `--radius-lg`(12px, 전 6px)입니다. `Toast`는 `--shadow-8`(전 `--shadow-4`)입니다. `Dialog`·`ConfirmDialog`·`FormModal`·`InfoModal`의 그림자와 표면은 바뀌지 않습니다.
+  - **폼·대화상자 푸터 버튼 36** — `ConfirmDialog`·`FormModal`·`InfoModal`·`ActionFooter`(`WizardLayout` 푸터) 버튼이 `lg`(36px)입니다(전 `md` 32px, `InfoModal` 닫기는 `sm` 30px). 이 버튼들은 보이는 높이는 36px 그대로 두고 터치 영역을 세로로만 44px까지 넓힙니다. 세로로 쌓을 때(640px 미만 `FormModal`·`InfoModal`, gap 8px) 서로 겹치지 않습니다. 기본 `Button` 크기는 `md`(32px) 그대로이고 공개 API는 바뀌지 않았습니다.
+  - **`BulkActionBar` floating 라이브 영역** — floating pill도 inline 띠처럼 개수(와 `summary`)만 담은 `role="status"` 영역(`data-slot="bulk-action-bar-state"`)을 둡니다. actions·선택 해제·`trailing`은 영역 밖입니다. **같은 목록의 `DataTable`은 `announceSelection={false}`로 자체 안내를 끄세요.** 끄지 않으면 선택할 때마다 개수가 두 번 읽힙니다. 첫 선택(0→1)도 확실히 읽혀야 하면 `emptyHint`로 bar를 남겨 두세요. floating에서 `DataTable` 안내에 기대던 화면은 이제 bar가 `count`(앱이 넘기는 값)를 읽으므로, 불러오지 않은 행까지 포함한 선택 수도 그대로 읽힙니다.
+  - **포커스 복귀** — `FormModal`·`InfoModal`·`Sheet`·`SheetDrawer`가 닫힐 때 연 요소로 포커스를 돌려줍니다. 전에는 바깥 버튼으로 연(제어형) 경우 포커스가 `<body>`로 떨어졌습니다. `SheetContent`에 `onCloseAutoFocus`를 넘겨 `preventDefault()`를 부르면 포커스는 호출부가 정합니다.
+  - 화면 확인이 필요한 곳(앱): 모서리 6px을 전제로 맞춘 로컬 override·하드코딩 radius, 메뉴·팝오버·시트 그림자를 직접 덮은 곳, 대화상자 푸터 높이(36px)에 맞춘 레이아웃.
+
 ## 0.17.1
 
 ### Patch Changes