@hivcd-printshop/design-system 1.2.2 → 1.2.3

package/dist/index.mjs

@@ -953,7 +953,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
       {
         "aria-hidden": true,
         onClick: onClose,
-        className: cn("fixed inset-0 z-1000 bg-black/10", onClose && "cursor-pointer")
+        className: cn("fixed inset-0 z-1000 bg-[#212121]/30", onClose && "cursor-pointer")
       }
     ),
     /* @__PURE__ */ jsx25("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs14(
@@ -1356,8 +1356,9 @@ var RadioToggleItem = ({
         onClick: onSelect,
         style,
         className: cn(
-          "w-full flex items-center gap-1.5 p-3",
-          "text-body1-regular text-secondary text-left cursor-pointer",
+          "group w-full flex items-center gap-1.5 p-3",
+          "text-body1-regular text-left cursor-pointer",
+          open ? "text-strong" : "text-secondary",
           rowBg,
           className
         ),
@@ -1384,7 +1385,21 @@ var RadioToggleItem = ({
 };
 var Radio = ({ selected = false, className }) => {
   const Icon = selected ? IconRadioSelected : IconRadioUnselected;
-  return /* @__PURE__ */ jsx33(Icon, { className: cn("w-6 h-6", className) });
+  return (
+    // 디자인 스펙(Figma "radio" 5:781): 아이콘 자체 색은 고정, hover/pressed 시
+    // 24px 원형 배경 칩만 나타난다(gray00/gray01). 부모 버튼의 group-hover/active로 동기화.
+    /* @__PURE__ */ jsx33(
+      "span",
+      {
+        className: cn(
+          "inline-flex size-6 shrink-0 items-center justify-center rounded-full transition-colors",
+          "group-hover:bg-gray00 group-active:bg-gray01",
+          className
+        ),
+        children: /* @__PURE__ */ jsx33(Icon, { className: "size-6" })
+      }
+    )
+  );
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
   return /* @__PURE__ */ jsxs18(
@@ -1821,14 +1836,10 @@ var UpperPart = ({
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
           /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-          upperPartIconList.map((icon, index) => /* @__PURE__ */ jsx37(
-            NavIconButton,
-            {
-              ...icon,
-              linkComponent
-            },
-            icon.id ?? icon.src ?? icon.label ?? index
-          ))
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
+            /* @__PURE__ */ jsx37(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
     }
@@ -1850,7 +1861,9 @@ var UpperPartTab = ({
       linkComponent,
       current: selected,
       className: cn(
-        "inline-flex min-h-13 flex-col items-center gap-2 pt-2.5 cursor-pointer no-underline",
+        // 헤더 바닥 border-b와 언더라인이 겹치도록 높이를 52px로 고정하고
+        // justify-between으로 라벨/언더라인을 위-아래 끝에 붙인다.
+        "inline-flex h-13 flex-col items-center justify-between pt-2.5 cursor-pointer no-underline",
         "transition-colors hover:bg-gray00 active:bg-gray01",
         className
       ),