@carbonplan/components 10.4.0 → 10.5.0

package/dst/index.modern.js

@@ -1,5 +1,5 @@
 import React, { cloneElement, useCallback, useState, useEffect, useRef } from 'react';
-import { Box, Link as Link$1, Grid, IconButton, useColorMode, Container, useThemeUI, Text, Flex, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
+import { Box, Link as Link$1, Flex, Grid, IconButton, useColorMode, Container, useThemeUI, Text, Styled, Input as Input$1, Slider as Slider$1 } from 'theme-ui';
 import { transparentize } from '@theme-ui/color';
 import NextLink from 'next/link';
 import { Arrow, Sun } from '@carbonplan/icons';
@@ -40,12 +40,14 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const Badge = (_ref) => {
+const _excluded$g = ["sx", "children"];
+
+const Badge = _ref => {
   let {
     sx,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   const color = sx && sx.color ? sx.color : 'primary';
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -70,6 +72,8 @@ const Badge = (_ref) => {
   }, children));
 };
 
+const _excluded$f = ["href", "children", "internal", "tracking"];
+
 const event = ({
   action,
   category,
@@ -88,14 +92,14 @@ const event = ({
   });
 };
 
-const Link = (_ref) => {
+const Link = _ref => {
   let {
     href,
     children,
     internal = false,
     tracking = false
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["href", "children", "internal", "tracking"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   if (internal || href && href.startsWith('/')) {
     return /*#__PURE__*/React.createElement(NextLink, {
@@ -184,7 +188,9 @@ const getSizeStyles = size => {
   };
 };
 
-const Button = (_ref) => {
+const _excluded$e = ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"];
+
+const Button = _ref => {
   let {
     size = 'sm',
     prefix,
@@ -197,7 +203,7 @@ const Button = (_ref) => {
     internal,
     tracking
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["size", "prefix", "suffix", "inverted", "sx", "children", "align", "href", "internal", "tracking"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(size)) {
     throw new Error('Size must be xs, sm, md, lg, or xl');
@@ -371,7 +377,9 @@ const Button = (_ref) => {
   }
 };
 
-const Callout = (_ref) => {
+const _excluded$d = ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"];
+
+const Callout = _ref => {
   let {
     label,
     children,
@@ -382,7 +390,7 @@ const Callout = (_ref) => {
     tracking,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "children", "inverted", "color", "href", "internal", "tracking", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   const baseColor = color || (inverted ? 'secondary' : 'primary');
   const hoverColor = color ? 'primary' : inverted ? 'primary' : 'secondary';
@@ -461,7 +469,146 @@ const Callout = (_ref) => {
   }
 };
 
-const Column = (_ref) => {
+const _excluded$c = ["colormap", "label", "clim", "discrete", "units", "width", "height", "format", "horizontal"];
+const sx$2 = {
+  clim: {
+    fontFamily: 'mono',
+    fontSize: ['9px', 0, 0, 1],
+    letterSpacing: 'smallcaps',
+    textTransform: 'uppercase'
+  }
+};
+const DIMENSIONS = {
+  width: ['10px', '16px', '16px', '17px'],
+  height: ['80px', '110px', '110px', '130px']
+};
+
+const Gradient = ({
+  colormap,
+  discrete,
+  horizontal,
+  width,
+  height
+}) => {
+  const step = 1 / colormap.length * 100;
+  const values = colormap.map((d, i) => {
+    return `rgb(${d}) ${i * step}% ${discrete && i < colormap.length - 1 ? `${(i + 1) * step}%` : ''}`;
+  });
+  const css = `linear-gradient(to ${horizontal ? 'right' : 'top'}, ${values.join(',')})`;
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: _extends({}, horizontal ? {
+      width: width || DIMENSIONS.height,
+      height: height || DIMENSIONS.width
+    } : {
+      width: width || DIMENSIONS.width,
+      minHeight: height || DIMENSIONS.height
+    }, {
+      mt: horizontal ? [0, '1px', '1px', 0] : 0,
+      border: ({
+        colors
+      }) => `solid 1px ${colors.hinted}`,
+      background: css
+    })
+  });
+};
+
+const Label = ({
+  label,
+  units,
+  horizontal
+}) => /*#__PURE__*/React.createElement(Box, {
+  sx: !horizontal && {
+    alignSelf: 'flex-end'
+  }
+}, /*#__PURE__*/React.createElement(Box, {
+  sx: _extends({
+    mb: horizontal ? 0 : ['-4px', '-4px', '-4px', '-3px'],
+    fontFamily: 'mono',
+    fontSize: ['9px', 0, 0, 1],
+    letterSpacing: 'smallcaps',
+    textTransform: 'uppercase'
+  }, horizontal ? {} : {
+    writingMode: 'vertical-rl',
+    transform: 'rotate(180deg)',
+    whiteSpace: 'nowrap',
+    display: 'inline-block',
+    overflow: 'visible'
+  })
+}, label, ' ', /*#__PURE__*/React.createElement(Box, {
+  as: "span",
+  sx: {
+    textTransform: 'none',
+    color: 'secondary',
+    display: 'inline-block'
+  }
+}, units)));
+
+const Colorbar = _ref => {
+  let {
+    colormap,
+    label,
+    clim,
+    discrete,
+    units,
+    width,
+    height,
+    format = d => d,
+    horizontal = false
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+
+  if (!Array.isArray(colormap)) {
+    throw new Error(`expected array for colormap, got '${colormap}'.`);
+  }
+
+  const ClimMin = () => {
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: _extends({}, sx$2.clim, {
+        ml: label ? horizontal ? '10px' : '2px' : 0,
+        mr: horizontal ? ['2px', '1px', '1px', '2px'] : 0,
+        mb: horizontal ? 0 : ['-2px', '-2px', '-2px', '-3px']
+      })
+    }, format(clim[0]));
+  };
+
+  const ClimMax = () => {
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: _extends({}, sx$2.clim, {
+        ml: horizontal ? ['2px', '1px', '1px', '2px'] : '2px',
+        mt: horizontal ? 0 : ['-2px', '-3px', '-3px', '-3px']
+      })
+    }, format(clim[1]));
+  };
+
+  return /*#__PURE__*/React.createElement(Flex, {
+    sx: _extends({}, props.sx, {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: ['3px', '6px', '6px', '7px']
+    })
+  }, label && /*#__PURE__*/React.createElement(Label, {
+    label: label,
+    units: units,
+    horizontal: horizontal
+  }), horizontal && clim && /*#__PURE__*/React.createElement(ClimMin, null), /*#__PURE__*/React.createElement(Gradient, {
+    colormap: colormap,
+    horizontal: horizontal,
+    discrete: discrete,
+    width: width,
+    height: height
+  }), horizontal && clim && /*#__PURE__*/React.createElement(ClimMax, null), !horizontal && /*#__PURE__*/React.createElement(Flex, {
+    sx: {
+      flexDirection: 'column-reverse',
+      justifyContent: 'space-between',
+      height: height || DIMENSIONS.height
+    }
+  }, clim && /*#__PURE__*/React.createElement(ClimMin, null), clim && /*#__PURE__*/React.createElement(ClimMax, null)));
+};
+
+const _excluded$b = ["start", "width", "dl", "dr", "children", "sx"];
+
+const Column = _ref => {
   let {
     start,
     width,
@@ -470,7 +617,7 @@ const Column = (_ref) => {
     children,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["start", "width", "dl", "dr", "children", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   start = start || 'auto';
   width = width || 'auto';
@@ -638,7 +785,7 @@ const Meta = ({
   }));
 };
 
-const Logo = (_ref) => {
+const Logo = _ref => {
   let props = _extends({}, _ref);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -674,14 +821,16 @@ const Logo = (_ref) => {
   })));
 };
 
-const Row = (_ref) => {
+const _excluded$a = ["children", "sx", "columns", "gap"];
+
+const Row = _ref => {
   let {
     children,
     sx,
     columns,
     gap
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "sx", "columns", "gap"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   const makeArray = input => {
     if (!Array.isArray(input)) {
@@ -729,12 +878,14 @@ const Row = (_ref) => {
   }), children);
 };
 
-const Menu = (_ref) => {
+const _excluded$9 = ["value", "sx"];
+
+const Menu = _ref => {
   let {
     value,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     sx: _extends({
@@ -822,12 +973,14 @@ const Menu = (_ref) => {
   })));
 };
 
-const Settings = (_ref) => {
+const _excluded$8 = ["value", "sx"];
+
+const Settings = _ref => {
   let {
     value,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     sx: _extends({
@@ -928,11 +1081,13 @@ const Settings = (_ref) => {
   })));
 };
 
-const Dimmer = (_ref) => {
+const _excluded$7 = ["sx"];
+
+const Dimmer = _ref => {
   let {
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   const [colorMode, setColorMode] = useColorMode();
   const toggle = useCallback(() => {
@@ -962,7 +1117,7 @@ const Dimmer = (_ref) => {
   }));
 };
 
-const sx = {
+const sx$1 = {
   link: (current, label, first = false) => {
     return {
       width: 'auto',
@@ -1045,12 +1200,12 @@ const Nav = ({
       onClick: () => {
         if (nav === url) setExpanded(false);
       },
-      sx: sx.link(nav, url, first)
+      sx: sx$1.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display));
   } else {
     return /*#__PURE__*/React.createElement(Link$1, {
       href: href,
-      sx: sx.link(nav, url, first)
+      sx: sx$1.link(nav, url, first)
     }, /*#__PURE__*/React.createElement(HoverArrow, null), display);
   }
 };
@@ -1219,7 +1374,7 @@ const Header = ({
   })))))));
 };
 
-const Monogram = (_ref) => {
+const Monogram = _ref => {
   let props = _extends({}, _ref);
 
   return /*#__PURE__*/React.createElement(Box, _extends({
@@ -1537,6 +1692,7 @@ function scrollFraction(window, documnt) {
   return Math.min(window.scrollY / (document.body.offsetHeight - 770), 0.99);
 }
 
+const _excluded$6 = ["duration", "delay", "children"];
 const fade = keyframes({
   from: {
     opacity: 0
@@ -1546,13 +1702,13 @@ const fade = keyframes({
   }
 });
 
-const FadeIn = (_ref) => {
+const FadeIn = _ref => {
   let {
     duration = 300,
     delay = 0,
     children
   } = _ref,
-      delegated = _objectWithoutPropertiesLoose(_ref, ["duration", "delay", "children"]);
+      delegated = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   return /*#__PURE__*/React.createElement(Box, _extends({}, delegated, {
     sx: {
@@ -1865,14 +2021,16 @@ const Expander = ({
   })));
 };
 
-const Tag = (_ref) => {
+const _excluded$5 = ["label", "value", "sx", "children"];
+
+const Tag = _ref => {
   let {
     label,
     value,
     sx,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["label", "value", "sx", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const isClickable = props && (props.onClick || props.onDoubleClick);
@@ -1906,7 +2064,8 @@ const Tag = (_ref) => {
   }, props), children);
 };
 
-const sx$1 = {
+const _excluded$4 = ["values", "setValues", "label", "colors", "showAll", "multiSelect"];
+const sx = {
   label: {
     fontFamily: 'mono',
     letterSpacing: 'mono',
@@ -1967,7 +2126,7 @@ const updateValues = ({
   }
 };
 
-const Filter = (_ref) => {
+const Filter = _ref => {
   let {
     values,
     setValues,
@@ -1976,10 +2135,10 @@ const Filter = (_ref) => {
     showAll = false,
     multiSelect = false
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["values", "setValues", "label", "colors", "showAll", "multiSelect"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   return /*#__PURE__*/React.createElement(Box, props, label && /*#__PURE__*/React.createElement(Box, {
-    sx: sx$1.label
+    sx: sx.label
   }, label), /*#__PURE__*/React.createElement(Box, {
     sx: {
       mt: label ? [3] : 0
@@ -2063,13 +2222,15 @@ const Group = ({
   }));
 };
 
-const Input = (_ref) => {
+const _excluded$3 = ["size", "inverted", "sx"];
+
+const Input = _ref => {
   let {
     size = 'sm',
     inverted,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["size", "inverted", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   const defaultColor = inverted ? 'secondary' : 'primary';
 
@@ -2117,13 +2278,15 @@ const getProps = test => props => {
   return next;
 };
 
-const Select = (_ref) => {
+const _excluded$2 = ["children", "size", "sx"];
+
+const Select = _ref => {
   let {
     children,
     size = 'sm',
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "size", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const sizeStyles = getSizeStyles(size);
@@ -2210,11 +2373,13 @@ const Select = (_ref) => {
   }));
 };
 
-const Slider = (_ref) => {
+const _excluded$1 = ["sx"];
+
+const Slider = _ref => {
   let {
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   const color = sx && sx.color ? sx.color : 'primary';
   const {
@@ -2354,14 +2519,16 @@ const Table = ({
   })));
 };
 
-const Toggle = (_ref) => {
+const _excluded = ["value", "onClick", "disabled", "sx"];
+
+const Toggle = _ref => {
   let {
     value,
     onClick,
     disabled,
     sx
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, ["value", "onClick", "disabled", "sx"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   const color = sx && sx.color ? sx.color : 'primary';
   value = disabled ? false : value;
@@ -2505,5 +2672,5 @@ const formatDate = (date, options = defaultOptions) => {
   return [month, day, year].filter(Boolean).join(' ');
 };
 
-export { Badge, Button, Callout, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, Input, Layout, Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, Slider, Table, Tag, Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
+export { Badge, Button, Callout, Colorbar, Column, Custom404, Dimmer, Expander, FadeIn, Filter, Footer, Group, Guide, Header, Input, Layout, Link, Logo, Menu, Meta, Monogram, Row, Scrollbar, Select, Settings, Slider, Table, Tag, Toggle, Tracking, Tray, formatDate, getScrollbarWidth };
 //# sourceMappingURL=index.modern.js.map