@tide-tds/components 0.6.0 → 0.8.0

package/dist/Button.js

@@ -10,7 +10,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /** 높이, 좌우 padding, 아이콘과 텍스트 사이 간격, 텍스트 스타일(spec size 표). radius는 모든 size에서 `md`다. */
 const sizeClass = {
 	xs: "h-6 gap-1 px-2 text-label-sm",
-	sm: "h-8 gap-1.5 px-3 text-label-sm",
+	sm: "h-8 gap-1.5 px-3 text-label-md",
 	md: "h-10 gap-2 px-4 text-label-md",
 	lg: "h-12 gap-2 px-5 text-label-lg"
 };

package/dist/Combobox.js

@@ -31,7 +31,7 @@ const buttonClass = "inline-flex shrink-0 cursor-pointer items-center justify-en
 * listbox 밖(같은 목록 표면 안)에 둔다. listbox 자식은 option·group만 될 수 있어서다. 결과 개수(0개)는 React Aria가
 * live region으로 알린다.
 */
-const emptyClass = "px-2 py-1.5 text-body-md text-muted select-none";
+const emptyClass = "px-2 py-1.5 text-body-sm text-muted select-none";
 /**
 * 한글 IME 조합 중의 keydown인지. 조합 중 Enter·화살표·Esc는 IME가 쓰므로 목록 동작에 쓰지 않는다.
 * Chromium·Firefox는 `isComposing`이 `true`다. Safari는 조합을 끝내는 Enter의 keydown이 compositionend 뒤에

package/dist/Switch.d.ts

@@ -5,7 +5,7 @@ type SwitchSize = Extract<Size, "sm" | "md" | "lg">;
 export interface SwitchProps extends Omit<ComponentProps<"input">, "type" | "size" | "color" | "role" | "children"> {
   /** 스위치 옆에 보이는 label. 스위치의 이름이 된다. Field 안에서는 Field의 `label`을 쓰고 비워 둔다. */
   children?: ReactNode;
