@hivcd-printshop/design-system 1.1.0 → 1.1.1

package/dist/index.js

@@ -176,32 +176,37 @@ var BackButton = ({ onClick, className }) => {
 // src/components/CTA/CTA.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var CTA = ({
-  primary = true,
-  variable = "default",
+  primary = false,
+  alert = false,
+  disabled = false,
   label,
   onClick,
-  className
+  className,
+  forModal = false,
+  ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
       type: "button",
+      disabled,
       className: cn(
-        "w-full max-w-360 h-12 p-2.5 text-center text-head3-medium",
-        `${primary ? "border-0" : "border border-gray02"}`,
-        /** Disabled */
-        `${variable == "disabled" ? primary ? "bg-gray01 text-gray04 border border-gray01" : "bg-gray02 text-gray04" : ""}`,
-        /** Default */
-        `${variable == "default" ? primary ? "bg-black text-white" : "bg-white text-strong" : ""}`,
-        /** Hover */
-        `${variable != "disabled" ? primary ? "hover:bg-gray08 hover:text-white" : "hover:bg-gray01 hover:text-strong" : ""}`,
-        /** Hover */
-        `${variable != "disabled" && "hover:cursor-pointer"}`,
-        /** Pressed */
-        `${variable == "pressed" ? primary ? "bg-gray09 text-white" : "bg-gray02 text-strong" : ""}`,
+        forModal ? "h-14.5" : "h-12",
+        "w-full max-w-360 px-4",
+        "flex items-center justify-center",
+        "border-t box-border border-gray02",
+        primary && "border-none",
+        "text-head3-medium text-strong",
+        primary && "text-white",
+        alert && "text-danger",
+        disabled && "text-quaternary",
+        "bg-white hover:bg-gray00 active:bg-gray01 disabled:bg-gray02",
+        primary && "bg-black hover:bg-gray08 active:bg-gray09 disabled:bg-gray01",
+        "cursor-pointer disabled:cursor-default",
         className
       ),
       onClick,
+      ...props,
       children: label
     }
   );
@@ -386,7 +391,22 @@ var SearchBar = ({ value, onChange, className }) => {
 };
 
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
+var import_react2 = require("react");
+
+// src/lib/useControllableState.ts
 var import_react = require("react");
+function useControllableState(controlled, defaultValue) {
+  const isControlled = controlled !== void 0;
+  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue, isControlled];
+}
 
 // src/components/SideRadioAccordion/Exclamation.svg
 var Exclamation_default = "./Exclamation-IUYZYYC4.svg";
@@ -411,71 +431,92 @@ var printColorBgClass = {
   "Seet Cutting": "bg-print-seet-cutting",
   "Laser Cutting": "bg-print-laser-cutting"
 };
-var SideRadioAccordion = ({
-  step,
-  title,
-  radioToggleList,
-  defaultSelected,
-  onSelect,
-  quantityLimitLabel,
-  onClickQuantityLimit,
-  className
-}) => {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(true);
-  const [selected, setSelected] = (0, import_react.useState)(defaultSelected);
-  const handleSelect = (itemTitle) => {
-    setSelected(itemTitle);
-    onSelect?.(itemTitle);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      Stepper,
-      {
-        step,
-        title,
-        isOpen,
-        onClick: () => setIsOpen((prev) => !prev)
-      }
-    ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
-      radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        RadioToggleItem,
-        {
-          ...item,
-          open: selected === item.title,
-          onSelect: () => handleSelect(item.title)
-        },
-        item.title
-      )),
-      quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        TextButton,
+var itemKey = (item) => item.value ?? item.title;
+var SideRadioAccordion = (0, import_react2.forwardRef)(
+  function SideRadioAccordion2({
+    step,
+    title,
+    radioToggleList,
+    selected,
+    defaultSelected,
+    onSelect,
+    stickyHeader = false,
+    collapsible = true,
+    defaultOpen = true,
+    open,
+    onOpenChange,
+    quantityLimitLabel,
+    onClickQuantityLimit,
+    className
+  }, ref) {
+    const [selectedValue, setSelectedValue] = useControllableState(
+      selected,
+      defaultSelected ?? null
+    );
+    const [isOpen, setIsOpen] = useControllableState(open, defaultOpen);
+    const expanded = collapsible ? isOpen : true;
+    const handleSelect = (value) => {
+      setSelectedValue(value);
+      onSelect?.(value);
+    };
+    const toggleOpen = () => {
+      if (!collapsible) return;
+      const next = !isOpen;
+      setIsOpen(next);
+      onOpenChange?.(next);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref, className: cn("w-full", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        Stepper,
         {
-          label: quantityLimitLabel,
-          onClick: onClickQuantityLimit,
-          className: "mt-2"
+          step,
+          title,
+          isOpen: expanded,
+          collapsible,
+          onClick: toggleOpen,
+          className: cn(stickyHeader && "sticky top-0 z-10")
         }
-      )
-    ] })
+      ),
+      expanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          RadioToggleItem,
+          {
+            ...item,
+            open: selectedValue === itemKey(item),
+            onSelect: () => handleSelect(itemKey(item))
+          },
+          itemKey(item)
+        )),
+        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          TextButton,
+          {
+            label: quantityLimitLabel,
+            onClick: onClickQuantityLimit,
+            className: "mt-2"
+          }
+        )
+      ] })
+    ] });
+  }
+);
+var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
+  const label = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+    step,
+    " | ",
+    title
   ] });
