@hivcd-printshop/design-system 1.3.1 → 1.3.3

package/dist/index.mjs

@@ -1551,11 +1551,56 @@ var Tag = ({
   );
 };
 
+// src/components/TabSwitch/TabSwitch.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+var itemKey2 = (item) => item.value ?? item.label;
+var TabSwitch = forwardRef3(function TabSwitch2({ items, selected, defaultSelected, onSelect, className }, ref) {
+  const [selectedValue, setSelectedValue] = useControllableState(
+    selected,
+    defaultSelected ?? itemKey2(items[0])
+  );
+  return /* @__PURE__ */ jsx36("div", { ref, className: cn("w-full border-b border-gray02", className), children: /* @__PURE__ */ jsx36("div", { className: "flex items-stretch", children: items.map((item) => {
+    const key = itemKey2(item);
+    const isSelected = key === selectedValue;
+    return /* @__PURE__ */ jsxs20("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ jsxs20(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setSelectedValue(key);
+            onSelect?.(key);
+          },
+          className: cn(
+            "flex flex-col items-center pt-2.5 cursor-pointer",
+            isSelected ? "gap-2" : "pb-2.5"
+          ),
+          children: [
+            /* @__PURE__ */ jsx36(
+              "span",
+              {
+                className: cn(
+                  "px-4 whitespace-nowrap",
+                  isSelected ? "text-body1-medium text-strong" : "text-body1-regular text-quaternary"
+                ),
+                children: item.label
+              }
+            ),
+            isSelected && /* @__PURE__ */ jsx36("span", { className: "h-0.5 w-full bg-black" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+    ] }, key);
+  }) }) });
+});
+
 // src/components/Timetable/Timetable.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 
 // src/components/Timetable/WeekNavigation.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 
 // src/components/Timetable/dateUtils.ts
 var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
@@ -1588,18 +1633,18 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
   twoWeeksLater: "\uB2E4\uB2E4\uC74C \uC8FC"
 };
