@olundot/ui 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,118 @@
 # @olundot/ui
 
+## 0.3.0
+
+### Minor Changes
+
+- 912ad93: Typography + density 토큰화 마이그레이션: `text-[13px]`→`text-body-sm`, `leading-[*]`→`leading-{tight,snug,normal,relaxed}`, 컨트롤 padding→`--pad-*` density 토큰. tailwind-merge에 custom font-size group 등록(text-body-\* 가 color utility와 충돌하던 footgun fix).
+
+### Patch Changes
+
+- Updated dependencies [912ad93]
+  - @olundot/tokens@0.8.0
+
+## 0.2.0
+
+### Minor Changes
+
+- 8e1b7bf: Form API 통합 (0.2.0) — Phase B 11 tasks.
+
+  **신규 컴포넌트 (additive):**
+
+  - `<Label>` primitive (Radix `react-label` 기반, `required` prop으로 `*` marker 자동, `formFieldLabelClassName` deprecated alias 1 cycle)
+  - `<Switch>` primitive (Radix `react-switch` 기반, `loading` state 포함 — spinner + aria-busy + 클릭 차단)
+  - `<RadioGroup>` 단순형 (Radix `react-radio-group` 기반, `RadioCardGroup` 카드형은 별도 유지)
+
+  **3 컴포넌트 API 확장 (additive — Input/Textarea/Select):**
+
+  - `size: "sm" | "md" | "lg"` 통일 prop (기존 `inputSize`/`textareaSize`/`selectSize`는 1 cycle deprecated alias)
+  - `fullWidth: boolean` (default `true` = 현행 동작 유지)
+  - `description?: ReactNode` 신규 슬롯 — 입력 전 hint (default state 시 노출, error/success 시 `message`로 swap)
+  - Select `appearance: "field" | "inline"` 별도 축 (selectVariant alias 1 cycle 유지 — `selectVariant="inline"` = `fullWidth={false} + appearance="inline"`)
+  - Select `clearable: boolean` + `clearLabel?: ReactNode` (내부 sentinel 처리, 사용처는 `value=""` 표준)
+
+  **Checkbox 확장 (additive):**
+
+  - `required: boolean` → label `*` marker 자동
+  - `error?: ReactNode` → description 자동 hide + role=alert + aria-invalid + aria-describedby
+
+  **FormField 책임 재정의 (visual change, API additive):**
+
+  - Function children (delegated mode): `controlProps`에 `description` + `message` + `state` forward. Input/Select/Textarea가 자체 slot 책임. FormField 자체 description/error 슬롯 미렌더.
+  - ReactNode children (raw legacy mode): FormField가 description/error 직접 렌더 (단순 native input fallback).
+
+  **Input/Textarea/Select 추가 fix (B1-B2 부수):**
+
+  - Input `disabled + state` 시각 우선순위 가드 추가 (textarea 정합)
+  - Input `readOnly + focus` ring 가드 추가 (textarea 정합)
+
+  **Migration:** `docs/migration/0.2.0-form-api.md` (deprecation timeline, grep checklist, visual regression checklist, before/after 코드 예제 포함).
+
+  **Caveat:**
+
+  - Input legacy `inputSize="sm"` (34px) → 신규 `size="md"` (38px, 보수 매핑 — 시각 회귀 방지)
+  - `selectVariant="inline"`은 `fullWidth={false}` 단독으로 완전 대체 불가 — `appearance="inline"` 별도 축 도입 (font-medium + min-w-[112px] + max-w-full 보존)
+  - FormField description 위치는 OLUN 단일 stack 패턴 (control 아래) — Input message slot과 일관 (GOV.UK 패턴 검토 후 거부)
+
+  **Visual/Layout changes (consumer 영향):**
+
+  - Checkbox 구조 재편 (option B): Root=box만, label 외부 sibling htmlFor (touch hit area 확장)
+  - Switch sizing arbitrary px (`h-[24px] w-[44px]`) — OLUN `--space-5/6` (40/48px) footgun 회피
+  - FormField label-group wrapper 추가 후 단일 stack 패턴으로 복귀 (description = control 아래, error 시 description 자동 hide)
+
+- be77d2e: Popover primitive 신설 + Dialog/Tabs/Tooltip 시각 보정 (0.3.0)
+
+  **신규 컴포넌트:**
+
+  - `<Popover>` primitive — Radix Popover wrap. 6 export (Root/Trigger/Anchor/Content/Arrow/Close). Modal=false 기본, Tooltip과 달리 interactive content 허용.
+
+  **Chip cursor affordance fix (R13-1):**
+
+  - `variant=filter|choice|removable` → `cursor-pointer` (interactive 3종 명시)
+  - `variant=status-filter` → `cursor-default` (정적 표시 chip — 클릭 affordance 없음)
+  - 배경: Tailwind v4 preflight + site reset이 `<button>` cursor를 보장하지 않아 사용자 라이브 검증에서 filter toolbar cursor 누락 발견. variant level에서 강제.
+
+  **Visual fix:**
+
+  - Dialog: DialogHeader `space-y-1.5 → space-y-[var(--space-1)]` (6→8px), DialogTitle `leading-none → leading-[1.35]` (font-base 정합)
+  - **DialogContent default padding 48 → 32px** (`p-6` → `p-[var(--space-4)]`) — PR3 Round 5. cbt-lms FormModal/InfoModal/InviteResultDialog 모두 자체 `className` override 사용으로 영향 0.
+  - Tabs: tabsTriggerVariants active `font-semibold → font-bold` (위계 강화), TabsContent에 `flex flex-col items-stretch justify-start gap-4 min-h-8` 기본 (16px gap + 32px min-h, 부모 가운데 정렬 차단). site fixture에서 보정하던 className이 package default로 흡수됨.
+  - **Tabs Badge active wash 제거 (R14 active-state doctrine)** — 활성 marker는 trigger의 underline + bold + `text-accent-fg`로 단일화. Badge는 metadata 역할로 환원 (`text-inherit`만 유지해 활성 시 부모 text-accent-fg 자동 적용). 이유: 동일 selected state에 underline + wash 둘 다 적용하면 (1) 시각 noise 증가 (2) light에서 wash hue family가 opaque accent와 갈라져 부조화 (R14 회귀, snapshot 검증). doctrine = 컴포넌트당 selected marker 하나 + 모드별 단일 hue family. `docs/components/Authoring-Guide.md#active-state-시각-언어-single-marker-single-hue-family` 참조.
+
+  **Card (R14):**
+
+  - **`CardProse` composition helper 신설** — `CardContent` 안에 다중 `<p>`/`<ul>`/`<ol>`을 둘 때 sibling 간 spacing(`var(--space-2)`)과 body typography(`text-sm leading-relaxed text-foreground`)를 자동 적용. import 추가 (`@olundot/ui`에서 `CardProse` 새 export).
+  - **`CardDescription` semantic 명시화** — JSDoc으로 "single semantic paragraph 한정" 명시. multi-paragraph/list body는 `CardContent > CardProse`가 정본. 이유: `<p>` 안에 nested `<p>`/`<ul>`은 HTML invalid이며, fixture에서 multi-line copy가 description에 박혀 spread되던 ambiguity 차단.
+  - **Tooltip default mobile click 지원 (uncontrolled 한정)** — `enableTouch` prop (default `true`). 내부 uncontrolled state + `TooltipTrigger`의 `onClick` 가로채 toggle하는 방식으로 Radix native touch gap 보완. **`open` prop 전달(controlled) 시 click toggle은 자동 비활성화** — 외부 `onOpenChange`와의 이중 toggle 방지가 의도된 계약. controlled에서 mobile click이 필요하면 consumer가 trigger의 `onClick`에서 `onOpenChange(!open)` 직접 호출. `enableTouch={false}` opt-out으로 uncontrolled에서도 desktop hover-only 강제 가능.
+
+  **Consumer impact:**
+
+  > **Context**: cbt-lms 모노레포는 olun-app으로 재구성 예정이므로 본 PR의 visible change는 사용처 측 직접 마이그레이션 부담 없음. 이하 영향은 향후 외부 consumer(또는 새 olun-app)가 본 0.3.0을 채택할 때 알아야 할 사항.
+
+  - **Dialog Title** 시각 위계 회복 (의도하지 않은 줄간격 축소가 본 버전부터 정상화)
+  - **DialogContent padding 32px로 축소** — `<DialogContent>` 사용처에서 자체 `className`/`p-*` override 중이면 영향 없음. 순수 `<DialogContent>` 직접 사용처만 padding이 32px로 변경됨. (cbt-lms는 FormModal/InfoModal/InviteResultDialog 모두 override 확인됨)
+  - **Tabs label** active `font-bold` 위계 강화 — `font-semibold` 기대하던 사용처는 시각 미세 변화 발생
+  - **TabsContent default class 추가** — `flex flex-col items-stretch justify-start gap-4 min-h-8` 자동 적용. cbt-lms `InvitePageTabs` 등 className 없이 쓰던 사용처도 동일 기본 적용 (의도된 visual consistency). 짧은 content 부모 가운데 정렬 차단. 자체 override가 필요하면 className으로 후속 merge 가능.
+  - **Tabs Badge active wash 제거** — 기존 active wash(bg/border/text)에 의존한 사용처는 시각 변화 발생 (badge는 항상 neutral pill, 활성 시 text-accent-fg만 inherit). filled badge 강조가 필요했다면 별도 컴포넌트로 분리 권장.
+  - **Badge brand variant** — `--accent-bg-strong`이 R14에서 olive alpha 14%로 muted됨. light에서 vivid olive 대신 **subtle olive wash**로 보임 (cbt-lms `OrgBrandingPanel`/`HeroSection` 등 사용처에서 visible change — 강조도 ↓).
+  - **Card `CardProse` 신규 export + `CardDescription` semantic 명시** — multi-paragraph body 표현이 `CardContent > CardProse`로 일원화. 기존에 multi-line/multi-paragraph copy를 `CardDescription`에 박았던 사용처는 마이그레이션 필요 (예: cbt-lms는 차후 olun-app 재구성 시 일괄).
+  - **Tooltip**: 기존 hover/focus 동작 보존. uncontrolled + `enableTouch=true`(default)에서 click 이벤트가 추가로 toggle. controlled로 쓰던 기존 consumer는 영향 없음 (click 동작 자체가 추가되지 않음 — `onOpenChange`만 그대로 호출). controlled+mobile click 조합이 필요했다면 consumer trigger에 `onClick={() => onOpenChange(!open)}` 추가 필요.
+
+  > 새 olun-app 도입 시점에서 위 항목을 visual smoke check 대상으로 사용.
+
+### Patch Changes
+
+- 8e1b7bf: Input: textarea와 정합되도록 두 가드 추가.
+
+  - **readOnly + focus 가드**: `read-only:focus:border-[var(--border-subtle)] read-only:focus:shadow-none` — readOnly Input이 focus될 때 olive ring이 들어와 편집 가능으로 오해되는 시각 회귀 차단. textarea.tsx:18에는 이미 적용된 가드.
+  - **disabled + state 시각 우선순위**: `disabled:data-[state=error/success]:border-subtle disabled:bg-disabled` 두 줄 — disabled가 error/success border/bg를 시각적으로 이김 (Authoring Guide의 상태 우선순위 정합). textarea.tsx:22-23, select.tsx:26-27에 이미 적용된 가드.
+
+  SSR markup 기반 회귀 테스트 7건 동반 추가 (input.test.tsx). API 변경 없음.
+
+- Updated dependencies [d5116ea]
+- Updated dependencies [be77d2e]
+  - @olundot/tokens@0.7.0
+
 ## 0.1.0
 
 ### Minor Changes