-};
-var Stepper = ({ step, title, isOpen, onClick, className }) => {
+  const base = "w-full flex items-center justify-between px-3 py-2.5 text-body1-medium text-strong text-left bg-white";
+  if (!collapsible) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn(base, className), children: label });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "button",
     {
       type: "button",
       onClick,
-      className: cn(
-        "w-full flex items-center justify-between px-3 py-2.5",
-        "text-body1-medium text-strong text-left cursor-pointer",
-        "bg-white hover:bg-gray00 active:bg-gray01",
-        className
-      ),
+      className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
-          step,
-          " | ",
-          title
-        ] }),
+        label,
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "img",
           {
@@ -493,22 +534,27 @@ var RadioToggleItem = ({
   content,
   badges,
   printColor,
+  color,
+  className,
   labelTextButton,
   onClickTextButton,
   open,
-  onSelect,
-  className
+  onSelect
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("w-full", className), children: [
+  const rowBg = !open ? "bg-white hover:bg-gray00" : color ? void 0 : printColor ? printColorBgClass[printColor] : "bg-gray00";
+  const style = open && color ? { backgroundColor: color } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "w-full", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
         type: "button",
         onClick: onSelect,
+        style,
         className: cn(
           "w-full flex items-center gap-1.5 px-3 py-2.5",
           "text-body2-regular text-primary text-left cursor-pointer",
-          open ? printColor ? printColorBgClass[printColor] : "bg-gray00" : "bg-white hover:bg-gray00"
+          rowBg,
+          className
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Radio, { selected: open }),
@@ -596,7 +642,7 @@ var Tag = ({
         "box-border border border-gray02",
         "bg-white",
         // bgColor && `bg-[${bgColor}] border-none`,
-        onClick && "cursor-pointer hover:bg-gray00 active:bg-gray01 cursor-pointer",
+        onClick && "cursor-pointer hover:bg-gray00 active:bg-gray01 cursor-pointer has-clickable",
         selected && "text-white bg-black border-black hover:bg-black active:bg-black",
         "disabled:text-gray04 disabled:bg-gray02 disabled:border-gray02 disabled:cursor-not-allowed",
         className
@@ -610,6 +656,12 @@ var Tag = ({
   );
 };
 
+// src/components/Timetable/Timetable.tsx
+var import_react4 = require("react");
+
+// src/components/Timetable/WeekNavigation.tsx
+var import_react3 = require("react");
+
 // src/components/Timetable/dateUtils.ts
 var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
 var parseISODate = (date) => {
@@ -647,38 +699,31 @@ var weekLabel = {
   nextWeek: "\uB2E4\uC74C \uC8FC",
   twoWeeksLater: "\uB2E4\uB2E4\uC74C \uC8FC"
 };
-var WeekNavigation = ({
-  date,
-  week,
-  onPrevWeek,
-  onNextWeek,
-  className
-}) => {
-  const showPrev = week !== "thisWeek";
-  const showNext = week !== "twoWeeksLater";
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    "div",
-    {
-      className: cn(
-        "flex items-center justify-between",
-        "w-full h-11 px-3",
-        "bg-white border border-gray02",
-        "text-body2-regular text-primary",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-          weekLabel[week],
-          " (",
-          formatWeekRange(date),
-          ")"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
-      ]
-    }
-  );
-};
+var WeekNavigation = (0, import_react3.forwardRef)(
+  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__ */ (0, import_jsx_runtime12.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-between",
+          "w-full h-11 px-3",
+          "bg-white border border-gray02",
+          "text-body2-regular text-primary",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+        ]
+      }
+    );
+  }
+);
 var ArrowButton = ({ direction, visible, onClick }) => {
   if (!visible) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-6 h-6" });
@@ -715,38 +760,45 @@ var printColorHoverClass = {
   "Seet Cutting": "hover:bg-print-seet-cutting",
   "Laser Cutting": "hover:bg-print-laser-cutting"
 };
-var Timetable = ({
+var Timetable = (0, import_react4.forwardRef)(function Timetable2({
   weekStart,
   week,
   days,
   onPrevWeek,
   onNextWeek,
   onSelectSlot,
+  fluid = false,
+  hideWeekNavigation = false,
+  canPrevWeek,
+  canNextWeek,
   className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn(className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       WeekNavigation,
       {
         date: weekStart,
         week,
+        canPrev: canPrevWeek,
+        canNext: canNextWeek,
         onPrevWeek,
         onNextWeek
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex", children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DailyTimetable,
       {
         date: day.date,
         slots: day.slots,
+        fluid,
         onSelectTime: onSelectSlot ? (time) => onSelectSlot(day.date, time) : void 0
       },
       day.date
     )) })
   ] });
-};
-var DailyTimetable = ({ date, slots, onSelectTime, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex flex-col", className), children: [
+});
+var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-13 flex items-center justify-center text-body3-medium text-secondary", children: formatDayLabel(date) }),
     slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       TimeItem,
@@ -754,27 +806,41 @@ var DailyTimetable = ({ date, slots, onSelectTime, className }) => {
         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
     ))
   ] });
 };
