@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

package/dist/esm/system/plugins/transform.js

@@ -0,0 +1,39 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function transform(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      scale = _ref.scale,
+      rotate = _ref.rotate,
+      styles = _objectWithoutPropertiesLoose(_ref, ["x", "y", "scale", "rotate"]);
+
+  var transform = '';
+
+  if (x && y) {
+    transform += "translate(" + x + ", " + y + ") ";
+  } else {
+    if (x) {
+      transform += "translateX(" + x + ") ";
+    }
+
+    if (y) {
+      transform += "translateY(" + y + ") ";
+    }
+  }
+
+  if (scale) {
+    transform += "scale(" + scale + ") ";
+  }
+
+  if (rotate) {
+    transform += "rotate(" + rotate + "deg) ";
+  }
+
+  if (transform.length > 0) {
+    styles.transform = styles.transform ? styles.transform + " " + transform : transform;
+  }
+
+  return styles;
+}
+
+export default transform;

package/dist/esm/system/plugins/typography.js

@@ -0,0 +1,15 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function typography(_ref, theme) {
+  var fontSize = _ref.fontSize,
+      styles = _objectWithoutPropertiesLoose(_ref, ["fontSize"]);
+
+  if (typeof fontSize !== 'undefined') {
+    var value = theme && theme.fontSizes ? theme.fontSizes[fontSize] || fontSize : fontSize;
+    styles.fontSize = typeof value === 'number' ? value + 'px' : value;
+  }
+
+  return styles;
+}
+
+export default typography;

package/dist/esm/system/split-styles.js

@@ -0,0 +1,110 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { stylePropNames, pseudoPropNames } from './style-names';
+import { parsePluginStyles } from './parse-styles';
+export default function SplitStyles(_ref) {
+  var className = _ref.className,
+      _ref$mediaQueries = _ref.mediaQueries,
+      mediaQueries = _ref$mediaQueries === void 0 ? {} : _ref$mediaQueries,
+      plugin = _ref.plugin,
+      variant = _ref.variant,
+      _ref$variants = _ref.variants,
+      variants = _ref$variants === void 0 ? {} : _ref$variants,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? true : _ref$visible,
+      combinedProps = _objectWithoutPropertiesLoose(_ref, ["className", "mediaQueries", "plugin", "variant", "variants", "visible"]);
+
+  var restProps = {};
+  var styleProps = {};
+
+  var isStyleProp = function isStyleProp(prop) {
+    return stylePropNames.indexOf(prop) > -1 || pseudoPropNames.indexOf(prop) > -1 || plugin && plugin.styleProps.indexOf(prop) > -1;
+  };
+
+  for (var prop in combinedProps) {
+    var value = combinedProps[prop];
+
+    if (isStyleProp(prop)) {
+      styleProps[prop] = value;
+    } else {
+      restProps[prop] = value;
+    }
+  }
+
+  return _objectSpread(_objectSpread({}, restProps), {}, {
+    className: className ? "tapestry-react-reset " + className : "tapestry-react-reset",
+    css: function css(theme) {
+      var propStyles = {};
+
+      for (var _prop in styleProps) {
+        var _value = styleProps[_prop];
+
+        if (stylePropNames.indexOf(_prop) > -1 || plugin && plugin.styleProps.indexOf(_prop) > -1) {
+          propStyles[_prop] = _value;
+        } else if (pseudoPropNames.indexOf(_prop) > -1) {
+          propStyles["&:" + _prop] = parsePluginStyles(_value, plugin, theme);
+        }
+      }
+
+      var baseStyles = parsePluginStyles(propStyles, plugin, theme);
+      var mediaQueryStyles = Object.keys(mediaQueries).reduce(function (collection, key) {
+        var themeBreakpoint = theme == null ? void 0 : theme.breakpoints[key];
+        var query = themeBreakpoint ? typeof themeBreakpoint === 'number' ? "@media screen and (min-width: " + themeBreakpoint + "px)" : themeBreakpoint : key;
+        var queryStyles = parsePluginStyles(mediaQueries[key], plugin, theme);
+
+        if (queryStyles.visible !== undefined) {
+          queryStyles.display = queryStyles.visible ? baseStyles.display : 'none';
+          delete queryStyles.visible;
+        }
+
+        collection[query] = queryStyles;
+        return collection;
+      }, {});
+
+      var mergeVariantsIntoStyles = function mergeVariantsIntoStyles(styles) {
+        var variants = styles.variants,
+            restStyles = _objectWithoutPropertiesLoose(styles, ["variants"]);
+
+        if (variants) {
+          return _objectSpread(_objectSpread({}, restStyles), getVariantStyles(variants));
+        } else {
+          return styles;
+        }
+      };
+
+      var getVariantStyles = function getVariantStyles(variants) {
+        return Object.keys(variants).reduce(function (mergedStyles, key) {
+          var styles = parsePluginStyles(variants[key], plugin, theme);
+
+          if (styles.visible !== undefined) {
+            styles.display = styles.visible ? baseStyles.display : 'none';
+            delete styles.visible;
+          }
+
+          if (variant.includes(key)) {
+            return _objectSpread(_objectSpread({}, mergedStyles), mergeVariantsIntoStyles(styles));
+          } else if (pseudoPropNames.includes(key)) {
+            var _objectSpread2;
+
+            return _objectSpread(_objectSpread({}, mergedStyles), {}, (_objectSpread2 = {}, _objectSpread2[":" + key] = mergeVariantsIntoStyles(styles), _objectSpread2));
+          } else {
+            return mergedStyles;
+          }
+        }, {});
+      };
+
+      var variantStyles = getVariantStyles(variants);
+
+      if (visible === false) {
+        baseStyles.display = 'none';
+      }
+
+      return [baseStyles, mediaQueryStyles, variantStyles];
+    }
+  });
+}

