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

package/dist/cjs/Spinner/Spinner.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Spinner = Spinner;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _Box = require("../Box");
+
+var _system = require("../system");
+
+var rotate = (0, _react2.keyframes)({
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+var rotateCentered = (0, _react2.keyframes)({
+  '100%': {
+    transform: 'translate(-50%, -50%) rotate(360deg)'
+  }
+});
+
+function Spinner(_ref) {
+  var center = _ref.center,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      thickness = _ref.thickness,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["center", "size", "thickness"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('spinner', props),
+      color = _useThemeProps.color,
+      sizes = _useThemeProps.sizes,
+      sizeThickness = _useThemeProps.thickness,
+      trackColor = _useThemeProps.trackColor,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["color", "sizes", "thickness", "trackColor"]);
+
+  var boxProps = {
+    inline: true,
+    alignSelf: 'center',
+    verticalAlign: 'middle',
+    radius: 'circle',
+    borderColor: trackColor,
+    borderTopColor: color
+  };
+  var sizeValue = sizes[size] || size;
+  var thicknessValue = thickness || sizeThickness[size];
+  var boxSizeStyles = {
+    borderWidth: thicknessValue,
+    height: sizeValue,
+    width: sizeValue
+  };
+
+  if (process.env.NODE_ENV !== 'production') {
+    var width = typeof sizeValue === 'number' ? sizeValue * 8 : sizeValue.includes('px') ? parseInt(sizeValue) : null;
+    var spinnerRadius = width && width / 2;
+    if (spinnerRadius && thicknessValue > spinnerRadius) console.warn("The thickness value (" + thicknessValue + "px) of this spinner is larger than the radius (" + spinnerRadius + "px), this will distort the rendered size.");
+  }
+
+  if (center) {
+    boxProps.position = 'absolute';
+    boxProps.left = '50%';
+    boxProps.top = '50%';
+    boxProps.transform = 'translate(-50%, -50%) rotate(0deg)';
+    boxProps.animation = rotateCentered + " 500ms infinite linear";
+  } else {
+    boxProps.transform = 'rotate(0deg)';
+    boxProps.animation = rotate + " 500ms infinite linear";
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Box.Box, (0, _extends2["default"])({}, boxProps, boxSizeStyles, restProps));
+}

package/dist/cjs/Spinner/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Spinner = require("./Spinner");
+
+exports["default"] = _Spinner.Spinner;
+Object.keys(_Spinner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Spinner[key]) return;
+  exports[key] = _Spinner[key];
+});

package/dist/cjs/StackView/StackView.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.StackView = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = require("@emotion/react");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _splitStyles = _interopRequireDefault(require("../system/split-styles"));
+
+var _system = require("../system");
+
+var _utils = require("../utils");
+
+var _VariantProvider = require("../VariantProvider");
+
+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) { (0, _defineProperty2["default"])(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; } /** @jsx jsx */
+
+var BASELINE = 'baseline';
+var CENTER = 'center';
+var END = 'end';
+var FILL = 'fill';
+var HORIZONTAL = 'horizontal';
+var SPACE_EVENLY = 'space-evenly';
+var SPACE_BETWEEN = 'space-between';
+var START = 'start';
+var STRETCH = 'stretch';
+var VERTICAL = 'vertical';
+var stackViewPlugin = {
+  styleProps: ['alignment', 'axis', 'distribution', 'spacing'],
+  getStyles: function getStyles(_ref) {
+    var inline = _ref.inline,
+        alignment = _ref.alignment,
+        axis = _ref.axis,
+        distribution = _ref.distribution,
+        spacing = _ref.spacing,
+        styles = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["inline", "alignment", "axis", "distribution", "spacing"]);
+
+    if (axis && styles.flexDirection === undefined) {
+      styles.flexDirection = axis === HORIZONTAL ? 'row' : 'column';
+    }
+
+    if (alignment && styles.alignItems === undefined) {
+      styles.alignItems = alignment;
+    }
+
+    if (distribution === FILL) {
+      styles['& > *'] = {
+        flex: '1 0 0px'
+      };
+    } else if (styles.justifyContent === undefined) {
+      styles.justifyContent = distribution;
+    }
+
+    if (typeof spacing === 'number' || typeof spacing === 'string') {
+      styles.gap = (0, _system.spacingValue)(spacing);
+    }
+
+    return styles;
+  }
+};
+var defaultElement = 'div';
+
+var StackView = function StackView(_ref2) {
+  var as = _ref2.as,
+      children = _ref2.children,
+      inline = _ref2.inline,
+      innerRef = _ref2.innerRef,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["as", "children", "inline", "innerRef"]);
+  var variant = (0, _VariantProvider.useVariant)();
+  var Element = as || defaultElement;
+  var childrenToRender = Element === 'textarea' ? undefined : typeof props.spacing === 'object' ? (0, _utils.joinChildren)(children, props.spacing) : children;
+  return (0, _react.jsx)(Element, (0, _extends2["default"])({
+    ref: innerRef
+  }, (0, _splitStyles["default"])(_objectSpread({
+    display: inline ? 'inline-flex' : 'flex',
+    axis: VERTICAL,
+    plugin: stackViewPlugin,
+    variant: variant
+  }, props))), childrenToRender);
+};
+
+exports.StackView = StackView;
+StackView.BASELINE = BASELINE;
+StackView.CENTER = CENTER;
+StackView.END = END;
+StackView.FILL = FILL;
+StackView.HORIZONTAL = HORIZONTAL;
+StackView.SPACE_BETWEEN = SPACE_BETWEEN;
+StackView.SPACE_EVENLY = SPACE_EVENLY;
+StackView.START = START;
+StackView.STRETCH = STRETCH;
+StackView.VERTICAL = VERTICAL;

