@ncds/ui-admin 0.0.34 → 0.0.36

package/dist/esm/src/components/checkbox/CheckboxInput.js

@@ -0,0 +1,89 @@
+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);
+};
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+/**
+ * 현재 destructive 속성은 현재 디자인 시스템에 존재하지 않으니 사용하지 않는 것을 권장합니다.
+ */
+export var CheckboxInput = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    _c = _a.indeterminate,
+    indeterminate = _c === void 0 ? false : _c,
+    disabled = _a.disabled,
+    className = _a.className,
+    _d = _a.destructive,
+    destructive = _d === void 0 ? false : _d,
+    onChange = _a.onChange,
+    props = __rest(_a, ["size", "indeterminate", "disabled", "className", "destructive", "onChange"]);
+  /**
+   * 체크박스 체크시 나오는 아이콘은 아이콘 컴포넌트와 굵기가 달라 별도로 정의하였습니다.
+   */
+  var checkIcon = _jsx(_Fragment, {
+    children: _jsx("svg", __assign({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none"
+    }, {
+      children: _jsx("path", {
+        d: "M10 3L4.5 8.5L2 6",
+        stroke: disabled ? '#D3D4D8' : '#171818',
+        "stroke-width": "1.6666",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    }))
+  });
+  var indeterminateIcon = _jsx(_Fragment, {
+    children: _jsx("svg", __assign({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none"
+    }, {
+      children: _jsx("path", {
+        d: "M2.5 6H9.5",
+        stroke: disabled ? '#D3D4D8' : '#2F2F30',
+        "stroke-width": "1.66666",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    }))
+  });
+  return _jsxs("span", __assign({
+    className: classNames('ncua-checkbox-input', "ncua-checkbox-input--".concat(size), {
+      destructive: destructive
+    }, className)
+  }, {
+    children: [_jsx("input", __assign({
+      type: "checkbox",
+      ref: ref,
+      onChange: onChange,
+      disabled: disabled
+    }, props)), _jsx("span", __assign({
+      className: "ncua-checkbox-input__ico"
+    }, {
+      children: !indeterminate ? checkIcon : indeterminateIcon
+    }))]
+  }));
+});

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

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './CheckboxInput';

package/dist/esm/src/components/date-picker/DatePicker.js

@@ -0,0 +1,79 @@
+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);
+};
+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 "react/jsx-runtime";
+import classNames from 'classnames';
+import 'flatpickr/dist/flatpickr.css';
+import { Korean } from 'flatpickr/dist/l10n/ko';
+import { forwardRef } from 'react';
+import Flatpickr from 'react-flatpickr';
+import { COLOR } from '../../../constant/color';
+export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.shouldFocus,
+    shouldFocus = _b === void 0 ? true : _b,
+    currentDate = _a.currentDate,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
+    onChangeDate = _a.onChangeDate,
+    datePickerOptions = _a.datePickerOptions,
+    attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
+  var onChangeDateHandler = function (dateTimeStamp, dateStr) {
+    return onChangeDate(dateStr);
+  };
+  var options = __assign({
+    mode: 'single',
+    static: true,
+    locale: Korean,
+    dateFormat: 'Y-m-d',
+    clickOpens: true,
+    onChange: onChangeDateHandler,
+    allowInvalidPreload: true
+  }, datePickerOptions);
+  var svgSize = size === 'sm' ? 14 : 16;
+  return _jsxs("div", __assign({
+    className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
+      'ncua-date-picker--disabled': attrs.disabled
+    })
+  }, {
+    children: [_jsx(Flatpickr, __assign({}, attrs, {
+      ref: ref || undefined,
+      className: classNames('ncua-date-picker__input'),
+      options: options,
+      value: currentDate
+    })), _jsx("span", __assign({
+      className: "ncua-date-picker__ico"
+    }, {
+      children: _jsx("svg", __assign({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: svgSize,
+        height: svgSize,
+        viewBox: "0 0 16 16",
+        fill: "none"
+      }, {
+        children: _jsx("path", {
+          d: "M14 6.66671H2M10.6667 1.33337V4.00004M5.33333 1.33337V4.00004M5.2 14.6667H10.8C11.9201 14.6667 12.4802 14.6667 12.908 14.4487C13.2843 14.257 13.5903 13.951 13.782 13.5747C14 13.1469 14 12.5868 14 11.4667V5.86671C14 4.7466 14 4.18655 13.782 3.75873C13.5903 3.3824 13.2843 3.07644 12.908 2.88469C12.4802 2.66671 11.9201 2.66671 10.8 2.66671H5.2C4.0799 2.66671 3.51984 2.66671 3.09202 2.88469C2.71569 3.07644 2.40973 3.3824 2.21799 3.75873C2 4.18655 2 4.7466 2 5.86671V11.4667C2 12.5868 2 13.1469 2.21799 13.5747C2.40973 13.951 2.71569 14.257 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667Z",
+          stroke: attrs.disabled ? COLOR.gray300 : 'black',
+          strokeWidth: "1.33333",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        })
+      }))
+    }))]
+  }));
+});
+DatePicker.displayName = 'DatePicker';

