@pylerai/design-system 2.0.0 → 2.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Pyler Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -12,7 +12,7 @@ Pyler Frontend를 위한 디자인 시스템 패키지 (React + TypeScript + Tai
 
 - **패키지명**: `@pylerai/design-system` ![npm version](https://img.shields.io/npm/v/@pylerai/design-system)
 - **레지스트리**: public npm (`registry.npmjs.org`) — 별도 인증 불필요
-- **라이선스**: ISC
+- **라이선스**: MIT ([LICENSE](./LICENSE))
 - **peer 의존성**: React 18 또는 19
 
 > [CHANGELOG](./CHANGELOG.md) · [CONTRIBUTING](./CONTRIBUTING.md)
@@ -43,6 +43,29 @@ CSS 파일에서 `@import` 해도 동일합니다.
 
 > 구버전 번들러에서 서브패스가 동작하지 않으면 `@pylerai/design-system/dist/style.css`를 사용하세요.
 
+#### 폰트
+
+`style.css`의 `--ds-font-sans`는 `"Pretendard JP", Pretendard, …` 라는 **이름**만 선언합니다. 그 이름을 실제로 등록하는 `@font-face`는 `fonts.css`에 있으므로 둘을 같이 로드합니다.
+
+```typescript
+import "@pylerai/design-system/style.css";
+import "@pylerai/design-system/fonts.css";
+```
+
+그리고 앱의 전역 스타일은 폰트 이름을 직접 쓰지 않고 변수만 참조합니다.
+
+```css
+body {
+  font-family: var(--ds-font-sans);
+}
+```
+
+- **앱에서 Pretendard를 따로 로드하지 않습니다** — `next/font`, `public/fonts`, CDN `<link>` 모두 해당. 이름이 한 글자만 어긋나도 스택이 매칭에 실패해 OS 폰트나 세리프로 조용히 떨어집니다(aid-frontend PF-3757). Montserrat 등 앱 고유의 장식 폰트는 이 규칙과 무관합니다.
+- `--ds-font-sans`를 앱에서 덮어쓰지 않습니다. `next/font` 변수로 바꿔 끼우던 방식은 폐기했습니다.
+- 폰트는 npm `pretendard-jp`·`pretendard`의 **가변 다이나믹 서브셋**입니다. `unicode-range`로 쪼개져 화면에 쓰인 글자 범위 조각만 내려받습니다(요청 수는 늘고 총량은 줍니다). JP 서브셋은 한글 range를 선언하지 않아 한글은 2순위 Pretendard가 받으며, 두 폰트의 한글·라틴 아웃라인과 메트릭은 같습니다.
+- `fonts.css`는 `:root { font-feature-settings: "ss05" }`를 함께 켭니다. Pretendard JP의 기본 자형은 일본어 관습(괄호·구두점 위치, 공용 한자)이라 벤더 지침대로 한국어 자형으로 맞추는 것이고, `lang="ja"` 요소는 원래 자형으로 돌아갑니다.
+- 스택 이름과 `fonts.css` 등록 이름이 어긋나면 `npm run check:tokens`가 실패합니다.
+
 ### 2. Tailwind 연동
 
 프리셋을 사용하면 `ds` 컬러 팔레트·타이포그래피 스케일·radius·shadow가 한 번에 합쳐집니다.
@@ -63,13 +86,21 @@ module.exports = {
 };
 ```
 
-이미 `extend.colors`를 쓰고 있어 색상 맵만 필요하다면:
+이미 자체 `theme.extend`가 있어 프리셋 대신 조각만 합치려면 (`darkMode` 등 프리셋의 다른 설정은 들어오지 않습니다):
 
 ```javascript
 const { dsColors } = require("@pylerai/design-system/pyler-tailwind-colors");
+const { pylerTypographyThemeExtend } = require("@pylerai/design-system/pyler-typography");
+const { pylerShadowRadiusThemeExtend } = require("@pylerai/design-system/pyler-shadow-radius");
 
 module.exports = {
-  theme: { extend: { colors: { ds: dsColors } } },
+  theme: {
+    extend: {
+      colors: { ds: dsColors },
+      ...pylerTypographyThemeExtend, // fontFamily.sans, fontSize.text-*
+      ...pylerShadowRadiusThemeExtend, // boxShadow.ds-*, borderRadius.ds-*
+    },
+  },
 };
 ```
 
@@ -127,6 +158,7 @@ function App() {
 Figma Light 모드와 동일한 값을 **CSS 변수(`--ds-*`)**, **Tailwind `ds` 팔레트**, **TypeScript 상수** 세 가지 형태로 제공합니다. 앱 코드에 HEX를 직접 쓰지 말고 토큰을 참조하세요.
 
 > 세 형태의 값이 어긋나지 않도록 `npm run check:tokens`가 CI에서 정합성을 검사합니다.
+> 토큰 값을 바꾸는 기여자용 절차는 [CONTRIBUTING의 "토큰 변경 절차"](./CONTRIBUTING.md#토큰-변경-절차-컬러--타이포그래피)를 참고하세요.
 
 ### 컬러
 
@@ -176,7 +208,7 @@ flatPylerLightTokens.forEach(({ path, hex, cssVar }) => { /* 문서화·순회
 | Body 4 R | 12px | 400 | `text-body-4-r` | `.ds-type-body-4-r` |
 | Label 1 R | 11px | 400 | `text-label-1-r` | `.ds-type-label-1-r` |
 
-폰트는 Pretendard JP(`--ds-font-sans`)를 사용합니다. 앱에서 웹폰트를 별도로 로드해야 합니다.
+폰트는 Pretendard JP(`--ds-font-sans`)를 사용합니다. `@pylerai/design-system/fonts.css`를 함께 로드하면 등록됩니다(위 "폰트" 절 참고).
 
 컴포넌트로 쓸 수도 있습니다. `as`로 태그를, `asChild`로 자식 요소에 스타일만 입힐 수 있습니다.
 
@@ -205,6 +237,23 @@ import { PYLER_TYPOGRAPHY_STYLE } from "@pylerai/design-system";
                                                        // shadow: ds-default, ds-modal
 ```
 
+Tailwind 클래스를 쓸 수 없는 자리(Chakra `radii`/`shadows` foundation, `sx`, inline style)에는 `DS_RADIUS`·`DS_SHADOW`를 넘깁니다. 값은 `var(--ds-*)` 문자열이라 `style.css`가 로드돼 있어야 합니다.
+
+```tsx
+import { DS_RADIUS, DS_SHADOW } from "@pylerai/design-system";
+
+// Chakra: theme foundation 에 등록하면 borderRadius="ds-md" 처럼 토큰 이름으로 쓸 수 있습니다
+extendTheme({
+  radii: { "ds-xs": DS_RADIUS.xs, "ds-ss": DS_RADIUS.ss, "ds-md": DS_RADIUS.md, "ds-lg": DS_RADIUS.lg },
+  shadows: { "ds-default": DS_SHADOW.default, "ds-modal": DS_SHADOW.modal },
+});
+
+<Box borderRadius="ds-md" boxShadow="ds-default" />
+<div style={{ borderRadius: DS_RADIUS.md }} />
+```
+
+앱에서 `rounded-[8px]`·`shadow-[0px_5px_16px_…]` 같은 리터럴을 새로 쓰지 않습니다. 값이 같아도 토큰이 바뀌면 리터럴만 남아 드리프트합니다.
+
 Dim은 `var(--ds-dim-default)`로 제공됩니다. Storybook **Foundation → Radius / Shadow / Dim** 참고.
 
 ## ♿ 접근성
@@ -234,7 +283,8 @@ design-system/
 ├── .storybook/                     # Storybook 설정 (main/preview/vitest.setup)
 ├── .github/workflows/
 │   ├── pr-checks.yml               # PR 검증 (tokens → lint → tsc → test → build)
-│   └── deploy-github-pages.yml     # Storybook 배포
+│   ├── deploy-github-pages.yml     # Storybook 배포
+│   └── release-package.yml         # GitHub Release 생성 시 npm 자동 배포
 ├── scripts/
 │   └── check-tokens.cjs            # 토큰 정합성 검사
 ├── src/
@@ -270,9 +320,7 @@ npm run build
 
 ## 📤 배포
 
-`main`은 브랜치 보호로 직접 push할 수 없습니다. 버전 릴리스 절차(버전 범프 → CHANGELOG → 태그 → `npm run publish:npm`)는 [CONTRIBUTING](./CONTRIBUTING.md)에 정리돼 있습니다.
-
-> ⚠️ `.github/workflows/release-package.yml`은 GitHub Release 생성 시 GitHub Packages로 배포하도록 되어 있으나, 실제 배포는 public npm으로 수동 실행하는 방식입니다. 한 번도 실행된 적 없는 워크플로이며 정리 대상입니다. 자세한 경위는 [CONTRIBUTING](./CONTRIBUTING.md#알려진-이슈-release-packageyml-워크플로-범위-외) 참고.
+`main`은 브랜치 보호로 직접 push할 수 없습니다. 버전 릴리스 절차(버전 범프 → CHANGELOG → 태그 → GitHub Release 생성 → CI 자동 npm 배포)는 [CONTRIBUTING](./CONTRIBUTING.md)에 정리돼 있습니다.
 
 ## 🔗 링크
 

package/dist/components/ui/badge.js

@@ -23,21 +23,21 @@ const b = {
   md: { padding: "px-2 pt-[5px] pb-[3px]", text: "text-body-3-m" },
   sm: { padding: "px-1 pt-[3px] pb-[1px]", text: "text-label-1-r" }
 }, g = l.forwardRef(
-  ({ color: r = "normal", size: e = "md", className: t, children: o, ...d }, a) => {
-    const { border: s, text: n } = b[r], { padding: p, text: m } = c[e];
+  ({ color: r = "normal", size: e = "md", className: t, children: o, ...s }, d) => {
+    const { border: a, text: n } = b[r], { padding: p, text: m } = c[e];
     return /* @__PURE__ */ x(
       "span",
       {
-        ref: a,
+        ref: d,
         className: i(
-          "inline-flex items-center justify-center border rounded-[4px] bg-ds-background-default whitespace-nowrap",
-          s,
+          "inline-flex items-center justify-center border rounded-ds-ss bg-ds-background-default whitespace-nowrap",
+          a,
           p,
           n,
           m,
           t
         ),
-        ...d,
+        ...s,
         children: o
       }
     );

package/dist/components/ui/button.js

@@ -9,10 +9,10 @@ const v = R(
   {
     variants: {
       variant: {
-        filled: "rounded-lg",
-        outlined: "rounded-lg border border-ds-line-normal bg-ds-background-default text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:bg-ds-surface-normal disabled:text-ds-text-disabled",
-        text: "rounded-lg bg-transparent text-ds-text-strong disabled:text-ds-text-disabled",
-        icon: "rounded-lg",
+        filled: "rounded-ds-md",
+        outlined: "rounded-ds-md border border-ds-line-normal bg-ds-background-default text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:bg-ds-surface-normal disabled:text-ds-text-disabled",
+        text: "rounded-ds-md bg-transparent text-ds-text-strong disabled:text-ds-text-disabled",
+        icon: "rounded-ds-md",
         indicator: "rounded-full inline-block"
       },
       color: {
@@ -116,12 +116,12 @@ const v = R(
     asChild: c = !1,
     shape: u = "square",
     iconStyle: x = "filled",
-    leftIcon: t,
-    rightIcon: d,
+    leftIcon: d,
+    rightIcon: t,
     children: b,
     ...h
   }, y) => {
-    const f = c ? B : "button", N = e === "icon" && x === "outlined" ? "bg-ds-background-default border border-ds-line-normal text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:text-ds-text-disabled" : void 0, l = !!t, p = !!d, z = e !== "icon" && e !== "indicator" && (l || p) ? (() => {
+    const f = c ? B : "button", N = e === "icon" && x === "outlined" ? "bg-ds-background-default border border-ds-line-normal text-ds-text-strong hover:bg-ds-surface-normal active:bg-ds-surface-strong disabled:text-ds-text-disabled" : void 0, l = !!d, p = !!t, z = e !== "icon" && e !== "indicator" && (l || p) ? (() => {
       const n = r ?? "md", o = {
         sm: { leftOnly: "pl-1 pr-2", rightOnly: "pl-2 pr-1", both: "px-1" },
         md: { leftOnly: "pl-2 pr-3", rightOnly: "pl-3 pr-2", both: "px-2" },
@@ -143,9 +143,9 @@ const v = R(
         ref: y,
         ...h,
         children: c ? b : /* @__PURE__ */ O(k, { children: [
-          t && /* @__PURE__ */ a("span", { className: "shrink-0", children: t }),
+          d && /* @__PURE__ */ a("span", { className: "shrink-0", children: d }),
           b,
-          d && /* @__PURE__ */ a("span", { className: "shrink-0", children: d })
+          t && /* @__PURE__ */ a("span", { className: "shrink-0", children: t })
         ] })
       }
     );

package/dist/components/ui/chip.js

@@ -4,20 +4,20 @@ import { XIcon as b } from "../../lib/icons.js";
 import { cn as n } from "../../lib/utils.js";
 import * as f from "react";
 const h = f.forwardRef(
-  ({ size: l = "md", selected: i = !1, disabled: e = !1, onRemove: a, onClick: r, children: p, className: d }, c) => {
+  ({ size: l = "md", selected: i = !1, disabled: e = !1, onRemove: a, onClick: r, children: d, className: p }, c) => {
     const s = l === "md", t = !!a, u = r ? "button" : "span";
     return /* @__PURE__ */ x(
       "div",
       {
         ref: c,
         className: n(
-          "inline-flex items-center border rounded-[4px] bg-ds-background-default select-none transition-colors",
+          "inline-flex items-center border rounded-ds-ss bg-ds-background-default select-none transition-colors",
           // 좌우 여백은 컨테이너가 아니라 본문(클릭 대상)이 갖는다.
           // 컨테이너에 두면 여백 영역이 클릭되지 않는 죽은 공간이 된다.
           s ? t ? "h-8 pr-1" : "h-8" : t ? "h-[26px] pr-0.5" : "h-[26px]",
           s ? "text-body-3-r" : "text-body-4-r",
           e ? "border-ds-line-normal text-ds-text-disabled cursor-not-allowed" : i ? "border-ds-primary-blue-normal text-ds-text-strong cursor-pointer" : "border-ds-line-normal text-ds-text-strong cursor-pointer hover:border-ds-line-strong",
-          d
+          p
         ),
         children: [
           /* @__PURE__ */ o(
@@ -36,7 +36,7 @@ const h = f.forwardRef(
                 r && !e && "cursor-pointer",
                 r && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ds-primary-blue-normal rounded-[3px]"
               ),
-              children: p
+              children: d
             }
           ),
           t && /* @__PURE__ */ o(

package/dist/components/ui/dropdown.js

@@ -2,7 +2,7 @@
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
 import { DropdownArrowIcon as _, SelectCheckIcon as C, CheckboxCheckedIcon as V, CheckboxUncheckedIcon as ee, RadioCheckedIcon as te, RadioUncheckedIcon as re } from "../../lib/icons.js";
 import { cn as m } from "../../lib/utils.js";
-import * as a from "react";
+import * as l from "react";
 import { Button as q } from "./button.js";
 const k = {
   lg: {
@@ -20,19 +20,19 @@ const k = {
     option: "h-8 pl-3 pr-2",
     text: "text-body-3-r"
   }
-}, se = a.forwardRef(
+}, se = l.forwardRef(
   ({
-    type: o = "default",
-    options: d,
+    type: i = "default",
+    options: o,
     value: A,
     onValueChange: w,
     values: n,
     onValuesChange: N,
     placeholder: L = "선택해주세요",
-    label: g,
+    label: h,
     showLabel: v = !0,
     require: M,
-    size: h = "lg",
+    size: g = "lg",
     disabled: x,
     readOnly: y,
     error: b,
@@ -47,58 +47,58 @@ const k = {
     className: G,
     "aria-label": J
   }, P) => {
-    const [s, i] = a.useState(!1), [c, D] = a.useState(-1), E = a.useRef(null), U = a.useRef(null), K = a.useRef(null), f = a.useId(), j = (e) => `${f}-option-${e}`;
-    a.useEffect(() => {
+    const [s, d] = l.useState(!1), [c, D] = l.useState(-1), E = l.useRef(null), U = l.useRef(null), K = l.useRef(null), f = l.useId(), j = (e) => `${f}-option-${e}`;
+    l.useEffect(() => {
       const e = (t) => {
-        E.current && !E.current.contains(t.target) && i(!1);
+        E.current && !E.current.contains(t.target) && d(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, []), a.useEffect(() => {
+    }, []), l.useEffect(() => {
       s || D(-1);
-    }, [s]), a.useEffect(() => {
+    }, [s]), l.useEffect(() => {
       var e, t;
       !s || c < 0 || (t = (e = U.current) == null ? void 0 : e.querySelector(`#${CSS.escape(j(c))}`)) == null || t.scrollIntoView({ block: "nearest" });
     }, [s, c]);
-    const Q = (e) => o === "checkbox" ? (n == null ? void 0 : n.includes(e)) ?? !1 : e === A, $ = d.find((e) => e.value === A), W = () => o === "checkbox" ? !n || n.length === 0 ? L : d.filter((t) => n.includes(t.value)).map((t) => t.label).join(", ") : $ ? $.label : L, X = () => {
-      x || y || i((e) => !e);
+    const Q = (e) => i === "checkbox" ? (n == null ? void 0 : n.includes(e)) ?? !1 : e === A, $ = o.find((e) => e.value === A), W = () => i === "checkbox" ? !n || n.length === 0 ? L : o.filter((t) => n.includes(t.value)).map((t) => t.label).join(", ") : $ ? $.label : L, X = () => {
+      x || y || d((e) => !e);
     }, T = (e) => {
-      if (o === "checkbox") {
-        const t = n ?? [], l = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
-        N == null || N(l);
+      if (i === "checkbox") {
+        const t = n ?? [], a = t.includes(e) ? t.filter((p) => p !== e) : [...t, e];
+        N == null || N(a);
       } else
-        w == null || w(e), i(!1);
-    }, Y = o === "checkbox" ? ((n == null ? void 0 : n.length) ?? 0) > 0 : !!$, Z = (e) => {
-      var l;
+        w == null || w(e), d(!1);
+    }, Y = i === "checkbox" ? ((n == null ? void 0 : n.length) ?? 0) > 0 : !!$, Z = (e) => {
+      var a;
       if (x || y) return;
       const t = (p) => {
-        e.preventDefault(), s || i(!0), D(p);
+        e.preventDefault(), s || d(!0), D(p);
       };
       switch (e.key) {
         case "ArrowDown":
-          return t(s ? Math.min(c + 1, d.length - 1) : 0);
+          return t(s ? Math.min(c + 1, o.length - 1) : 0);
         case "ArrowUp":
-          return t(s ? Math.max(c - 1, 0) : d.length - 1);
+          return t(s ? Math.max(c - 1, 0) : o.length - 1);
         case "Home":
           return s ? t(0) : void 0;
         case "End":
-          return s ? t(d.length - 1) : void 0;
+          return s ? t(o.length - 1) : void 0;
         case "Enter":
         case " ":
-          e.preventDefault(), s ? c >= 0 && T(d[c].value) : i(!0);
+          e.preventDefault(), s ? c >= 0 && T(o[c].value) : d(!0);
           return;
         case "Escape":
-          s && (e.preventDefault(), i(!1), (l = K.current) == null || l.focus());
+          s && (e.preventDefault(), d(!1), (a = K.current) == null || a.focus());
           return;
         case "Tab":
-          i(!1);
+          d(!1);
           return;
         default:
           return;
       }
     };
     return /* @__PURE__ */ u("div", { ref: P, className: m("flex flex-col gap-2", F), children: [
-      v && g && /* @__PURE__ */ u("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
-        /* @__PURE__ */ r("span", { id: `${f}-label`, className: "text-body-2-r text-ds-text-strong", children: g }),
+      v && h && /* @__PURE__ */ u("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
+        /* @__PURE__ */ r("span", { id: `${f}-label`, className: "text-body-2-r text-ds-text-strong", children: h }),
         M && /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
       ] }),
       /* @__PURE__ */ u("div", { ref: E, className: "relative", children: [
@@ -112,8 +112,8 @@ const k = {
             "aria-haspopup": "listbox",
             "aria-controls": s ? f : void 0,
             "aria-activedescendant": s && c >= 0 ? j(c) : void 0,
-            "aria-labelledby": v && g ? `${f}-label` : void 0,
-            "aria-label": v && g ? void 0 : J,
+            "aria-labelledby": v && h ? `${f}-label` : void 0,
+            "aria-label": v && h ? void 0 : J,
             "aria-invalid": b ? !0 : void 0,
             "aria-describedby": b || I ? `${f}-description` : void 0,
             "aria-required": M || void 0,
@@ -121,9 +121,9 @@ const k = {
             onClick: X,
             onKeyDown: Z,
             className: m(
-              "flex items-center w-full rounded-lg border transition-colors",
+              "flex items-center w-full rounded-ds-md border transition-colors",
               x ? "bg-ds-surface-strong border-ds-line-normal cursor-not-allowed" : y ? "bg-ds-surface-normal border-ds-line-normal cursor-default" : b ? "bg-ds-background-default border-ds-primary-red-normal hover:bg-ds-surface-normal" : s ? "bg-ds-background-default border-ds-primary-blue-normal" : "bg-ds-background-default border-ds-line-normal hover:bg-ds-surface-normal hover:border-ds-line-strong",
-              k[h].trigger,
+              k[g].trigger,
               G
             ),
             children: [
@@ -133,7 +133,7 @@ const k = {
                 {
                   className: m(
                     "flex-1 min-w-0 text-left truncate font-sans",
-                    k[h].text,
+                    k[g].text,
                     Y ? "text-ds-text-strong" : x ? "text-ds-text-disabled" : "text-ds-text-normal"
                   ),
                   children: W()
@@ -159,11 +159,11 @@ const k = {
             ref: U,
             id: f,
             role: "listbox",
-            "aria-multiselectable": o === "checkbox" ? !0 : void 0,
-            className: "absolute top-full left-0 z-50 mt-1 min-w-full w-max max-w-sm bg-ds-background-default border border-ds-line-normal rounded-lg p-1 shadow-ds-default",
+            "aria-multiselectable": i === "checkbox" ? !0 : void 0,
+            className: "absolute top-full left-0 z-50 mt-1 min-w-full w-max max-w-sm bg-ds-background-default border border-ds-line-normal rounded-ds-md p-1 shadow-ds-default",
             children: [
-              d.map((e, t) => {
-                const l = Q(e.value), p = t === c;
+              o.map((e, t) => {
+                const a = Q(e.value), p = t === c;
                 return (
                   // 키보드 조작은 aria-activedescendant 패턴에 따라 combobox 트리거의
                   // onKeyDown이 전담한다(옵션은 포커스를 받지 않는 것이 WAI-ARIA 권고).
@@ -174,13 +174,13 @@ const k = {
                     {
                       id: j(t),
                       role: "option",
-                      "aria-selected": l,
+                      "aria-selected": a,
                       onClick: () => T(e.value),
                       onMouseEnter: () => D(t),
                       className: m(
-                        "flex items-center rounded-lg cursor-pointer gap-1.5 transition-colors",
-                        k[h].option,
-                        l ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
+                        "flex items-center rounded-ds-md cursor-pointer gap-1.5 transition-colors",
+                        k[g].option,
+                        a ? "bg-ds-surface-normal" : "bg-ds-background-default hover:bg-ds-surface-normal",
                         // 키보드 이동 위치 표시 (마우스 hover와 구분되도록 링으로)
                         p && "ring-1 ring-inset ring-ds-primary-blue-normal"
                       ),
@@ -190,15 +190,15 @@ const k = {
                           {
                             className: m(
                               "flex-1 min-w-0 truncate font-sans",
-                              k[h].text,
+                              k[g].text,
                               "text-ds-text-strong"
                             ),
                             children: e.label
                           }
                         ),
-                        o === "default" && l && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ r(C, {}) }),
-                        o === "checkbox" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(V, {}) : /* @__PURE__ */ r(ee, {}) }),
-                        o === "radio" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: l ? /* @__PURE__ */ r(te, {}) : /* @__PURE__ */ r(re, {}) })
+                        i === "default" && a && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center text-ds-text-strong", children: /* @__PURE__ */ r(C, {}) }),
+                        i === "checkbox" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: a ? /* @__PURE__ */ r(V, {}) : /* @__PURE__ */ r(ee, {}) }),
+                        i === "radio" && /* @__PURE__ */ r("span", { className: "shrink-0 flex items-center justify-center", children: a ? /* @__PURE__ */ r(te, {}) : /* @__PURE__ */ r(re, {}) })
                       ]
                     },
                     e.value
@@ -213,7 +213,7 @@ const k = {
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      R == null || R(), i(!1);
+                      R == null || R(), d(!1);
                     },
                     children: B
                   }
@@ -226,7 +226,7 @@ const k = {
                     size: "lg",
                     className: "flex-1",
                     onClick: () => {
-                      S == null || S(), i(!1);
+                      S == null || S(), d(!1);
                     },
                     children: H
                   }

package/dist/components/ui/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { EyeOnIcon as E, EyeOffIcon as P } from "../../lib/icons.js";
-import { cn as r } from "../../lib/utils.js";
+import { cn as d } from "../../lib/utils.js";
 import * as o from "react";
 const I = {
   lg: {
@@ -18,7 +18,7 @@ const I = {
   }
 }, V = o.forwardRef(
   ({
-    label: d,
+    label: r,
     showLabel: c = !0,
     require: l,
     message: n,
@@ -44,17 +44,17 @@ const I = {
         children: m ? /* @__PURE__ */ e(E, {}) : /* @__PURE__ */ e(P, {})
       }
     ) : null);
-    return /* @__PURE__ */ i("div", { className: r("flex flex-col gap-2", F), children: [
-      c && d && /* @__PURE__ */ i("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
-        /* @__PURE__ */ e("label", { htmlFor: y, className: "text-body-2-r text-ds-text-strong", children: d }),
+    return /* @__PURE__ */ i("div", { className: d("flex flex-col gap-2", F), children: [
+      c && r && /* @__PURE__ */ i("div", { className: "flex items-start gap-0.5 whitespace-nowrap", children: [
+        /* @__PURE__ */ e("label", { htmlFor: y, className: "text-body-2-r text-ds-text-strong", children: r }),
         l && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "text-body-2-r text-ds-primary-red-normal", children: "*" })
       ] }),
       n && /* @__PURE__ */ e("p", { id: N, className: "text-body-4-r text-ds-text-strong", children: n }),
       /* @__PURE__ */ i(
         "div",
         {
-          className: r(
-            "flex items-center overflow-hidden bg-ds-background-default border rounded-lg transition-colors",
+          className: d(
+            "flex items-center overflow-hidden bg-ds-background-default border rounded-ds-md transition-colors",
             t ? "border-ds-primary-red-normal" : "border-ds-line-normal hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal",
             (b || f) && "bg-ds-surface-normal",
             I[a].container
@@ -69,7 +69,7 @@ const I = {
                 "aria-invalid": t ? !0 : void 0,
                 "aria-describedby": B,
                 "aria-required": l || void 0,
-                className: r(
+                className: d(
                   "flex-1 min-w-0 bg-transparent outline-none font-sans",
                   "text-ds-text-strong placeholder:text-ds-text-normal",
                   "disabled:text-ds-text-disabled",
@@ -89,7 +89,7 @@ const I = {
         "p",
         {
           id: v,
-          className: r(
+          className: d(
             "text-body-4-r",
             t ? "text-ds-primary-red-normal" : "text-ds-text-normal"
           ),
@@ -101,16 +101,16 @@ const I = {
 );
 V.displayName = "InputField";
 const $ = o.forwardRef(
-  ({ label: d, showLabel: c = !0, wrapperClassName: l, className: n, ...s }, t) => {
+  ({ label: r, showLabel: c = !0, wrapperClassName: l, className: n, ...s }, t) => {
     const x = o.useId(), a = s.id ?? x;
-    return /* @__PURE__ */ i("div", { className: r("flex flex-col gap-2", l), children: [
-      c && d && /* @__PURE__ */ e("label", { htmlFor: a, className: "text-body-2-r text-ds-text-strong", children: d }),
-      /* @__PURE__ */ e("div", { className: "overflow-hidden border border-ds-line-normal bg-ds-background-default rounded-lg p-3 hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal transition-colors", children: /* @__PURE__ */ e(
+    return /* @__PURE__ */ i("div", { className: d("flex flex-col gap-2", l), children: [
+      c && r && /* @__PURE__ */ e("label", { htmlFor: a, className: "text-body-2-r text-ds-text-strong", children: r }),
+      /* @__PURE__ */ e("div", { className: "overflow-hidden border border-ds-line-normal bg-ds-background-default rounded-ds-md p-3 hover:border-ds-line-strong focus-within:border-ds-primary-blue-normal transition-colors", children: /* @__PURE__ */ e(
         "textarea",
         {
           ref: t,
           id: a,
-          className: r(
+          className: d(
             "w-full min-h-[114px] resize-none bg-transparent outline-none font-sans",
             "text-body-3-r text-ds-text-strong placeholder:text-ds-text-normal",
             "disabled:text-ds-text-disabled",