@tide-tds/components 0.7.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/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

@@ -28,11 +28,11 @@ const listPopupClass = `isolate z-popover min-w-40 max-w-80 overflow-auto p-[3px
 * - `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.7.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.7.0",
-    "@tide-tds/icons": "0.7.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",