@ncds/ui-admin 0.0.34 → 0.0.36

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

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _react = require("react");
+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 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 = (0, _react.useState)(opened),
+    isOpen = _f[0],
+    setIsOpen = _f[1];
+  var dropdownRef = (0, _react.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);
+      }
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (closeOnClickOutside) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [closeOnClickOutside]);
+  var renderTrigger = function () {
+    switch (trigger.type) {
+      case 'custom':
+        return (0, _jsxRuntime.jsx)("button", __assign({
+          className: "ncua-dropdown__trigger",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.children
+        }));
+      case 'icon':
+        return (0, _jsxRuntime.jsx)("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon",
+          onClick: toggleDropdown
+        }, {
+          children: trigger.icon ? (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+            name: trigger.icon
+          }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+            name: "dots-vertical"
+          })
+        }));
+      case 'avatar':
+        return (0, _jsxRuntime.jsx)("button", __assign({
+          className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar",
+          onClick: toggleDropdown
+        }, {
+          children: (0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-dropdown__avatar"
+          }, {
+            children: (0, _jsxRuntime.jsx)("img", {
+              src: trigger.avatar,
+              alt: "avatar"
+            })
+          }))
+        }));
+      case 'button':
+        return (0, _jsxRuntime.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 (0, _jsxRuntime.jsx)("div", __assign({
+        className: "ncua-dropdown__header"
+      }, {
+        children: (0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-dropdown__header-avatar-group"
+        }, {
+          children: [(0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-dropdown__avatar"
+          }, {
+            children: (0, _jsxRuntime.jsx)("img", {
+              src: header.avatar,
+              alt: "avatar"
+            })
+          })), (0, _jsxRuntime.jsxs)("div", __assign({
+            className: "ncua-dropdown__header-text"
+          }, {
+            children: [header.title && (0, _jsxRuntime.jsx)("div", __assign({
+              className: "ncua-dropdown__header-title"
+            }, {
+              children: header.title
+            })), header.subtitle && (0, _jsxRuntime.jsx)("div", __assign({
+              className: "ncua-dropdown__header-subtitle"
+            }, {
+              children: header.subtitle
+            }))]
+          }))]
+        }))
+      }));
+    }
+    if (header.type === 'text' && header.title) {
+      return (0, _jsxRuntime.jsx)("div", __assign({
+        className: "ncua-dropdown__header"
+      }, {
+        children: (0, _jsxRuntime.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 (0, _jsxRuntime.jsxs)("div", __assign({
+      className: itemClasses
+    }, {
+      children: [(0, _jsxRuntime.jsx)("button", {
+        className: "ncua-dropdown__item-clickable-layer",
+        onClick: function () {
+          return handleClickItem(item);
+        }
+      }), (0, _jsxRuntime.jsxs)("div", __assign({
+        className: "ncua-dropdown__item-content"
+      }, {
+        children: [(0, _jsxRuntime.jsxs)("div", __assign({
+          className: "ncua-dropdown__item-text-group"
+        }, {
+          children: [item.icon && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+            name: item.icon,
+            className: "ncua-dropdown__item-icon"
+          }), (0, _jsxRuntime.jsx)("span", __assign({
+            className: "ncua-dropdown__item-text"
+          }, {
+            children: item.text
+          }))]
+        })), item.shortcut && (0, _jsxRuntime.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 (0, _jsxRuntime.jsxs)("div", __assign({
+    className: dropdownClasses,
+    ref: dropdownRef
+  }, {
+    children: [renderTrigger(), isOpen && (0, _jsxRuntime.jsxs)("div", __assign({
+      className: "ncua-dropdown__menu"
+    }, {
+      children: [renderHeader(), (0, _jsxRuntime.jsx)("div", __assign({
+        className: "ncua-dropdown__menu-items"
+      }, {
+        children: groups.map(function (group, index) {
+          return (0, _jsxRuntime.jsx)("div", __assign({
+            className: "ncua-dropdown__group"
+          }, {
+            children: group.items.map(renderItem)
+          }), index);
+        })
+      }))]
+    }))]
+  }));
+};
+exports.Dropdown = Dropdown;

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

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

package/dist/cjs/src/components/empty-state/EmptyState.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _Button = require("../button/Button");
+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 __rest = void 0 && (void 0).__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;
+};
+var EmptyState = function (_a) {
+  var title = _a.title,
+    description = _a.description,
+    buttons = _a.buttons;
+  var emptyStateButtons = buttons ? Array.isArray(buttons) ? buttons : [buttons] : [];
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    className: "ncua-empty-state"
+  }, {
+    children: [(0, _jsxRuntime.jsx)("p", __assign({
+      className: "ncua-empty-state__title"
+    }, {
+      children: title
+    })), (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-empty-state__description"
+    }, {
+      children: description
+    })), emptyStateButtons.length > 0 && (0, _jsxRuntime.jsx)("div", __assign({
+      className: "ncua-empty-state__button-group"
+    }, {
+      children: emptyStateButtons.map(function (_a) {
+        var size = _a.size,
+          label = _a.label,
+          rest = __rest(_a, ["size", "label"]);
+        return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
+          size: size !== null && size !== void 0 ? size : 'xs',
+          label: label
+        }, rest), label);
+      })
+    }))]
+  }));
+};
+exports.EmptyState = EmptyState;

package/dist/cjs/src/components/empty-state/index.js

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

package/dist/cjs/src/components/featured-icon/FeaturedIcon.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FeaturedIcon = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+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 __rest = void 0 && (void 0).__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;
+};
+var iconSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+var FeaturedIcon = exports.FeaturedIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
+  var name = _a.name,
+    _b = _a.theme,
+    theme = _b === void 0 ? 'light-circle' : _b,
+    _c = _a.color,
+    color = _c === void 0 ? 'neutral' : _c,
+    _d = _a.size,
+    size = _d === void 0 ? 'md' : _d,
+    className = _a.className,
+    rest = __rest(_a, ["name", "theme", "color", "size", "className"]);
+  return (0, _jsxRuntime.jsxs)("div", __assign({
+    ref: ref,
+    className: (0, _classnames.default)('ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size), className)
+  }, rest, {
+    children: [theme === 'outline-circle' && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(0, _jsxRuntime.jsx)("div", {
+        className: "ncua-featured-icon__outline ncua-featured-icon__outline--inner"
+      }), (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-featured-icon__outline ncua-featured-icon__outline--outer"
+      })]
+    }), (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      name: name,
+      width: iconSizeMap[size],
+      height: iconSizeMap[size]
+    })]
+  }));
+});

