@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/build/AssetPreviewTopBar-623cfa18.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var styled = require('styled-components');
+var close = require('./close-1751121a.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function SvgArrowBack(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M16 32L0 16 16 0l2.1 2.1L5.7 14.5H32v3H5.7l12.4 12.4L16 32z"
+  })));
+}
+
+const AssetPreviewTopBar$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  box-sizing: border-box;
+  align-items: center;
+  border-bottom: ${props => props.border ? `1px solid` : `none`};
+  color: inherit;
+  display: flex;
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-weight: 400;
+  min-height: 72px;
+  padding: 0 24px;
+  width: 100%;
+
+  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'))}
+
+  ${props => props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}
+
+      ${props => props.disabled && styled.css`
+      cursor: not-allowed;
+    `}
+`;
+const BackButtonContainer = styled__default["default"].a.attrs(defaultTheme.applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  font-size: 1.125rem;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+
+  ${props => props.disabled && styled.css`
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  > svg {
+    height: 24px;
+    margin-right: 16px;
+    width: 24px;
+  }
+`;
+const BackHoverEffect = styled__default["default"].div`
+  display: inline-flex;
+  align-items: center;
+
+  > svg {
+    height: 24px;
+    margin-right: 16px;
+    width: 24px;
+    transition: transform 0.3s ease-in-out;
+  }
+
+  &:hover > svg {
+    transform: translateX(-2px);
+  }
+`;
+const LeftText = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 1.125rem;
+  margin-left: 16px;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))};
+`;
+const ButtonsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  margin-left: auto;
+
+  > span {
+    margin-left: 16px;
+  }
+`;
+
+const AssetPreviewTopBar = React__default["default"].forwardRef(function AssetPreviewTopBar({
+  onBackButtonClick,
+  backButtonText,
+  backButtonAsClose,
+  leftText,
+  buttons,
+  shadow,
+  border,
+  disabled,
+  ...props
+}, forwardedRef) {
+  return React__default["default"].createElement(AssetPreviewTopBar$1, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef,
+    shadow: shadow,
+    border: border,
+    disabled: disabled
+  }, props), React__default["default"].createElement(BackButtonContainer, {
+    onClick: onBackButtonClick,
+    disabled: disabled
+  }, backButtonAsClose ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(close.SvgClose, null), backButtonText) : React__default["default"].createElement(BackHoverEffect, null, React__default["default"].createElement(SvgArrowBack, null), backButtonText)), leftText && React__default["default"].createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default["default"].createElement(ButtonsContainer, null, buttons.map((button, index) => React__default["default"].createElement("span", {
+    key: 'topBarButton-' + index
+  }, button))));
+});
+AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
+  onBackButtonClick: defaultTheme.PropTypes.func.isRequired,
+  backButtonText: defaultTheme.PropTypes.string.isRequired,
+  disabled: defaultTheme.PropTypes.bool,
+  backButtonAsClose: defaultTheme.PropTypes.bool,
+  leftText: defaultTheme.PropTypes.string,
+  shadow: defaultTheme.PropTypes.bool,
+  border: defaultTheme.PropTypes.bool,
+  buttons: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.node)
+} : {};
+AssetPreviewTopBar.defaultProps = {};
+
+exports.AssetPreviewTopBar = AssetPreviewTopBar;

package/build/Badge-aa4cd9c1.js

@@ -0,0 +1,221 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Badge$1 = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+  align-content: center;
+  display: ${props => props.elevated || !props.hasChildren ? 'inline-flex' : 'flex'};
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  min-height: 24px;
+  position: relative;
+  width: ${props => props.elevated ? 'fit-content' : 'initial'};
+`;
+const BadgeChildrenContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+  align-self: center;
+  height: fit-content;
+  margin-right: 8px;
+`;
+const BadgeLabel = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+  border-radius: ${props => props.elevated ? '12px' : '14px'};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  font-size: ${props => {
+  if (props.fontSize) {
+    return `${props.fontSize}px`;
+  } else {
+    return props.elevated ? '0.625rem' : '0.750rem';
+  }
+}};
+  font-weight: ${props => props.fontWeight ? props.fontWeight : 'normal'};
+  line-height: ${props => props.lineHeight ? `${props.lineHeight}px` : 'normal'};
+  height: ${props => props.height ? `${props.height}px` : 'fit-content'};
+  letter-spacing: 0.32px;
+  margin-left: ${props => props.elevated ? '15px' : 'auto'};
+  position: ${props => props.elevated ? 'absolute' : 'initial'};
+  right: 0;
+  transform: ${props => props.elevated ? 'translate(33%, -8px)' : 'initial'};
+
+  ${props => props.width ? styled.css`
+          width: ${props.width}px;
+        ` : null}
+
+  ${props => props.minWidth ? styled.css`
+          min-width: ${props.minWidth}px;
+        ` : null}
+
+  ${props => props.minHeight ? styled.css`
+          min-height: ${props.minHeight}px;
+        ` : null}
+      
+
+  ${props => {
+  const verticalPadding = props.verticalPadding ? `${props.verticalPadding}px` : props.elevated ? '4px' : '6px';
+  const horizontalPadding = props.horizontalPadding ? `${props.horizontalPadding}px` : props.elevated ? '7px' : '10px';
+  return styled.css`
+      padding: ${verticalPadding} ${horizontalPadding};
+    `;
+}}
+
+  ${props => props.theme.themeProp('background', () => {
+  const active = props.active;
+  const error = props.error;
+  const warning = props.warning;
+  const defaultBgColor = props?.backgroundColors?.[0] ?? props.theme.getColor('gray-600');
+  switch (true) {
+    case !error && !warning && !active:
+      return defaultBgColor;
+    case !error && !warning && active:
+      return props.theme.getColor('gray-700');
+    case error && active:
+      return props.theme.getColor('red-500');
+    case error:
+      return props.theme.getColor('red-200');
+    case warning && active:
+      return props.theme.getColor('signal-yellow-500');
+    case warning:
+      return props.theme.getColor('signal-yellow-400');
+    default:
+      return props.theme.getColor('gray-600');
+  }
+}, () => {
+  const active = props.active;
+  const error = props.error;
+  const warning = props.warning;
+  const defaultBgColor = props?.backgroundColors?.[1] ?? props.theme.getColor('gray-200');
+  switch (true) {
+    case !error && !warning && !active:
+      return defaultBgColor;
+    case !error && !warning && active:
+      return props.theme.getColor('white');
+    case error && active:
+      return props.theme.getColor('red-500');
+    case error:
+      return props.theme.getColor('red-200');
+    case warning && active:
+      return props.theme.getColor('signal-yellow-500');
+    case warning:
+      return props.theme.getColor('signal-yellow-400');
+    default:
+      return props.theme.getColor('gray-200');
+  }
+})}
+
+    ${props => props.theme.themeProp('color', () => {
+  const defaultColor = props?.colors?.[0] ?? props.theme.getColor('white');
+  if (props.warning && !props.error || props.error && !props.active) {
+    return props.theme.getColor('gray-900');
+  } else {
+    return defaultColor;
+  }
+}, () => {
+  const defaultColor = props?.colors?.[1] ?? props.theme.getColor('gray-900');
+  if (props.error && props.active) {
+    return props.theme.getColor('white');
+  } else {
+    return defaultColor;
+  }
+})}
+`;
+const BadgeIcon = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  align-items: center;
+  margin-right: ${props => props.useGutter ? '4px' : 0};
+  svg {
+    height: 12px;
+  }
+`;
+
+const Badge = React__default["default"].forwardRef(function Badge({
+  badgeContent,
+  badgeIcon,
+  children,
+  elevated,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  active,
+  error,
+  warning,
+  backgroundColors,
+  colors,
+  verticalPadding,
+  horizontalPadding,
+  height,
+  minHeight,
+  width,
+  minWidth,
+  ...props
+}, forwardedRef) {
+  if (typeof badgeContent === 'number') {
+    badgeContent = Intl.NumberFormat('en', {
+      notation: 'compact'
+    }).format(badgeContent);
+  }
+  return React__default["default"].createElement(Badge$1, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef,
+    elevated: elevated,
+    hasChildren: Boolean(children)
+  }, props), children && React__default["default"].createElement(BadgeChildrenContainer, null, children), (badgeIcon || badgeContent) && React__default["default"].createElement(BadgeLabel, {
+    backgroundColors: backgroundColors,
+    colors: colors,
+    elevated: elevated,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: lineHeight,
+    active: active,
+    error: error,
+    warning: warning,
+    verticalPadding: verticalPadding,
+    horizontalPadding: horizontalPadding,
+    height: height,
+    minHeight: minHeight,
+    width: width,
+    minWidth: minWidth
+  }, badgeIcon && React__default["default"].createElement(BadgeIcon, {
+    useGutter: !!badgeContent
+  }, badgeIcon), badgeContent));
+});
+Badge.propTypes = process.env.NODE_ENV !== "production" ? {
+  badgeIcon: defaultTheme.PropTypes.node,
+  badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number, defaultTheme.PropTypes.func, defaultTheme.PropTypes.element]),
+  children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.node, defaultTheme.PropTypes.string]),
+  elevated: defaultTheme.PropTypes.bool,
+  active: defaultTheme.PropTypes.bool,
+  error: defaultTheme.PropTypes.bool,
+  warning: defaultTheme.PropTypes.bool,
+  fontSize: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
+  fontWeight: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
+  lineHeight: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
+  colors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  backgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  verticalPadding: defaultTheme.PropTypes.number,
+  horizontalPadding: defaultTheme.PropTypes.number,
+  height: defaultTheme.PropTypes.number,
+  minHeight: defaultTheme.PropTypes.number,
+  width: defaultTheme.PropTypes.number,
+  minWidth: defaultTheme.PropTypes.number
+} : {};
+Badge.defaultProps = {
+  elevated: false,
+  active: false,
+  error: false,
+  warning: false,
+  badgeIcon: null,
+  fontWeight: 'normal',
+  lineHeight: 'normal'
+};
+
+exports.Badge = Badge;