# Changelog URL: https://seed-design.io/lynx/updates/changelog Source: https://github.com/daangn/seed-design/tree/dev/packages 최신 업데이트와 변경사항을 기록합니다. ## @seed-design/lynx-css ## 0.14.2 ### Patch Changes - (사용자 변경사항 없음) Bottom Sheet와 Menu Sheet의 maxHeightFraction 컴포넌트 변수를 생성 산출물에 추가합니다. 0201acc - Page Banner 닫기 버튼의 solid 톤 아이콘이 팔레트 색상을 직접 참조하던 문제를 수정합니다. 이제 Page Banner 본문과 같은 $color.fg.on-*-solid 토큰을 참조하며, 렌더링되는 색상은 바뀌지 않습니다. 594a7e1 ## 0.14.1 ### Patch Changes - $color.bg.neutral-solid-muted 와 $color.bg.neutral-solid-muted-pressed 를 deprecated로 표시합니다. 6ecd04e 기존 사용처의 하위 호환성을 위해 두 토큰과 이에 대응하는 CSS 변수를 유지하며, 각 패키지의 다음 major 버전에서 제거할 예정입니다. ## 0.14.0 ### Minor Changes - (BREAKING CHANGE: Badge의 기본 최대 너비로 긴 라벨을 말줄임하고 있었다면 최대 너비를 직접 지정해야 합니다.) Badge 스타일에 Prefix와 Action을 추가하고 기본 최대 너비를 제거합니다. 19ecbd6 Badge 스타일에 prefix , action slot( .seed-badge__prefix , .seed-badge__action )을 추가합니다. Badge에 기본으로 적용되던 최대 너비( size="medium" 7.5rem, size="large" 6.75rem)를 제거합니다. - Solid 배경 위에 쓰는 전경색 토큰을 추가하고, SEED 컴포넌트가 이 토큰을 사용하도록 변경합니다. d3edadf $color.fg.on-brand-solid , $color.fg.on-critical-solid , $color.fg.on-informative-solid , $color.fg.on-neutral-solid , $color.fg.on-positive-solid , $color.fg.on-warning-solid 를 추가합니다. Solid 배경을 사용하는 컴포넌트가 팔레트 색상이나 $color.fg.neutral-inverted 대신 새 전경색 토큰을 참조하도록 변경합니다. 기존과 값이 같아 화면은 그대로이며, Action Button variant="neutralSolid" 의 로딩 인디케이터 색만 다크 모드에서 달라집니다. $color.fg.neutral-inverted 는 기존 사용처의 하위 호환성을 위해 deprecated 상태로 유지하며, 각 패키지의 다음 major 버전에서 제거할 예정입니다. - SEED 컴포넌트가 $color.bg.neutral-inverted 대신 같은 값의 $color.bg.neutral-solid 를 사용하도록 변경하고, $color.bg.neutral-inverted 와 $color.bg.neutral-inverted-pressed 를 deprecated로 표시합니다. 5e34f78 @seed-design/react 의 Date Picker를 포함한 기존 사용처는 같은 색상 값을 가진 $color.bg.neutral-solid 를 사용합니다. 기존 사용처의 하위 호환성을 위해 $color.bg.neutral-inverted , $color.bg.neutral-inverted-pressed 와 이에 대응하는 CSS 변수를 유지하며, 각 패키지의 다음 major 버전에서 제거할 예정입니다. - (BREAKING CHANGE: $color.bg.layer-fill 을 같은 값의 $color.bg.neutral-muted 로 교체해야 합니다.) deprecated 상태였던 $color.bg.layer-fill 을 제거하고 같은 값의 $color.bg.neutral-muted 를 추가합니다. 66c3bd9 $color.bg.neutral-muted 는 라이트 모드에서 gray-100 , 다크 모드에서 gray-200 으로, 기존 $color.bg.layer-fill 과 값이 같습니다. --seed-color-bg-layer-fill 을 --seed-color-bg-neutral-muted 로, vars.$color.bg.layerFill 을 vars.$color.bg.neutralMuted 로 교체하세요. CSS 변수를 직접 쓴 코드나 bg="bg.layerFill" 같은 style prop 값은 에러 없이 배경색만 사라지므로 문자열로 검색해 확인하세요. - (BREAKING CHANGE: $color.bg.neutral-solid 를 직접 사용하는 화면에서 라이트·다크 모드의 배경색과 전경색 대비를 확인해야 합니다.) Neutral Solid 배경 색상과 이를 사용하는 컴포넌트 스타일을 변경합니다. ebdc295 $color.bg.neutral-solid 를 라이트 모드에서는 gray-1000 에서 gray-900 으로, 다크 모드에서는 gray-300 에서 gray-1000 으로 변경합니다. 눌린 상태에 사용할 $color.bg.neutral-solid-pressed 를 추가합니다. Neutral Solid 스타일을 사용하는 컴포넌트가 $color.bg.neutral-solid 와 $color.bg.neutral-solid-pressed 를 참조하도록 변경합니다. - 표면과 같은 색상의 $color.bg.neutral-subtle 토큰을 추가합니다. 66c3bd9 라이트 모드에서 gray-00 , 다크 모드에서 gray-100 을 사용하며, 회색 표면 위에서 주변과 구분되는 영역에 사용합니다. Tailwind에서는 bg-neutral-subtle 색상으로 사용할 수 있습니다(예: bg-bg-neutral-subtle ). - (사용자 변경사항 없음) deprecated 컴포넌트인 Control Chip과 Inline Banner의 내부 컴포넌트 변수를 제거합니다. 19ecbd6 ### Patch Changes - (사용자 변경사항 없음) 내부에서 사용하는 Popover 컴포넌트 변수를 추가합니다. 78f0bc1 ## 0.13.0 ### Minor Changes - Top Navigation 높이를 iOS·Android 모두 56px로 통일합니다. theme=cupertino App Bar와 App Screen의 높이가 44px에서 56px로 바뀝니다. cb4c4a1 ## 0.12.1 ### Patch Changes - Lynx의 기본 rem 기준 차이로 간격과 글자 크기가 웹보다 작게 표시되던 문제를 수정합니다. 공통 base 스타일의 root font-size 를 16px로 설정합니다. 6288304 ## 0.12.0 ### Minor Changes - Lynx에 Attachment Field와 Attachment Display Field를 추가합니다. 호스트 네이티브 파일 선택 연동, 파일 검증, 업로드 상태 표시와 첨부 항목 관리를 지원합니다. fa699aa - Dialog와 Alert Dialog 컴포넌트를 추가합니다. fa699aa Dialog와 Alert Dialog 콘텐츠는 열릴 때 opacity와 scale 애니메이션을 제공하고, 닫힐 때 opacity로 사라집니다. Alert Dialog는 중요한 작업에 대한 사용자 확인 흐름을 제공하며 기본적으로 backdrop 탭으로 닫히지 않습니다. - Lynx에 Skeleton 컴포넌트를 추가합니다. fa699aa radius , tone , width , height 로 형태와 크기를 조절할 수 있습니다. - Lynx용 FloatingActionButton 컴포넌트를 추가합니다. extended 로 라벨 표시와 버튼 형태를 전환할 수 있습니다. fa699aa - Lynx 플랫폼에 Chip Tabs 컴포넌트를 추가합니다. fa699aa - Lynx에 IdentityPlaceholder 컴포넌트를 추가합니다. 사람과 매장 도형은 기존 SVG에서 변환한 640×640 WebP 이미지로 제공합니다. fa699aa - Lynx에서 Quantity Picker의 수량 증감, 개별 로딩, 삭제 전환, 레이아웃과 값 포매팅을 사용할 수 있도록 컴포넌트와 스타일을 추가합니다. fa699aa - Lynx 플랫폼에 단일·다중 선택을 지원하는 Select 컴포넌트를 추가합니다. fa699aa - Lynx에 ContextualFloatingButton 컴포넌트를 추가합니다. fa699aa solid , layer 변형과 텍스트·아이콘 전용 레이아웃을 지원합니다. 눌림 피드백, 로딩 표시와 비활성 상태를 제공합니다. - Lynx에서 사용할 수 있는 HelpBubble 컴포넌트를 추가합니다. fa699aa - Lynx AppBar 아이콘 버튼의 슬롯 양쪽 여백을 React와 같은 규칙으로 자동 보정합니다. fa699aa 왼쪽·오른쪽 슬롯 모두 첫 자식이 아이콘 버튼이면 왼쪽, 마지막 자식이 아이콘 버튼이면 오른쪽 여백을 보정합니다. 버튼 하나는 양쪽을 보정하며, 44px 터치 영역은 유지합니다. Fragment와 조건부 자식을 지원하며, edge="leading" | "trailing" | "both" 으로 자동 보정 방향을 덮어쓸 수 있습니다. 커스텀 슬롯의 배치와 기존 사용자 스타일을 유지합니다. - Lynx에 Slider 컴포넌트를 추가합니다. 터치 드래그, 다중 범위, 단계·허용값, RTL, 값 표시와 접근성 레이블을 지원합니다. fa699aa - React·Rootage 명세에 맞춰 Lynx 컴포넌트의 Scale Feedback과 배경색 전환을 보완하고, List를 처음 누를 때 모서리 형태가 바뀌는 문제를 수정합니다. fa699aa 컴포넌트별 Feedback 변경 사항은 다음과 같습니다. AppBar.IconButton : 버튼 전체에 Scale Feedback을 추가합니다. ReactionButton : 고정 축소율을 공통 Scale Feedback으로 교체하고, 선택 상태의 배경색 전환과 비활성·로딩 상태의 Feedback 처리를 보완합니다. InputButton : 내용 영역에 Scale Feedback과 버튼 배경색 전환을 추가하고, ClearButton 에는 독립적인 Scale Feedback을 추가합니다. List.ButtonItem , List.CheckboxItem , List.RadioItem , List.SwitchItem : 내용 영역에 공통 Scale Feedback을 연결하고, 누름 배경이 처음부터 둥근 모서리를 유지하도록 수정합니다. 내부 선택 컨트롤이 중복으로 축소되지 않도록 처리합니다. Menu.Item : 내용 영역에 Scale Feedback을 추가하고, 누름 배경 Feedback을 보완합니다. SwipeableMenuSheet.Item , SwipeableMenuSheet.CloseButton : 항목의 내용 영역과 닫기 버튼 전체에 각각 Scale Feedback을 추가하고, 누름 배경 Feedback을 보완합니다. PageBanner : 상호작용 가능한 배너의 내용 영역에 Scale Feedback을 추가하고, 내부 Button · CloseButton 의 Feedback이 배너의 Feedback과 독립적으로 동작하도록 보완합니다. Callout.CloseButton : 누름 상태의 배경색과 배경색 전환을 추가합니다. ## 0.11.1 ### Patch Changes - CSS 로드 순서에 따라 AppBar·Callout 등 Recipe 아이콘의 크기와 색상이 공통 스타일에 덮어써지는 문제를 수정합니다. b956124 ## 0.11.0 ### Minor Changes - Lynx Field Button 컴포넌트를 추가합니다. 6201bcb npx @seed-design/cli@latest add ui:field-button 로 Registry 컴포넌트를 설치할 수 있습니다. - Lynx 컴포넌트에 누르는 동안 요소가 축소되는 Scale Feedback을 추가합니다. 2c3a308 Action Button Chip Callout Tabs Accordion Checkbox Radio Group Switch Page Banner의 Button·Close Button Select Box Segmented Control ScaleFeedback 컴포넌트와 useScaleFeedback 훅을 제공합니다. 요소 전체를 축소하는 Self Scale과 내부 콘텐츠만 축소하는 Content Scale을 구성할 수 있습니다. mergeProps 유틸을 추가하고 컴포넌트의 props 합성에 적용합니다. 사용자 이벤트와 ref를 내부 동작과 함께 보존하며, Main Thread와 Background Thread의 실행 경계를 유지합니다. 최소 지원 버전은 Lynx Engine 3.9입니다. - Lynx에서 Reaction Button과 Count 컴포넌트를 사용할 수 있도록 추가했습니다. 3a66eeb - Lynx 플랫폼에 Menu 컴포넌트를 추가합니다. f8db24a - Lynx용 SwipeableMenuSheet 컴포넌트를 추가합니다. 441a22e npx @seed-design/cli@latest add ui:swipeable-menu-sheet 로 Registry 컴포넌트를 설치할 수 있습니다. - Lynx 컴포넌트의 pressed 색상 피드백을 개선합니다. 50c7e53 기존 Background Thread의 상태 갱신에 의존하던 pressed 색상 반응을 Main Thread의 :active 기반으로 개선하고, React와 동일한 색상 transition을 적용합니다. 짧은 탭에서도 색상 피드백이 빠르게 시작됩니다. disabled·loading 상태의 입력 제한과 기존 pressed 상태 처리는 유지합니다. - List 컴포넌트의 Lynx 버전을 추가합니다. ce7fcfe 정적, 버튼, Checkbox, Radio, Switch 목록 항목과 ListHeader 를 제공합니다. npx @seed-design/cli@latest add ui:list 로 Registry 컴포넌트를 설치할 수 있습니다. ### Patch Changes - Lynx Checkbox에서 컨트롤과 라벨의 세로 정렬이 어긋나던 문제를 수정합니다. 02c08d0 ## 0.10.2 ### Patch Changes - Lynx TextField 의 placeholder가 활성 및 비활성 상태에 맞는 색상 토큰을 사용하도록 수정합니다. 7b6479f ## 0.10.1 ### Patch Changes - Lynx에서 시스템 테마를 전환한 뒤 semantic 색상과 아이콘 tint가 이전 테마 색상으로 남는 문제를 수정합니다. be66559 ## 0.10.0 ### Minor Changes - Lynx에 PageBanner 컴포넌트를 추가합니다. b618d5c npx @seed-design/cli@latest add ui:page-banner 로 Registry 컴포넌트를 설치할 수 있습니다. - Lynx용 Select Box 컴포넌트를 추가합니다. 9070482 Checkbox와 Radio Group 방식의 선택형 카드, 다열 배치, 선택 상태에 따른 Footer 표시를 지원합니다. 표준 멀티컬러 아이콘을 자동으로 감지해 원본 색상을 유지합니다. 자동 감지되지 않는 아이콘은 multicolor 옵션으로 지정할 수 있습니다. - Lynx Notification Badge 컴포넌트를 추가합니다. 174a5a1 @seed-design/lynx-react 에서 NotificationBadge 와 NotificationBadgePositioner 를 사용할 수 있습니다. @seed-design/lynx-css/recipes/notification-badge 와 notification-badge-positioner 에서 스타일 Recipe를 제공합니다. - Lynx용 Segmented Control 컴포넌트를 추가합니다. 0939477 npx @seed-design/cli@latest add ui:segmented-control 로 Registry 컴포넌트를 설치할 수 있습니다. - $gradient.fade-mask 토큰을 추가하고, ScrollFog의 fog 마스크를 easing 그라데이션으로 개선합니다. 45b827b $gradient.fade-mask ( --seed-gradient-fade-mask )를 추가합니다. 콘텐츠를 부드럽게 가리는 마스크용 불투명도(alpha) easing 곡선이며, 라이트/다크 테마에서 동일합니다. ScrollFog의 가장자리 페이드가 기존 선형 2단계에서 16단계 easing 곡선으로 바뀌어 더 부드럽게 표현됩니다. ScrollFog spec의 fromColor / toColor 프로퍼티가 gradient 하나로 대체됩니다. - Lynx용 MannerTemp , MannerTempEmote , MannerTempBadge 컴포넌트를 추가합니다. dd99afe ### Patch Changes - 컴포넌트 vars의 gradient가 문자열 대신 { serialized, stops? } 객체로 제공됩니다. 8a8ab80 serialized : 기존과 동일한 CSS gradient 문자열입니다. linear-gradient(88deg, ${vars.toneMagic.enabled.root.gradient.serialized}) 처럼 사용합니다. stops : { color, position } 배열로, position이 0~1 원본 값이라 stop마다 calc() 로 위치를 계산하는 등 동적으로 다룰 수 있습니다. 테마별로 값이 다른 gradient에는 제공되지 않습니다. 생성되는 CSS는 이전과 동일합니다. ## 0.9.3 ### Patch Changes - Lynx Radio Group 에서 라디오 표시와 라벨의 상단 여백이 적용되지 않아 수직 정렬이 어긋나던 문제를 수정합니다. 55103a6 ## 0.9.2 ### Patch Changes - Lynx Callout 닫기 버튼의 크기와 여백이 적용되지 않는 문제를 수정합니다. 059f299 - Android Lynx에서 Chip의 한글 라벨이 세로 중앙에서 위로 치우쳐 보이는 문제를 수정합니다. 88fd4be ## 0.9.1 ### Patch Changes - Lynx Tabs의 Indicator 위치를 수정합니다. f3755b4 Android에서 선택한 탭으로 Indicator가 이동하지 않는 문제를 수정합니다. triggerLayout="hug" 에서 Indicator가 List의 좌측 gutter와 어긋나는 문제를 수정합니다. ## 0.9.0 ### Minor Changes - Lynx에 Callout 컴포넌트를 추가합니다. ff225ee neutral , informative , positive , warning , critical , magic tone을 지원합니다. actionable 및 controlled/uncontrolled dismiss 동작을 지원합니다. npx @seed-design/cli@latest add ui:callout 로 Registry 컴포넌트를 설치할 수 있습니다. - Lynx용 Accordion 컴포넌트를 추가합니다. bd5cd3b controlled 및 uncontrolled 상태와 단일·다중 펼치기를 지원합니다. 콘텐츠 높이를 측정해 펼치고 접을 때 height transition을 적용합니다. inline , separated variant와 medium , large size를 제공합니다. Trigger에 펼침 상태와 비활성 상태를 전달하는 Lynx 접근성 속성을 제공합니다. - Lynx용 Tabs 컴포넌트를 추가합니다. 6f6c626 탭 선택과 콘텐츠 좌우 스와이프를 지원합니다. 제어형·비제어형 상태, disabled 탭, 균등·콘텐츠 기반 너비, 이동하는 Indicator를 제공합니다. Tabs.Root , Tabs.List , Tabs.Trigger , Tabs.Content , Tabs.Carousel API로 구성할 수 있습니다. - Lynx Checkbox의 ghost 상태 전환을 안정화합니다. ca0931b 선택 해제 시 배경이 순간적으로 어두워지는 현상을 수정합니다. 선택 상태가 변경될 때 아이콘 색상이 즉시 반영되도록 개선합니다. @seed-design/lynx-react 와 @seed-design/lynx-css 를 함께 업데이트해야 합니다. - Snackbar의 최대 너비를 464px로 맞춥니다. 5088420 넓은 뷰포트에서 스낵바가 560px까지 늘어나지 않고 464px에서 멈춥니다. 464px보다 좁은 화면에서는 기존과 동일하게 화면을 채웁니다. Sheet 계열의 최대 너비 480px에서 좌우 8px씩을 뺀 값이라, 스낵바가 시트 위에 떴을 때 시트 가장자리와의 여백이 생깁니다. - Bottom Sheet의 content 최대 너비를 480px로 맞춥니다. aef119e 넓은 뷰포트에서 시트가 화면 폭 전체로 늘어나지 않고 480px에서 멈추며 가운데 정렬됩니다. 480px보다 좁은 화면에서는 기존과 동일하게 화면을 채웁니다. BottomSheetContent 가 시트를 왼쪽에 고정하던 인라인 left 값을 풀어, 폭이 제한됐을 때 좌우 여백이 같게 배치됩니다. style 로 left 를 직접 지정하면 그 값이 우선합니다. ### Patch Changes - Select Box와 variant="separated" Accordion Item의 border 색을 $color.stroke.neutral-muted 에서 $color.stroke.neutral-weak 로 변경합니다. 07076a3 Select Box는 enabled와 disabled 상태의 border 색이 함께 바뀝니다. selected 상태의 $color.stroke.neutral-contrast 는 그대로입니다. Accordion은 border를 가진 variant="separated" 만 영향을 받습니다. variant="inline" 의 divider 색은 그대로입니다. border 색이 light 테마에서 #00000010 (알파 6%) → #dcdee3 , dark 테마에서 #ffffff17 (알파 9%) → #393d46 으로 바뀌어 또렷해집니다. 두 테마 모두 색이 있는 배경 위에 올려 쓰던 화면은 대비를 확인해 주세요. - Pagination과 Table Pagination을 추가합니다. f73ee94 usePagination 은 controlled·uncontrolled 상태, 페이지 범위 계산과 이전·다음 이동을 제공합니다. useTablePagination 은 전체 개수를 아는 경우와 모르는 경우를 모두 지원합니다. Pagination은 전체 페이지가 0개 또는 1개이면 표시하지 않습니다. ui:pagination , ui:table-pagination snippet으로 설치할 수 있습니다. 표시 문구와 접근성 이름을 앱 언어에 맞게 수정할 수 있습니다. ```sh npx @seed-design/cli@latest add ui:pagination npx @seed-design/cli@latest add ui:table-pagination ``` - Help Bubble 및 Help Bubble Tooltip에 기본 최대 너비 280px 을 추가합니다. f12cf1d 좌우 padding을 포함한 말풍선 전체 폭이 280px 가 되도록 content 에 box-sizing: border-box 를 추가합니다. 최대 너비 제한을 제거하려는 경우 contentProps 를 통해 maxWidth="none" 을 지정할 수 있습니다. ## 0.8.1 ### Patch Changes - iOS Lynx에서 ProgressCircle 의 색상이 표시되지 않는 문제를 수정합니다. 21aa395 ## 0.8.0 ### Minor Changes - Lynx 입력 폼 컴포넌트를 추가합니다. ebb4eae Field , TextField , KeyboardAvoidingScrollView 를 제공합니다. TextField.Input 과 TextField.Textarea 에서 native 입력, controlled value, grapheme 단위 글자 수 제한을 지원합니다. TextField.Textarea 는 내용에 따른 자동 높이 조절을 지원합니다. KeyboardAvoidingScrollView 는 focus된 입력과 Field footer가 키보드에 가려지지 않도록 스크롤합니다. npx @seed-design/cli@latest add ui:text-field 로 조합된 snippet을 설치할 수 있습니다. ```tsx ``` ### Patch Changes - Date Picker에서 시작일을 유지하고 종료일만 변경할 수 있는 기능을 추가합니다. ebb4eae selectionMode="range" 에서 rangeStartReadOnly prop을 사용할 수 있습니다. 시작일보다 늦은 날짜만 새 종료일로 선택할 수 있습니다. 읽기 전용 시작일의 시각적 상태와 접근성 이름을 제공합니다. ```tsx ``` ## 0.7.0 ### Minor Changes - DatePicker 컴포넌트를 추가합니다. c9acaa6 Single, Range, Multiple 선택 모드를 지원합니다. Month, Two Months, Week, Continuous 레이아웃을 각각 DatePicker , TwoMonthDatePicker , WeekDatePicker , ContinuousDatePicker 로 제공합니다. 날짜 constraints와 예약·가격 표시를 위한 renderDateCellSupplement , 내부 콘텐츠 전체를 교체하는 renderDateCellContent 를 제공합니다. actionsRef 를 통해 특정 날짜로 이동하거나 날짜 셀에 포커스할 수 있습니다. locale 기반 달력, 키보드·스크린 리더 접근성, Wheel Picker를 이용한 월·연도 이동을 지원합니다. - TimePicker 컴포넌트를 추가합니다. c9acaa6 12시간제 시간 선택 UI와 locale에 따른 컬럼 순서를 지원합니다. minuteStep 으로 선택 가능한 분 간격을 설정할 수 있습니다. ## 0.6.0 ### Minor Changes - 트리거를 눌러 열리는 목록에서 값을 선택하는 Select 컴포넌트를 추가합니다. 4dad2e9 multiple 로 다중 선택을, SelectGroup 으로 옵션 그룹과 그룹 라벨을 지원합니다. 키보드 탐색을 지원하며, size · disabled · readOnly · invalid 상태를 제공합니다. label , description , errorMessage 로 Field와 연동되고, name 으로 폼 제출 값의 키를 지정합니다. ```tsx ``` - 기존 Alert Dialog와 별개로, 범용 Dialog와 ResponsiveDialog를 추가합니다. 6ba7292 Dialog : medium , large size를 지원하며, 본문이 길면 Body가 스크롤되고 상단에 divider와 하단 fade가 나타납니다. ResponsiveDialog : md 이상에서는 Dialog로, 그 아래에서는 Bottom Sheet로 렌더링합니다. ui:dialog , ui:responsive-dialog snippet으로 설치할 수 있습니다. ```tsx 열기 {/* ... */} 취소 확인 ``` - QuantityPicker 컴포넌트를 추가합니다. 19f07f5 지정한 최소·최대 수량 범위에서 값을 증감할 수 있으며, 최소 수량에서 제거 동작을 지원합니다. size , disabled , readOnly , invalid , 증감 중 loading 상태를 지원합니다. 폼 제출에 사용할 수 있는 QuantityPicker.HiddenInput 을 제공합니다. ui:quantity-picker snippet으로 설치할 수 있으며, @seed-design/css@^2.3.0 을 사용합니다. ```tsx } /> } /> ``` ## 0.5.1 ### Patch Changes - 라이선스를 Apache-2.0으로 명시했습니다. 기존에는 license 필드가 비어 있어 저장소 루트의 Apache License 2.0과 일치하지 않았고, 배포물에 LICENSE 와 NOTICE 가 포함되지 않아 이용 조건을 확인할 수 없었습니다. 270c93d 당근 로고를 비롯한 브랜드 리소스는 별도 가이드라인을 따르며, 당근을 사칭하거나 당근 서비스와 관련이 있는 것처럼 오인하게 하는 사용은 허용되지 않습니다. 자세한 내용은 NOTICE 파일을 참고해주세요. - (사용자 변경사항 없음) Side Panel 닫기 버튼 spec에서 사용되지 않던 pressed 상태의 icon 색상 정의를 제거합니다. 09e28ef - Slider disabled 상태에서 track(비활성 구간) 색상을 bg.disabled 로 지정해, range(활성 구간)와의 색상 대비가 명확히 보이도록 수정합니다. 6963994 ## 0.5.0 ### Minor Changes - Action Button의 pressed 상태에 scale 모션을 추가합니다. f523979 pressed 상태에 적절한 모션 피드백을 제공하기 위해 사용하는 $scale.s95 , $scale.s97 , $scale.s98 토큰을 추가합니다. scale 토큰은 플랫폼 별 동작 줄이기 설정에 따라 값이 1 로 동작합니다. 웹 CSS 환경에서는 (prefers-reduced-motion: reduce) 미디어 쿼리가 매치되는 환경에서 1 로 동작합니다. Tailwind 유틸리티 클래스 scale-s* 를 통해 scale 토큰을 사용할 수 있습니다. 신규 토큰을 사용할 수 있도록 Tailwind 패키지의 @seed-design/css peerDependency 범위를 ^2.1.0 에서 ^2.2.0 으로 올립니다. ## 0.4.1 ### Patch Changes - ImageFrameReactionButton root에 반투명 배경색과 그림자를 추가하여 밝은 이미지 위에서의 가시성을 개선합니다. 7224b94 - Side Panel Close Button 및 Side Panel Header의 스타일을 디자인 스펙에 맞게 수정하고, Side Panel body에 box-sizing: border-box 를 적용하여, body에 지정한 height / minHeight / maxHeight 가 padding을 포함해 계산되도록 수정합니다. c4ce431 ## 0.4.0 ### Minor Changes - $color.bg.layer-fill 토큰을 다시 추가합니다. f2b198d 2.0.0 에서 제거했으나 마땅한 대체 토큰이 없어 deprecated 상태로 되살립니다. 값은 제거 이전과 동일합니다. 추후 동일한 값의 새 이름 토큰으로 대체된 뒤 3.0.0 에서 제거될 예정입니다. @seed-design/tailwind3-plugin 과 @seed-design/tailwind4-theme 의 @seed-design/css peer dependency 버전 범위를 ^2.1.0 으로 올립니다. ## 0.3.0 ### Minor Changes - Attachment Field 관련 컴포넌트를 추가합니다. 555525a Attachment Field: 파일을 선택하거나 드래그 앤 드롭으로 직접 업로드할 때 사용합니다. Attachment Display Field: 외부 소스에서 URL로 제공된 미디어를 표시·관리할 때 사용합니다. - 신규 타이포그래피 토큰을 추가합니다. d1a8d7c 폰트 크기 토큰 ( $font-size ) t11 , t11-static t12 , t12-static t13 , t13-static t14 , t14-static 줄 간격 토큰 ( $line-height ) t11 , t11-static t12 , t12-static t13 , t13-static t14 , t14-static 텍스트 스타일 ( textStyle ) t8Regular , t8Medium , t8StaticRegular , t8StaticMedium t9Regular , t9Medium , t9StaticRegular , t9StaticMedium t10Regular , t10Medium , t10StaticRegular , t10StaticMedium t11Regular , t11Medium , t11Bold , t11StaticRegular , t11StaticMedium , t11StaticBold t12Regular , t12Medium , t12Bold , t12StaticRegular , t12StaticMedium , t12StaticBold t13Regular , t13Medium , t13Bold , t13StaticRegular , t13StaticMedium , t13StaticBold t14Regular , t14Medium , t14Bold , t14StaticRegular , t14StaticMedium , t14StaticBold - Menu 컴포넌트를 추가합니다. 69e3b97 Drawer를 연 뒤 Drawer 뒤 요소에 포커스가 남아 있는 문제를 수정합니다. Drawer가 열리는 경우 Drawer.Content 에 자동으로 포커스가 이동합니다. Drawer.RootProps 의 autoFocus 기본값을 false 에서 true 로 변경합니다. 스크린 리더가 modal=true (기본값)인 Dialog 및 Drawer 뒤 요소를 읽을 수 있는 문제를 수정합니다. Dialog(AlertDialog, MenuSheet)와 Drawer(BottomSheet)를 @radix-ui/react-dismissable-layer 에서 자체 useDismissibleLayer 훅 기반으로 리팩터링하고 불필요하게 외부로 노출되던 내부 옵션들을 제거합니다. DialogRoot 및 DrawerRoot 의 onOpenChange 두 번째 인자 details.reason 이 interactOutside 인 경우 details.event 의 타입을 PointerEvent | FocusEvent 에서 PointerEvent | TouchEvent | FocusEvent 로 변경합니다. DialogRoot 및 DrawerRoot 두 번째 인자 details 의 reason 으로 cascadeDismiss 를 추가합니다. 두 개 이상의 오버레이 컴포넌트를 표시한 상황에서 하위 컴포넌트가 dismiss되는 경우 상위 컴포넌트는 cascadeDismiss 와 함께 onOpenChange 가 호출됩니다. @seed-design/react 패키지에서 @radix-ui/react-dialog 의존성을 제거합니다. - Chip Tabs Trigger가 disabled 상태일 때 opacity를 사용하여 스타일을 조절하도록 수정합니다. 57e4f1a - 컴포넌트 및 파운데이션 전반에 JSDoc 주석을 강화합니다. 270b277 ## 0.2.1 ### Patch Changes - deprecated 항목의 제거 예정 버전 안내를 1.3.0에서 2.0.0으로 변경합니다. 234e8c7 ImageFrame 의 rounded 옵션, Switch / Checkbox / ChipTabs 의 deprecated 옵션, 유틸리티 스타일 prop( display , flexDirection , justifyContent , alignItems )의 deprecated 값의 제거 예정 버전을 2.0.0으로 안내합니다. $color.bg.layer-fill , $gradient.fade-layer-floating , $gradient.fade-layer-default 토큰의 제거 예정 버전을 2.0.0으로 안내합니다. 2.0.0부터 deprecated 항목 제거를 포함한 breaking change는 메이저 릴리스에서만 수행됩니다. ## 0.2.0 ### Minor Changes - Lynx AppBar 컴포넌트를 추가합니다. c8d4c26 AppBar.Root , AppBar.Left , AppBar.Main , AppBar.Right , AppBar.IconButton 등 compound API를 제공합니다. SystemInfo.platform 에 따라 Android에서는 android , 그 외 플랫폼에서는 cupertino theme을 기본으로 적용합니다. theme prop으로 platform 기본값을 수동 override할 수 있습니다. - Lynx Badge 컴포넌트를 추가합니다. 26d3517 @seed-design/lynx-react 에서 Badge 를 직접 import해 사용할 수 있습니다. @seed-design/lynx-css/recipes/badge 에서 Badge recipe 스타일을 제공합니다. ```tsx import { Badge } from "@seed-design/lynx-react"; 거래 가능 ; ``` ### Patch Changes - Lynx BottomSheet가 앱 셸 위에 안정적으로 표시되고, 본문 스크롤 제스처를 내부에서 처리하도록 개선합니다. 4e2ee69 BottomSheet overlay의 기본 z-index 를 높여 앱바 같은 상단 영역까지 backdrop이 덮이도록 수정합니다. BottomSheetBody 가 세로 스크롤 영역으로 렌더링되어 본문을 스크롤할 때 뒤쪽 화면이 함께 스크롤되는 문제를 방지합니다. 스크롤 가능한 BottomSheet에서는 BottomSheetRoot 의 handleOnly 를 함께 사용할 수 있습니다. BottomSheet handle의 드래그 target size를 보이는 handle보다 크게 보장합니다. - Menu Sheet의 디자인 스펙에서 핸들 여백 확보를 위해 content 상단 패딩을 x4 → x6 으로 늘리고 header.paddingTop 을 제거합니다 (핸들 여백 확보). React/CSS MenuSheet 의 경우 핸들이 존재하지 않으므로 변경사항이 없습니다. 8dc8f4f - Lynx에서 테마(라이트/다크) 전환 시 텍스트 색상이 갱신되지 않던 문제를 수정합니다. 0fa9a1f ## 0.1.0 ### Minor Changes - SEED Design Lynx의 첫 stable 버전을 릴리즈합니다. 699af2c @seed-design/lynx-css : Lynx 환경에서 사용할 수 있는 SEED 디자인 토큰, base CSS, component recipe CSS를 제공합니다. @seed-design/lynx-react : Lynx용 SEED React 컴포넌트와 hook을 제공합니다. 컴포넌트: ActionButton , BottomSheet , Box , Checkbox , HStack , ProgressCircle , RadioGroup , Switch , TagGroup , Text , VStack Hook: useControllableState , useIconColor , usePressTap , useSafeArea Safe Area: useSafeArea API로 env(safe-area-inset-*) 와 host 앱의 lynx.__globalProps fallback을 함께 지원합니다. @seed-design/cli : Lynx framework 감지, registry snippet 추가, compatibility check, docs lookup 흐름을 지원합니다. --- ## @seed-design/lynx-react ## 0.10.0 ### Minor Changes - (BREAKING CHANGE: @seed-design/lynx-react 에서 가져온 <Badge> 와 BadgeProps 를 ui:badge snippet의 Badge 와 BadgeProps 로 교체해야 합니다. npx @seed-design/cli@latest add ui:badge 로 snippet을 설치한 뒤 import를 바꾸세요.) Badge에 아이콘을 표시하는 Prefix와 정보 아이콘 버튼을 표시하는 Action을 추가하고, 완성된 Badge를 snippet으로 제공합니다. 19ecbd6 Badge 는 JSX 컴포넌트가 아니라 Badge.Root , Badge.Prefix , Badge.Label , Badge.Action 으로 구성된 namespace로 바뀌며, BadgeProps export를 제거합니다. snippet의 Badge 에는 라벨을 children 으로 전달하며, 기존 tone , variant , size 를 그대로 사용할 수 있습니다. prefix 에 아이콘 요소를 바로 전달할 수 있습니다. actionProps 를 전달하면 고정된 정보 아이콘 버튼을 표시합니다. actionProps 에 accessibility-label 과 bindtap 을 전달해 동작을 연결할 수 있으며, prefix 와 함께 사용할 수 있습니다. Badge에 기본으로 적용되던 최대 너비를 제거합니다. 한 줄 말줄임이 필요하다면 최대 너비를 직접 지정하세요. ### Updated Dependencies - **@seed-design/lynx-css@0.14.0** - [Minor Changes] (BREAKING CHANGE: Badge의 기본 최대 너비로 긴 라벨을 말줄임하고 있었다면 최대 너비를 직접 지정해야 합니다.) Badge 스타일에 Prefix와 Action을 추가하고 기본 최대 너비를 제거합니다. 19ecbd6 Badge 스타일에 prefix , action slot( .seed-badge__prefix , .seed-badge__action )을 추가합니다. Badge에 기본으로 적용되던 최대 너비( size="medium" 7.5rem, size="large" 6.75rem)를 제거합니다. - [Minor Changes] Solid 배경 위에 쓰는 전경색 토큰을 추가하고, SEED 컴포넌트가 이 토큰을 사용하도록 변경합니다. d3edadf $color.fg.on-brand-solid , $color.fg.on-critical-solid , $color.fg.on-informative-solid , $color.fg.on-neutral-solid , $color.fg.on-positive-solid , $color.fg.on-warning-solid 를 추가합니다. Solid 배경을 사용하는 컴포넌트가 팔레트 색상이나 $color.fg.neutral-inverted 대신 새 전경색 토큰을 참조하도록 변경합니다. 기존과 값이 같아 화면은 그대로이며, Action Button variant="neutralSolid" 의 로딩 인디케이터 색만 다크 모드에서 달라집니다. $color.fg.neutral-inverted 는 기존 사용처의 하위 호환성을 위해 deprecated 상태로 유지하며, 각 패키지의 다음 major 버전에서 제거할 예정입니다. - [Minor Changes] SEED 컴포넌트가 $color.bg.neutral-inverted 대신 같은 값의 $color.bg.neutral-solid 를 사용하도록 변경하고, $color.bg.neutral-inverted 와 $color.bg.neutral-inverted-pressed 를 deprecated로 표시합니다. 5e34f78 @seed-design/react 의 Date Picker를 포함한 기존 사용처는 같은 색상 값을 가진 $color.bg.neutral-solid 를 사용합니다. 기존 사용처의 하위 호환성을 위해 $color.bg.neutral-inverted , $color.bg.neutral-inverted-pressed 와 이에 대응하는 CSS 변수를 유지하며, 각 패키지의 다음 major 버전에서 제거할 예정입니다. - [Minor Changes] (BREAKING CHANGE: $color.bg.layer-fill 을 같은 값의 $color.bg.neutral-muted 로 교체해야 합니다.) deprecated 상태였던 $color.bg.layer-fill 을 제거하고 같은 값의 $color.bg.neutral-muted 를 추가합니다. 66c3bd9 $color.bg.neutral-muted 는 라이트 모드에서 gray-100 , 다크 모드에서 gray-200 으로, 기존 $color.bg.layer-fill 과 값이 같습니다. --seed-color-bg-layer-fill 을 --seed-color-bg-neutral-muted 로, vars.$color.bg.layerFill 을 vars.$color.bg.neutralMuted 로 교체하세요. CSS 변수를 직접 쓴 코드나 bg="bg.layerFill" 같은 style prop 값은 에러 없이 배경색만 사라지므로 문자열로 검색해 확인하세요. - [Minor Changes] (BREAKING CHANGE: $color.bg.neutral-solid 를 직접 사용하는 화면에서 라이트·다크 모드의 배경색과 전경색 대비를 확인해야 합니다.) Neutral Solid 배경 색상과 이를 사용하는 컴포넌트 스타일을 변경합니다. ebdc295 $color.bg.neutral-solid 를 라이트 모드에서는 gray-1000 에서 gray-900 으로, 다크 모드에서는 gray-300 에서 gray-1000 으로 변경합니다. 눌린 상태에 사용할 $color.bg.neutral-solid-pressed 를 추가합니다. Neutral Solid 스타일을 사용하는 컴포넌트가 $color.bg.neutral-solid 와 $color.bg.neutral-solid-pressed 를 참조하도록 변경합니다. - [Minor Changes] 표면과 같은 색상의 $color.bg.neutral-subtle 토큰을 추가합니다. 66c3bd9 라이트 모드에서 gray-00 , 다크 모드에서 gray-100 을 사용하며, 회색 표면 위에서 주변과 구분되는 영역에 사용합니다. Tailwind에서는 bg-neutral-subtle 색상으로 사용할 수 있습니다(예: bg-bg-neutral-subtle ). - [Minor Changes] (사용자 변경사항 없음) deprecated 컴포넌트인 Control Chip과 Inline Banner의 내부 컴포넌트 변수를 제거합니다. 19ecbd6 - [Patch Changes] (사용자 변경사항 없음) 내부에서 사용하는 Popover 컴포넌트 변수를 추가합니다. 78f0bc1 ## 0.9.0 ### Minor Changes - AppBar 가 좌우 safe area inset을 반영합니다. ba7cfa8 AppBar 의 내용이 좌우 inset만큼 안쪽으로 들어가서, 좌우 inset이 있는 화면에서도 디스플레이 컷아웃에 가려지지 않습니다. cupertino 테마의 가운데 타이틀은 safe area 안에서 가운데에 옵니다. cupertino 테마에서 가운데 타이틀이 길면 좌우 버튼과 겹치던 문제를 고칩니다. - useSafeArea 와 Box 가 좌우 safe area inset을 지원합니다. 934e3ef useSafeArea 가 호스트 앱의 lynx.__globalProps 에서 좌우 inset을 읽어 safeAreaInsetLeft , safeAreaInsetRight 로 반환합니다. 호스트가 값을 주지 않으면 env(safe-area-inset-*) 로 fallback합니다. 내용을 좌우 inset만큼 안쪽으로 넣어야 하는 영역은 Box 의 pl , pr 에 "safeArea" 를 지정합니다. - Box , VStack , HStack 에 margin과 bleed style prop을 추가합니다. 934e3ef m , mx , my , mt , mr , mb , ml 과 longhand margin prop으로 margin을 지정합니다. SEED 토큰, 길이, "auto" 를 받습니다. bleed , bleedX , bleedY , bleedTop , bleedRight , bleedBottom , bleedLeft 로 요소를 부모의 padding 영역까지 넓힙니다. px 길이, 0 , "safeArea" 를 받으며, "safeArea" 는 같은 방향의 safe area inset만큼 넓힙니다. Lynx는 inline style의 calc() 안에 있는 CSS 변수를 적용하지 않으므로, bleed는 SEED 토큰을 받지 않습니다. margin 계열과 bleed 계열은 함께 지정할 수 없습니다. 이 제약 때문에 BoxProps , StackProps , VStackProps , HStackProps 가 union 타입으로 바뀌었습니다. 이 타입을 interface ... extends 로 확장하던 코드는 type MyBoxProps = BoxProps & { ... } 처럼 type 으로 바꿔야 합니다. 이 변경으로 기존 ui:result-section snippet은 타입 검사를 통과하지 못합니다. snippet을 다시 내려받아 주세요. npx @seed-design/cli@latest add ui:result-section - Top Navigation 높이를 iOS·Android 모두 56px로 통일합니다. theme=cupertino App Bar와 App Screen의 높이가 44px에서 56px로 바뀝니다. cb4c4a1 ### Updated Dependencies - **@seed-design/lynx-css@0.13.0** - [Minor Changes] Top Navigation 높이를 iOS·Android 모두 56px로 통일합니다. theme=cupertino App Bar와 App Screen의 높이가 44px에서 56px로 바뀝니다. cb4c4a1 ## 0.8.0 ### Minor Changes - Lynx에 Attachment Field와 Attachment Display Field를 추가합니다. 호스트 네이티브 파일 선택 연동, 파일 검증, 업로드 상태 표시와 첨부 항목 관리를 지원합니다. fa699aa - Dialog와 Alert Dialog 컴포넌트를 추가합니다. fa699aa Dialog와 Alert Dialog 콘텐츠는 열릴 때 opacity와 scale 애니메이션을 제공하고, 닫힐 때 opacity로 사라집니다. Alert Dialog는 중요한 작업에 대한 사용자 확인 흐름을 제공하며 기본적으로 backdrop 탭으로 닫히지 않습니다. - ScrollFog 컴포넌트를 추가하고, BottomSheetBody 를 스크롤 방식을 직접 구성할 수 있는 view 로 변경합니다. TabsList 와 ChipTabsList 는 native scroll-view prop을 전달받아 같은 fading edge를 직접 적용할 수 있습니다. fa699aa - Lynx에 Skeleton 컴포넌트를 추가합니다. fa699aa radius , tone , width , height 로 형태와 크기를 조절할 수 있습니다. - Lynx용 FloatingActionButton 컴포넌트를 추가합니다. extended 로 라벨 표시와 버튼 형태를 전환할 수 있습니다. fa699aa - Lynx 플랫폼에 Chip Tabs 컴포넌트를 추가합니다. fa699aa - Lynx에 IdentityPlaceholder 컴포넌트를 추가합니다. 사람과 매장 도형은 기존 SVG에서 변환한 640×640 WebP 이미지로 제공합니다. fa699aa - Lynx에서 Quantity Picker의 수량 증감, 개별 로딩, 삭제 전환, 레이아웃과 값 포매팅을 사용할 수 있도록 컴포넌트와 스타일을 추가합니다. fa699aa - Lynx 플랫폼에 단일·다중 선택을 지원하는 Select 컴포넌트를 추가합니다. fa699aa - Lynx에 ContextualFloatingButton 컴포넌트를 추가합니다. fa699aa solid , layer 변형과 텍스트·아이콘 전용 레이아웃을 지원합니다. 눌림 피드백, 로딩 표시와 비활성 상태를 제공합니다. - Lynx에서 사용할 수 있는 HelpBubble 컴포넌트를 추가합니다. fa699aa - Lynx AppBar 아이콘 버튼의 슬롯 양쪽 여백을 React와 같은 규칙으로 자동 보정합니다. fa699aa 왼쪽·오른쪽 슬롯 모두 첫 자식이 아이콘 버튼이면 왼쪽, 마지막 자식이 아이콘 버튼이면 오른쪽 여백을 보정합니다. 버튼 하나는 양쪽을 보정하며, 44px 터치 영역은 유지합니다. Fragment와 조건부 자식을 지원하며, edge="leading" | "trailing" | "both" 으로 자동 보정 방향을 덮어쓸 수 있습니다. 커스텀 슬롯의 배치와 기존 사용자 스타일을 유지합니다. - Lynx에 Slider 컴포넌트를 추가합니다. 터치 드래그, 다중 범위, 단계·허용값, RTL, 값 표시와 접근성 레이블을 지원합니다. fa699aa - React·Rootage 명세에 맞춰 Lynx 컴포넌트의 Scale Feedback과 배경색 전환을 보완하고, List를 처음 누를 때 모서리 형태가 바뀌는 문제를 수정합니다. fa699aa 컴포넌트별 Feedback 변경 사항은 다음과 같습니다. AppBar.IconButton : 버튼 전체에 Scale Feedback을 추가합니다. ReactionButton : 고정 축소율을 공통 Scale Feedback으로 교체하고, 선택 상태의 배경색 전환과 비활성·로딩 상태의 Feedback 처리를 보완합니다. InputButton : 내용 영역에 Scale Feedback과 버튼 배경색 전환을 추가하고, ClearButton 에는 독립적인 Scale Feedback을 추가합니다. List.ButtonItem , List.CheckboxItem , List.RadioItem , List.SwitchItem : 내용 영역에 공통 Scale Feedback을 연결하고, 누름 배경이 처음부터 둥근 모서리를 유지하도록 수정합니다. 내부 선택 컨트롤이 중복으로 축소되지 않도록 처리합니다. Menu.Item : 내용 영역에 Scale Feedback을 추가하고, 누름 배경 Feedback을 보완합니다. SwipeableMenuSheet.Item , SwipeableMenuSheet.CloseButton : 항목의 내용 영역과 닫기 버튼 전체에 각각 Scale Feedback을 추가하고, 누름 배경 Feedback을 보완합니다. PageBanner : 상호작용 가능한 배너의 내용 영역에 Scale Feedback을 추가하고, 내부 Button · CloseButton 의 Feedback이 배너의 Feedback과 독립적으로 동작하도록 보완합니다. Callout.CloseButton : 누름 상태의 배경색과 배경색 전환을 추가합니다. ### Patch Changes - 컴포넌트를 누르는 도중 비활성화하면 눌림 상태를 초기화하여, 다시 활성화했을 때 눌림 스타일이 남지 않도록 수정합니다. fa699aa - Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa 기존 @seed-design/lynx-react 의 훅 import와 Scale Feedback 연동을 유지합니다. 누르는 도중 disabled 로 바뀌면 pressed 상태를 해제합니다. ### Updated Dependencies - **@seed-design/lynx-react-use-controllable-state@0.1.0** - [Minor Changes] Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa 기존 @seed-design/lynx-react 의 훅 import와 Scale Feedback 연동을 유지합니다. 누르는 도중 disabled 로 바뀌면 pressed 상태를 해제합니다. - **@seed-design/lynx-react-use-press-tap@0.1.0** - [Minor Changes] Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa 기존 @seed-design/lynx-react 의 훅 import와 Scale Feedback 연동을 유지합니다. 누르는 도중 disabled 로 바뀌면 pressed 상태를 해제합니다. ## 0.7.1 ### Patch Changes - CSS 로드 순서에 따라 AppBar·Callout 등 Recipe 아이콘의 크기와 색상이 공통 스타일에 덮어써지는 문제를 수정합니다. b956124 ## 0.7.0 ### Minor Changes - Checkbox, Chip, Progress Circle, Radio Group, Switch의 네이티브 접근성 지원을 확장합니다. 5871638 접근성 이름과 속성을 전달할 수 있습니다. 컴포넌트별 역할과 선택·진행·비활성 상태를 기본으로 제공합니다. - Lynx Field Button 컴포넌트를 추가합니다. 6201bcb npx @seed-design/cli@latest add ui:field-button 로 Registry 컴포넌트를 설치할 수 있습니다. - Lynx 컴포넌트에 누르는 동안 요소가 축소되는 Scale Feedback을 추가합니다. 2c3a308 Action Button Chip Callout Tabs Accordion Checkbox Radio Group Switch Page Banner의 Button·Close Button Select Box Segmented Control ScaleFeedback 컴포넌트와 useScaleFeedback 훅을 제공합니다. 요소 전체를 축소하는 Self Scale과 내부 콘텐츠만 축소하는 Content Scale을 구성할 수 있습니다. mergeProps 유틸을 추가하고 컴포넌트의 props 합성에 적용합니다. 사용자 이벤트와 ref를 내부 동작과 함께 보존하며, Main Thread와 Background Thread의 실행 경계를 유지합니다. 최소 지원 버전은 Lynx Engine 3.9입니다. - Lynx에서 Reaction Button과 Count 컴포넌트를 사용할 수 있도록 추가했습니다. 3a66eeb - Lynx 플랫폼에 Menu 컴포넌트를 추가합니다. f8db24a - Lynx용 SwipeableMenuSheet 컴포넌트를 추가합니다. 441a22e npx @seed-design/cli@latest add ui:swipeable-menu-sheet 로 Registry 컴포넌트를 설치할 수 있습니다. - Segmented Control과 Tabs 항목에 알림 콘텐츠를 배치할 수 있는 notification prop을 추가합니다. Tabs Trigger에는 선택된 항목을 다시 누르는 동작도 처리할 수 있도록 bindtap prop을 추가합니다. 5871638 - Lynx 컴포넌트의 pressed 색상 피드백을 개선합니다. 50c7e53 기존 Background Thread의 상태 갱신에 의존하던 pressed 색상 반응을 Main Thread의 :active 기반으로 개선하고, React와 동일한 색상 transition을 적용합니다. 짧은 탭에서도 색상 피드백이 빠르게 시작됩니다. disabled·loading 상태의 입력 제한과 기존 pressed 상태 처리는 유지합니다. - List 컴포넌트의 Lynx 버전을 추가합니다. ce7fcfe 정적, 버튼, Checkbox, Radio, Switch 목록 항목과 ListHeader 를 제공합니다. npx @seed-design/cli@latest add ui:list 로 Registry 컴포넌트를 설치할 수 있습니다. ### Patch Changes - Lynx Checkbox에서 컨트롤과 라벨의 세로 정렬이 어긋나던 문제를 수정합니다. 02c08d0 ## 0.6.3 ### Patch Changes - Lynx 아이콘이 처음 표시될 때 테마 색상을 안정적으로 반영하도록 수정합니다. 8c496bd ## 0.6.2 ### Patch Changes - Switch 등 controlled 컴포넌트에서 외부 값 변경 후 변경 콜백이 누락되던 문제를 수정합니다. 부모가 변경 요청을 반영하지 않은 경우에도 다음 사용자 입력에서 변경을 다시 요청할 수 있습니다. a5ced0a ## 0.6.1 ### Patch Changes - Lynx에서 시스템 테마를 전환한 뒤 semantic 색상과 아이콘 tint가 이전 테마 색상으로 남는 문제를 수정합니다. be66559 ## 0.6.0 ### Minor Changes - Lynx에 PageBanner 컴포넌트를 추가합니다. b618d5c npx @seed-design/cli@latest add ui:page-banner 로 Registry 컴포넌트를 설치할 수 있습니다. - Lynx용 Select Box 컴포넌트를 추가합니다. 9070482 Checkbox와 Radio Group 방식의 선택형 카드, 다열 배치, 선택 상태에 따른 Footer 표시를 지원합니다. 표준 멀티컬러 아이콘을 자동으로 감지해 원본 색상을 유지합니다. 자동 감지되지 않는 아이콘은 multicolor 옵션으로 지정할 수 있습니다. - Lynx Notification Badge 컴포넌트를 추가합니다. 174a5a1 @seed-design/lynx-react 에서 NotificationBadge 와 NotificationBadgePositioner 를 사용할 수 있습니다. @seed-design/lynx-css/recipes/notification-badge 와 notification-badge-positioner 에서 스타일 Recipe를 제공합니다. - Lynx용 Segmented Control 컴포넌트를 추가합니다. 0939477 npx @seed-design/cli@latest add ui:segmented-control 로 Registry 컴포넌트를 설치할 수 있습니다. - Lynx용 MannerTemp , MannerTempEmote , MannerTempBadge 컴포넌트를 추가합니다. dd99afe ## 0.5.2 ### Patch Changes - TextField.Input 과 TextField.Textarea 의 native 값이 blur 시 controlled value와 달라지는 문제를 수정합니다. 844d91c - Lynx Radio Group 에서 라디오 표시와 라벨의 상단 여백이 적용되지 않아 수직 정렬이 어긋나던 문제를 수정합니다. 55103a6 - Lynx Tabs가 초기 렌더링 시 선택된 탭으로 이동하면서 Label 색상과 Indicator 위치·크기를 전환하던 문제를 수정합니다. f446304 ## 0.5.1 ### Patch Changes - Lynx Tabs의 Indicator 위치를 수정합니다. f3755b4 Android에서 선택한 탭으로 Indicator가 이동하지 않는 문제를 수정합니다. triggerLayout="hug" 에서 Indicator가 List의 좌측 gutter와 어긋나는 문제를 수정합니다. ## 0.5.0 ### Minor Changes - Lynx에서 Divider를 사용할 수 있도록 컴포넌트와 공개 API를 추가합니다. 6af8a34 - Lynx에 Callout 컴포넌트를 추가합니다. ff225ee neutral , informative , positive , warning , critical , magic tone을 지원합니다. actionable 및 controlled/uncontrolled dismiss 동작을 지원합니다. npx @seed-design/cli@latest add ui:callout 로 Registry 컴포넌트를 설치할 수 있습니다. - Lynx용 Accordion 컴포넌트를 추가합니다. bd5cd3b controlled 및 uncontrolled 상태와 단일·다중 펼치기를 지원합니다. 콘텐츠 높이를 측정해 펼치고 접을 때 height transition을 적용합니다. inline , separated variant와 medium , large size를 제공합니다. Trigger에 펼침 상태와 비활성 상태를 전달하는 Lynx 접근성 속성을 제공합니다. - Lynx용 Tabs 컴포넌트를 추가합니다. 6f6c626 탭 선택과 콘텐츠 좌우 스와이프를 지원합니다. 제어형·비제어형 상태, disabled 탭, 균등·콘텐츠 기반 너비, 이동하는 Indicator를 제공합니다. Tabs.Root , Tabs.List , Tabs.Trigger , Tabs.Content , Tabs.Carousel API로 구성할 수 있습니다. - Lynx Checkbox의 ghost 상태 전환을 안정화합니다. ca0931b 선택 해제 시 배경이 순간적으로 어두워지는 현상을 수정합니다. 선택 상태가 변경될 때 아이콘 색상이 즉시 반영되도록 개선합니다. @seed-design/lynx-react 와 @seed-design/lynx-css 를 함께 업데이트해야 합니다. - Bottom Sheet의 content 최대 너비를 480px로 맞춥니다. aef119e 넓은 뷰포트에서 시트가 화면 폭 전체로 늘어나지 않고 480px에서 멈추며 가운데 정렬됩니다. 480px보다 좁은 화면에서는 기존과 동일하게 화면을 채웁니다. BottomSheetContent 가 시트를 왼쪽에 고정하던 인라인 left 값을 풀어, 폭이 제한됐을 때 좌우 여백이 같게 배치됩니다. style 로 left 를 직접 지정하면 그 값이 우선합니다. ## 0.4.1 ### Patch Changes - iOS에서 TextFieldTextarea 의 첫 입력 시 자동 높이가 세로 여백만큼 불필요하게 늘어나는 문제를 수정합니다. 598cd3a - Lynx TagGroup 의 문자열 구분자 앞뒤 공백을 제거해 브라우저 프리뷰와 네이티브 Lynx에서 항목 간격이 다르게 보이는 문제를 수정합니다. fdf4575 - iOS에서 TextFieldTextarea 의 자동 높이 영역을 눌렀을 때 포커스가 해제되어 키를 입력할 수 없는 문제를 수정합니다. 5a7ca99 - iOS에서 VStack 과 HStack 의 gap 에 SEED 간격 토큰을 사용하면 간격이 사라지는 문제를 수정합니다. 554cca0 - Lynx ProgressCircle 의 indeterminate 상태가 첫 화면부터 표시되도록 수정합니다. 21aa395 ## 0.4.0 ### Minor Changes - Lynx 입력 폼 컴포넌트를 추가합니다. ebb4eae Field , TextField , KeyboardAvoidingScrollView 를 제공합니다. TextField.Input 과 TextField.Textarea 에서 native 입력, controlled value, grapheme 단위 글자 수 제한을 지원합니다. TextField.Textarea 는 내용에 따른 자동 높이 조절을 지원합니다. KeyboardAvoidingScrollView 는 focus된 입력과 Field footer가 키보드에 가려지지 않도록 스크롤합니다. npx @seed-design/cli@latest add ui:text-field 로 조합된 snippet을 설치할 수 있습니다. ```tsx ``` ## 0.3.1 ### Patch Changes - 라이선스를 Apache-2.0으로 명시했습니다. 기존에는 license 필드가 비어 있어 저장소 루트의 Apache License 2.0과 일치하지 않았고, 배포물에 LICENSE 와 NOTICE 가 포함되지 않아 이용 조건을 확인할 수 없었습니다. 270c93d 당근 로고를 비롯한 브랜드 리소스는 별도 가이드라인을 따르며, 당근을 사칭하거나 당근 서비스와 관련이 있는 것처럼 오인하게 하는 사용은 허용되지 않습니다. 자세한 내용은 NOTICE 파일을 참고해주세요. ## 0.3.0 ### Minor Changes - (BREAKING CHANGE: @lynx-js/react 를 0.117.0 이상으로 업그레이드해야 합니다.) 테마 변경에 반응하는 useSeedClassName 훅을 추가합니다. 2ad8e8c root <page> 에서 getSeedClassName() 대신 useSeedClassName() 을 사용하면, host가 lynx.__globalProps.theme 을 변경할 때 자동으로 리렌더되어 테마가 즉시 반영됩니다. getSeedClassName() 순수 함수는 그대로 유지됩니다. 테마 변경에 반응할 필요가 없는 정적 컨텍스트에서 계속 사용할 수 있습니다. useGlobalProps() 에 의존하므로 @lynx-js/react 0.117.0 이상이 필요합니다. ```tsx import { useSeedClassName } from "@seed-design/lynx-react"; function Root() { const seedClassName = useSeedClassName({ colorMode: "system" }); return ( ); } ``` ## 0.2.0 ### Minor Changes - Lynx AppBar 컴포넌트를 추가합니다. c8d4c26 AppBar.Root , AppBar.Left , AppBar.Main , AppBar.Right , AppBar.IconButton 등 compound API를 제공합니다. SystemInfo.platform 에 따라 Android에서는 android , 그 외 플랫폼에서는 cupertino theme을 기본으로 적용합니다. theme prop으로 platform 기본값을 수동 override할 수 있습니다. - native element의 접근성 속성을 표준화한 LynxAccessibilityProps 타입을 추가했습니다. 컴포넌트가 이 타입을 확장해 accessibility-label / accessibility-role-description / accessibility-value / accessibility-elements-hidden 등을 받아 native element에 전달할 수 있습니다. f039fb3 - Lynx Badge 컴포넌트를 추가합니다. 26d3517 @seed-design/lynx-react 에서 Badge 를 직접 import해 사용할 수 있습니다. @seed-design/lynx-css/recipes/badge 에서 Badge recipe 스타일을 제공합니다. ```tsx import { Badge } from "@seed-design/lynx-react"; 거래 가능 ; ``` ### Patch Changes - Lynx BottomSheet가 앱 셸 위에 안정적으로 표시되고, 본문 스크롤 제스처를 내부에서 처리하도록 개선합니다. 4e2ee69 BottomSheet overlay의 기본 z-index 를 높여 앱바 같은 상단 영역까지 backdrop이 덮이도록 수정합니다. BottomSheetBody 가 세로 스크롤 영역으로 렌더링되어 본문을 스크롤할 때 뒤쪽 화면이 함께 스크롤되는 문제를 방지합니다. 스크롤 가능한 BottomSheet에서는 BottomSheetRoot 의 handleOnly 를 함께 사용할 수 있습니다. BottomSheet handle의 드래그 target size를 보이는 handle보다 크게 보장합니다. ## 0.1.0 ### Minor Changes - SEED Design Lynx의 첫 stable 버전을 릴리즈합니다. 699af2c @seed-design/lynx-css : Lynx 환경에서 사용할 수 있는 SEED 디자인 토큰, base CSS, component recipe CSS를 제공합니다. @seed-design/lynx-react : Lynx용 SEED React 컴포넌트와 hook을 제공합니다. 컴포넌트: ActionButton , BottomSheet , Box , Checkbox , HStack , ProgressCircle , RadioGroup , Switch , TagGroup , Text , VStack Hook: useControllableState , useIconColor , usePressTap , useSafeArea Safe Area: useSafeArea API로 env(safe-area-inset-*) 와 host 앱의 lynx.__globalProps fallback을 함께 지원합니다. @seed-design/cli : Lynx framework 감지, registry snippet 추가, compatibility check, docs lookup 흐름을 지원합니다. --- ## @seed-design/lynx-react-image ## 0.1.0 ### Minor Changes - Lynx 이미지의 로딩 상태와 대체 콘텐츠를 구성하는 headless Image 컴포넌트를 추가합니다. fa699aa Image.Root 가 로딩 상태를 공유하고, native image 요소를 렌더링하는 Image.Content 가 로드·오류 이벤트를 상태에 연결합니다. Image.Fallback 은 이미지가 로딩 중이거나 로드에 실패했을 때 대체 콘텐츠를 표시하고, 로드에 성공하면 숨깁니다. 이미지 주소가 변경되면 상태를 초기화하고 이전 요청에서 발생한 이벤트를 무시합니다. 직접 동작을 구성하는 useImage 와 하위 컴포넌트에서 상태를 읽는 useImageContext 를 함께 제공합니다. 시각적 스타일은 사용처에서 지정합니다. --- ## @seed-design/lynx-react-toggle ## 0.1.0 ### Minor Changes - Lynx 요소의 선택 상태와 사용자 입력을 관리하는 headless Toggle 컴포넌트를 추가합니다. fa699aa Toggle.Root 가 native view 요소에 tap·touch 이벤트와 접근성 속성을 연결하고, 하위 컴포넌트에 상태를 공유합니다. pressed , defaultPressed , onPressedChange 로 controlled/uncontrolled 선택 상태를 구성하고, disabled 로 사용자 입력에 의한 토글을 막을 수 있습니다. 선택 상태와 별도로 터치 중인 상태를 관리하며, 터치가 취소되거나 비활성화되면 터치 중인 상태를 해제합니다. 직접 동작을 구성하는 useToggle 과 하위 컴포넌트에서 상태를 읽는 useToggleContext 를 함께 제공합니다. 시각적 스타일은 사용처에서 지정합니다. ### Updated Dependencies - **@seed-design/lynx-react-use-controllable-state@0.1.0** - [Minor Changes] Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa 기존 @seed-design/lynx-react 의 훅 import와 Scale Feedback 연동을 유지합니다. 누르는 도중 disabled 로 바뀌면 pressed 상태를 해제합니다. - **@seed-design/lynx-react-use-press-tap@0.1.0** - [Minor Changes] Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa 기존 @seed-design/lynx-react 의 훅 import와 Scale Feedback 연동을 유지합니다. 누르는 도중 disabled 로 바뀌면 pressed 상태를 해제합니다. --- ## @seed-design/lynx-react-use-controllable-state ## 0.1.0 ### Minor Changes - Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa 기존 @seed-design/lynx-react 의 훅 import와 Scale Feedback 연동을 유지합니다. 누르는 도중 disabled 로 바뀌면 pressed 상태를 해제합니다. --- ## @seed-design/lynx-react-use-press-tap ## 0.1.0 ### Minor Changes - Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa 기존 @seed-design/lynx-react 의 훅 import와 Scale Feedback 연동을 유지합니다. 누르는 도중 disabled 로 바뀌면 pressed 상태를 해제합니다. --- ## @seed-design/rsbuild-plugin-lynx-icon ## 0.2.1 ### Patch Changes - sharp 의존성을 v0.35.0으로 업데이트하여 보안 취약점(CVE-2026-33327, CVE-2026-33328, CVE-2026-35590, CVE-2026-35591)을 수정합니다. a6aca14 ## 0.2.0 ### Minor Changes - 라이선스를 MIT에서 Apache-2.0으로 변경합니다. 저장소 루트의 Apache License 2.0과 표기가 달랐던 것을 일치시킵니다. 86f74d7 배포물에 LICENSE 와 NOTICE 를 포함해, 설치한 패키지에서 바로 이용 조건을 확인할 수 있습니다. MIT와 달리 재배포할 때 라이선스 사본과 NOTICE 의 귀속 고지를 함께 전달해야 하고, 수정한 파일에는 변경 사실을 표시해야 합니다. 당근 로고를 비롯한 브랜드 리소스는 별도 가이드라인을 따르며, 당근을 사칭하거나 당근 서비스와 관련이 있는 것처럼 오인하게 하는 사용은 허용되지 않습니다. 자세한 내용은 NOTICE 파일을 참고해주세요. ## 0.1.0 ### Minor Changes - Lynx 아이콘 SVG를 WebP data URL로 변환하는 Rsbuild 플러그인 추가 05c799e Lynx 3.5에서 SVG를 지원하지 않아 빌드 시 sharp 를 사용해 WebP로 변환하는 플러그인을 추가합니다. 기존 수동 로더 설정 대신 pluginLynxIcon() 플러그인으로 간단하게 설정할 수 있습니다.