package/dist/esm/src/components/date-picker/RangeDatePicker.js

@@ -0,0 +1,129 @@
+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 { useCallback, useEffect, forwardRef } from 'react';
+import { isNil } from 'lodash';
+import moment from 'moment';
+import { DatePicker } from './DatePicker';
+import { getDateFormat } from './utils';
+export var RangeDatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    onDateValidation = _a.onDateValidation;
+  var resetDateAndAlert = useCallback(function (type) {
+    var _a, _b;
+    var newDate = type === 'start' ? ((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) || '' : ((_b = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _b === void 0 ? void 0 : _b.endDate) || '';
+    if (type === 'start') {
+      startDateOptions.onChangeDate(newDate);
+    } else {
+      endDateOptions.onChangeDate(newDate);
+    }
+    onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      type: type,
+      errorType: 'reset',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var changeSettingDateAndAlert = useCallback(function (type, isOverPeriod) {
+    if (isOverPeriod === void 0) {
+      isOverPeriod = false;
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      var newDate_1 = type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate;
+      var currentDate = type === 'start' ? endDateOptions.currentDate : startDateOptions.currentDate;
+      onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+        type: type,
+        errorType: 'overlap',
+        newDate: newDate_1,
+        currentDate: currentDate
+      });
+      return;
+    }
+    var _a = validationOption.setting,
+      unit = _a.unit,
+      period = _a.period;
+    var newDate = '';
+    if (type === 'start') {
+      newDate = getDateFormat(moment(endDateOptions.currentDate).subtract(period, unit).toDate());
+    } else {
+      newDate = getDateFormat(moment(startDateOptions.currentDate).add(period, unit).toDate());
+    }
+    onDateValidation === null || onDateValidation === void 0 ? void 0 : onDateValidation({
+      type: type,
+      errorType: isOverPeriod ? 'period' : 'overlap',
+      newDate: newDate,
+      currentDate: type === 'start' ? startDateOptions.currentDate : endDateOptions.currentDate
+    });
+  }, [startDateOptions, endDateOptions, validationOption, onDateValidation]);
+  var validateDateType = function (date) {
+    return moment(date).isValid();
+  };
+  useEffect(function () {
+    var _a;
+    var needResetDate = validateDateType(startDateOptions.currentDate) && !isNil((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.startDate) && moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('start');
+      return;
+    }
+    var isOverDate = moment(startDateOptions.currentDate).isAfter(endDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('start');
+      return;
+    }
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting)) {
+      return;
+    }
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = moment(startDateOptions.currentDate).isSameOrAfter(moment(endDateOptions.currentDate).subtract(period, unit));
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('start', true);
+    }
+  }, [startDateOptions.currentDate]);
+  useEffect(function () {
+    var _a;
+    var needResetDate = validateDateType(endDateOptions.currentDate) && !isNil((_a = validationOption === null || validationOption === void 0 ? void 0 : validationOption.initDate) === null || _a === void 0 ? void 0 : _a.endDate) && moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (needResetDate) {
+      resetDateAndAlert('end');
+      return;
+    }
+    var isNotTodayEndDate = !moment(endDateOptions.currentDate).isSame(moment(), 'day');
+    if (!(validationOption === null || validationOption === void 0 ? void 0 : validationOption.setting) || !isNotTodayEndDate) {
+      return;
+    }
+    var isOverDate = moment(endDateOptions.currentDate).isBefore(startDateOptions.currentDate);
+    if (isOverDate) {
+      changeSettingDateAndAlert('end');
+      return;
+    }
+    var _b = validationOption.setting,
+      unit = _b.unit,
+      period = _b.period;
+    var isValidPeriod = moment(endDateOptions.currentDate).isSameOrBefore(moment(startDateOptions.currentDate).add(period, unit));
+    if (!isValidPeriod) {
+      changeSettingDateAndAlert('end', true);
+    }
+  }, [endDateOptions.currentDate]);
+  return _jsxs("div", __assign({
+    className: "ncua-range-date-picker",
+    ref: ref || undefined
+  }, {
+    children: [_jsx(DatePicker, __assign({}, startDateOptions, {
+      ref: undefined
+    })), "-", _jsx(DatePicker, __assign({}, endDateOptions, {
+      ref: undefined
+    }))]
+  }));
+});
+RangeDatePicker.displayName = 'RangeDatePicker';