-var TimeItem = ({ state, label, printColor, onClick, className }) => {
+var TimeItem = ({
+  state,
+  label,
+  printColor,
+  color,
+  fluid,
+  onClick,
+  className
+}) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
+  const style = state === "default" && color ? { "--tt-hover": color } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       onClick: clickable ? onClick : void 0,
+      style,
       className: cn(
-        "w-18 h-18 flex items-center justify-center",
+        "h-18 flex items-center justify-center",
+        fluid ? "w-full" : "w-18",
         "text-body1-medium text-center bg-white text-primary",
         state === "none" && "bg-gray00 text-transparent",
         state === "selected" && "bg-black text-gray02 hover:cursor-pointer",
         state === "disabled" && "bg-gray00 text-gray03",
         state === "default" && [
           "hover:cursor-pointer",
-          printColor ? printColorHoverClass[printColor] : "hover:bg-gray00"
+          color ? "hover:bg-(--tt-hover)" : printColor ? printColorHoverClass[printColor] : "hover:bg-gray00"
         ],
         className
       ),
@@ -784,81 +850,177 @@ var TimeItem = ({ state, label, printColor, onClick, className }) => {
 };
 
 // src/components/TNB/TNB.tsx
-var import_react2 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var TNB = ({
+function useControllableState2(controlled, defaultValue) {
+  const isControlled = controlled !== void 0;
+  const [uncontrolled, setUncontrolled] = (0, import_react5.useState)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  const setValue = (0, import_react5.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue, isControlled];
+}
+var TNB = (0, import_react5.forwardRef)(function TNB2({
   logo,
   upperPartItemList,
   upperPartIconList,
+  selected,
   defaultSelected,
+  onSelectedChange,
+  selectedLower,
+  defaultSelectedLower,
+  onSelectedLowerChange,
   onSelectItem,
+  linkComponent,
+  "aria-label": ariaLabel = "\uC8FC\uC694 \uBA54\uB274",
   className
-}) => {
-  const [selected, setSelected] = (0, import_react2.useState)(defaultSelected ?? upperPartItemList[0]?.label);
-  const [selectedLower, setSelectedLower] = (0, import_react2.useState)(
-    upperPartItemList.find((item) => item.label === selected)?.lowerPartItemList[0]?.label
+}, ref) {
+  const [upperValue, setUpperValue] = useControllableState2(
+    selected,
+    defaultSelected ?? null
+  );
+  const [lowerValueRaw, setLowerValue, lowerIsControlled] = useControllableState2(
+    selectedLower,
+    defaultSelectedLower ?? null
   );
+  const currentUpper = upperPartItemList.find((item) => item.label === upperValue);
+  const currentLowerItemList = currentUpper?.lowerPartItemList ?? [];
+  const lowerValue = lowerIsControlled ? lowerValueRaw ?? void 0 : currentLowerItemList.some((item) => item.label === lowerValueRaw) ? lowerValueRaw : currentLowerItemList[0]?.label ?? void 0;
   const handleSelectUpper = (label) => {
-    setSelected(label);
-    setSelectedLower(
-      upperPartItemList.find((item) => item.label === label)?.lowerPartItemList[0]?.label
-    );
+    setUpperValue(label);
+    if (!lowerIsControlled) {
+      const nextLower = upperPartItemList.find((item) => item.label === label)?.lowerPartItemList[0]?.label ?? null;
+      setLowerValue(nextLower);
+    }
+    onSelectedChange?.(label);
     onSelectItem?.(label);
   };
-  const currentLowerItemList = upperPartItemList.find((item) => item.label === selected)?.lowerPartItemList ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("nav", { className: cn("w-full bg-white", className), children: [
+  const handleSelectLower = (label) => {
+    setLowerValue(label);
+    onSelectedLowerChange?.(label);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       UpperPart,
       {
         logo,
         upperPartItemList,
         upperPartIconList,
-        selected,
-        onSelectItem: handleSelectUpper
+        selected: upperValue ?? void 0,
+        onSelectItem: handleSelectUpper,
+        linkComponent
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
-        selected: selectedLower,
-        onSelectItem: setSelectedLower
+        selected: lowerValue,
+        onSelectItem: handleSelectLower,
+        linkComponent
       }
     )
   ] });
-};
+});
+var NavClickable = (0, import_react5.forwardRef)(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
+  const ariaCurrent = current ? "page" : void 0;
+  if (href && !disabled) {
+    if (Link) {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        Link,
+        {
+          href,
+          onClick,
+          "aria-current": ariaCurrent,
+          className,
+          ref,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "a",
+      {
+        href,
+        onClick,
+        "aria-current": ariaCurrent,
+        className,
+        ref,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-current": ariaCurrent,
+      className,
+      ref,
+      children
+    }
+  );
+});
 var UpperPart = ({
   logo,
   upperPartItemList,
   upperPartIconList,
   selected,
   onSelectItem,
+  linkComponent,
   className
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("w-full h-13 px-4 flex items-center justify-between", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavIconButton, { ...logo }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavIconButton, { ...logo, linkComponent }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center gap-4", children: upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         UpperPartTab,
         {
           label: item.label,
+          href: item.href,
           selected: item.label === selected,
-          onClick: () => onSelectItem(item.label)
+          linkComponent,
+          onClick: () => {
+            item.onClick?.();
+            onSelectItem(item.label);
+          }
         },
-        item.label
+        item.id ?? item.label
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center gap-2", children: upperPartIconList.map((icon) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavIconButton, { ...icon }, icon.src)) })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center gap-2", children: upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      NavIconButton,
+      {
+        ...icon,
+        linkComponent
+      },
+      icon.id ?? icon.src ?? icon.label ?? index
+    )) })
   ] });
 };
