@ncds/ui-admin 0.0.17 → 0.0.19

package/dist/types/{ui-admin/src → src}/components/tooltip/Tooltip.d.ts

@@ -2,10 +2,11 @@ interface TooltipProps {
     tooltipType?: 'white' | 'black';
     iconType?: 'stroke' | 'fill';
     position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    size?: 'sm' | 'md';
     hideArrow?: boolean;
     title?: string;
     content?: string;
 }
-export declare const Tooltip: ({ tooltipType, iconType, position, title, content, hideArrow, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ tooltipType, iconType, position, size, title, content, hideArrow, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -68,6 +68,8 @@
   --shadow-xl: 0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808;
   --shadow-2xl: 0px 24px 48px -12px #1018282e;
   --shadow-3xl: 0px 32px 64px -12px #10182824;
+  --box-shadow-xs: 0px 1px 2px 0px #1018280d;
+  --box-shadow-lg: 0px 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814;
   --font-families-commerce-sans: Commerce Sans;
   --line-heights-display-xl: 76px;
   --line-heights-display-lg: 60px;
@@ -398,6 +400,7 @@ button {
   font-size: var(--font-size-xxs);
   border-radius: 6px;
   font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xxs);
 }
 .ncua-btn--xs {
   padding: 5px 12px;
@@ -405,6 +408,7 @@ button {
   font-size: var(--font-size-xs);
   border-radius: 6px;
   font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
 }
 .ncua-btn--sm {
   padding: 8px 14px;
@@ -412,6 +416,7 @@ button {
   font-size: var(--font-size-sm);
   border-radius: 8px;
   font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-sm);
 }
 .ncua-btn--md {
   padding: 10px 16px;
@@ -419,6 +424,7 @@ button {
   font-size: var(--font-size-sm);
   border-radius: 8px;
   font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-md);
 }
 .ncua-btn.is-full {
   width: 100%;
@@ -725,6 +731,196 @@ button {
   transform: translateY(3px);
 }
 
+.ncua-dropdown {
+  position: relative;
+  display: inline-block;
+}
+.ncua-dropdown__trigger {
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  display: grid;
+  place-items: center;
+}
+.ncua-dropdown__trigger--icon {
+  width: 20px;
+  height: 20px;
+}
+.ncua-dropdown__trigger--icon + .ncua-dropdown__menu {
+  top: calc(100% - 4px);
+}
+.ncua-dropdown__trigger--icon svg {
+  width: 100%;
+  height: 100%;
+}
+.ncua-dropdown__trigger--avatar + .ncua-dropdown__menu {
+  top: calc(100% - 8px);
+  left: 5px;
+}
+.ncua-dropdown--right .ncua-dropdown__trigger--avatar + .ncua-dropdown__menu {
+  left: auto;
+  right: 5px;
+}
+.ncua-dropdown__trigger--avatar .ncua-dropdown__avatar {
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid var(--gray-50);
+}
+.ncua-dropdown__trigger--avatar .ncua-dropdown__avatar img {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+}
+.ncua-dropdown__trigger--button {
+  height: 28px;
+  padding: 5px 10px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-100);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  color: var(--gray-900);
+  box-shadow: var(--box-shadow-xs);
+}
+.ncua-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 1000;
+  min-width: 240px;
+  background-color: var(--base-white);
+  border-radius: 8px;
+  border: 1px solid var(--gray-100);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.ncua-dropdown--right .ncua-dropdown__menu {
+  left: auto;
+  right: 0;
+}
+.ncua-dropdown__header {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--gray-100);
+}
+.ncua-dropdown__header-avatar-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ncua-dropdown__header .ncua-dropdown__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 200px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--gray-900);
+}
+.ncua-dropdown__header .ncua-dropdown__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ncua-dropdown__header-text {
+  display: flex;
+  flex-direction: column;
+}
+.ncua-dropdown__header-title {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  color: var(--gray-600);
+  line-height: var(--line-heights-xs);
+}
+.ncua-dropdown__header-subtitle {
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  color: var(--gray-500);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-dropdown__menu-items {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.ncua-dropdown__group {
+  padding: 4px 0;
+  border-bottom: 1px solid var(--gray-100);
+}
+.ncua-dropdown__group:last-child {
+  border-bottom: none;
+}
+.ncua-dropdown__item {
+  cursor: pointer;
+  padding: 2px 6px;
+  width: 100%;
+  position: relative;
+}
+.ncua-dropdown__item-clickable-layer {
+  position: absolute;
+  top: 2px;
+  left: 6px;
+  right: 6px;
+  bottom: 2px;
+  border-radius: 6px;
+  background: transparent;
+  z-index: 1;
+}
+.ncua-dropdown__item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 7px 10px;
+  border-radius: 6px;
+}
+.ncua-dropdown__item:hover .ncua-dropdown__item-content {
+  background-color: var(--gray-50);
+}
+.ncua-dropdown__item-text-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+}
+.ncua-dropdown__item-icon {
+  width: 20px;
+  height: 20px;
+}
+.ncua-dropdown__item-text {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  color: var(--gray-600);
+  line-height: var(--line-heights-xs);
+}
+.ncua-dropdown__item-shortcut {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  color: var(--gray-400);
+  line-height: var(--line-heights-xs);
+}
+.ncua-dropdown__item.is-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+.ncua-dropdown__item.is-disabled .ncua-dropdown__item-text,
+.ncua-dropdown__item.is-disabled .ncua-dropdown__item-shortcut {
+  color: var(--gray-200);
+}
+.ncua-dropdown__item.is-disabled svg {
+  opacity: 0.5;
+}
+.ncua-dropdown__item.is-danger .ncua-dropdown__item-text {
+  color: var(--primary-red-700);
+}
+.ncua-dropdown__item.is-danger svg {
+  color: var(--primary-red-700);
+}
+
 .ncua-hint-text {
   color: var(--gray-400);
 }
