@hivcd-printshop/design-system 1.7.0 → 1.8.0

package/dist/index.js

@@ -1,8 +1,10 @@
 'use client';
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -1656,6 +1666,7 @@ var Badge2 = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
+var import_chroma_js = __toESM(require("chroma-js"));
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var Tag = ({
   className,
@@ -1666,6 +1677,11 @@ var Tag = ({
   onClick,
   ...props
 }) => {
+  const customStyles = bgColor ? {
+    "--tag-bg": bgColor,
+    "--tag-bg-hover": (0, import_chroma_js.default)(bgColor).set("hsl.l", "-0.07").css(),
+    "--tag-bg-active": (0, import_chroma_js.default)(bgColor).set("hsl.l", "-0.12").css()
+  } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "button",
     {
@@ -1673,17 +1689,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__ */ (0, import_jsx_runtime36.jsx)("span", { children })
     }
@@ -2371,23 +2389,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__ */ (0, import_jsx_runtime44.jsx)(
-          "div",
+        blocked && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "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__ */ (0, import_jsx_runtime44.jsx)(