@hivcd-printshop/design-system 1.3.0 → 1.3.2

package/dist/index.d.mts

@@ -393,6 +393,11 @@ type RadioToggle = {
     className?: string;
     labelTextButton?: string;
     onClickTextButton?: () => void;
+    /**
+     * labelTextButton 앞에 느낌표 아이콘을 붙일지. 기본 false(Figma "상세 안내 페이지"
+     * 링크는 아이콘이 없다). 관리자 문의 등 경고성 링크에만 true로 켠다.
+     */
+    textButtonIcon?: boolean;
 };
 interface SideRadioAccordionProps {
     step: number;

package/dist/index.d.ts

@@ -393,6 +393,11 @@ type RadioToggle = {
     className?: string;
     labelTextButton?: string;
     onClickTextButton?: () => void;
+    /**
+     * labelTextButton 앞에 느낌표 아이콘을 붙일지. 기본 false(Figma "상세 안내 페이지"
+     * 링크는 아이콘이 없다). 관리자 문의 등 경고성 링크에만 true로 켠다.
+     */
+    textButtonIcon?: boolean;
 };
 interface SideRadioAccordionProps {
     step: number;

package/dist/index.js

@@ -282,8 +282,8 @@ var IconRadioSelected = ({
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#121212" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "4", fill: fill || "#121212" })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#121212", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "3.5", fill: fill || "#121212" })
       ]
     }
   );
@@ -301,7 +301,7 @@ var IconRadioUnselected = ({
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#B4B9C2" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#505865", strokeWidth: "1.5" })
     }
   );
 };
@@ -1496,6 +1496,7 @@ var RadioToggleItem = ({
   className,
   labelTextButton,
   onClickTextButton,
+  textButtonIcon = false,
   open,
   onSelect
 }) => {
@@ -1509,7 +1510,7 @@ var RadioToggleItem = ({
         onClick: onSelect,
         style,
         className: cn(
-          "group w-full flex items-center gap-1.5 p-3",
+          "group w-full flex items-center p-3",
           "text-body1-regular text-left cursor-pointer",
           open ? "text-strong" : "text-secondary",
           rowBg,
@@ -1529,7 +1530,7 @@ var RadioToggleItem = ({
         {
           label: labelTextButton,
           onClick: onClickTextButton,
-          showIcon: true,
+          showIcon: textButtonIcon,
           className: "self-end"
         }
       )
@@ -1539,8 +1540,9 @@ var RadioToggleItem = ({
 var Radio = ({ selected = false, className }) => {
   const Icon = selected ? IconRadioSelected : IconRadioUnselected;
   return (
-    // 디자인 스펙(Figma "radio" 5:781): 아이콘 자체 색은 고정, hover/pressed 시
-    // 24px 원형 배경 칩만 나타난다(gray00/gray01). 부모 버튼의 group-hover/active로 동기화.
+    // 디자인 스펙(Figma "radio" 5:781): 24px 히트 영역 안에 10px 원만 중앙에 그려진다.
+    // 아이콘 자체 색은 고정, hover/pressed 시 24px 원형 배경 칩만 나타난다(gray00/gray01).
+    // 부모 버튼의 group-hover/active로 동기화.
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "span",
       {
@@ -1549,7 +1551,7 @@ var Radio = ({ selected = false, className }) => {
           "group-hover:bg-gray00 group-active:bg-gray01",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "size-6" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "size-2.5" })
       }
     )
   );
@@ -1694,11 +1696,7 @@ var WeekNavigation = (0, import_react8.forwardRef)(
 var ArrowButton = ({ direction, visible, onClick }) => {
   const divider = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-stretch", children: [
-      direction === "right" && divider,
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "w-[42px]" }),
-      direction === "left" && divider
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "w-[43px]" });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-stretch", children: [
     direction === "right" && divider,
@@ -1761,7 +1759,7 @@ var Timetable = (0, import_react9.forwardRef)(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       DailyTimetable,
       {
         date: day.date,
@@ -1776,19 +1774,24 @@ var Timetable = (0, import_react9.forwardRef)(function Timetable2({
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
-    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      TimeItem,
-      {
-        state: slot.state,
-        label: slot.time,
-        printColor: slot.printColor,
-        color: slot.color,
-        fluid,
-        className: slot.className,
-        onClick: onSelectTime ? () => onSelectTime(slot.time) : void 0
-      },
-      slot.time
-    ))
+    slots.map((slot, index) => {
+      const prevState = index > 0 ? slots[index - 1].state : void 0;
+      const withTopBorder = slot.state !== "none" && prevState === "none";
+      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        TimeItem,
+        {
+          state: slot.state,
+          label: slot.time,
+          printColor: slot.printColor,
+          color: slot.color,
+          fluid,
+          withTopBorder,
+          className: slot.className,
+          onClick: onSelectTime ? () => onSelectTime(slot.time) : void 0
+        },
+        slot.time
+      );
+    })
   ] });
 };
 var TimeItem = ({
@@ -1797,6 +1800,7 @@ var TimeItem = ({
   printColor,
   color,
   fluid,
+  withTopBorder = false,
   onClick,
   className
 }) => {
@@ -1813,6 +1817,7 @@ var TimeItem = ({
         "text-body1-medium text-center bg-white text-primary",
         // "none"(일정 없음)은 구분선을 그리지 않아 연속된 빈 칸이 하나의 덩어리로 보이게 한다.
         state === "none" ? "bg-gray00 text-transparent" : "border-b border-gray02",
+        withTopBorder && "border-t border-gray02",
         state === "selected" && "bg-black text-white hover:cursor-pointer",
         state === "disabled" && "bg-gray00 text-gray03",
         state === "default" && [