@hivcd-printshop/design-system 1.7.0 → 1.8.0

package/dist/index.mjs

@@ -1576,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,
@@ -1586,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",
     {
@@ -1593,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 })
     }
@@ -2296,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(