@edu-tosel/design 1.0.44 → 1.0.46

package/README.md

@@ -1,42 +1,42 @@
-# TOSEL Design Library
-
-TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
-
-## Component
-
-컴포넌트들은 기본적으로 기능 단위로만 구성한다.
-
-도메인은 구분하지 않는다. 단, Layout 컴포넌트에 대해서만 예외적으로 허용한다.
-
-### Board
-
-Board 컴포넌트는 가장 큰 단위의 컨테이너이다.
-
-일반적으로
-
-### Card
-
-Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
-
-일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
-
-
-### Layout
-
-Layout 컴포넌트는 여러가지 컴포넌트를 담고 있는 컨테이너이다.
-
-Layout 컴포넌트는 특정 프로젝트에서 반복적으로 사용되는 컴포넌트의 구조를 형성한다.
-
-### Navigation
-
-Navigation 컴포넌트는 여러가지 링크를 담고 있는 컨테이너이다.
-
-각각의 링크 컴포넌트의 스타일링은 buttonClassNames로 전달받는다.
-
-(Next.js의 Link Component와 React의 Link Component는 호환이 되지 않기 때문.)
-
-### Shelf
-
-Shelf 컴포넌트는 Board 컴포넌트 내부에 위치하며 여러가지 Deck 컴포넌트를 담고 있는 컨테이너이다.
-
-Shelf 컴포넌트는 담고있는 Deck 컴포넌트들을 수직 정렬한다.
+# TOSEL Design Library
+
+TOSEL 통합 디자인 시스템에 맞춘 UI 라이브러리
+
+## Component
+
+컴포넌트들은 기본적으로 기능 단위로만 구성한다.
+
+도메인은 구분하지 않는다. 단, Layout 컴포넌트에 대해서만 예외적으로 허용한다.
+
+### Board
+
+Board 컴포넌트는 가장 큰 단위의 컨테이너이다.
+
+일반적으로
+
+### Card
+
+Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
+
+일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
+
+
+### Layout
+
+Layout 컴포넌트는 여러가지 컴포넌트를 담고 있는 컨테이너이다.
+
+Layout 컴포넌트는 특정 프로젝트에서 반복적으로 사용되는 컴포넌트의 구조를 형성한다.
+
+### Navigation
+
+Navigation 컴포넌트는 여러가지 링크를 담고 있는 컨테이너이다.
+
+각각의 링크 컴포넌트의 스타일링은 buttonClassNames로 전달받는다.
+
+(Next.js의 Link Component와 React의 Link Component는 호환이 되지 않기 때문.)
+
+### Shelf
+
+Shelf 컴포넌트는 Board 컴포넌트 내부에 위치하며 여러가지 Deck 컴포넌트를 담고 있는 컨테이너이다.
+
+Shelf 컴포넌트는 담고있는 Deck 컴포넌트들을 수직 정렬한다.

package/asset/SVG.d.ts

@@ -3,6 +3,7 @@ import Direction from "./svg/Direction";
 import Email from "./svg/Email";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
+import Operation from "./svg/Operation";
 import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
 import TOSEL from "./svg/TOSEL";
@@ -15,6 +16,10 @@ declare const SVG: {
     Email: typeof Email;
     Image: typeof Image;
     Notification: typeof Notification;
+    Operation: {
+        Plus: ({ onClick }: Operation) => import("react/jsx-runtime").JSX.Element;
+        Minus: ({ onClick }: Operation) => import("react/jsx-runtime").JSX.Element;
+    };
     Phone: typeof Phone;
     Profile: typeof Profile;
 };

package/asset/SVG.js

@@ -3,6 +3,7 @@ import Direction from "./svg/Direction";
 import Email from "./svg/Email";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
+import Operation from "./svg/Operation";
 import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
 import TOSEL from "./svg/TOSEL";
@@ -13,6 +14,7 @@ const SVG = {
     Email,
     Image,
     Notification,
+    Operation,
     Phone,
     Profile,
 };

package/asset/SVG.tsx