@@ -1088,15 +1284,15 @@ button {
 
 .ncua-tooltip {
   position: relative;
-  font-size: 11px;
+  font-size: 12px;
 }
 .ncua-tooltip svg {
   cursor: pointer;
 }
 .ncua-tooltip__bg {
   position: absolute;
-  padding: 12px;
-  border-radius: 4px;
+  border-radius: 6px;
+  padding: 8px 12px;
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -1225,6 +1421,9 @@ button {
 .ncua-tooltip:not(:hover) .ncua-tooltip__bg {
   display: none;
 }
+.ncua-tooltip:has(.ncua-tooltip__title) .ncua-tooltip__bg {
+  padding: 12px;
+}
 
 :root {
   --select-height-xs: 28px;
@@ -1636,6 +1835,7 @@ button {
   border: 0;
   outline: none;
   color: inherit;
+  vertical-align: top;
   font: inherit;
 }
 .ncua-date-picker__input::placeholder {
@@ -1664,6 +1864,9 @@ button {
   max-height: none;
   padding-block-start: 12px;
 }
+.ncua-date-picker .flatpickr-calendar::before, .ncua-date-picker .flatpickr-calendar::after {
+  content: none;
+}
 .ncua-date-picker .flatpickr-current-month .flatpickr-monthDropdown-months,
 .ncua-date-picker .numInputWrapper .cur-year {
   font-size: var(--font-size-sm);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -62,7 +62,7 @@
   "dependencies": {
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",
-    "@ncds/ui-admin-icon": "0.0.14",
+    "@ncds/ui-admin-icon": "0.0.15",
     "classnames": "^2.3.2",
     "react-flatpickr": "^4.0.10",
     "swiper": "^11.1.1"

package/dist/cjs/const/Icon/FinanceECommerce.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FinanceECommerce = void 0;
-var FinanceECommerce = exports.FinanceECommerce = ['bankNote01', 'coinsStacked01', 'coinsStacked02', 'coinsStacked04', 'coinsHand', 'creditCardPlus', 'creditCardCheck', 'gift02', 'shoppingBag03', 'shoppingCart01', 'wallet01', 'wallet02', 'wallet05'];

package/dist/cjs/const/Icon/alertAndFeedback.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.alertAndFeedback = void 0;
-var alertAndFeedback = exports.alertAndFeedback = ['alertCircle', 'alertTriangle', 'announcement01'];

package/dist/cjs/const/Icon/arrow.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.arrows = void 0;
-var arrows = exports.arrows = ['arrowUpRight', 'arrowNarrowRight', 'arrowNarrowUpRight', 'arrowCircleRight', 'arrowRight', 'chevronSelectorVertical', 'arrowLeft', 'refreshCw02', 'refreshCcw01'];

package/dist/cjs/const/Icon/chart.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.charts = void 0;
-var charts = exports.charts = ['lineChartUp02', 'presentationChart01', 'presentationChart02'];

package/dist/cjs/const/Icon/chevron.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.chevrons = void 0;
-var chevrons = exports.chevrons = ['chevronDown', 'chevronRight', 'chevronUp', 'chevronLeft'];

package/dist/cjs/const/Icon/circle.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.circles = void 0;
-var circles = exports.circles = ['plusCircle', 'minusCircle', 'checkCircle'];

package/dist/cjs/const/Icon/communication.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.communication = void 0;
-var communication = exports.communication = ['messageSmileCircle', 'messageDotsCircle', 'mail02', 'annotationQuestion', 'send01'];

package/dist/cjs/const/Icon/development.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.development = void 0;
-var development = exports.development = ['dataflow03', 'folderCode', 'server02', 'server03', 'server04', 'server06', 'fileCode02', 'dataflow01', 'browser', 'code02'];

package/dist/cjs/const/Icon/editor.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.editor = void 0;
-var editor = exports.editor = ['scale02', 'palette', 'pencil02', 'transform', 'magicWand01', 'skew'];

package/dist/cjs/const/Icon/education.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.education = void 0;
-var education = exports.education = ['briefcase02', 'bookOpen02', 'bookClosed', 'trophy01', 'glasses02'];

package/dist/cjs/const/Icon/files.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.files = void 0;
-var files = exports.files = ['fileCheck01', 'fileCheck02', 'fileCheck03', 'fileSearch02', 'fileDownload02', 'file05'];

package/dist/cjs/const/Icon/general.js

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.general = void 0;
-var general = exports.general = [
-// building
-'building02', 'building07',
-// help
-'helpCircle',
-// home
-'homeLine',
-// check
-'check', 'checkDone01',
-// minus
-'minus',
-// plus
-'plus',
-// gift
-'gift01',
-// x
-'xClose',
-// menu
-'menu01',
-// dots
-'dotsGrid', 'dotVertical',
-// settings
-'setting02', 'settings03', 'searchMd',
-// zap
-'zapFast', 'eye', 'eyeOff', 'tool02', 'edit03', 'uploadCloud01', 'uploadCloud02', 'searchLg', 'trash03', 'download02', 'target03', 'target04', 'searchRefraction', 'heart', 'heartHand', 'copy05', 'checkVerified02', 'home03', 'home02', 'checkHeart', 'edit05', 'copy07', 'bookmarkX', 'cloud01', 'linkExternal02', 'checkCircleBroken', 'settings01'];

package/dist/cjs/const/Icon/index.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Icons = void 0;
-var _FinanceECommerce = require("./FinanceECommerce");
-var _alertAndFeedback = require("./alertAndFeedback");
-var _arrow = require("./arrow");
-var _chart = require("./chart");
-var _chevron = require("./chevron");
-var _circle = require("./circle");
-var _communication = require("./communication");
-var _development = require("./development");
-var _editor = require("./editor");
-var _education = require("./education");
-var _files = require("./files");
-var _general = require("./general");
-var _layout = require("./layout");
-var _mapsTravel = require("./mapsTravel");
-var _mediaDevices = require("./mediaDevices");
-var _message = require("./message");
-var _sales = require("./sales");
-var _security = require("./security");
-var _shapes = require("./shapes");
-var _tag = require("./tag");
-var _time = require("./time");
-var _users = require("./users");
-var _weather = require("./weather");
-var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-var Icons = exports.Icons = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], _weather.weather, true), _editor.editor, true), _FinanceECommerce.FinanceECommerce, true), _layout.layout, true), _mediaDevices.mediaDevices, true), _shapes.shapes, true), _mapsTravel.mapsTravel, true), _general.general, true), _users.users, true), _arrow.arrows, true), _chevron.chevrons, true), _message.messages, true), _circle.circles, true), _tag.tags, true), _chart.charts, true), _sales.sales, true), _alertAndFeedback.alertAndFeedback, true), _development.development, true), _education.education, true), _files.files, true), _time.time, true), _security.security, true), _communication.communication, true);

