@ncds/ui-admin 0.0.19 → 0.0.21

package/dist/cjs/src/components/index.js

@@ -124,6 +124,17 @@ Object.keys(_spinner).forEach(function (key) {
     }
   });
 });
+var _tag = require("./tag");
+Object.keys(_tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tag[key];
+    }
+  });
+});
 var _toggle = require("./toggle");
 Object.keys(_toggle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/components/tag/Tag.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _color = require("../../../constant/color");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var Tag = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    icon = _a.icon,
+    text = _a.text,
+    count = _a.count,
+    close = _a.close,
+    onButtonClick = _a.onButtonClick;
+  var closeSize = {
+    sm: 14,
+    md: 16
+  };
+  return (0, _jsxRuntime.jsxs)("span", __assign({
+    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size), {
+      'ncua-tag--dot': (icon === null || icon === void 0 ? void 0 : icon.name) === 'dot'
+    })
+  }, {
+    children: [icon && icon.name !== 'dot' && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      name: icon.name,
+      width: 16,
+      height: 16,
+      color: icon.color
+    }), (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-tag__text"
+    }, {
+      children: text
+    })), count && (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-tag__count"
+    }, {
+      children: count
+    })), close && (0, _jsxRuntime.jsx)("button", __assign({
+      type: "button",
+      className: "ncua-tag__close",
+      onClick: onButtonClick
+    }, {
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        name: "x-close",
+        color: _color.COLOR.gray300,
+        width: closeSize[size],
+        height: closeSize[size]
+      })
+    }))]
+  }));
+};
+exports.Tag = Tag;

package/dist/cjs/src/components/tag/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Tag = require("./Tag");
+Object.keys(_Tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tag[key];
+    }
+  });
+});

package/dist/esm/src/components/index.js

@@ -9,5 +9,6 @@ export * from './radio';
 export * from './select';
 export * from './shared';
 export * from './spinner';
+export * from './tag';
 export * from './toggle';
 export * from './tooltip';

package/dist/esm/src/components/tag/Tag.js

@@ -0,0 +1,58 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { COLOR } from '../../../constant/color';
+export var Tag = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    icon = _a.icon,
+    text = _a.text,
+    count = _a.count,
+    close = _a.close,
+    onButtonClick = _a.onButtonClick;
+  var closeSize = {
+    sm: 14,
+    md: 16
+  };
+  return _jsxs("span", __assign({
+    className: classNames('ncua-tag', "ncua-tag--".concat(size), {
+      'ncua-tag--dot': (icon === null || icon === void 0 ? void 0 : icon.name) === 'dot'
+    })
+  }, {
+    children: [icon && icon.name !== 'dot' && _jsx(Icon, {
+      name: icon.name,
+      width: 16,
+      height: 16,
+      color: icon.color
+    }), _jsx("span", __assign({
+      className: "ncua-tag__text"
+    }, {
+      children: text
+    })), count && _jsx("span", __assign({
+      className: "ncua-tag__count"
+    }, {
+      children: count
+    })), close && _jsx("button", __assign({
+      type: "button",
+      className: "ncua-tag__close",
+      onClick: onButtonClick
+    }, {
+      children: _jsx(Icon, {
+        name: "x-close",
+        color: COLOR.gray300,
+        width: closeSize[size],
+        height: closeSize[size]
+      })
+    }))]
+  }));
+};

package/dist/esm/src/components/tag/index.js

@@ -0,0 +1 @@
+export * from './Tag';

package/dist/types/src/components/index.d.ts

@@ -9,6 +9,7 @@ export * from './radio';
 export * from './select';
 export * from './shared';
 export * from './spinner';
+export * from './tag';
 export * from './toggle';
 export * from './tooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/tag/Tag.d.ts

@@ -0,0 +1,19 @@
+import { IconName } from '@ncds/ui-admin-icon';
+import { FC, MouseEventHandler } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Size } from '../../../constant/size';
+type TagIcon = {
+    name: IconName | 'dot';
+    color?: keyof typeof COLOR;
+};
+interface TagProps {
+    size?: Extract<Size, 'sm' | 'md'>;
+    icon?: TagIcon;
+    text: string;
+    count?: string;
+    close?: boolean;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const Tag: FC<TagProps>;
+export {};
+//# sourceMappingURL=Tag.d.ts.map

package/dist/types/src/components/tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tag';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -1282,6 +1282,79 @@ button {
   transform: translateY(3px);
 }
 
+.ncua-tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid var(--gray-200);
+  color: var(--gray-500);
+  line-height: 1.5;
+  font-weight: var(--font-weights-commerce-sans-1);
+  background-color: var(--base-white);
+  vertical-align: top;
+  overflow: hidden;
+}
+.ncua-tag--sm {
+  font-size: var(--font-size-xxs);
+  padding: 2px 8px;
+  line-height: 14px;
+}
+.ncua-tag--md {
+  font-size: var(--font-size-sm);
+  padding: 1px 9px;
+  line-height: 22px;
+}
+.ncua-tag__text {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+.ncua-tag > svg {
+  margin-right: 4px;
+}
+.ncua-tag--dot .ncua-tag__text {
+  position: relative;
+  padding-left: 12px;
+}
+.ncua-tag--dot .ncua-tag__text::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  content: "";
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  background-color: var(--primary-red-500);
+  border-radius: 50%;
+}
+.ncua-tag__count {
+  display: inline-flex;
+  align-items: center;
+  min-width: 16px;
+  height: 16px;
+  margin-left: 6px;
+  margin-right: -5px;
+  padding: 0 5px;
+  background-color: var(--gray-100);
+  border-radius: 3px;
+  text-align: center;
+}
+.ncua-tag__count + .ncua-tag__close {
+  margin-left: 6px;
+}
+.ncua-tag__close {
+  margin-left: 3px;
+  margin-right: -5px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
 .ncua-tooltip {
   position: relative;
   font-size: 12px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -52,9 +52,9 @@
     "design-system"
   ],
   "license": "MIT",
-  "main": "dist/cjs/ui-admin/index.js",
-  "module": "dist/esm/ui-admin/index.js",
-  "types": "dist/types/ui-admin/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
   "msw": {
     "workerDirectory": "public"
   },
@@ -62,7 +62,7 @@
   "dependencies": {
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",
-    "@ncds/ui-admin-icon": "0.0.15",
+    "@ncds/ui-admin-icon": "0.0.16",
     "classnames": "^2.3.2",
     "react-flatpickr": "^4.0.10",
     "swiper": "^11.1.1"