sellmate-design-system-react 9.0.0-beta.97 → 9.0.0-beta.99

package/dist/index.js

@@ -4124,7 +4124,7 @@ var SBadge = /* @__PURE__ */ forwardRef(function SBadge2({ color = "blue", class
 
 // src/components/SButton/button.config.ts
 var BUTTON_COLORS = ["primary", "secondary", "neutral", "danger"];
-var BUTTON_SIZES = ["xs", "sm", "md", "lg"];
+var BUTTON_SIZES = ["xxs", "xs", "sm", "md", "lg"];
 var V = (path) => `var(--cmp-button-${path})`;
 function buttonPreset(color, outline) {
   switch (color) {
@@ -4175,6 +4175,25 @@ function buttonPreset(color, outline) {
   }
 }
 var BUTTON_SIZE_CONFIG = {
+  /**
+   * 본문 텍스트 사이에 끼워 서는 버튼 — 높이가 본문 줄 높이(12px/20px)와 같아 줄이 벌어지지 않는다.
+   * 버튼 xxs 컴포넌트 토큰(--cmp-button-xxs-*)이 아직 없어 공용 토큰으로 둔다. 디자인팀이 내면 바꾼다.
+   */
+  xxs: {
+    height: "var(--spacing-sd-20)",
+    paddingX: "var(--spacing-sd-6)",
+    gap: "var(--spacing-sd-4)",
+    iconSize: "var(--cmp-button-xs-icon)",
+    iconOnlyWidth: "var(--spacing-sd-20)",
+    fontSize: 11,
+    fontWeight: 500,
+    radius: "var(--cmp-button-radius-sm)",
+    // 번호 하나·짧은 낱말이 그대로 서야 해서 최소 폭을 두지 않는다
+    minWidth: 0,
+    // 11px 글자의 글꼴 상자(13px)가 안쪽 높이(18px)에 반 픽셀 자리로 놓이고, Pretendard 는 위가 넓어
+    // 한글이 0.8px 위로 쏠린다. 라벨에 위 여백 1px 을 줘 0.5px 내린다 — 글자 크기·높이를 바꾸면 다시 잰다
+    labelOffsetTop: "1px"
+  },
   xs: {
     height: "var(--cmp-button-xs-height)",
     paddingX: "var(--cmp-button-xs-paddingX)",
@@ -4232,6 +4251,7 @@ var SButton = /* @__PURE__ */ forwardRef(function SButton2({
   icon,
   rightIcon,
   label,
+  pill = false,
   className,
   style,
   type = "button",
@@ -4262,7 +4282,8 @@ var SButton = /* @__PURE__ */ forwardRef(function SButton2({
     "minHeight": s.height,
     "minWidth": iconOnly ? s.iconOnlyWidth : hasLabel ? s.minWidth : void 0,
     "padding": iconOnly ? 0 : `0 ${s.paddingX}`,
-    "borderRadius": s.radius,
+    // 버튼 전용 pill 반경 토큰이 아직 없어 공용 반경을 쓴다
+    "borderRadius": pill ? "var(--radius-full)" : s.radius,
     "gap": s.gap,
     "fontSize": s.fontSize,
     "fontWeight": s.fontWeight,
@@ -4287,7 +4308,14 @@ var SButton = /* @__PURE__ */ forwardRef(function SButton2({
       ...props,
       children: [
         iconNode,
-        hasLabel && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center", children: label }),
+        hasLabel && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-flex items-center justify-center",
+            style: s.labelOffsetTop ? { paddingTop: s.labelOffsetTop } : void 0,
+            children: label
+          }
+        ),
         rightIconNode
       ]
     }