@hivcd-printshop/design-system 1.2.1 → 1.2.3

package/dist/index.mjs

@@ -175,6 +175,89 @@ var IconCompass = ({ className, fill }) => {
     }
   );
 };
+var IconRadioSelected = ({
+  className,
+  stroke,
+  fill
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#121212" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "4", fill: fill || "#121212" })
+      ]
+    }
+  );
+};
+var IconRadioUnselected = ({
+  className,
+  stroke
+}) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#B4B9C2" })
+    }
+  );
+};
+var IconExclamation = ({ className, fill }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6.41438 7.18735H5.57954L5.50175 3.10938H6.49218L6.41438 7.18735ZM5.40001 8.3313C5.39801 8.23061 5.42395 8.13738 5.47781 8.05161C5.53167 7.96583 5.60448 7.89777 5.69624 7.84743C5.79 7.79708 5.89174 7.77191 6.00145 7.77191C6.10718 7.77191 6.20592 7.79708 6.29768 7.84743C6.38945 7.89777 6.46226 7.96583 6.51612 8.05161C6.57197 8.13738 6.5999 8.23061 6.5999 8.3313C6.5999 8.43199 6.57197 8.52522 6.51612 8.611C6.46226 8.69677 6.38945 8.76483 6.29768 8.81518C6.20592 8.86552 6.10718 8.89069 6.00145 8.89069C5.89174 8.89069 5.79 8.86552 5.69624 8.81518C5.60448 8.76483 5.53167 8.69677 5.47781 8.611C5.42395 8.52522 5.39801 8.43199 5.40001 8.3313Z",
+            fill: fill || "#505865"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4.5", stroke: fill || "#505865" })
+      ]
+    }
+  );
+};
+var IconClose = ({ className, stroke }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4 4L12 12M12 4L4 12",
+          stroke: stroke || "#6d7683",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+};
 
 // src/components/BackButton/BackButton.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -862,30 +945,49 @@ function List({
 
 // src/components/Modal/Modal.tsx
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
-var ModalBase = ({ isVisible, header, children, className }) => {
+var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ jsx25("div", { className: cn("fixed inset-0 z-50 pointer-events-auto"), children: /* @__PURE__ */ jsx25(
-    "div",
-    {
-      className: cn("fixed inset-0 z-1001 flex items-center justify-center pointer-events-auto"),
-      children: /* @__PURE__ */ jsxs14(
-        "main",
-        {
-          className: cn(
-            "w-110 pt-8 h-fit",
-            "flex flex-col items-center",
-            "border border-gray02",
-            "bg-white shadow-[0 0 30px 0 rgba(0, 0, 0, 0.08);]",
-            className
+  return /* @__PURE__ */ jsxs14("div", { className: cn("fixed inset-0 z-50"), children: [
+    /* @__PURE__ */ jsx25(
+      "div",
+      {
+        "aria-hidden": true,
+        onClick: onClose,
+        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(
+      "main",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        className: cn(
+          "relative w-110 pt-8 h-fit pointer-events-auto",
+          "flex flex-col items-center",
+          "border border-gray02",
+          "bg-white shadow-[0px_0px_30px_0px_rgba(0,0,0,0.08)]",
+          className
+        ),
+        children: [
+          onClose && /* @__PURE__ */ jsx25(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "\uB2EB\uAE30",
+              className: cn(
+                "absolute right-3 top-3 flex size-8 items-center justify-center",
+                "text-tertiary transition-colors hover:bg-gray00 active:bg-gray01 cursor-pointer"
+              ),
+              children: /* @__PURE__ */ jsx25(IconClose, {})
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsx25("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
-            children
-          ]
-        }
-      )
-    }
-  ) });
+          /* @__PURE__ */ jsx25("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          children
+        ]
+      }
+    ) })
+  ] });
 };
 var Contents = ({ children, className }) => {
   return /* @__PURE__ */ jsx25(
@@ -1137,18 +1239,6 @@ function useControllableState(controlled, defaultValue) {
   return [value, setValue, isControlled];
 }
 
-// src/components/SideRadioAccordion/Exclamation.svg
-var Exclamation_default = "./Exclamation-IUYZYYC4.svg";
-
-// src/components/SideRadioAccordion/ChevronDown.svg
-var ChevronDown_default = "./ChevronDown-XSALXCW4.svg";
-
-// src/components/SideRadioAccordion/RadioSelected.svg
-var RadioSelected_default = "./RadioSelected-DOLVV7ZM.svg";
-
-// src/components/SideRadioAccordion/RadioUnselected.svg
-var RadioUnselected_default = "./RadioUnselected-QN74EU46.svg";
-
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
 import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var printColorBgClass = {
@@ -1239,14 +1329,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ jsx33(
-          "img",
-          {
-            src: ChevronDown_default,
-            alt: "",
-            className: cn("transition-transform", isOpen && "rotate-180")
-          }
-        )
+        /* @__PURE__ */ jsx33(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1273,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
         ),
@@ -1286,7 +1370,7 @@ var RadioToggleItem = ({
     ),
     open && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
       /* @__PURE__ */ jsx33("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ jsx33("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx33(Badge, { label: badge }, badge)) }),
+      badges && badges.length > 0 && /* @__PURE__ */ jsx33("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx33(Badge, { label: badge }, badge)) }),
       labelTextButton && /* @__PURE__ */ jsx33(
         TextButton2,
         {
@@ -1300,13 +1384,21 @@ var RadioToggleItem = ({
   ] });
 };
 var Radio = ({ selected = false, className }) => {
-  return /* @__PURE__ */ jsx33(
-    "img",
-    {
-      src: selected ? RadioSelected_default : RadioUnselected_default,
-      alt: "",
-      className: cn("w-6 h-6", className)
-    }
+  const Icon = selected ? IconRadioSelected : IconRadioUnselected;
+  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 }) => {
@@ -1323,7 +1415,7 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ jsx33("img", { src: Exclamation_default, alt: "" }),
+        showIcon && /* @__PURE__ */ jsx33(IconExclamation, {}),
         label
       ]
     }
@@ -1334,7 +1426,7 @@ var Badge = ({ label, className }) => {
     "div",
     {
       className: cn(
-        "w-fit h-fit px-2 py-0.5 border border-gray02",
+        "w-fit h-fit px-2 py-0.5 border border-gray02 shrink-0 whitespace-nowrap",
         "text-tertiary text-caption-book",
         className
       ),
@@ -1744,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))
         ] })
       ]
     }
@@ -1773,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
       ),
@@ -1964,8 +2054,12 @@ export {
   FormTextArea,
   IconCheck,
   IconChevronDownXS,
+  IconClose,
   IconCompass,
+  IconExclamation,
   IconInfo,
+  IconRadioSelected,
+  IconRadioUnselected,
   List,
   Modal,
   ModalText,