package/dist/cjs/const/Icon/layout.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.layout = void 0;
-var layout = exports.layout = [
-// align
-'alignTop01', 'layoutAlt01', 'layoutAlt04', 'layerSingle', 'layerTwo02', 'layerThree02', 'intersectCircle', 'flexAlignTop', 'flexAlignLeft', 'grid01'];

package/dist/cjs/const/Icon/mapsTravel.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mapsTravel = void 0;
-var mapsTravel = exports.mapsTravel = ['globe01', 'flag04', 'rocket02', 'markerPin02', 'ticket01', 'truck01', 'truck02'];

package/dist/cjs/const/Icon/mediaDevices.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mediaDevices = void 0;
-var mediaDevices = exports.mediaDevices = ['lightbulb02', 'videoRecorder', 'phone01', 'youtube', 'playSquare', 'monitor05', 'monitor01', 'volumeMax', 'hardDrive'];

package/dist/cjs/const/Icon/message.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.messages = void 0;
-var messages = exports.messages = ['messageSmileSquare', 'messageSquare01', 'messageChatCircle'];

package/dist/cjs/const/Icon/sales.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sales = void 0;
-var sales = exports.sales = ['sale03'];

package/dist/cjs/const/Icon/security.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.security = void 0;
-var security = exports.security = ['shield03', 'lock01', 'lockUnlocked01', 'folderShield', 'shieldTick', 'fileShield02'];