package/dist/cjs/StackView/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _StackView = require("./StackView");
+
+exports["default"] = _StackView.StackView;
+Object.keys(_StackView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _StackView[key]) return;
+  exports[key] = _StackView[key];
+});

package/dist/cjs/StepperField/StepperField.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _system = require("../system");
+
+var _NumberField = _interopRequireDefault(require("../NumberField"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var StepperField = function StepperField(_ref) {
+  var _ref$max = _ref.max,
+      max = _ref$max === void 0 ? Infinity : _ref$max,
+      _ref$min = _ref.min,
+      min = _ref$min === void 0 ? -Infinity : _ref$min,
+      onChange = _ref.onChange,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 1 : _ref$step,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["max", "min", "onChange", "step", "value"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('stepperField', restProps),
+      _useThemeProps$size = _useThemeProps.size,
+      size = _useThemeProps$size === void 0 ? 'md' : _useThemeProps$size,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["size"]);
+
+  var boxSize = size;
+
+  var _useBoxSize = (0, _system.useBoxSize)(boxSize),
+      fontSize = _useBoxSize.fontSize,
+      navigateSize = _useBoxSize.navigateSize,
+      paddingHorizontal = _useBoxSize.paddingHorizontal;
+
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal",
+    fontSize: fontSize
+  }, themeProps), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    disabled: value <= min,
+    icon: {
+      name: 'general.minus',
+      size: navigateSize(boxSize, -1)
+    },
+    onClick: function onClick() {
+      return onChange(Math.max(value - step, min));
+    },
+    size: boxSize,
+    title: "Decrement by " + step
+  }), /*#__PURE__*/_react["default"].createElement(_NumberField["default"], {
+    fontSize: "inherit",
+    max: max,
+    min: min,
+    onChange: onChange,
+    paddingHorizontal: paddingHorizontal,
+    size: boxSize,
+    step: step,
+    value: value
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    disabled: value >= max,
+    icon: {
+      name: 'general.plus',
+      size: navigateSize(boxSize, -1)
+    },
+    onClick: function onClick() {
+      return onChange(Math.min(value + step, max));
+    },
+    size: boxSize,
+    title: "Increment by " + step
+  }));
+};
+
+var _default = StepperField;
+exports["default"] = _default;

package/dist/cjs/StepperField/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _StepperField = _interopRequireDefault(require("./StepperField"));
+
+var _default = _StepperField["default"];
+exports["default"] = _default;

package/dist/cjs/StepperProgress/Context.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var StepperProgressContext = /*#__PURE__*/(0, _react.createContext)(null);
+var _default = StepperProgressContext;
+exports["default"] = _default;

package/dist/cjs/StepperProgress/Step.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _system = require("../system");
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Context = _interopRequireDefault(require("./Context"));
+
+var CIRCLE_SIZE = 1.5;
+var BASE_COLOR = 'separatorSecondary';
+
+function Line() {
+  var _useContext = (0, _react.useContext)(_Context["default"]),
+      active = _useContext.active,
+      activeColor = _useContext.activeColor;
+
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    position: "absolute",
+    width: "100%",
+    height: "3px",
+    x: "calc(-100% + " + (0, _system.spacingValue)(CIRCLE_SIZE / 2) + ")",
+    y: "4.5px",
+    backgroundColor: BASE_COLOR,
+    zIndex: 0
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    width: "100%",
+    height: "100%",
+    backgroundColor: activeColor,
+    transformOrigin: "left center",
+    transition: "transform 280ms ease-out",
+    style: {
+      transform: "scaleX(" + (active ? 1 : 0)
+    }
+  }));
+}
+
+function Indicator(props) {
+  var context = (0, _react.useContext)(_Context["default"]);
+  var active = props.active === undefined ? context.active : props.active;
+  var activeColor = props.activeColor === undefined ? context.activeColor : props.activeColor;
+
+  var _useState = (0, _react.useState)('0ms'),
+      delay = _useState[0],
+      setDelay = _useState[1];
+
+  (0, _react.useLayoutEffect)(function () {
+    setDelay(active === true ? '0ms' : '280ms');
+  }, [active]);
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], null, context.includeLine && /*#__PURE__*/_react["default"].createElement(Line, null), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    width: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    radius: "circle",
+    backgroundColor: active ? activeColor : BASE_COLOR,
+    position: "relative",
+    zIndex: 1,
+    transition: "background-color 280ms ease-out",
+    transitionDelay: delay
+  }));
+}
+
+function Step(_ref) {
+  var active = _ref.active,
+      activeColor = _ref.activeColor,
+      renderStart = _ref.renderStart,
+      renderEnd = _ref.renderEnd;
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    alignment: "center",
+    position: "relative"
+  }, renderStart, /*#__PURE__*/_react["default"].createElement(Indicator, {
+    active: active,
+    activeColor: activeColor
+  }), renderEnd);
+}
+
+var _default = Step;
+exports["default"] = _default;