package/dist/esm/system/style-names.js

@@ -0,0 +1,5 @@
+export var nativeStyleNames = ['alignContent', 'alignItems', 'alignSelf', 'alignmentBaseline', 'animation', 'animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction', 'backfaceVisibility', 'background', 'backgroundAttachment', 'backgroundBlendMode', 'backgroundClip', 'backgroundImage', 'backgroundOrigin', 'backgroundPosition', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundSize', 'baselineShift', 'border', 'borderBottom', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderCollapse', 'borderImage', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeft', 'borderLeftStyle', 'borderLeftWidth', 'borderRadius', 'borderRight', 'borderRightStyle', 'borderRightWidth', 'borderSpacing', 'borderStyle', 'borderTop', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'boxShadow', 'boxSizing', 'breakAfter', 'breakBefore', 'breakInside', 'clear', 'clip', 'clipPath', 'clipRule', 'columnCount', 'columnFill', 'columnGap', 'columnRule', 'columnRuleColor', 'columnRuleStyle', 'columnRuleWidth', 'columnSpan', 'columnWidth', 'columns', 'contain', 'content', 'counterIncrement', 'counterReset', 'cursor', 'direction', 'display', 'fillOpacity', 'fillRule', 'filter', 'flex', 'flexBasis', 'flexDirection', 'flexFlow', 'flexGrow', 'flexShrink', 'flexWrap', 'font', 'fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontSize', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantCaps', 'fontVariantLigatures', 'fontVariantNumeric', 'fontWeight', 'gap', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridColumn', 'gridColumnEnd', 'gridColumnGap', 'gridColumnStart', 'gridGap', 'gridRow', 'gridRowEnd', 'gridRowGap', 'gridRowStart', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows', 'height', 'imageRendering', 'isolation', 'justifyContent', 'justifyItems', 'justifySelf', 'left', 'letterSpacing', 'lightingColor', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'mask', 'maskType', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'mixBlendMode', 'motion', 'objectFit', 'objectPosition', 'opacity', 'order', 'outline', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflow', 'overflowWrap', 'overflowX', 'overflowY', 'padding', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'perspective', 'perspectiveOrigin', 'placeItems', 'placeSelf', 'pointerEvents', 'position', 'resize', 'right', 'strokeDasharray', 'strokeDashoffset', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'tabSize', 'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textOrientation', 'textOverflow', 'textRendering', 'textShadow', 'textTransform', 'top', 'touchAction', 'transform', 'transformOrigin', 'transformStyle', 'transition', 'transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction', 'verticalAlign', 'visibility', 'clipPath', 'filter', 'userSelect', 'WebkitOverflowScrolling', 'writingMode', 'whiteSpace', 'width', 'willChange', 'wordBreak', 'wordSpacing', 'wordWrap', 'zIndex'];
+export var colorStyleNames = ['backgroundColor', 'borderColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'fill', 'outlineColor', 'stroke'];
+export var customStyleNames = ['css', 'column', 'columnStart', 'columnEnd', 'row', 'rowStart', 'rowEnd', 'basis', 'elevation', 'grow', 'marginHorizontal', 'marginVertical', 'paddingHorizontal', 'paddingVertical', 'radius', 'radiusTop', 'radiusRight', 'radiusBottom', 'radiusLeft', 'x', 'y', 'rotate', 'scale', 'uppercase', 'shrink', 'wrap', 'strokeAlign', 'strokeWeight'];
+export var stylePropNames = [].concat(nativeStyleNames, colorStyleNames, customStyleNames);
+export var pseudoPropNames = ['active', 'focus', 'hover'];

package/dist/esm/system/use-css.js

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+import { useTheme } from '@emotion/react';
+import css from './cxs';
+import { parseCssStyles } from './parse-styles';
+export default function useCss() {
+  var theme = useTheme();
+  return useCallback(function (styles) {
+    return css(parseCssStyles(styles, null, theme));
+  }, [theme]);
+}

package/dist/esm/system/utils.js

@@ -0,0 +1,149 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { useContext, useCallback } from 'react';
+import { ThemeContext } from '@emotion/react';
+import { darken, getLuminance, lighten, parseToRgb } from 'polished';
+import get from 'lodash/get';
+import { getColor } from './colors';
+import defaultTheme from './default-theme';
+export var spacing = 8;
+export var fontSizeBase = 16;
+export var sizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+export var alignTypes = {
+  baseline: 'baseline',
+  center: 'center',
+  end: 'flex-end',
+  start: 'flex-start',
+  stretch: 'stretch'
+};
+export var justifyTypes = {
+  center: 'center',
+  end: 'flex-end',
+  'space-around': 'space-around',
+  'space-between': 'space-between',
+  'space-evenly': 'space-evenly',
+  start: 'flex-start'
+};
+export function navigateSize(startSize, amount) {
+  var index = sizes.indexOf(startSize);
+  return sizes[index + amount] || startSize;
+}
+export function anyDefined() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return args.some(function (arg) {
+    return arg !== undefined && arg !== null;
+  });
+}
+export function spacingValue(value) {
+  return typeof value === 'number' ? value * spacing + 'px' : value;
+}
+export function convertToBaseUnit(unit) {
+  return unit / spacing;
+}
+export function expandDirectionalProperty(name, value) {
+  var values = value.split(/\s+/);
+
+  if (values.length === 1) {
+    var _value = values[0];
+    values = [_value, _value, _value, _value];
+  } else if (values.length === 2) {
+    values = values.concat(values);
+  } else if (values.length === 3) {
+    values.push(values[1]);
+  }
+
+  return ['Top', 'Right', 'Bottom', 'Left'].reduce(function (acc, direction, i) {
+    var _objectSpread2;
+
+    return _objectSpread(_objectSpread({}, acc), {}, (_objectSpread2 = {}, _objectSpread2["" + name + direction] = values[i], _objectSpread2));
+  }, {});
+}
+export function parseSides() {
+  for (var _len2 = arguments.length, sides = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    sides[_key2] = arguments[_key2];
+  }
+
+  return sides.reduce(function (acc, side) {
+    if (typeof side === 'string') {
+      return side;
+    } else if (side !== null && typeof side !== 'undefined') {
+      return side * spacing + 'px';
+    }
+
+    return acc;
+  }, 0);
+}
+export function parseColor(color) {
+  if (typeof color === 'object') {
+    var parsedColor = getColor(color.base) || color.base;
+
+    if (parsedColor === 'transparent') {
+      return parsedColor;
+    }
+
+    if (color.darken) {
+      parsedColor = darken(color.darken, parsedColor);
+    }
+
+    if (color.lighten) {
+      parsedColor = lighten(color.lighten, parsedColor);
+    }
+
+    if (typeof color.alpha !== 'undefined') {
+      var _parseToRgb = parseToRgb(parsedColor),
+          red = _parseToRgb.red,
+          green = _parseToRgb.green,
+          blue = _parseToRgb.blue;
+
+      return "rgba(" + red + ", " + green + ", " + blue + ", " + color.alpha + ")";
+    } else {
+      return parsedColor;
+    }
+  }
+
+  return getColor(color) || color;
+}
+export function isLightColor(color) {
+  if (color === 'transparent') {
+    return null;
+  }
+
+  try {
+    return getLuminance(parseColor(color)) > 0.5;
+  } catch (err) {
+    return null;
+  }
+}
+export function getForegroundColor(color) {
+  return isLightColor(color) ? 'dark-9' : 'light-9';
+}
+export function useThemeValue(path, defaultValue) {
+  var userTheme = useContext(ThemeContext);
+  return path ? get(userTheme, path, defaultValue || get(defaultTheme, path)) : userTheme || defaultTheme;
+}
+export function useThemeProps(path, props) {
+  // @ts-ignore error TS2554: Expected 2 arguments, but got 1
+  return _objectSpread(_objectSpread({}, useThemeValue(path)), props);
+}
+export function useBoxSize(size) {
+  if (size === void 0) {
+    size = 'md';
+  }
+
+  // @ts-ignore error TS2554: Expected 2 arguments, but got 1
+  var boxSizes = useThemeValue('boxSizes');
+  var navigateSize = useCallback(function (amount) {
+    var index = Object.keys(boxSizes).indexOf(size);
+    return sizes[index + amount] || size;
+  }, [size]);
+  return _objectSpread(_objectSpread({}, boxSizes[size] || {}), {}, {
+    navigateSize: navigateSize
+  });
+}