@flodesk/grain 5.2.0 → 5.3.2

package/es/components/index.js

@@ -5,6 +5,7 @@ export { TextInput } from './text-input';
 export { Arrange } from './arrange';
 export { Icon } from './icon';
 export { IconButton } from './icon-button';
+export { Tab, TabGroup } from './tab';
 export { TextButton } from './text-button';
 export { IconToggleGroup, IconToggle } from './icon-toggle';
 export { TextToggleGroup, TextToggle } from './text-toggle';

package/es/components/tab.js

@@ -0,0 +1,60 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+var _excluded = ["children", "isActive", "onClick"],
+    _excluded2 = ["children", "height"];
+
+var _templateObject, _templateObject2;
+
+import "core-js/modules/es.object.assign.js";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import { getWeight, getTransition, getDimension } from '../utilities';
+import React from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import { types } from '../types';
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  gap: var(--grn-space-l);\n  width: fit-content;\n  align-items: stretch;\n  height: ", ";\n"])), function (p) {
+  return getDimension(p.height);
+});
+var TabWrapper = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  height: 100%;\n  background-color: transparent;\n  color: var(--grn-color-bodyDimmed);\n  border-radius: 0;\n  white-space: nowrap;\n  transition: color ", ", box-shadow ", ";\n\n  &:hover {\n    color: var(--grn-color-body);\n  }\n\n  ", ";\n"])), getWeight('medium'), getTransition('fast'), getTransition('xFast'), function (p) {
+  return p.isActive && "\n    box-shadow: inset 0 -2px 0 var(--grn-color-grey6);\n    color: var(--grn-color-body);\n  ";
+});
+export var Tab = function Tab(_ref) {
+  var children = _ref.children,
+      isActive = _ref.isActive,
+      onClick = _ref.onClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(TabWrapper, Object.assign({
+    isActive: isActive,
+    onClick: onClick
+  }, props), children);
+};
+export var TabGroup = function TabGroup(_ref2) {
+  var children = _ref2.children,
+      _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? 6 : _ref2$height,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
+    height: height
+  }, props), children);
+};
+TabGroup.propTypes = {
+  children: PropTypes.node,
+  height: types.dimension
+};
+Tab.propTypes = {
+  children: PropTypes.node,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func
+};

package/es/icons/icon-phone.js

@@ -9,7 +9,7 @@ var IconPhone = function IconPhone(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M2 4a2 2 0 00-2 2v20a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H2zm0 2h12v20H2V6zm6 18a1 1 0 100-2 1 1 0 000 2z",
+    d: "M2 4a2 2 0 00-2 2v20a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H2zm0 2h12v20H2V6zm6 18.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z",
     fill: "currentColor"
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "5.2.0",
+  "version": "5.3.2",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",