@@ -1,21 +1,23 @@
-import Close from "./svg/Close";
-import Direction from "./svg/Direction";
-import Email from "./svg/Email";
-import Image from "./svg/Image";
-import Notification from "./svg/Notification";
-import Phone from "./svg/Phone";
-import Profile from "./svg/Profile";
-import TOSEL from "./svg/TOSEL";
-
-const SVG = {
-  TOSEL,
-  Close,
-  Direction,
-  Email,
-  Image,
-  Notification,
-  Phone,
-  Profile,
-};
-
-export default SVG;
+import Close from "./svg/Close";
+import Direction from "./svg/Direction";
+import Email from "./svg/Email";
+import Image from "./svg/Image";
+import Notification from "./svg/Notification";
+import Operation from "./svg/Operation";
+import Phone from "./svg/Phone";
+import Profile from "./svg/Profile";
+import TOSEL from "./svg/TOSEL";
+
+const SVG = {
+  TOSEL,
+  Close,
+  Direction,
+  Email,
+  Image,
+  Notification,
+  Operation,
+  Phone,
+  Profile,
+};
+
+export default SVG;

package/asset/svg/Close.tsx

@@ -1,32 +1,32 @@
-import { OnClick } from "../../interface";
-import { cn } from "../../util";
-
-export default function Close({
-  onClick,
-  className,
-}: {
-  onClick?: OnClick;
-  className?: string;
-}) {
-  const container = {
-    styles: onClick ? "cursor-pointer" : "",
-    className,
-  };
-  return (
-    <svg
-      onClick={onClick}
-      className={cn(container)}
-      xmlns="http://www.w3.org/2000/svg"
-      width="36"
-      height="36"
-      viewBox="0 0 36 36"
-      fill="none"
-    >
-      <circle cx="18" cy="18" r="18" fill="#F0F0F0" />
-      <path
-        d="M19.7797 17.6997L23.8497 13.6397C24.4797 13.0997 24.5597 12.1597 24.0197 11.5297C23.4797 10.8997 22.5397 10.8197 21.9097 11.3597C21.8497 11.4097 21.7997 11.4597 21.7497 11.5197L17.6697 15.5797L13.5997 11.5097C13.0297 10.9097 12.0797 10.8697 11.4797 11.4397C10.8697 11.9997 10.8397 12.9497 11.3997 13.5597C11.4197 13.5897 11.4497 13.6097 11.4697 13.6297L15.5297 17.6997L11.4697 21.7597C10.8897 22.3497 10.8897 23.2897 11.4697 23.8797C12.0597 24.4697 13.0097 24.4697 13.5997 23.8797L17.6597 19.8197L21.7197 23.8897C21.9997 24.1797 22.3797 24.3397 22.7797 24.3297C23.6097 24.3297 24.2797 23.6597 24.2797 22.8297C24.2797 22.4297 24.1197 22.0497 23.8397 21.7697L19.7797 17.6997Z"
-        fill="#7F7F7F"
-      />
-    </svg>
-  );
-}
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export default function Close({
+  onClick,
+  className,
+}: {
+  onClick?: OnClick;
+  className?: string;
+}) {
+  const container = {
+    styles: onClick ? "cursor-pointer" : "",
+    className,
+  };
+  return (
+    <svg
+      onClick={onClick}
+      className={cn(container)}
+      xmlns="http://www.w3.org/2000/svg"
+      width="36"
+      height="36"
+      viewBox="0 0 36 36"
+      fill="none"
+    >
+      <circle cx="18" cy="18" r="18" fill="#F0F0F0" />
+      <path
+        d="M19.7797 17.6997L23.8497 13.6397C24.4797 13.0997 24.5597 12.1597 24.0197 11.5297C23.4797 10.8997 22.5397 10.8197 21.9097 11.3597C21.8497 11.4097 21.7997 11.4597 21.7497 11.5197L17.6697 15.5797L13.5997 11.5097C13.0297 10.9097 12.0797 10.8697 11.4797 11.4397C10.8697 11.9997 10.8397 12.9497 11.3997 13.5597C11.4197 13.5897 11.4497 13.6097 11.4697 13.6297L15.5297 17.6997L11.4697 21.7597C10.8897 22.3497 10.8897 23.2897 11.4697 23.8797C12.0597 24.4697 13.0097 24.4697 13.5997 23.8797L17.6597 19.8197L21.7197 23.8897C21.9997 24.1797 22.3797 24.3397 22.7797 24.3297C23.6097 24.3297 24.2797 23.6597 24.2797 22.8297C24.2797 22.4297 24.1197 22.0497 23.8397 21.7697L19.7797 17.6997Z"
+        fill="#7F7F7F"
+      />
+    </svg>
+  );
+}

package/asset/svg/Direction.tsx