package/dist/cjs/const/Icon/shapes.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shapes = void 0;
-var shapes = exports.shapes = [
-// cube
-'cube02'];

package/dist/cjs/const/Icon/tag.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.tags = void 0;
-var tags = exports.tags = ['tag03'];

package/dist/cjs/const/Icon/time.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.time = void 0;
-var time = exports.time = ['clockCheck', 'calendarCheck01', 'calendarCheck02', 'clock', 'alarmClockCheck'];

package/dist/cjs/const/Icon/users.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.users = void 0;
-var users = exports.users = ['user01', 'user02', 'users01', 'userCheck01', 'userDown02', 'usersUp', 'userEdit', 'faceFrown', 'faceSmile'];

package/dist/cjs/const/Icon/weather.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.weather = void 0;
-var weather = exports.weather = ['star06'];

package/dist/cjs/ui-admin/src/components/svg/SvgIcon.js

@@ -1,65 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SvgIcon = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _color = require("../../../constant/color");
-var _const = require("./const");
-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 INITIAL_VIEW_BOX = '0 0 24 24';
-var SvgIcon = function (_a) {
-  var icon = _a.icon,
-    _b = _a.size,
-    size = _b === void 0 ? 24 : _b,
-    _c = _a.color,
-    color = _c === void 0 ? 'currentColor' : _c,
-    _d = _a.strokeWidth,
-    strokeWidth = _d === void 0 ? '2' : _d,
-    _e = _a.strokeOpacity,
-    strokeOpacity = _e === void 0 ? '1' : _e,
-    className = _a.className,
-    customColor = _a.customColor,
-    _f = _a.fill,
-    fill = _f === void 0 ? 'none' : _f;
-  var isExistedIcon = Object.keys(_const.IconSet).includes(icon);
-  var isExistedColor = Object.keys(_color.COLOR).includes(color);
-  var iconInfo = {
-    viewBox: isExistedIcon ? _const.IconSet[icon].viewBox : INITIAL_VIEW_BOX,
-    path: isExistedIcon ? _const.IconSet[icon].path : '',
-    stroke: customColor ? customColor : isExistedColor ? _color.COLOR[color] : _color.COLOR['currentColor'],
-    width: size,
-    height: size,
-    strokeWidth: strokeWidth,
-    fill: fill
-  };
-  return (0, _jsxRuntime.jsx)("svg", __assign({
-    className: className,
-    width: iconInfo.width,
-    height: iconInfo.height,
-    viewBox: iconInfo.viewBox,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, {
-    children: (0, _jsxRuntime.jsx)("path", {
-      d: iconInfo.path,
-      fill: iconInfo.fill,
-      stroke: iconInfo.stroke,
-      strokeWidth: iconInfo.strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeOpacity: strokeOpacity
-    })
-  }));
-};
-exports.SvgIcon = SvgIcon;