@mw-kit/mw-ui 1.7.63 → 1.7.65

package/dist/components/Tabs/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { TabsProps } from './interfaces';
-declare const Tabs: (props: TabsProps) => JSX.Element;
+declare const Tabs: (props: React.PropsWithChildren<TabsProps>) => JSX.Element;
 export default Tabs;

package/dist/components/Tabs/interfaces.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SpacingOrZero, Spacings } from '../../interfaces';
 export declare type TabProps = {
     /**
      * Define the tab label.
@@ -9,7 +10,7 @@ export declare type TabProps = {
      */
     component?: JSX.Element;
 };
-export interface TabsProps {
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Array with available tabs.
      */
@@ -34,14 +35,22 @@ export interface TabsProps {
      * disable close button
      */
     alwaysOpen?: true;
+    /**
+     * border bottom style
+     */
+    delimiter?: 'blue' | 'grey' | 'none';
+    /**
+     * container spacing
+     */
+    spacing?: SpacingOrZero | Spacings;
 }
 export interface StyledTabsProps {
     /**
      * Sets the style of the tabs to internal.
      */
-    internal?: number;
+    $internal?: TabsProps['internal'];
     /**
      * Sets the style of the tab to active.
      */
-    active?: number;
+    $active?: boolean;
 }

package/dist/components/Tabs/styles.d.ts

@@ -1,4 +1,10 @@
-import { StyledTabsProps } from './interfaces';
-export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTabsProps, never>;
-export declare const Tabs: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, StyledTabsProps, never>;
+import { StyledTabsProps, TabsProps } from './interfaces';
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare type TabsContainerProps = {
+    $internal?: TabsProps['internal'];
+    $delimiter?: TabsProps['delimiter'];
+    $spacing?: TabsProps['spacing'];
+};
+export declare const Tabs: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, TabsContainerProps, never>;
 export declare const Tab: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, StyledTabsProps, never>;
+export {};

package/dist/index.js

@@ -18867,56 +18867,57 @@ var ProgressBar = function ProgressBar(props) {
   return React__default.createElement(Container$m, null, React__default.createElement(Progress, Object.assign({}, props), React__default.createElement("div", null)), React__default.createElement("span", null, " ", props.value || '0', "%"));
 };
 
-var _path$4n;
+var _templateObject$13, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$q, _templateObject7$q, _templateObject8$m;
+var Container$n = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
+var delimiters = {
+  blue: ['blue'],
+  grey: ['warningGray']
+};
+var Tabs = styled__default.ul(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  width: 100%;\n\n  ", "\n\n  ", ";\n\n  gap: ", ";\n"])), function (_ref) {
+  var spacing = _ref.$spacing;
 
-function _extends$4w() {
-  _extends$4w = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+  var _getSpacings$split = getSpacings(spacing || {}, {
+    top: '0',
+    right: '0',
+    bottom: 's4',
+    left: '0'
+  }).split(' '),
+      top = _getSpacings$split[0],
+      right = _getSpacings$split[1],
+      bottom = _getSpacings$split[2],
+      left = _getSpacings$split[3];
+
+  return styled.css(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n      margin: ", " 0 ", " 0;\n      padding: 0 ", " 0 ", ";\n    "])), top, bottom, right, left);
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      internal = _ref2.$internal,
+      delimiter = _ref2.$delimiter;
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+  var border = function () {
+    if (delimiter === 'none') {
+      return 'none';
     }
 
-    return target;
-  };
-  return _extends$4w.apply(this, arguments);
-}
-
-function SvgClose(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4w({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "close_svg__feather close_svg__feather-x"
-  }, props), _path$4n || (_path$4n = /*#__PURE__*/React.createElement("path", {
-    d: "M18 6L6 18M6 6l12 12"
-  })));
-}
+    return internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
+  }();
 
-var _templateObject$13, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$q;
-var Container$n = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  display: block;\n  border-bottom-style: solid;\n\n  ", "\n"])), function (_ref) {
-  var theme = _ref.theme,
-      internal = _ref.internal;
-  return styled.css(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n    margin-bottom: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), theme.spacings.s2, internal ? '1px' : '2px', internal ? theme.getColor('lightestGrey', 50) : theme.colors.blue);
-});
-var Tabs = styled__default.ul(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  gap: 1px;\n  padding: 0;\n  margin: 0;\n\n  ", "\n"])), function (_ref2) {
-  var theme = _ref2.theme,
-      internal = _ref2.internal;
-  return styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n    height: ", ";\n    box-shadow: 0 0 10px 0 ", ";\n  "])), internal ? '41px' : '49px', theme.getColor('black', 10));
-});
-var Tab = styled__default.li(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 4px 4px 0 0;\n\n  svg {\n    transform: scale(calc(18 / 24));\n    stroke-width: 2px;\n  }\n\n  ", "\n"])), function (_ref3) {
+  return styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
+}, function (_ref3) {
   var theme = _ref3.theme,
-      active = _ref3.active;
-  return styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: 0 ", ";\n    gap: ", ";\n\n    span {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n\n      color: ", ";\n    }\n\n    svg {\n      stroke: ", ";\n\n      &:hover {\n        stroke: ", ";\n      }\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s2, theme.spacings.s2, theme.typographies.h2.fontFamily, theme.typographies.h2.fontSize, theme.typographies.h2.fontWeight, theme.colors[active ? 'white' : 'darkBlue'], theme.colors[active ? 'white' : 'darkBlue'], theme.colors.red);
+      internal = _ref3.$internal;
+  return internal ? theme.spacings.s6 : 0;
+});
+var Tab = styled__default.li(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref4) {
+  var theme = _ref4.theme,
+      active = _ref4.$active,
+      internal = _ref4.$internal;
+  return styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: ", ";\n    gap: ", ";\n\n    ", "\n\n    span {\n      color: ", ";\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s3, theme.spacings.s3, internal ? styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          > span {\n            ", "\n            line-height: 17px;\n          }\n        "])), function (_ref5) {
+    var theme = _ref5.theme;
+    return theme.useTypography('h4');
+  }) : styled.css(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          > span {\n            ", "\n            line-height: 19px;\n          }\n        "])), theme.getColor('black', 15), function (_ref6) {
+    var theme = _ref6.theme;
+    return theme.useTypography('h2');
+  }), theme.colors[active ? 'white' : 'darkBlue']);
 });
 
 var initialStatus = function initialStatus(active, length) {
@@ -18927,8 +18928,7 @@ var initialStatus = function initialStatus(active, length) {
 
 var Tabs$1 = function Tabs$1(props) {
   var options = props.options,
-      activeState = props.activeState,
-      internal = props.internal;
+      activeState = props.activeState;
   var active = activeState[0],
       setActive = activeState[1];
 
@@ -19014,25 +19014,34 @@ var Tabs$1 = function Tabs$1(props) {
     });
   };
 
-  var Close = props.alwaysOpen ? function () {
-    return null;
-  } : SvgClose;
-  return React__default.createElement(Container$n, null, React__default.createElement(Tabs, {
-    internal: +(internal || false)
+  var divProps = filterObject(props, ['options', 'activeState', 'internal', 'maxTabs', 'onMaxTabsExceeded', 'alwaysOpen', 'delimiter', 'spacing']);
+  return React__default.createElement(Container$n, Object.assign({}, divProps), React__default.createElement(Tabs, {
+    "$internal": props.internal,
+    "$delimiter": props.delimiter,
+    "$spacing": props.spacing
   }, options.reduce(function (elements, tab, index) {
     if (status[index] === 'closed') return elements;
     return [].concat(elements, [React__default.createElement(Tab, {
       key: index,
-      active: +(status[index] === 'active'),
+      "$active": status[index] === 'active',
+      "$internal": props.internal,
       onClick: function onClick(event) {
         return onClickActivate(index, event);
       }
-    }, React__default.createElement("span", null, tab.label), React__default.createElement(Close, {
+    }, React__default.createElement("span", null, tab.label), !props.alwaysOpen && React__default.createElement(Icon, {
+      type: 'feather',
+      icon: 'x',
       onClick: function onClick() {
         return onClickClose(index);
-      }
+      },
+      width: '14px',
+      height: '14px',
+      strokeWidth: '3px',
+      color: status[index] === 'active' ? 'white' : 'darkBlue'
     }))]);
-  }, [])));
+  }, [])), props.children && React__default.createElement("div", {
+    children: props.children
+  }));
 };
 
 var _templateObject$14;