Changelog

(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에 기본으로 적용되던 최대 너비를 제거합니다. 한 줄 말줄임이 필요하다면 최대 너비를 직접 지정하세요.

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

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: 누름 상태의 배경색과 배경색 전환을 추가합니다.

컴포넌트를 누르는 도중 비활성화하면 눌림 상태를 초기화하여, 다시 활성화했을 때 눌림 스타일이 남지 않도록 수정합니다. fa699aa

Lynx 상태·press/tap 훅을 독립 패키지로 분리합니다. fa699aa

• 기존 @seed-design/lynx-react의 훅 import와 Scale Feedback 연동을 유지합니다.
• 누르는 도중 disabled로 바뀌면 pressed 상태를 해제합니다.

CSS 로드 순서에 따라 AppBar·Callout 등 Recipe 아이콘의 크기와 색상이 공통 스타일에 덮어써지는 문제를 수정합니다. b956124

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 컴포넌트를 설치할 수 있습니다.

Lynx Checkbox에서 컨트롤과 라벨의 세로 정렬이 어긋나던 문제를 수정합니다. 02c08d0

Lynx 아이콘이 처음 표시될 때 테마 색상을 안정적으로 반영하도록 수정합니다. 8c496bd

Switch 등 controlled 컴포넌트에서 외부 값 변경 후 변경 콜백이 누락되던 문제를 수정합니다. 부모가 변경 요청을 반영하지 않은 경우에도 다음 사용자 입력에서 변경을 다시 요청할 수 있습니다. a5ced0a

Lynx에서 시스템 테마를 전환한 뒤 semantic 색상과 아이콘 tint가 이전 테마 색상으로 남는 문제를 수정합니다. be66559

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

TextField.Input과 TextField.Textarea의 native 값이 blur 시 controlled value와 달라지는 문제를 수정합니다. 844d91c

Lynx Radio Group에서 라디오 표시와 라벨의 상단 여백이 적용되지 않아 수직 정렬이 어긋나던 문제를 수정합니다. 55103a6

Lynx Tabs가 초기 렌더링 시 선택된 탭으로 이동하면서 Label 색상과 Indicator 위치·크기를 전환하던 문제를 수정합니다. f446304

Lynx Tabs의 Indicator 위치를 수정합니다. f3755b4

• Android에서 선택한 탭으로 Indicator가 이동하지 않는 문제를 수정합니다.
• triggerLayout="hug"에서 Indicator가 List의 좌측 gutter와 어긋나는 문제를 수정합니다.

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를 직접 지정하면 그 값이 우선합니다.

iOS에서 TextFieldTextarea의 첫 입력 시 자동 높이가 세로 여백만큼 불필요하게 늘어나는 문제를 수정합니다. 598cd3a

Lynx TagGroup의 문자열 구분자 앞뒤 공백을 제거해 브라우저 프리뷰와 네이티브 Lynx에서 항목 간격이 다르게 보이는 문제를 수정합니다. fdf4575

iOS에서 TextFieldTextarea의 자동 높이 영역을 눌렀을 때 포커스가 해제되어 키를 입력할 수 없는 문제를 수정합니다. 5a7ca99

iOS에서 VStack과 HStack의 gap에 SEED 간격 토큰을 사용하면 간격이 사라지는 문제를 수정합니다. 554cca0

Lynx ProgressCircle의 indeterminate 상태가 첫 화면부터 표시되도록 수정합니다. 21aa395

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을 설치할 수 있습니다.

<KeyboardAvoidingScrollView>  <TextField label="소개" maxGraphemeCount={80}>    <TextFieldTextarea accessibility-label="소개" />  </TextField></KeyboardAvoidingScrollView>

라이선스를 Apache-2.0으로 명시했습니다. 기존에는 license 필드가 비어 있어 저장소 루트의 Apache License 2.0과 일치하지 않았고, 배포물에 LICENSE와 NOTICE가 포함되지 않아 이용 조건을 확인할 수 없었습니다. 270c93d

당근 로고를 비롯한 브랜드 리소스는 별도 가이드라인을 따르며, 당근을 사칭하거나 당근 서비스와 관련이 있는 것처럼 오인하게 하는 사용은 허용되지 않습니다. 자세한 내용은 NOTICE 파일을 참고해주세요.

(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 이상이 필요합니다.

import { useSeedClassName } from "@seed-design/lynx-react";function Root() {  const seedClassName = useSeedClassName({ colorMode: "system" });  return (    <page className={seedClassName}>      <App />    </page>  );}

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 스타일을 제공합니다.

import { Badge } from "@seed-design/lynx-react";<Badge tone="positive" variant="weak">  거래 가능</Badge>;

Lynx BottomSheet가 앱 셸 위에 안정적으로 표시되고, 본문 스크롤 제스처를 내부에서 처리하도록 개선합니다. 4e2ee69

• BottomSheet overlay의 기본 z-index를 높여 앱바 같은 상단 영역까지 backdrop이 덮이도록 수정합니다.
• BottomSheetBody가 세로 스크롤 영역으로 렌더링되어 본문을 스크롤할 때 뒤쪽 화면이 함께 스크롤되는 문제를 방지합니다.
• 스크롤 가능한 BottomSheet에서는 BottomSheetRoot의 handleOnly를 함께 사용할 수 있습니다.
• BottomSheet handle의 드래그 target size를 보이는 handle보다 크게 보장합니다.

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 흐름을 지원합니다.