@hivcd-printshop/design-system 1.6.0 → 1.8.0

package/dist/index.mjs

@@ -276,6 +276,23 @@ var IconClose = ({ className, stroke }) => {
     }
   );
 };
+var IconPlus = ({ className, stroke }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M16.6673 10.0013H3.33398", stroke: stroke || "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M9.99902 3.33203V16.6654", stroke: stroke || "currentColor" })
+      ]
+    }
+  );
+};
 var IconMinus = ({ className, stroke }) => {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -1559,6 +1576,7 @@ var Badge2 = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
+import chroma from "chroma-js";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var Tag = ({
   className,
@@ -1569,6 +1587,11 @@ var Tag = ({
   onClick,
   ...props
 }) => {
+  const customStyles = bgColor ? {
+    "--tag-bg": bgColor,
+    "--tag-bg-hover": chroma(bgColor).set("hsl.l", "-0.07").css(),
+    "--tag-bg-active": chroma(bgColor).set("hsl.l", "-0.12").css()
+  } : void 0;
   return /* @__PURE__ */ jsx36(
     "button",
     {
@@ -1576,17 +1599,19 @@ var Tag = ({
         "tag",
         "w-fit h-8 px-2.5",
         "text-primary text-body2-regular transition-colors",
-        "box-border border border-gray02",
-        "bg-white",
-        // bgColor && `bg-[${bgColor}] border-none`,
-        onClick && "cursor-pointer hover:bg-gray00 active:bg-gray01 cursor-pointer has-clickable",
+        "box-border",
+        bgColor ? "bg-[var(--tag-bg)] border-none" : "bg-white border border-gray02",
+        onClick && [
+          "cursor-pointer has-clickable",
+          bgColor ? "hover:bg-[var(--tag-bg-hover)] active:bg-[var(--tag-bg-active)]" : "hover:bg-gray00 active:bg-gray01"
+        ],
         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
       ),
       onClick,
       disabled,
-      style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
+      style: customStyles,
       ...props,
       children: /* @__PURE__ */ jsx36("span", { children })
     }
@@ -2279,23 +2304,18 @@ var SlotButton = ({
       className: cn(
         // 자식 요소들을 겹치기 위해 relative 추가
         "relative h-7 w-7 rounded-full flex items-center justify-center transition-colors",
-        showMinusIcon ? "bg-gray09 cursor-pointer" : cn(
-          !color && "bg-black",
-          blocked && "bg-white box-border border border-gray03",
-          className
-        )
+        reserved && "box-border border border-gray08",
+        showMinusIcon ? "border-transparent bg-gray08 active:bg-gray09 cursor-pointer" : cn(!color && "bg-black", className)
       ),
       children: [
-        !reserved && /* @__PURE__ */ jsx44(
-          "div",
+        blocked && /* @__PURE__ */ jsx44(
+          "span",
           {
             className: cn(
-              // absolute로 위치를 고정하고 투명도로 애니메이션 처리
-              "absolute h-3.5 w-3.5 rounded-full bg-white transition-opacity",
-              blocked && "box-border border border-gray03",
+              "absolute text-head4-regular text-gray08 transition-opacity",
               showMinusIcon ? "opacity-0" : "opacity-100"
-              // 호버 시 스르륵 사라짐
-            )
+            ),
+            children: "!"
           }
         ),
         isEditing && /* @__PURE__ */ jsx44(
@@ -2313,6 +2333,29 @@ var SlotButton = ({
     }
   );
 };
+
+// src/components/SlotButton/SlotAddButton.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
+var SlotAddButton = ({ onClick, className }) => {
+  return /* @__PURE__ */ jsx45(
+    "button",
+    {
+      onClick,
+      className: cn(
+        "group",
+        // 1. 부모에 group 클래스 추가!
+        "h-7 w-7 rounded-full flex items-center justify-center",
+        "bg-white box-border border border-gray03",
+        "hover:bg-gray08 hover:border-transparent",
+        // border-none 대신 border-transparent가 레이아웃 덜 흔들려!
+        "active:bg-gray09 active:border-transparent",
+        "transition-colors cursor-pointer",
+        className
+      ),
+      children: /* @__PURE__ */ jsx45(IconPlus, { className: "text-gray04 group-hover:text-white w-5 h-5" })
+    }
+  );
+};
 export {
   Accordion,
   BackButton,
@@ -2359,6 +2402,7 @@ export {
   SearchBar,
   SelectBoxOption,
   SideRadioAccordion,
+  SlotAddButton,
   SlotButton,
   TNB,
   TabSwitch,