@ntbjs/react-components 0.0.1-beta.9 → 1.0.0

package/Popover-01b3e392.js

@@ -1,80 +0,0 @@
-import { s as styleInject, a as applyDefaultTheme, _ as _taggedTemplateLiteral, b as _objectWithoutProperties, c as _extends, P as PropTypes } from './defaultTheme-f1063879.js';
-import React__default, { useMemo } from 'react';
-import styled from 'styled-components';
-import TippyTooltip from '@tippyjs/react';
-
-var css_248z$1 = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}";
-styleInject(css_248z$1);
-
-var css_248z = ".tippy-box[data-animation=shift-away-subtle][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=top]{transform:translateY(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=bottom]{transform:translateY(-5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=left]{transform:translateX(5px)}.tippy-box[data-animation=shift-away-subtle][data-state=hidden][data-placement^=right]{transform:translateX(-5px)}";
-styleInject(css_248z);
-
-var _templateObject;
-var Popover$1 = styled(TippyTooltip).attrs(applyDefaultTheme)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  color: inherit;\n  border-radius: 0;\n  ", "\n  ", "\n  line-height: inherit;\n  ", "\n\n  .tippy-content {\n    padding: 0;\n  }\n\n  .tippy-arrow {\n    ", "\n  }\n\n  && > .tippy-arrow::before {\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  & > .tippy-arrow::after {\n    content: '';\n    position: absolute;\n    border-color: transparent;\n    border-style: solid;\n  }\n\n  &[data-placement^='top'] {\n    & > .tippy-arrow:before {\n      bottom: -16px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -15px;\n      left: -5px;\n      border-width: 15px 13px 0;\n      border-top-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='right'] {\n    & > .tippy-arrow:before {\n      bottom: -5px;\n      left: -16px;\n      border-width: 13px 15px 13px 0;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      bottom: -5px;\n      left: -15px;\n      border-width: 13px 15px 13px 0;\n      border-right-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='bottom'] {\n    & > .tippy-arrow:before {\n      top: -16px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      ", "\n    }\n\n    & > .tippy-arrow:after {\n      top: -15px;\n      left: -5px;\n      border-width: 0 13px 15px 13px;\n      border-bottom-color: initial;\n      transform-origin: center top;\n    }\n  }\n\n  &[data-placement^='left'] {\n    & > .tippy-arrow::before {\n      bottom: -5px;\n      right: -16px;\n      border-width: 13px 0 13px 15px;\n      ", "\n    }\n\n    & > .tippy-arrow::after {\n      bottom: -5px;\n      right: -15px;\n      border-width: 13px 0 13px 15px;\n      border-left-color: initial;\n      transform-origin: center top;\n    }\n  }\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-}, function (props) {
-  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
-}, function (props) {
-  return props.theme.themeProp('box-shadow', "0px 1px 6px -3px rgba(0, 0, 0, 0.7)", "0 3px 6px ".concat(props.theme.getColor('gray-300')));
-}, function (props) {
-  return props.theme.themeProp('border', "1px solid ".concat(props.theme.getColor('gray-800')), "1px solid ".concat(props.theme.getColor('gray-300')));
-}, function (props) {
-  return props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'));
-}, function (props) {
-  return props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
-}, function (props) {
-  return props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
-}, function (props) {
-  return props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
-}, function (props) {
-  return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
-});
-
-var Popover = React__default.forwardRef(function Popover(_ref, ref) {
-  var content = _ref.content,
-      interactive = _ref.interactive,
-      placement = _ref.placement,
-      duration = _ref.duration,
-      trigger = _ref.trigger,
-      offset = _ref.offset,
-      arrow = _ref.arrow,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "children"]);
-
-  var errorOffset = useMemo(function () {
-    return arrow ? 15 : 0;
-  }, [arrow]);
-  return React__default.createElement(Popover$1, _extends({
-    ref: ref,
-    content: content,
-    interactive: interactive,
-    placement: placement,
-    duration: duration,
-    animation: 'shift-away-subtle',
-    trigger: trigger,
-    offset: [offset[0], offset[1] + errorOffset],
-    arrow: arrow
-  }, props), children);
-});
-Popover.propTypes = process.env.NODE_ENV !== "production" ? {
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  interactive: PropTypes.bool,
-  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
-  duration: PropTypes.number,
-  trigger: PropTypes.string,
-  offset: PropTypes.arrayOf(PropTypes.number),
-  arrow: PropTypes.bool,
-  children: PropTypes.node.isRequired
-} : {};
-Popover.defaultProps = {
-  content: 'Tooltip',
-  interactive: true,
-  placement: 'bottom-end',
-  duration: 350,
-  offset: [0, 8],
-  maxWidth: 'none',
-  trigger: 'click focus',
-  arrow: true
-};
-
-export { Popover as P };

package/Tooltip-830b629b.js

@@ -1,49 +0,0 @@
-import { a as applyDefaultTheme, _ as _taggedTemplateLiteral, b as _objectWithoutProperties, c as _extends, P as PropTypes } from './defaultTheme-f1063879.js';
-import React__default from 'react';
-import styled from 'styled-components';
-import TippyTooltip from '@tippyjs/react';
-import './Popover-01b3e392.js';
-
-var _templateObject;
-var Tooltip$1 = styled(TippyTooltip).attrs(applyDefaultTheme)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  background: ", ";\n  border-radius: 3px;\n\n  .tippy-content {\n    padding: 9px 12px;\n  }\n\n  .tippy-arrow {\n    color: ", ";\n  }\n\n  a {\n    color: inherit;\n  }\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-}, function (props) {
-  return props.theme.getColor('gray-700');
-}, function (props) {
-  return props.theme.getColor('gray-700');
-});
-
-var Tooltip = React__default.forwardRef(function Tooltip(_ref, ref) {
-  var content = _ref.content,
-      interactive = _ref.interactive,
-      placement = _ref.placement,
-      duration = _ref.duration,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "children"]);
-
-  return React__default.createElement(Tooltip$1, _extends({
-    ref: ref,
-    content: content,
-    interactive: interactive,
-    placement: placement,
-    duration: duration,
-    animation: 'shift-away-subtle'
-  }, props), children);
-});
-Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  interactive: PropTypes.bool,
-  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
-  duration: PropTypes.number,
-  trigger: PropTypes.string,
-  children: PropTypes.node.isRequired
-} : {};
-Tooltip.defaultProps = {
-  content: 'Tooltip',
-  interactive: false,
-  placement: 'top',
-  duration: 350,
-  trigger: 'mouseenter focus'
-};
-
-export { Tooltip as T };