-var UpperPartTab = ({ label, selected, onClick, className }) => {
+var UpperPartTab = ({
+  label,
+  href,
+  selected,
+  onClick,
+  linkComponent,
+  className
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "button",
+    NavClickable,
     {
-      type: "button",
+      href,
       onClick,
+      linkComponent,
+      current: selected,
       className: cn(
-        "px-1 py-1.5 text-body2-regular cursor-pointer",
+        "inline-flex px-1 py-1.5 text-body2-regular cursor-pointer no-underline",
         selected ? "text-strong font-medium underline underline-offset-4" : "text-quaternary hover:text-secondary",
         className
       ),
@@ -866,24 +1028,51 @@ var UpperPartTab = ({ label, selected, onClick, className }) => {
     }
   );
 };
-var NavIconButton = ({ src, alt, onClick, selected, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "button",
-    {
-      type: "button",
-      onClick,
-      disabled: !onClick,
-      className: cn(
-        "w-8 h-8 flex items-center justify-center rounded-full",
-        onClick && "cursor-pointer",
-        selected ? "bg-black" : "bg-transparent hover:bg-gray00 active:bg-gray01",
-        className
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src, alt: alt ?? "", className: "w-5 h-5" })
-    }
-  );
-};
-var LowerPart = ({ lowerPartItemList, selected, onSelectItem, className }) => {
+var NavIconButton = (0, import_react5.forwardRef)(
+  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__ */ (0, import_jsx_runtime14.jsxs)(
+      NavClickable,
+      {
+        ref: forwardedRef,
+        href,
+        onClick,
+        linkComponent,
+        current: selected,
+        disabled: !interactive,
+        className: cn(
+          "relative inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-full px-1.5",
+          interactive && "cursor-pointer",
+          selected ? "bg-black text-white" : "bg-transparent hover:bg-gray00 active:bg-gray01",
+          className
+        ),
+        children: [
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex h-5 w-5 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-5 w-5" }) : null,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "span",
+            {
+              "aria-hidden": badge === true,
+              className: cn(
+                "absolute -right-0.5 -top-0.5 flex items-center justify-center rounded-full bg-danger text-white",
+                badge === true ? "h-2 w-2" : "h-4 min-w-4 px-1 text-caption-regular leading-none"
+              ),
+              children: badge === true ? null : badge
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var LowerPart = ({
+  lowerPartItemList,
+  selected,
+  onSelectItem,
+  linkComponent,
+  className
+}) => {
   if (lowerPartItemList.length === 0) {
     return null;
   }
@@ -895,25 +1084,36 @@ var LowerPart = ({ lowerPartItemList, selected, onSelectItem, className }) => {
         LowerPartItemButton,
         {
           label: item.label,
+          href: item.href,
           selected: item.label === selected,
+          linkComponent,
           onClick: () => {
             item.onClick?.();
             onSelectItem(item.label);
           }
         },
-        item.label
+        item.id ?? item.label
       ))
     }
   );
 };
-var LowerPartItemButton = ({ label, selected, onClick, className }) => {
+var LowerPartItemButton = ({
+  label,
+  href,
+  selected,
+  onClick,
+  linkComponent,
+  className
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "button",
+    NavClickable,
     {
-      type: "button",
+      href,
       onClick,
+      linkComponent,
+      current: selected,
       className: cn(
-        "px-1.5 py-1 text-caption-regular cursor-pointer",
+        "inline-flex px-1.5 py-1 text-caption-regular cursor-pointer no-underline",
         "hover:bg-gray00 active:bg-gray01",
         selected ? "text-strong font-medium" : "text-quaternary",
         className
@@ -924,21 +1124,59 @@ var LowerPartItemButton = ({ label, selected, onClick, className }) => {
 };
 
 // src/components/Toast/Toast.tsx
+var import_react6 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Toast = ({ message, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var EXIT_MS = 300;
+var Toast = (0, import_react6.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
+  const controlled = open !== void 0;
+  const [mounted, setMounted] = (0, import_react6.useState)(!controlled || open);
+  const [visible, setVisible] = (0, import_react6.useState)(!controlled || open);
+  (0, import_react6.useEffect)(() => {
+    if (!controlled) return;
+    if (open) {
+      setMounted(true);
+      const raf = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    setVisible(false);
+    const timer = setTimeout(() => setMounted(false), EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [controlled, open]);
+  (0, import_react6.useEffect)(() => {
+    if (!controlled || !open || !duration) return;
+    const timer = setTimeout(() => onClose?.(), duration);
+    return () => clearTimeout(timer);
+  }, [controlled, open, duration, onClose]);
+  if (!mounted) return null;
+  const banner = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
+      ref,
+      role: "status",
+      "aria-live": "polite",
       className: cn(
-        `bg-gray06 w-dvw h-fit py-2.5`,
-        `font-pretendard text-white text-center font-semibold text-[17px]`,
-        `shadow-[0_2px_15px_rgba(0,0,0,0.18)]`,
+        "w-full h-fit py-2.5 bg-gray06",
+        "font-pretendard text-white text-center font-semibold text-[17px]",
+        "shadow-[0_2px_15px_rgba(0,0,0,0.18)]",
+        controlled && "transition-opacity duration-300",
+        controlled && (visible ? "opacity-100" : "opacity-0"),
         className
       ),
       children: message
     }
   );
-};
+  if (position === "none") return banner;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: cn(
+        "fixed inset-x-0 z-5000 pointer-events-none",
+        position === "top" ? "top-0" : "bottom-0"
+      ),
+      children: banner
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BackButton,