@team-monolith/cds 1.110.0 → 1.111.0

package/dist/components/Tag.d.ts

@@ -5,7 +5,7 @@ export declare const tagClasses: {
     readonly closeButton: "Tag-closeButton";
 };
 export type TagColor = "default" | "red" | "teal" | "orange" | "blue" | "green" | "yellow" | "black" | "white" | "ai";
-export interface TagProps {
+type TagCommonProps = {
     className?: string;
     component?: React.ElementType;
     /** 컴포넌트 내 표기될 메인으로 노출될 내용 */
@@ -16,12 +16,20 @@ export interface TagProps {
     color?: TagColor;
     /** 라벨 텍스트의 굵기 여부 */
     bold?: boolean;
-    /** 컴포넌트 우측에 표기될 닫기 버튼 유무 */
-    close?: boolean;
-    /** 닫기 버튼 클릭 시 호출될 콜백 함수 */
+    /** 태그 컴포넌트 영역을 클릭 시 호출될 콜백 함수 */
     onClick?: () => void;
-}
+};
+type ClosableTagProps = TagCommonProps & {
+    close: true;
+    /** 닫기 버튼 클릭 시 호출될 콜백 함수. 등록하지 않으면 onClick으로 fallback. */
+    onClose?: () => void;
+};
+type NonClosableTagProps = TagCommonProps & {
+    close?: false;
+};
+export type TagProps = ClosableTagProps | NonClosableTagProps;
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=42-869&t=HZXCHP0r0tbvMA6v-0)
  */
 export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<unknown>>;
+export {};

package/dist/components/Tag.js

@@ -81,7 +81,7 @@ const COLOR_TO_STYLE = (theme, color) => ({
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=42-869&t=HZXCHP0r0tbvMA6v-0)
  */
 export const Tag = React.forwardRef(function Tag(props, ref) {
-    const { className, component: Component = "span", label, icon, color = "default", bold, close, onClick } = props, other = __rest(props, ["className", "component", "label", "icon", "color", "bold", "close", "onClick"]);
+    const { className, component: Component = "span", label, icon, color = "default", bold, onClick, close } = props, other = __rest(props, ["className", "component", "label", "icon", "color", "bold", "onClick", "close"]);
     const theme = useTheme();
     return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [tagClasses.root, className].filter(Boolean).join(" "), css: [
             css `
@@ -101,7 +101,7 @@ export const Tag = React.forwardRef(function Tag(props, ref) {
           }
         `,
             COLOR_TO_STYLE(theme, color),
-            close
+            onClick
                 ? css `
               cursor: pointer;
             `
@@ -110,7 +110,15 @@ export const Tag = React.forwardRef(function Tag(props, ref) {
           font-weight: ${bold ? 700 : 400};
           font-size: 12px;
           line-height: 20px;
-        `, children: label }), close && _jsx(StyledCloseFillIcon, { className: tagClasses.closeButton })] })));
+        `, children: label }), close && (_jsx("span", { css: css `
+            display: flex;
+            cursor: pointer;
+            align-items: center;
+          `, onClick: (e) => {
+                    var _a, _b;
+                    (_b = ((_a = props.onClose) !== null && _a !== void 0 ? _a : onClick)) === null || _b === void 0 ? void 0 : _b();
+                    e.stopPropagation();
+                }, children: _jsx(StyledCloseFillIcon, { className: tagClasses.closeButton }) }))] })));
 });
 const StyledCloseFillIcon = styled(CloseFillIcon) `
   width: 10px;

package/dist/index.d.ts

@@ -36,3 +36,4 @@ export * from "./patterns/SegmentedControl";
 export * from "./patterns/LexicalEditor";
 export * from "./patterns/Accordion";
 export * from "./patterns/ToggleButtonGroup";
+export * from "./patterns/Tabs";

package/dist/index.js

@@ -36,3 +36,4 @@ export * from "./patterns/SegmentedControl";
 export * from "./patterns/LexicalEditor";
 export * from "./patterns/Accordion";
 export * from "./patterns/ToggleButtonGroup";
+export * from "./patterns/Tabs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.110.0",
+  "version": "1.111.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,