@hivcd-printshop/design-system 1.5.2 → 1.7.0

package/dist/index.mjs

@@ -276,6 +276,37 @@ 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",
+    {
+      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" })
+    }
+  );
+};
 
 // src/components/Accordion/Accordion.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -2224,6 +2255,104 @@ var HeaderBar = ({ className, children, onClick, active, ...props }) => {
     }
   );
 };
+
+// src/components/EmptyState/EmptyState.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+var EmptyState = ({ className, children }) => {
+  return /* @__PURE__ */ jsx43(
+    "div",
+    {
+      className: cn(
+        "empty-state",
+        "flex items-center justify-center h-full w-full",
+        "text-body3-regular text-strong",
+        className
+      ),
+      children: children ?? "No content available."
+    }
+  );
+};
+
+// src/components/SlotButton/SlotButton.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+var SlotButton = ({
+  onClick,
+  isEditing,
+  reserved,
+  blocked,
+  color,
+  className
+}) => {
+  const [isHovered, setIsHovered] = useState8(false);
+  const showMinusIcon = isEditing && isHovered;
+  return /* @__PURE__ */ jsxs25(
+    "button",
+    {
+      onClick,
+      onMouseEnter: isEditing ? () => setIsHovered(true) : void 0,
+      onMouseLeave: isEditing ? () => setIsHovered(false) : void 0,
+      style: !showMinusIcon && color ? { backgroundColor: color } : void 0,
+      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
+        )
+      ),
+      children: [
+        !reserved && /* @__PURE__ */ jsx44(
+          "div",
+          {
+            className: cn(
+              // absolute로 위치를 고정하고 투명도로 애니메이션 처리
+              "absolute h-3.5 w-3.5 rounded-full bg-white transition-opacity",
+              blocked && "box-border border border-gray03",
+              showMinusIcon ? "opacity-0" : "opacity-100"
+              // 호버 시 스르륵 사라짐
+            )
+          }
+        ),
+        isEditing && /* @__PURE__ */ jsx44(
+          IconMinus,
+          {
+            className: cn(
+              // absolute로 위치를 고정하고 투명도로 애니메이션 처리
+              "absolute text-white w-5 h-5 transition-opacity",
+              showMinusIcon ? "opacity-100" : "opacity-0"
+              // 호버 시 스르륵 나타남
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// 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,
@@ -2241,6 +2370,7 @@ export {
   ColumnText,
   ColumnTextStyle,
   Dropdown,
+  EmptyState,
   FormCheckBox,
   FormColor,
   FormFile,
@@ -2269,6 +2399,8 @@ export {
   SearchBar,
   SelectBoxOption,
   SideRadioAccordion,
+  SlotAddButton,
+  SlotButton,
   TNB,
   TabSwitch,
   Tag,