package/dist/esm/src/components/date-picker/RangeDatePickerWithButtons.js

@@ -0,0 +1,85 @@
+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 { useEffect } from 'react';
+import { RangeDatePicker } from './RangeDatePicker';
+import { ButtonGroup } from '../button';
+import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
+import { PERIOD_ITEM } from '../../constant/date-picker';
+export var RangeDatePickerWithButtons = function (_a) {
+  var _b = _a.buttonGroupSize,
+    buttonGroupSize = _b === void 0 ? 'sm' : _b,
+    currentButtonId = _a.currentButtonId,
+    setCurrentButtonId = _a.setCurrentButtonId,
+    startDateOptions = _a.startDateOptions,
+    endDateOptions = _a.endDateOptions,
+    validationOption = _a.validationOption,
+    periodKeys = _a.periodKeys,
+    onDateValidation = _a.onDateValidation;
+  var setCalculatedDate = function () {
+    var currentPeriodItem = PERIOD_ITEM[currentButtonId];
+    if (!currentPeriodItem) {
+      return;
+    }
+    if (currentButtonId === 'ENTIRE') {
+      startDateOptions.onChangeDate('');
+      endDateOptions.onChangeDate('');
+      return;
+    }
+    var startDate = getDateFormat(getSubtractDate({
+      period: currentPeriodItem.period,
+      unit: currentPeriodItem.unit
+    }));
+    startDateOptions.onChangeDate(startDate);
+    if (endDateOptions.currentDate !== getDateFormat()) {
+      endDateOptions.onChangeDate(getDateFormat());
+    }
+  };
+  var handleOnChangeDate = function (date, type) {
+    type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+    currentButtonId && setCurrentButtonId('NONE');
+  };
+  useEffect(function () {
+    if (currentButtonId !== 'NONE') {
+      setCalculatedDate();
+    }
+  }, [currentButtonId]);
+  return _jsxs("div", __assign({
+    className: "ncua-range-date-picker-with-buttons"
+  }, {
+    children: [_jsx(ButtonGroup, __assign({
+      size: buttonGroupSize
+    }, {
+      children: periodKeys.map(function (key) {
+        return _jsx(ButtonGroup.Item, {
+          isCurrent: currentButtonId === key,
+          label: PERIOD_ITEM[key].text,
+          onClick: function () {
+            return setCurrentButtonId(key);
+          }
+        }, key);
+      })
+    })), _jsx(RangeDatePicker, {
+      startDateOptions: __assign(__assign({}, startDateOptions), {
+        onChangeDate: function (date) {
+          return handleOnChangeDate(date, 'START');
+        }
+      }),
+      endDateOptions: __assign(__assign({}, endDateOptions), {
+        onChangeDate: function (date) {
+          return handleOnChangeDate(date, 'END');
+        }
+      }),
+      validationOption: validationOption,
+      onDateValidation: onDateValidation
+    })]
+  }));
+};

