@team-monolith/cds 1.126.0 → 1.127.0

package/dist/components/Badge.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare const badgeClasses: {
+    readonly root: "Badge";
+    readonly icon: "Badge-icon";
+    readonly label: "Badge-label";
+};
+export interface BadgeProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 컴포넌트 내 표기될 문자열 */
+    label: React.ReactNode;
+    /** 컴포넌트 좌측에 표기될 아이콘 */
+    icon?: React.ReactNode;
+}
+/**
+ * Badge 컴포넌트
+ * [피그마](https://www.figma.com/design/UD08wln8CwDoCMGFBIGTiZ/CDS?node-id=6586-3001)
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Badge.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
+export const badgeClasses = {
+    root: "Badge",
+    icon: "Badge-icon",
+    label: "Badge-label",
+};
+/**
+ * Badge 컴포넌트
+ * [피그마](https://www.figma.com/design/UD08wln8CwDoCMGFBIGTiZ/CDS?node-id=6586-3001)
+ */
+export const Badge = React.forwardRef(function Badge(props, ref) {
+    const { className, component: Component = "span", label, icon } = props, other = __rest(props, ["className", "component", "label", "icon"]);
+    const theme = useTheme();
+    return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: [badgeClasses.root, className].filter(Boolean).join(" "), css: css `
+        width: fit-content;
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 2px 8px 2px 6px;
+        border-radius: 22px;
+        font-family: ${theme.fontFamily.ui};
+      `, children: [icon && _jsx(IconWrapper, { className: badgeClasses.icon, children: icon }), _jsx(Label, { className: badgeClasses.label, children: label })] })));
+});
+const IconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+const Label = styled.span `
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+`;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../@types/emotion.d.ts" preserve="true" />
 export * from "./components/AlertDialog";
+export * from "./components/Badge";
 export * from "./components/DecoratedNumber";
 export * from "./components/Banner";
 export * from "./components/Book";

package/dist/index.js

@@ -1,5 +1,6 @@
 /// <reference path="../../@types/emotion.d.ts" preserve="true"/>
 export * from "./components/AlertDialog";
+export * from "./components/Badge";
 export * from "./components/DecoratedNumber";
 export * from "./components/Banner";
 export * from "./components/Book";

package/package.json

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