-  /** track 크기 `sm` 28×16px, `md` 36×20px, `lg` 44×24px. label 텍스트 스타일도 함께 바뀐다. 기본값은 `md`다. */
+  /** track 크기 `sm` 28×16px, `md` 36×20px, `lg` 44×24px. label 텍스트 스타일(Checkbox·Radio와 같은 `body-sm`/`body-md`/`body-lg`)도 함께 바뀐다. 기본값은 `md`다. */
   size?: SwitchSize;
   /**
    * 켜졌을 때 track 색. Role(Tide Role 6개와 앱이 `RoleRegistry`에 더한 Role)을 받는다. 기본값은 `primary`다.

package/dist/Switch.js

@@ -7,9 +7,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 // src/Switch.tsx
 /** 루트 높이는 최소 24px라 track이 작아도 누르는 영역이 24×24px 이상이다. */
 const rootSizeClass = {
-	sm: "gap-1.5 text-label-sm",
-	md: "gap-2 text-label-md",
-	lg: "gap-2.5 text-label-lg"
+	sm: "gap-1.5 text-body-sm",
+	md: "gap-2 text-body-md",
+	lg: "gap-2.5 text-body-lg"
 };
 /** track 크기(border 1px 포함). thumb은 track 안쪽에서 2px 떨어진다. */
 const trackSizeClass = {

package/dist/Textarea.d.ts

@@ -3,7 +3,7 @@ import { ComponentProps, ReactElement } from "react";
 /** Textarea의 size. Input과 같이 `sm`/`md`/`lg`만 받는다. */
 type TextareaSize = Extract<Size, "sm" | "md" | "lg">;
 export interface TextareaProps extends ComponentProps<"textarea"> {
-  /** 글자 크기와 padding. 글자 크기는 같은 size의 Input과 같다(12/14/16px). 기본값은 `md`다. */
+  /** 글자 크기와 padding. 글자 크기는 같은 size의 Input과 같다(14/14/16px). 기본값은 `md`다. */
   size?: TextareaSize;
   /**
    * 오류 상태. `aria-invalid="true"`와 `data-invalid`가 붙고 경계가 danger 색이 된다.

package/dist/Textarea.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 // src/Textarea.tsx
 /** 좌우·세로 padding, 텍스트 스타일 */
 const sizeClass = {
-	sm: "px-2.5 py-1.5 text-caption",
+	sm: "px-2.5 py-1.25 text-body-sm",
 	md: "px-3 py-2 text-body-sm",
 	lg: "px-4 py-3 text-body-md"
 };

package/dist/alert-style.js

@@ -26,7 +26,7 @@ const alertCloseClass = "-my-0.5 -me-1";
 /**
 * Alert(subtle 표면) 안 닫기 버튼의 색. ghost의 기본(text-accent, bg-hover·bg-active)을 덮어쓴다.
 * subtle 바탕 위라 글자는 on-subtle이고, hover·누름은 같은 색의 subtle-hover·subtle-active다
-* (on-subtle × subtle 3단계 4.5:1 등록. text × subtle-active는 일부 색에서 4.5:1에 못 미친다, ADR 0022).
+* (on-subtle × subtle 4.5:1, × subtle-hover·subtle-active 4:1 등록, ADR 0022·0023).
 */
 const alertSubtleCloseClass = "text-accent-on-subtle hover:bg-accent-subtle-hover active:bg-accent-subtle-active";
 const statusIcons = {

package/dist/input-style.js

@@ -3,7 +3,7 @@
 const inputBaseClass = "w-full min-w-0 rounded-md border border-strong bg-canvas font-normal text-default transition-colors placeholder:text-muted aria-invalid:border-danger focus:focus-field disabled:cursor-not-allowed disabled:border-default disabled:bg-disabled disabled:text-disabled disabled:placeholder:text-disabled";
 /** 높이, 좌우 padding, 텍스트 스타일(spec size 표). radius는 모든 size에서 `md`다. */
 const inputSizeClass = {
-	sm: "h-8 px-2.5 text-label-sm",
+	sm: "h-8 px-2.5 text-label-md",
 	md: "h-10 px-3 text-label-md",
 	lg: "h-12 px-4 text-label-lg"
 };

package/dist/list-style.js

@@ -22,17 +22,17 @@ const listPopupClass = `isolate z-popover min-w-40 max-w-80 overflow-auto p-[3px
 *   기본 `outline-none`이 outline 모양 변수를 none으로 두므로 `outline-solid`를 함께 쓴다.
 *   항목 안쪽(`-outline-offset-2`)에 그려 이웃 항목·목록 경계와 겹치지 않는다.
 * - `hover`(highlight가 아닐 때): 색 없이 덮는 `bg-hover`(ADR 0022 §3). 키보드로 옮긴 위치가 따로 있을 때
-*   마우스가 다른 항목 위에 있는 경우다. text-default × bg-hover(bg-raised 위 합성)가 4.5:1로 등록되어 있다.
+*   마우스가 다른 항목 위에 있는 경우다. text-default × bg-hover(bg-raised 위 합성)가 4:1(일시 상태, ADR 0023)로 등록되어 있다.
 * - `data-selected`(highlight가 아닐 때): 선택 유지 `subtle-active`(neutral). 상태를 나타내는 바탕이라 덮기로 바꾸지 않는다.
 *   Select·Combobox의 고른 옵션이 쓴다.
 * - `data-disabled`: `text-disabled`, `cursor-not-allowed`. hover 배경이 없다.
 * - 상태끼리 겹칠 때 순서에 기대지 않도록 `not-data-highlighted:`로 서로 뺀다.
 * - transition이 없다. 반복되는 목록 항목은 바로 바뀐다(spec 「motion 적용」).
-* - 크기: 세로 6px·가로 8px 여백, `text-body-md`(16/24)라 높이 36px. 바로 안의 아이콘(svg, 장식용)은 16px이고
+* - 크기: 세로 6px·가로 8px 여백, `text-body-sm`(14/20)이라 높이 32px. 글자 크기가 트리거(Button·Select `md`, 14px)와 같다. 바로 안의 아이콘(svg, 장식용)은 16px이고
 *   아이콘과 글자 사이는 8px다(Button md와 같은 아이콘 크기).
 */
 const listItemClass = [
-	"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-body-md text-default outline-none select-none [&>svg]:size-4 [&>svg]:shrink-0",
+	"flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-body-sm text-default outline-none select-none [&>svg]:size-4 [&>svg]:shrink-0",
 	"hover:not-data-highlighted:not-data-disabled:bg-hover",
 	"data-selected:not-data-highlighted:bg-neutral-subtle-active",
 	"data-highlighted:bg-primary-subtle data-highlighted:text-primary data-highlighted:outline-2 data-highlighted:outline-solid data-highlighted:-outline-offset-2 data-highlighted:outline-transparent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Tide 디자인 시스템의 React Component",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@tide-tds/foundation": "0.6.0",
-    "@tide-tds/icons": "0.6.0",
+    "@tide-tds/foundation": "0.8.0",
+    "@tide-tds/icons": "0.8.0",
     "clsx": "^2.1.1",
     "react-aria": "^3.53.1",
     "react-stately": "^3.51.0",