@hivcd-printshop/design-system 1.3.0 → 1.3.2

package/dist/index.mjs

@@ -208,8 +208,8 @@ var IconRadioSelected = ({
       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" })
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#121212", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3.5", fill: fill || "#121212" })
       ]
     }
   );
@@ -227,7 +227,7 @@ var IconRadioUnselected = ({
       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" })
+      children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#505865", strokeWidth: "1.5" })
     }
   );
 };
@@ -1422,6 +1422,7 @@ var RadioToggleItem = ({
   className,
   labelTextButton,
   onClickTextButton,
+  textButtonIcon = false,
   open,
   onSelect
 }) => {
@@ -1435,7 +1436,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,
@@ -1455,7 +1456,7 @@ var RadioToggleItem = ({
         {
           label: labelTextButton,
           onClick: onClickTextButton,
-          showIcon: true,
+          showIcon: textButtonIcon,
           className: "self-end"
         }
       )
@@ -1465,8 +1466,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__ */ jsx34(
       "span",
       {
@@ -1475,7 +1477,7 @@ var Radio = ({ selected = false, className }) => {
           "group-hover:bg-gray00 group-active:bg-gray01",
           className
         ),
-        children: /* @__PURE__ */ jsx34(Icon, { className: "size-6" })
+        children: /* @__PURE__ */ jsx34(Icon, { className: "size-2.5" })
       }
     )
   );
@@ -1620,11 +1622,7 @@ var WeekNavigation = forwardRef3(
 var ArrowButton = ({ direction, visible, onClick }) => {
   const divider = /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ jsxs20("div", { className: "flex items-stretch", children: [
-      direction === "right" && divider,
-      /* @__PURE__ */ jsx36("span", { className: "w-[42px]" }),
-      direction === "left" && divider
-    ] });
+    return /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: "w-[43px]" });
   }
   return /* @__PURE__ */ jsxs20("div", { className: "flex items-stretch", children: [
     direction === "right" && divider,
@@ -1687,7 +1685,7 @@ var Timetable = forwardRef4(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ jsx37("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx37("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx37(
       DailyTimetable,
       {
         date: day.date,
@@ -1702,19 +1700,24 @@ var Timetable = forwardRef4(function Timetable2({
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
   return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
     /* @__PURE__ */ jsx37("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__ */ jsx37(
-      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__ */ jsx37(
+        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 = ({
@@ -1723,6 +1726,7 @@ var TimeItem = ({
   printColor,
   color,
   fluid,
+  withTopBorder = false,
   onClick,
   className
 }) => {
@@ -1739,6 +1743,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" && [