package/dist/{temp → esm}/src/components/date-picker/index.js

@@ -1,4 +1,4 @@
 export * from './DatePicker';
 export * from './RangeDatePicker';
 export * from './RangeDatePickerWithButtons';
-export * from './utils';
+export * from './utils';

package/dist/esm/src/components/date-picker/utils.js

@@ -0,0 +1,10 @@
+import moment from 'moment';
+export function getToday() {
+  return moment().toDate();
+}
+export function getDateFormat(date) {
+  if (date === void 0) {
+    date = getToday();
+  }
+  return moment(date).format('YYYY-MM-DD');
+}

package/dist/esm/src/components/divider/Divider.js

@@ -0,0 +1,40 @@
+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 { forwardRef } from 'react';
+import classNames from 'classnames';
+/**
+ * @param {DividerProps} props
+ * @param {ReactNode} props.children Button 컴포넌트는 xs로 ButtonGroup은 sm 사이즈로 추가하는 것이 권장됩니다.
+ * @returns {ReactNode}
+ */
+export var Divider = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var className = _a.className,
+    type = _a.type,
+    _b = _a.style,
+    style = _b === void 0 ? 'single-line' : _b,
+    children = _a.children;
+  return _jsxs("div", __assign({
+    className: classNames('ncua-divider', "ncua-divider--".concat(type), "ncua-divider--".concat(style), className),
+    ref: ref
+  }, {
+    children: [style === 'single-line' && _jsx("div", {
+      className: "ncua-divider__line"
+    }), _jsx("div", __assign({
+      className: "ncua-divider__content"
+    }, {
+      children: children
+    })), style === 'single-line' && _jsx("div", {
+      className: "ncua-divider__line"
+    })]
+  }));
+});
+Divider.displayName = 'Divider';

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

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

package/dist/esm/src/components/dot/Dot.js

@@ -0,0 +1,34 @@
+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);
+};
+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 } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+export var Dot = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.color,
+    color = _b === void 0 ? 'success' : _b,
+    _c = _a.size,
+    size = _c === void 0 ? 'md' : _c,
+    className = _a.className,
+    props = __rest(_a, ["color", "size", "className"]);
+  return _jsx("span", __assign({
+    ref: ref,
+    className: classNames('ncua-dot', "ncua-dot--".concat(color), "ncua-dot--".concat(size), className)
+  }, props));
+});
+Dot.displayName = 'Dot';

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

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

package/dist/esm/src/components/dropdown/Dropdown.js

