Featuring Design System
ChangelogComponents

0.1.9

Calendar/Dropdown/Menu 등 다수의 신규·마이그레이션 컴파운드 컴포넌트와 layer 평면화·Tag color·Checkbox/Radio Root 브레이킹을 포함합니다.

이번 릴리즈는 다수의 컴파운드 컴포넌트와 여러 갈래의 브레이킹을 포함합니다.

새 컴포넌트

  • Calendar — react-datepicker inline + Base UI Popover 호스팅 기반의 컴파운드 캘린더.
  • Dropdown — visual layer 컴파운드. 기존 Select가 이 위로 위임합니다.
  • MenuMenu.Action / Menu.Button / Menu.ItemCheckbox / Menu.ItemRadio 추가.
  • Label — Checkbox/Radio/Switch 공용 인라인 라벨.
  • Switch — sm / md / lg 3단계와 LabelContext 연동.
  • SectionMessage 신규.

컴파운드 마이그레이션

Tabs / Avatar / Select / Tooltip / TextArea / Field / TextInput / Modal / Pagination — Base UI 기반 컴파운드로 마이그레이션됩니다.

Breaking Changes — CSS layer 이름 평면화

@layer ft.components처럼 dot으로 감쌌던 sub-layer를 하이픈 평면 구조로 전부 교체합니다.

/* Before */
@layer ft.reset, ft.normalize, ft.components, ft.utilities;
/* After */
@layer ft-reset, ft-normalize, ft-components, ft-utilities;

Breaking — Tailwind v4 등 다른 layer 시스템과 interleave하기 위해 평면 이름으로 전환합니다. ft.* 레이어를 직접 참조하는 소비자 CSS가 있다면 ft-*로 수정해 주세요.

Breaking Changes — Tag color API rename

Tag.Root의 색상 API가 variant prop에서 color prop으로 변경됩니다. 함께 export 식별자도 정리됩니다.

/* Before */
<Tag.Root variant="primary">...</Tag.Root>
/* After */
<Tag.Root color="primary">...</Tag.Root>
BeforeAfter
Tag.Root variant propcolor prop
TagVariant (type)TagColor
tagVariantValuestagColorValues

Breaking<Tag.Root variant="..."> 사용처는 color로 교체해 주세요. TagVariant / tagVariantValues를 import한 코드는 TagColor / tagColorValues로 수정해 주세요.

Breaking Changes — Checkbox / Radio Root DOM 구조 변경

Checkbox.Root / Radio.Root가 native <label>에서 <span>으로 전환됩니다. Label 컴포넌트와 자유롭게 조합하기 위한 변경입니다.

Breaking — Root가 <label>이라고 가정하고 native form 자동 연결(클릭 위임)을 활용했거나, label.checkbox-root 같은 셀렉터로 스타일링한 코드는 깨질 수 있습니다. Label.Root를 명시적으로 조합해 주세요.

그 외

  • Typography 정형화 + body fontFamily 기본값 보강
  • 전 컴포넌트 size prop 반응형 전환 (recipe size → $css + resolveResponsive)
  • 내부 의존성 react-datepicker ^6.8.0^9.1.0 메이저 업그레이드. Calendar / CoreCalendar 동작에 영향이 있을 수 있습니다.
  • Theme switcher + CSS preset이 docs에 적용