package/dist/cjs/StepperProgress/StepperProgress.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _GridView = _interopRequireDefault(require("../GridView"));
+
+var _Context = _interopRequireDefault(require("./Context"));
+
+var _system = require("../system");
+
+function StepperProgress(_ref) {
+  var activeStepIndex = _ref.activeStepIndex,
+      children = _ref.children,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["activeStepIndex", "children"]);
+
+  var _useThemeProps = (0, _system.useThemeProps)('stepperProgress', restProps),
+      _useThemeProps$active = _useThemeProps.activeColor,
+      activeColor = _useThemeProps$active === void 0 ? 'primary-light' : _useThemeProps$active,
+      themeProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["activeColor"]);
+
+  return /*#__PURE__*/_react["default"].createElement(_GridView["default"], (0, _extends2["default"])({
+    autoFlow: "column",
+    autoColumns: "1fr",
+    alignment: "center"
+  }, themeProps), _react.Children.map(children, function (child, stepIndex) {
+    return /*#__PURE__*/_react["default"].createElement(_Context["default"].Provider, {
+      key: stepIndex,
+      value: {
+        activeColor: activeColor,
+        active: stepIndex <= activeStepIndex,
+        includeLine: stepIndex > 0
+      }
+    }, child);
+  }));
+}
+
+var _default = StepperProgress;
+exports["default"] = _default;

package/dist/cjs/StepperProgress/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _StepperProgress = _interopRequireDefault(require("./StepperProgress"));
+
+var _Step = _interopRequireDefault(require("./Step"));
+
+_StepperProgress["default"].Step = _Step["default"];
+var _default = _StepperProgress["default"];
+exports["default"] = _default;

package/dist/cjs/Summary/Summary.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Heading = _interopRequireDefault(require("../Heading"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+/**
+ * Use for brief content that could have an accompanying image or title.
+ */
+var Summary = function Summary(_ref) {
+  var children = _ref.children,
+      image = _ref.image,
+      title = _ref.title,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "image", "title"]);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    alignment: "center",
+    padding: 2,
+    spacing: 2
+  }, restProps), image && /*#__PURE__*/_react["default"].createElement(_Box["default"], null, image), title && /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+    level: 3
+  }, title), children && /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    maxWidth: 40,
+    textAlign: "center"
+  }, children));
+};
+
+var _default = Summary;
+exports["default"] = _default;

package/dist/cjs/Summary/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Summary = _interopRequireDefault(require("./Summary"));
+
+var _default = _Summary["default"];
+exports["default"] = _default;

package/dist/cjs/Tab/Tab.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Tab = Tab;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var boxSizes = {
+  xs: {
+    fontSize: 5,
+    padding: 0.5,
+    paddingHorizontal: 1
+  },
+  sm: {
+    fontSize: 4,
+    padding: 0.5,
+    paddingHorizontal: 1.5
+  },
+  md: {
+    fontSize: 4,
+    padding: 1,
+    paddingHorizontal: 2
+  },
+  lg: {
+    fontSize: 3,
+    padding: 1.5,
+    lineHeight: 2,
+    paddingHorizontal: 2
+  }
+};
+
+function Tab(_ref) {
+  var active = _ref.active,
+      disabled = _ref.disabled,
+      href = _ref.href,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'backgroundSecondary' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["active", "disabled", "href", "color", "size"]);
+  var tabProps = {
+    as: active ? 'span' : href ? 'a' : 'button',
+    fontWeight: 400,
+    radiusTop: 4,
+    cursor: active ? 'default' : 'pointer',
+    transition: 'opacity 160ms ease-out',
+    backgroundColor: color,
+    disabled: disabled
+  };
+
+  if (!active) {
+    if (disabled) {
+      tabProps.opacity = 0.6;
+      tabProps.cursor = 'not-allowed';
+
+      if (href) {
+        tabProps['aria-disabled'] = true;
+      }
+    } else {
+      tabProps.href = href;
+      tabProps.opacity = 0.8;
+      tabProps.hover = {
+        opacity: 1
+      };
+    }
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({}, tabProps, boxSizes[size], props));
+}

package/dist/cjs/Tab/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Tab = require("./Tab");
+
+exports["default"] = _Tab.Tab;
+Object.keys(_Tab).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tab[key]) return;
+  exports[key] = _Tab[key];
+});