@hivcd-printshop/design-system 1.2.2 → 1.2.3

package/dist/index.js

@@ -1026,7 +1026,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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
@@ -1429,8 +1429,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
         ),
@@ -1457,7 +1458,21 @@ var RadioToggleItem = ({
 };
 var Radio = ({ selected = false, className }) => {
   const Icon = selected ? IconRadioSelected : IconRadioUnselected;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { className: cn("w-6 h-6", className) });
+  return (
+    // 디자인 스펙(Figma "radio" 5:781): 아이콘 자체 색은 고정, hover/pressed 시
+    // 24px 원형 배경 칩만 나타난다(gray00/gray01). 부모 버튼의 group-hover/active로 동기화.
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "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__ */ (0, import_jsx_runtime33.jsx)(Icon, { className: "size-6" })
+      }
+    )
+  );
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
@@ -1889,14 +1904,10 @@ var UpperPart = ({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            NavIconButton,
-            {
-              ...icon,
-              linkComponent
-            },
-            icon.id ?? icon.src ?? icon.label ?? index
-          ))
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react9.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
     }
@@ -1918,7 +1929,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
       ),