-var WeekNavigation = forwardRef3(
+var WeekNavigation = forwardRef4(
   function WeekNavigation2({ date, week, label, canPrev, canNext, onPrevWeek, onNextWeek, className }, ref) {
     const showPrev = canPrev ?? (week ? week !== "thisWeek" : true);
     const showNext = canNext ?? (week ? week !== "twoWeeksLater" : true);
     const text = label ?? (week ? `${weekLabel[week]} (${formatWeekRange(date)})` : formatWeekRange(date));
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       "div",
       {
         ref,
@@ -1611,22 +1656,22 @@ var WeekNavigation = forwardRef3(
           className
         ),
         children: [
-          /* @__PURE__ */ jsx36(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ jsx36("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
-          /* @__PURE__ */ jsx36(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ jsx37(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ jsx37("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ jsx37(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
-  const divider = /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
+  const divider = /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: "w-[43px]" });
+    return /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-[43px]" });
   }
-  return /* @__PURE__ */ jsxs20("div", { className: "flex items-stretch", children: [
+  return /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
     direction === "right" && divider,
-    /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
@@ -1636,7 +1681,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
           "text-gray06 cursor-pointer transition-colors",
           "hover:bg-gray00 active:bg-gray01"
         ),
-        children: /* @__PURE__ */ jsx36(
+        children: /* @__PURE__ */ jsx37(
           IconChevronDownXS,
           {
             className: direction === "left" ? "rotate-90" : "-rotate-90",
@@ -1650,7 +1695,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
 };
 
 // src/components/Timetable/Timetable.tsx
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -1660,7 +1705,7 @@ var printColorHoverClass = {
   "Seet Cutting": "hover:bg-print-seet-cutting",
   "Laser Cutting": "hover:bg-print-laser-cutting"
 };
-var Timetable = forwardRef4(function Timetable2({
+var Timetable = forwardRef5(function Timetable2({
   weekStart,
   week,
   days,
@@ -1673,8 +1718,8 @@ var Timetable = forwardRef4(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ jsxs21("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs22("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ jsx38(
       WeekNavigation,
       {
         date: weekStart,
@@ -1685,7 +1730,7 @@ var Timetable = forwardRef4(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ jsx37("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx38(
       DailyTimetable,
       {
         date: day.date,
@@ -1698,21 +1743,26 @@ 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
-    ))
+  return /* @__PURE__ */ jsxs22("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ jsx38("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
+    slots.map((slot, index) => {
+      const prevState = index > 0 ? slots[index - 1].state : void 0;
+      const withTopBorder = slot.state !== "none" && prevState === "none";
+      return /* @__PURE__ */ jsx38(
+        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 = ({
@@ -1721,12 +1771,13 @@ var TimeItem = ({
   printColor,
   color,
   fluid,
+  withTopBorder = false,
   onClick,
   className
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       onClick: clickable ? onClick : void 0,
@@ -1737,6 +1788,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" && [
@@ -1753,11 +1805,11 @@ var TimeItem = ({
 // src/components/TNB/TNB.tsx
 import {
   Fragment as Fragment2,
-  forwardRef as forwardRef5,
+  forwardRef as forwardRef6,
   useCallback as useCallback2,
   useState as useState6
 } from "react";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
   const [uncontrolled, setUncontrolled] = useState6(defaultValue);
@@ -1770,7 +1822,7 @@ function useControllableState2(controlled, defaultValue) {
   );
   return [value, setValue, isControlled];
 }
-var TNB = forwardRef5(function TNB2({
+var TNB = forwardRef6(function TNB2({
   logo,
   upperPartItemList,
   upperPartIconList,
@@ -1809,8 +1861,8 @@ var TNB = forwardRef5(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ jsxs22("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs23("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ jsx39(
       UpperPart,
       {
         logo,
@@ -1821,7 +1873,7 @@ var TNB = forwardRef5(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -1832,11 +1884,11 @@ var TNB = forwardRef5(function TNB2({
     )
   ] });
 });
-var NavClickable = forwardRef5(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
+var NavClickable = forwardRef6(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
   const ariaCurrent = current ? "page" : void 0;
   if (href && !disabled) {
     if (Link) {
-      return /* @__PURE__ */ jsx38(
+      return /* @__PURE__ */ jsx39(
         Link,
         {
           href,
@@ -1848,7 +1900,7 @@ var NavClickable = forwardRef5(function NavClickable2({ href, onClick, linkCompo
         }
       );
     }
-    return /* @__PURE__ */ jsx38(
+    return /* @__PURE__ */ jsx39(
       "a",
       {
         href,
@@ -1860,7 +1912,7 @@ var NavClickable = forwardRef5(function NavClickable2({ href, onClick, linkCompo
       }
     );
   }
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "button",
     {
       type: "button",
@@ -1882,7 +1934,7 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn(
@@ -1890,12 +1942,12 @@ var UpperPart = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs22("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ jsx38("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ jsx38(NavIconButton, { ...logo, linkComponent }) }),
-          /* @__PURE__ */ jsxs22("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-            upperPartItemList.map((item) => /* @__PURE__ */ jsxs22(Fragment2, { children: [
-              /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx39("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ jsx39(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ jsxs23("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            upperPartItemList.map((item) => /* @__PURE__ */ jsxs23(Fragment2, { children: [
+              /* @__PURE__ */ jsx39(
                 UpperPartTab,
                 {
                   label: item.label,
@@ -1908,15 +1960,15 @@ var UpperPart = ({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+              /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
             ] }, item.id ?? item.label))
           ] })
         ] }),
-        /* @__PURE__ */ jsxs22("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-          upperPartIconList.map((icon, index) => /* @__PURE__ */ jsxs22(Fragment2, { children: [
-            /* @__PURE__ */ jsx38(NavIconButton, { ...icon, linkComponent }),
-            /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+        /* @__PURE__ */ jsxs23("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ jsxs23(Fragment2, { children: [
+            /* @__PURE__ */ jsx39(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
           ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
@@ -1931,7 +1983,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     NavClickable,
     {
       href,
@@ -1946,17 +1998,17 @@ var UpperPartTab = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx38("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
-        /* @__PURE__ */ jsx38("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+        /* @__PURE__ */ jsx39("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ jsx39("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
       ]
     }
   );
 };
-var NavIconButton = forwardRef5(
+var NavIconButton = forwardRef6(
   function NavIconButton2({ src, icon, alt, label, href, onClick, selected, badge, className, linkComponent }, forwardedRef) {
     const interactive = Boolean(onClick || href);
     const showBadge = badge !== void 0 && badge !== null && badge !== false;
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs23(
       NavClickable,
       {
         ref: forwardedRef,
@@ -1972,9 +2024,9 @@ var NavIconButton = forwardRef5(
           className
         ),
         children: [
-          icon ? /* @__PURE__ */ jsx38("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx38("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
-          label ? /* @__PURE__ */ jsx38("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ jsx38(
+          icon ? /* @__PURE__ */ jsx39("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx39("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ jsx39("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ jsx39(
             "span",
             {
               "aria-hidden": badge === true,
@@ -2000,14 +2052,14 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn("w-full h-[42px] pl-14 flex items-stretch border-b border-gray02", className),
       children: [
-        /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-        lowerPartItemList.map((item) => /* @__PURE__ */ jsxs22(Fragment2, { children: [
-          /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        lowerPartItemList.map((item) => /* @__PURE__ */ jsxs23(Fragment2, { children: [
+          /* @__PURE__ */ jsx39(
             LowerPartItemButton,
             {
               label: item.label,
@@ -2020,7 +2072,7 @@ var LowerPart = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
         ] }, item.id ?? item.label))
       ]
     }
@@ -2034,7 +2086,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     NavClickable,
     {
       href,
@@ -2053,10 +2105,10 @@ var LowerPartItemButton = ({
 };
 
 // src/components/Toast/Toast.tsx
-import { forwardRef as forwardRef6, useEffect as useEffect3, useState as useState7 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7, useEffect as useEffect3, useState as useState7 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var EXIT_MS = 300;
-var Toast = forwardRef6(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
+var Toast = forwardRef7(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
   const [mounted, setMounted] = useState7(!controlled || open);
   const [visible, setVisible] = useState7(!controlled || open);
@@ -2077,7 +2129,7 @@ var Toast = forwardRef6(function Toast2({ message, open, duration = 3e3, onClose
     return () => clearTimeout(timer);
   }, [controlled, open, duration, onClose]);
   if (!mounted) return null;
-  const banner = /* @__PURE__ */ jsx39(
+  const banner = /* @__PURE__ */ jsx40(
     "div",
     {
       ref,
@@ -2095,7 +2147,7 @@ var Toast = forwardRef6(function Toast2({ message, open, duration = 3e3, onClose
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       className: cn(
@@ -2150,6 +2202,7 @@ export {
   SelectBoxOption,
   SideRadioAccordion,
   TNB,
+  TabSwitch,
   Tag,
   TextButton,
   Timetable,