package/dist/cjs/src/components/featured-icon/index.js

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

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

@@ -0,0 +1,291 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _badge = require("./badge");
+Object.keys(_badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _badge[key];
+    }
+  });
+});
+var _breadcrumb = require("./breadcrumb");
+Object.keys(_breadcrumb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _breadcrumb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _breadcrumb[key];
+    }
+  });
+});
+var _button = require("./button");
+Object.keys(_button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _button[key];
+    }
+  });
+});
+var _carousel = require("./carousel");
+Object.keys(_carousel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _carousel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _carousel[key];
+    }
+  });
+});
+var _checkbox = require("./checkbox");
+Object.keys(_checkbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _checkbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _checkbox[key];
+    }
+  });
+});
+var _datePicker = require("./date-picker");
+Object.keys(_datePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _datePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _datePicker[key];
+    }
+  });
+});
+var _divider = require("./divider");
+Object.keys(_divider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _divider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _divider[key];
+    }
+  });
+});
+var _dot = require("./dot");
+Object.keys(_dot).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dot[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dot[key];
+    }
+  });
+});
+var _dropdown = require("./dropdown");
+Object.keys(_dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdown[key];
+    }
+  });
+});
+var _emptyState = require("./empty-state");
+Object.keys(_emptyState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _emptyState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _emptyState[key];
+    }
+  });
+});
+var _featuredIcon = require("./featured-icon");
+Object.keys(_featuredIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _featuredIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _featuredIcon[key];
+    }
+  });
+});
+var _input = require("./input");
+Object.keys(_input).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _input[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _input[key];
+    }
+  });
+});
+var _modal = require("./modal");
+Object.keys(_modal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _modal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _modal[key];
+    }
+  });
+});
+var _notification = require("./notification");
+Object.keys(_notification).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _notification[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _notification[key];
+    }
+  });
+});
+var _pagination = require("./pagination");
+Object.keys(_pagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _pagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _pagination[key];
+    }
+  });
+});
+var _progressBar = require("./progress-bar");
+Object.keys(_progressBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _progressBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _progressBar[key];
+    }
+  });
+});
+var _progressCircle = require("./progress-circle");
+Object.keys(_progressCircle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _progressCircle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _progressCircle[key];
+    }
+  });
+});
+var _radio = require("./radio");
+Object.keys(_radio).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _radio[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _radio[key];
+    }
+  });
+});
+var _select = require("./select");
+Object.keys(_select).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _select[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _select[key];
+    }
+  });
+});
+var _shared = require("./shared");
+Object.keys(_shared).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shared[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _shared[key];
+    }
+  });
+});
+var _slider = require("./slider");
+Object.keys(_slider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _slider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _slider[key];
+    }
+  });
+});
+var _spinner = require("./spinner");
+Object.keys(_spinner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _spinner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _spinner[key];
+    }
+  });
+});
+var _tab = require("./tab");
+Object.keys(_tab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tab[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tab[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;
+  if (key in exports && exports[key] === _toggle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _toggle[key];
+    }
+  });
+});
+var _tooltip = require("./tooltip");
+Object.keys(_tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tooltip[key];
+    }
+  });
+});