@purple/design 컴포넌트 테스트 (v0.2.x)

신 패키지(Stencil + React wrapper) 컴포넌트 동작 확인. body 의 .purple-design-provider scope 안에서만 토큰이 활성화됩니다.

— 이벤트 로그가 여기 표시됩니다 —

PurpleButton

Primary

Neutral

Error

Outlined

Ghost

Disabled

size xs

size s

size m

size l

size xl

NativeButton (stencil 제거 — 동일 토큰)

PurpleButton 과 동일 spec (variant / color / size / disabled). 깜빡임 없는 SSR + 표준 button. 위의 PurpleButton 행과 픽셀 단위로 비교 확인.

PurpleSwitch

현재: OFF

color=neutral

disabled

PurpleCheckbox

동의합니다

disabled

NativeCheckbox (stencil 제거 — 동일 토큰)

PurpleCheckbox 와 동일 spec (size xs/s × color primary/neutral/common × checked/disabled). 표준 <label>+<input type="checkbox"> — 외부 button wrap 없이 a11y 정합.

동의합니다 (neutral × xs)동의합니다 (neutral × s — emphasis)

primary checkedprimary uncheckedprimary checked disabledprimary unchecked disabled

neutral checkedneutral uncheckedneutral checked disabled

NativeDropdown (stencil 제거 — 동일 토큰)

PurpleDropdownBase 와 동일 spec (size s/l/xxl, value/placeholder/disabled). ARIA combobox/listbox + 키보드 ArrowUp/Down/Enter/Escape 정합.

value: +82

disabled

PurpleRadio

option a

option b

option c

PurpleInput

value: (빈 값)

NativeInput (stencil 제거 — 동일 토큰, PLA-13011 회귀 차단)

PurpleInput 과 동일 spec (size / align / error / disabled / readOnly). shadow DOM 없이 표준 <input> 직접 노출 → React controlled 가 그대로 동작.

value: (빈 값)

digits: (빈 값)

PurpleRange

PurpleBadge / PurpleChip

NEW

chip

error chip

Icon

name prop 으로 아이콘 식별. 자체 Icon 컴포넌트 inline SVG 사용.

arrow_left

arrow_right

arrow_upward

arrow_downward

bag

bag_fill

bell

bell_fill

bell_off

block

bookmark

board

width/height 16/24/32/48/64

fill 색상 override

Typography (pd-* 클래스)

pd-display1-boldpd-heading2-boldpd-heading6-mediumpd-body1-regularpd-body2-mediumpd-body4-boldpd-body4-regularpd-caption1-regular

Color tokens (CSS variables)

--background_base_1

--background_base_2

--neutral_gray_015

--neutral_gray_040

--neutral_gray_085

--glyphs_strong

--glyphs_normal

--glyphs_subtle

--system_error_normal

--core_primary_normal