@@ -0,0 +1,198 @@
+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 { useEffect, useRef, useState } from 'react';
+export var Dropdown = function (_a) {
+  var trigger = _a.trigger,
+    _b = _a.align,
+    align = _b === void 0 ? 'left' : _b,
+    header = _a.header,
+    groups = _a.groups,
+    className = _a.className,
+    _c = _a.opened,
+    opened = _c === void 0 ? false : _c,
+    _d = _a.closeOnClickItem,
+    closeOnClickItem = _d === void 0 ? true : _d,
+    _e = _a.closeOnClickOutside,
+    closeOnClickOutside = _e === void 0 ? true : _e;
+  var _f = useState(opened),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
+  var dropdownRef = useRef(null);
+  var toggleDropdown = function () {
+    setIsOpen(!isOpen);
+  };
+  var handleClickOutside = function (event) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  var handleClickItem = function (item) {
+    if (!item.disabled && item.onClick) {
+      item.onClick();
+      if (closeOnClickItem) {
+        setIsOpen(false);
+      }
+    }
+  };
+  useEffect(function () {
+    if (closeOnClickOutside) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [closeOnClickOutside]);
+  var renderTrigger = function () {
+    switch (trigger.type) {
+      case 'custom':
+        return _jsx("button", __assign({
+          className: "ncua-dropdown__trigger",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.children
+        }));
+      case 'icon':
+        return _jsx("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.icon ? _jsx(Icon, {
+            name: trigger.icon
+          }) : _jsx(Icon, {
+            name: "dots-vertical"
+          })
+        }));
+      case 'avatar':
+        return _jsx("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
+          onClick: toggleDropdown
+        }, {
+          children: _jsx("div", __assign({
+            className: "ncua-dropdown__avatar"
+          }, {
+            children: _jsx("img", {
+              src: trigger.avatar,
+              alt: "avatar"
+            })
+          }))
+        }));
+      case 'button':
+        return _jsx("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--button",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.text
+        }));
+      default:
+        return null;
+    }
+  };
+  var renderHeader = function () {
+    if (!header) return null;
+    if (header.type === 'avatar' && header.avatar) {
+      return _jsx("div", __assign({
+        className: "ncua-dropdown__header"
+      }, {
+        children: _jsxs("div", __assign({
+          className: "ncua-dropdown__header-avatar-group"
+        }, {
+          children: [_jsx("div", __assign({
+            className: "ncua-dropdown__avatar"
+          }, {
+            children: _jsx("img", {
+              src: header.avatar,
+              alt: "avatar"
+            })
+          })), _jsxs("div", __assign({
+            className: "ncua-dropdown__header-text"
+          }, {
+            children: [header.title && _jsx("div", __assign({
+              className: "ncua-dropdown__header-title"
+            }, {
+              children: header.title
+            })), header.subtitle && _jsx("div", __assign({
+              className: "ncua-dropdown__header-subtitle"
+            }, {
+              children: header.subtitle
+            }))]
+          }))]
+        }))
+      }));
+    }
+    if (header.type === 'text' && header.title) {
+      return _jsx("div", __assign({
+        className: "ncua-dropdown__header"
+      }, {
+        children: _jsx("div", __assign({
+          className: "ncua-dropdown__header-title"
+        }, {
+          children: header.title
+        }))
+      }));
+    }
+    return null;
+  };
+  var renderItem = function (item) {
+    var itemClasses = ['ncua-dropdown__item', item.disabled ? 'is-disabled' : '', item.type === 'danger' ? 'is-danger' : ''].filter(Boolean).join(' ');
+    return _jsxs("div", __assign({
+      className: itemClasses
+    }, {
+      children: [_jsx("button", {
+        className: "ncua-dropdown__item-clickable-layer",
+        onClick: function () {
+          return handleClickItem(item);
+        }
+      }), _jsxs("div", __assign({
+        className: "ncua-dropdown__item-content"
+      }, {
+        children: [_jsxs("div", __assign({
+          className: "ncua-dropdown__item-text-group"
+        }, {
+          children: [item.icon && _jsx(Icon, {
+            name: item.icon,
+            className: "ncua-dropdown__item-icon"
+          }), _jsx("span", __assign({
+            className: "ncua-dropdown__item-text"
+          }, {
+            children: item.text
+          }))]
+        })), item.shortcut && _jsx("span", __assign({
+          className: "ncua-dropdown__item-shortcut"
+        }, {
+          children: item.shortcut
+        }))]
+      }))]
+    }), item.id);
+  };
+  var dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : ''].filter(Boolean).join(' ');
+  return _jsxs("div", __assign({
+    className: dropdownClasses,
+    ref: dropdownRef
+  }, {
+    children: [renderTrigger(), isOpen && _jsxs("div", __assign({
+      className: "ncua-dropdown__menu"
+    }, {
+      children: [renderHeader(), _jsx("div", __assign({
+        className: "ncua-dropdown__menu-items"
+      }, {
+        children: groups.map(function (group, index) {
+          return _jsx("div", __assign({
+            className: "ncua-dropdown__group"
+          }, {
+            children: group.items.map(renderItem)
+          }), index);
+        })
+      }))]
+    }))]
+  }));
+};