@@ -1,36 +1,36 @@
-interface Direction {
-  className?: string;
-}
-function Right({ className }: Direction) {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path
-        d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
-        fill="#105652"
-        stroke="#105652"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M12.75 15L15.75 12M15.75 12L12.75 9M15.75 12H8.25"
-        stroke="white"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-const Direction = {
-  Right,
-};
-export default Direction;
+interface Direction {
+  className?: string;
+}
+function Right({ className }: Direction) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
+        fill="#105652"
+        stroke="#105652"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.75 15L15.75 12M15.75 12L12.75 9M15.75 12H8.25"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const Direction = {
+  Right,
+};
+export default Direction;

package/asset/svg/Email.tsx

@@ -1,20 +1,20 @@
-export default function Email() {
-  return (
-    <svg
-      className="mr-3"
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-    >
-      <path
-        d="M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z"
-        stroke="#105652"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
+export default function Email() {
+  return (
+    <svg
+      className="mr-3"
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z"
+        stroke="#105652"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Image.tsx

@@ -1,24 +1,24 @@
-interface ImageProps {
-  color?: string;
-  className?: string;
-}
-export default function Image({ color, className }: ImageProps) {
-  return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-    >
-      <path
-        d="M2.34375 16.4062L7.71771 11.0323C7.93535 10.8147 8.19372 10.642 8.47808 10.5242C8.76244 10.4064 9.06721 10.3458 9.375 10.3458C9.68279 10.3458 9.98756 10.4064 10.2719 10.5242C10.5563 10.642 10.8147 10.8147 11.0323 11.0323L16.4062 16.4062M14.8437 14.8437L16.3115 13.376C16.5291 13.1584 16.7875 12.9858 17.0718 12.868C17.3562 12.7502 17.661 12.6896 17.9687 12.6896C18.2765 12.6896 18.5813 12.7502 18.8657 12.868C19.15 12.9858 19.4084 13.1584 19.626 13.376L22.6562 16.4062M3.90625 20.3125H21.0937C21.5082 20.3125 21.9056 20.1479 22.1986 19.8549C22.4916 19.5618 22.6562 19.1644 22.6562 18.75V6.25C22.6562 5.8356 22.4916 5.43817 22.1986 5.14515C21.9056 4.85212 21.5082 4.6875 21.0937 4.6875H3.90625C3.49185 4.6875 3.09442 4.85212 2.8014 5.14515C2.50837 5.43817 2.34375 5.8356 2.34375 6.25V18.75C2.34375 19.1644 2.50837 19.5618 2.8014 19.8549C3.09442 20.1479 3.49185 20.3125 3.90625 20.3125ZM14.8437 8.59375H14.8521V8.60208H14.8437V8.59375ZM15.2344 8.59375C15.2344 8.69735 15.1932 8.79671 15.12 8.86996C15.0467 8.94322 14.9473 8.98437 14.8437 8.98437C14.7401 8.98437 14.6408 8.94322 14.5675 8.86996C14.4943 8.79671 14.4531 8.69735 14.4531 8.59375C14.4531 8.49015 14.4943 8.39079 14.5675 8.31754C14.6408 8.24428 14.7401 8.20312 14.8437 8.20312C14.9473 8.20312 15.0467 8.24428 15.12 8.31754C15.1932 8.39079 15.2344 8.49015 15.2344 8.59375Z"
-        stroke={color ?? "#FFFFFF"}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
+interface ImageProps {
+  color?: string;
+  className?: string;
+}
+export default function Image({ color, className }: ImageProps) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M2.34375 16.4062L7.71771 11.0323C7.93535 10.8147 8.19372 10.642 8.47808 10.5242C8.76244 10.4064 9.06721 10.3458 9.375 10.3458C9.68279 10.3458 9.98756 10.4064 10.2719 10.5242C10.5563 10.642 10.8147 10.8147 11.0323 11.0323L16.4062 16.4062M14.8437 14.8437L16.3115 13.376C16.5291 13.1584 16.7875 12.9858 17.0718 12.868C17.3562 12.7502 17.661 12.6896 17.9687 12.6896C18.2765 12.6896 18.5813 12.7502 18.8657 12.868C19.15 12.9858 19.4084 13.1584 19.626 13.376L22.6562 16.4062M3.90625 20.3125H21.0937C21.5082 20.3125 21.9056 20.1479 22.1986 19.8549C22.4916 19.5618 22.6562 19.1644 22.6562 18.75V6.25C22.6562 5.8356 22.4916 5.43817 22.1986 5.14515C21.9056 4.85212 21.5082 4.6875 21.0937 4.6875H3.90625C3.49185 4.6875 3.09442 4.85212 2.8014 5.14515C2.50837 5.43817 2.34375 5.8356 2.34375 6.25V18.75C2.34375 19.1644 2.50837 19.5618 2.8014 19.8549C3.09442 20.1479 3.49185 20.3125 3.90625 20.3125ZM14.8437 8.59375H14.8521V8.60208H14.8437V8.59375ZM15.2344 8.59375C15.2344 8.69735 15.1932 8.79671 15.12 8.86996C15.0467 8.94322 14.9473 8.98437 14.8437 8.98437C14.7401 8.98437 14.6408 8.94322 14.5675 8.86996C14.4943 8.79671 14.4531 8.69735 14.4531 8.59375C14.4531 8.49015 14.4943 8.39079 14.5675 8.31754C14.6408 8.24428 14.7401 8.20312 14.8437 8.20312C14.9473 8.20312 15.0467 8.24428 15.12 8.31754C15.1932 8.39079 15.2344 8.49015 15.2344 8.59375Z"
+        stroke={color ?? "#FFFFFF"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/asset/svg/Notification.tsx

@@ -1,34 +1,34 @@
-import { OnClick } from "../../interface";
-
-interface Notification {
-  onClick: OnClick;
-  flag: boolean;
-  color?: string;
-}
-export default function Notification({ onClick, color, flag }: Notification) {
-  return (
-    <button className="relative" onClick={onClick}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="25"
-        height="25"
-        viewBox="0 0 25 25"
-        fill="none"
-      >
-        <path
-          d="M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938"
-          stroke={color ?? "#910023"}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-      {flag && (
-        <div className="absolute top-0 right-0">
-          <div className="absolute w-2 h-2 rounded-full bg-red-500" />
-          <div className=" w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" />
-        </div>
-      )}
-    </button>
-  );
-}
+import { OnClick } from "../../interface";
+
+interface Notification {
+  onClick: OnClick;
+  flag: boolean;
+  color?: string;
+}
+export default function Notification({ onClick, color, flag }: Notification) {
+  return (
+    <button className="relative" onClick={onClick}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="25"
+        height="25"
+        viewBox="0 0 25 25"
+        fill="none"
+      >
+        <path
+          d="M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938"
+          stroke={color ?? "#910023"}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      {flag && (
+        <div className="absolute top-0 right-0">
+          <div className="absolute w-2 h-2 rounded-full bg-red-500" />
+          <div className=" w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" />
+        </div>
+      )}
+    </button>
+  );
+}

package/asset/svg/Operation.d.ts

@@ -0,0 +1,11 @@
+import { OnClick } from "../../interface";
+interface Operation {
+    onClick?: OnClick;
+}
+declare function Plus({ onClick }: Operation): import("react/jsx-runtime").JSX.Element;
+declare function Minus({ onClick }: Operation): import("react/jsx-runtime").JSX.Element;
+declare const Operation: {
+    Plus: typeof Plus;
+    Minus: typeof Minus;
+};
+export default Operation;

package/asset/svg/Operation.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+const container = {
+    styles: "cursor-pointer",
+};
+function Plus({ onClick }) {
+    return (_jsxs("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: "#105652" }), _jsx("path", { d: "M24 18V30M30 24H18", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+function Minus({ onClick }) {
+    return (_jsxs("svg", { className: cn(container), onClick: onClick, width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: "#910023" }), _jsx("path", { d: "M30 24H18", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+const Operation = {
+    Plus,
+    Minus,
+};
+export default Operation;

package/asset/svg/Operation.tsx

@@ -0,0 +1,66 @@
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+interface Operation {
+  onClick?: OnClick;
+}
+const container = {
+  styles: "cursor-pointer",
+};
+function Plus({ onClick }: Operation) {
+  return (
+    <svg
+      className={cn(container)}
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+    >
+      <path
+        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
+        fill="#105652"
+      />
+      <path
+        d="M24 18V30M30 24H18"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function Minus({ onClick }: Operation) {
+  return (
+    <svg
+      className={cn(container)}
+      onClick={onClick}
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z"
+        fill="#910023"
+      />
+      <path
+        d="M30 24H18"
+        stroke="white"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const Operation = {
+  Plus,
+  Minus,
+};
+export default Operation;

package/asset/svg/Phone.tsx

@@ -1,20 +1,20 @@
-export default function Phone() {
-  return (
-    <svg
-      className="mr-3"
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
-      viewBox="0 0 25 25"
-      fill="none"
-    >
-      <path
-        d="M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625"
-        stroke="#105652"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
+export default function Phone() {
+  return (
+    <svg
+      className="mr-3"
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="25"
+      viewBox="0 0 25 25"
+      fill="none"
+    >
+      <path
+        d="M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625"
+        stroke="#105652"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}