@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Card/Card.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import * as React from 'react';
+import { useThemeValue } from '../system';
+import { StackView } from '../StackView';
+import { cloneChildren } from '../utils';
+
+function Section(_ref) {
+  var subdued = _ref.subdued,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["subdued"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    width: "100%",
+    padding: 1,
+    backgroundColor: subdued ? 'surfaceSecondary' : undefined
+  }, restProps));
+}
+
+export function Card(_ref2) {
+  var children = _ref2.children,
+      subdued = _ref2.subdued,
+      _ref2$radius = _ref2.radius,
+      radius = _ref2$radius === void 0 ? 3 : _ref2$radius,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["children", "subdued", "radius"]);
+
+  var cardTheme = useThemeValue('card');
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    width: "100%",
+    lineHeight: 2.5,
+    borderColor: "separatorTertiary",
+    borderStyle: "solid",
+    borderWidth: 1,
+    backgroundColor: subdued ? 'surfaceSecondary' : 'surface',
+    color: "foreground",
+    radius: radius
+  }, cardTheme, restProps), radius > 0 ? cloneChildren(children, function (child, _ref3) {
+    var _ref4, _ref5;
+
+    var firstChild = _ref3.firstChild,
+        lastChild = _ref3.lastChild;
+    return child.props.radius === undefined ? firstChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref4) : lastChild ? (_ref5 = {}, _ref5["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref5) : {} : {};
+  }) : children);
+}
+Card.Section = Section;

package/dist/esm/Card/index.js

@@ -0,0 +1,2 @@
+export * from './Card';
+export { Card as default } from './Card';

package/dist/esm/Checkbox/Checkbox.js

@@ -0,0 +1,204 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useContext, useRef, useLayoutEffect, useState } from 'react';
+import Box from '../Box';
+import CheckboxGroupContext from '../CheckboxGroup/CheckboxGroupContext';
+import Icon from '../Icon';
+import Link from '../Link';
+import StackView from '../StackView';
+import Text from '../Text';
+import VariantProvider from '../VariantProvider';
+import Tooltip from '../Tooltip';
+import { useThemeValue } from '../system';
+import { useAccessibilityViolation } from '../hooks/use-accessibility-violation';
+import { mergeProps } from '../utils';
+var iconPaths = {
+  fill: 'checkbox-0',
+  minus: 'checkbox-1',
+  checked: 'checkbox-2'
+};
+
+var _ref2 = /*#__PURE__*/React.createElement(Link, {
+  external: true,
+  to: "https://ministrycentered.github.io/ui-kit/checkbox#label",
+  weight: 700
+}, "label");
+
+function Checkbox(_ref) {
+  var checked = _ref.checked,
+      disabled = _ref.disabled,
+      id = _ref.id,
+      indeterminate = _ref.indeterminate,
+      label = _ref.label,
+      name = _ref.name,
+      _onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      _onFocus = _ref.onFocus,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'sm' : _ref$size,
+      value = _ref.value,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["checked", "disabled", "id", "indeterminate", "label", "name", "onBlur", "onChange", "onFocus", "size", "value"]);
+
+  var checkboxTheme = useThemeValue('checkbox');
+  var checkboxGroup = useContext(CheckboxGroupContext);
+
+  var _useState = useState(false),
+      localChecked = _useState[0],
+      setLocalChecked = _useState[1];
+
+  var _useState2 = useState(false),
+      focus = _useState2[0],
+      setFocus = _useState2[1];
+
+  var isChecked = checkboxGroup ? checkboxGroup.value.indexOf(value) > -1 : checked === undefined ? localChecked : checked;
+  var tooltip = null;
+
+  if (process.env.NODE_ENV !== 'production') {
+    var ref = useRef(null);
+
+    var _useState3 = useState(false),
+        needsParentLabel = _useState3[0],
+        setNeedsParentLabel = _useState3[1];
+
+    var _useAccessibilityViol = useAccessibilityViolation( /*#__PURE__*/React.createElement(React.Fragment, null, "Checkbox must define a", ' ', _ref2, ' ', "through props or a parent element that is a label."), "UIKit: <Checkbox/> must define a \"label\" prop or have a parent that renders a label for proper accessibility."),
+        tooltipProps = _useAccessibilityViol.tooltipProps,
+        wrapperProps = _useAccessibilityViol.wrapperProps;
+
+    useLayoutEffect(function () {
+      function findParent(node, findMatch) {
+        if (node && node !== document.documentElement) {
+          var matchFound = findMatch(node.parentNode);
+
+          if (matchFound) {
+            return node.parentNode;
+          } else {
+            return findParent(node.parentNode, findMatch);
+          }
+        } else {
+          return null;
+        }
+      }
+
+      if (label === undefined) {
+        var labelParent = findParent(ref.current, function (parentNode) {
+          return parentNode.tagName === 'LABEL';
+        });
+
+        if (!labelParent) {
+          setNeedsParentLabel(true);
+        }
+      }
+    }, []);
+    restProps = mergeProps(restProps, {
+      innerRef: ref
+    });
+
+    if (needsParentLabel) {
+      tooltip = tooltipProps;
+      restProps = mergeProps(restProps, wrapperProps);
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(VariantProvider, {
+    checked: isChecked,
+    indeterminate: indeterminate,
+    focus: focus,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Tooltip, tooltip, /*#__PURE__*/React.createElement(StackView, _extends({
+    as: label ? 'label' : 'span',
+    inline: true,
+    axis: "horizontal",
+    alignment: "center",
+    shrink: 0,
+    position: "relative",
+    spacing: 0.5,
+    variants: {
+      disabled: {
+        opacity: 0.5,
+        cursor: 'not-allowed'
+      }
+    }
+  }, restProps), /*#__PURE__*/React.createElement(Box, {
+    as: "input",
+    type: "checkbox",
+    id: id,
+    name: checkboxGroup ? checkboxGroup.name : name,
+    checked: isChecked,
+    value: value,
+    disabled: disabled,
+    onChange: checkboxGroup ? checkboxGroup.onChange : function (event) {
+      setLocalChecked(event.target.checked);
+      onChange && onChange(event);
+    },
+    onFocus: function onFocus(event) {
+      setFocus(true);
+      _onFocus && _onFocus(event);
+    },
+    onBlur: function onBlur(event) {
+      setFocus(false);
+      _onBlur && _onBlur(event);
+    },
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 0,
+    opacity: 0
+  }), /*#__PURE__*/React.createElement(Icon, {
+    size: size,
+    zIndex: 1
+  }, /*#__PURE__*/React.createElement(Icon.Path, {
+    name: iconPaths.fill,
+    fill: checkboxTheme.fill,
+    stroke: checkboxTheme.stroke,
+    transform: "scale(1)",
+    transformOrigin: "center center",
+    transition: "all 180ms ease-out",
+    variants: {
+      focus: {
+        stroke: checkboxTheme.focusStroke
+      },
+      active: {
+        transform: 'scale(1)'
+      },
+      checked: {
+        fill: checkboxTheme.checkedFill,
+        stroke: checkboxTheme.checkedStroke
+      },
+      indeterminate: {
+        fill: 'primary-light',
+        stroke: 'primary'
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Icon.Path, {
+    name: iconPaths.minus,
+    fill: "#fff",
+    transform: "scale(0)",
+    transformOrigin: "center center",
+    transition: "all 180ms ease-out",
+    variants: {
+      indeterminate: {
+        visibility: 'visible',
+        transform: 'scale(1)',
+        transition: 'all 120ms ease-out'
+      }
+    }
+  }), /*#__PURE__*/React.createElement(Icon.Path, {
+    name: iconPaths.checked,
+    fill: "#fff",
+    transform: "scale(0)",
+    transformOrigin: "center center",
+    transition: "all 180ms ease-out",
+    variants: {
+      checked: {
+        visibility: 'visible',
+        transform: 'scale(1)',
+        transition: 'all 120ms ease-out'
+      }
+    }
+  })), label && /*#__PURE__*/React.createElement(Text, {
+    fontSize: 4,
+    lineHeight: 2.5
+  }, label))));
+}
+
+export default Checkbox;

package/dist/esm/Checkbox/index.js

@@ -0,0 +1,2 @@
+import Checkbox from './Checkbox';
+export default Checkbox;

package/dist/esm/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useState } from 'react';
+import Box from '../Box';
+import Card from '../Card';
+import Checkbox from '../Checkbox';
+import Text from '../Text';
+
+function CheckboxCard(_ref) {
+  var checked = _ref.checked,
+      _onChange = _ref.onChange,
+      subtitle = _ref.subtitle,
+      title = _ref.title,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["checked", "onChange", "subtitle", "title"]);
+
+  var _useState = useState(false),
+      localChecked = _useState[0],
+      setLocalChecked = _useState[1];
+
+  var isActive = checked === undefined ? localChecked : checked;
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    as: "label",
+    axis: "horizontal",
+    alignment: "center",
+    width: "auto",
+    padding: 1,
+    spacing: 1,
+    cursor: "pointer",
+    borderColor: isActive ? 'separatorFocus' : 'separatorSecondary',
+    hover: {
+      borderColor: !isActive ? 'separator' : undefined
+    },
+    css: {
+      ':focus-within': {
+        stroke: 'separatorFocusSecondary',
+        strokeWeight: 2
+      }
+    }
+  }, restProps), /*#__PURE__*/React.createElement(Checkbox, {
+    size: "sm",
+    checked: checked,
+    onChange: function onChange(event) {
+      setLocalChecked(event.target.checked);
+      _onChange && _onChange(event);
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    shrink: 1
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    title: title,
+    truncate: true
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    title: subtitle,
+    color: "foregroundSecondary",
+    truncate: true
+  }, subtitle)));
+}
+
+export default CheckboxCard;

package/dist/esm/CheckboxCard/index.js

@@ -0,0 +1,2 @@
+import CheckboxCard from './CheckboxCard';
+export default CheckboxCard;

package/dist/esm/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,58 @@
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import { shallowEqual } from '../utils';
+import CheckboxGroupContext from './CheckboxGroupContext';
+
+var CheckboxGroup = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(CheckboxGroup, _Component);
+
+  function CheckboxGroup(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (event) {
+      var _event$target = event.target,
+          checked = _event$target.checked,
+          value = _event$target.value;
+      var newValue = [].concat(_this.props.value);
+
+      if (checked) {
+        newValue.push(value);
+      } else {
+        newValue.splice(newValue.indexOf(value), 1);
+      }
+
+      _this.props.onChange(newValue);
+    });
+
+    _this.state = {
+      name: props.name,
+      value: props.value,
+      onChange: _this.handleChange
+    };
+    return _this;
+  }
+
+  var _proto = CheckboxGroup.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (!shallowEqual(lastProps.value, this.props.value)) {
+      this.setState({
+        value: this.props.value
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
+      value: this.state
+    }, this.props.children);
+  };
+
+  return CheckboxGroup;
+}(Component);
+
+export default CheckboxGroup;

package/dist/esm/CheckboxGroup/CheckboxGroupContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var CheckboxGroupContext = /*#__PURE__*/createContext();
+export default CheckboxGroupContext;

package/dist/esm/CheckboxGroup/index.js

@@ -0,0 +1,2 @@
+import CheckboxGroup from './CheckboxGroup';
+export default CheckboxGroup;

package/dist/esm/ChurchCenterStatus/ChurchCenterStatus.js

@@ -0,0 +1,127 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 React from 'react';
+import Button from '../Button';
+import Divider from '../Divider';
+import Dropdown from '../Dropdown';
+import Icon from '../Icon';
+import StackView from '../StackView';
+import Text from '../Text';
+
+var _ref2 = /*#__PURE__*/React.createElement("strong", null, "This product is not published on Church Center.");
+
+var _ref3 = /*#__PURE__*/React.createElement("strong", null, "Church Center is disabled.");
+
+var _ref4 = /*#__PURE__*/React.createElement(Text, {
+  size: "14px",
+  weight: 700
+}, "Web");
+
+var _ref5 = /*#__PURE__*/React.createElement(Text, {
+  size: "14px",
+  weight: 700
+}, "Mobile app");
+
+var _ref6 = /*#__PURE__*/React.createElement(Divider, {
+  margin: 0.5
+});
+
+export function ChurchCenterStatus(_ref) {
+  var _ref$ccAppEnabled = _ref.ccAppEnabled,
+      ccAppEnabled = _ref$ccAppEnabled === void 0 ? false : _ref$ccAppEnabled,
+      _ref$ccPublishingEnab = _ref.ccPublishingEnabled,
+      ccPublishingEnabled = _ref$ccPublishingEnab === void 0 ? false : _ref$ccPublishingEnab,
+      _ref$ccWebEnabled = _ref.ccWebEnabled,
+      ccWebEnabled = _ref$ccWebEnabled === void 0 ? false : _ref$ccWebEnabled,
+      description = _ref.description,
+      destinationLabel = _ref.destinationLabel,
+      _ref$disabledDescript = _ref.disabledDescription,
+      disabledDescription = _ref$disabledDescript === void 0 ? 'People cannot access this product on the web or mobile app.' : _ref$disabledDescript,
+      _ref$dropdownProps = _ref.dropdownProps,
+      dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+      icons = _ref.icons,
+      productUrl = _ref.productUrl,
+      settingsUrl = _ref.settingsUrl,
+      props = _objectWithoutPropertiesLoose(_ref, ["ccAppEnabled", "ccPublishingEnabled", "ccWebEnabled", "description", "destinationLabel", "disabledDescription", "dropdownProps", "icons", "productUrl", "settingsUrl"]);
+
+  var buttonProps = {
+    distribution: 'start',
+    fontWeight: 400,
+    paddingHorizontal: 2,
+    radius: 0,
+    variant: 'naked'
+  };
+  var ccEnabled = ccAppEnabled || ccWebEnabled;
+
+  var icon = _objectSpread({
+    check: 'checkmark',
+    exclamationTriangle: 'exclamation-triangle-filled',
+    external: 'external',
+    x: 'close'
+  }, icons);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    spacing: 1
+  }, props), /*#__PURE__*/React.createElement(Dropdown, _extends({
+    fontWeight: 400,
+    placement: "bottom-end",
+    popoverProps: _objectSpread({
+      width: '280px'
+    }, dropdownProps['popoverProps']),
+    theme: "dark",
+    title: "Church Center",
+    variant: "outline"
+  }, (!ccEnabled || !ccPublishingEnabled) && {
+    iconLeft: {
+      name: icon.exclamationTriangle,
+      size: 'sm'
+    }
+  }, dropdownProps), /*#__PURE__*/React.createElement(StackView, {
+    padding: 2,
+    spacing: 2
+  }, !ccPublishingEnabled ? /*#__PURE__*/React.createElement(Text, {
+    size: "14px"
+  }, _ref2, ' ', disabledDescription) : !ccEnabled ? /*#__PURE__*/React.createElement(Text, {
+    size: "14px"
+  }, _ref3, " ", disabledDescription) : /*#__PURE__*/React.createElement(Text, {
+    size: "14px"
+  }, description), ccEnabled && ccPublishingEnabled && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    spacing: 3
+  }, /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    spacing: 0.5
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: ccWebEnabled ? 'success' : 'error',
+    name: ccWebEnabled ? icon.check : icon.x,
+    size: "sm"
+  }), _ref4), /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    spacing: 0.5
+  }, /*#__PURE__*/React.createElement(Icon, {
+    color: ccAppEnabled ? 'success' : 'error',
+    name: ccAppEnabled ? icon.check : icon.x,
+    size: "sm"
+  }), _ref5))), _ref6, /*#__PURE__*/React.createElement(StackView, null, /*#__PURE__*/React.createElement(Button, _extends({
+    external: true,
+    title: "Update settings",
+    to: settingsUrl
+  }, buttonProps)), ccEnabled && ccPublishingEnabled && /*#__PURE__*/React.createElement(Button, _extends({
+    external: true,
+    to: productUrl
+  }, buttonProps), "Visit ", destinationLabel, /*#__PURE__*/React.createElement(Icon, {
+    color: "primary",
+    name: icon.external,
+    marginLeft: 1,
+    size: "sm"
+  })))));
+}

package/dist/esm/ChurchCenterStatus/index.js

@@ -0,0 +1,2 @@
+export * from './ChurchCenterStatus';
+export { ChurchCenterStatus as default } from './ChurchCenterStatus';

package/dist/esm/Collapse/Collapse.js

@@ -0,0 +1,112 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { useLayoutEffect, useRef, useState } from 'react';
+var transition = 'height 200ms ease-out';
+
+function Collapse(props) {
+  var children = props.children,
+      instant = props.instant,
+      lazy = props.lazy,
+      onComplete = props.onComplete,
+      open = props.open,
+      restProps = _objectWithoutPropertiesLoose(props, ["children", "instant", "lazy", "onComplete", "open"]);
+
+  var _useState = useState(lazy ? open : true),
+      renderChildren = _useState[0],
+      setRenderChildren = _useState[1];
+
+  var ref = useRef();
+  var firstRender = useRef(true);
+  var instantRender = instant || firstRender.current;
+
+  function openCollapse() {
+    var node = ref.current;
+    requestAnimationFrame(function () {
+      node.style.height = node.scrollHeight + 'px';
+    });
+  }
+
+  function closeCollapse() {
+    var node = ref.current;
+    requestAnimationFrame(function () {
+      node.style.height = node.offsetHeight + 'px';
+      node.style.overflow = 'hidden';
+      requestAnimationFrame(function () {
+        node.style.height = 0;
+      });
+    });
+  }
+
+  useLayoutEffect(function () {
+    if (lazy) {
+      if (open) {
+        if (renderChildren) {
+          openCollapse();
+        } else {
+          setRenderChildren(true);
+        }
+      } else {
+        closeCollapse();
+      }
+    } else {
+      if (open) {
+        openCollapse();
+      } else {
+        closeCollapse();
+      }
+    }
+  }, [open, renderChildren]);
+  useLayoutEffect(function () {
+    var node = ref.current;
+
+    function handleComplete() {
+      node.style.overflow = open ? 'initial' : 'hidden';
+
+      if (open) {
+        requestAnimationFrame(function () {
+          node.style.margin = null;
+          node.style.height = 'auto';
+        });
+      }
+
+      if (!open && lazy) {
+        node.style.margin = '0';
+        setRenderChildren(false);
+      }
+
+      if (firstRender.current) {
+        firstRender.current = false;
+      } else if (onComplete) {
+        onComplete();
+      }
+    }
+
+    function handleTransitionEnd(event) {
+      if (event.target === node && event.propertyName === 'height') {
+        handleComplete();
+      }
+    }
+
+    if (instantRender) {
+      handleComplete();
+    }
+
+    node.addEventListener('transitionend', handleTransitionEnd);
+    return function () {
+      node.removeEventListener('transitionend', handleTransitionEnd);
+    };
+  }, [open]);
+  return jsx("div", _extends({
+    ref: ref,
+    css: {
+      transition: instantRender ? undefined : transition
+    }
+  }, restProps), renderChildren ? children : null);
+}
+
+export default Collapse;

package/dist/esm/Collapse/index.js

@@ -0,0 +1,2 @@
+import Collapse from './Collapse';
+export default Collapse;

package/dist/esm/ColumnView/ColumnView.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Children } from 'react';
+import StackView from '../StackView';
+
+function Column() {
+  return null;
+}
+
+function ColumnView(props) {
+  var children = props.children,
+      _props$sizes = props.sizes,
+      sizes = _props$sizes === void 0 ? [] : _props$sizes,
+      spacing = props.spacing,
+      restProps = _objectWithoutPropertiesLoose(props, ["children", "sizes", "spacing"]);
+
+  var sortedColumns = Children.toArray(children).sort(function (a, b) {
+    return (a.props.order || 0) - (b.props.order || 0);
+  }).reduce(function (columns, cell, index) {
+    var columnIndex = cell.props.index === undefined ? index : cell.props.index;
+
+    if (!columns[columnIndex]) {
+      columns[columnIndex] = [];
+    }
+
+    columns[columnIndex].push(cell);
+    return columns;
+  }, []);
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    grow: 1,
+    shrink: 1
+  }, restProps), sortedColumns.map(function (column, index) {
+    var size = sizes ? sizes[index] || 'auto' : 'auto';
+    return /*#__PURE__*/React.createElement(StackView, {
+      key: index,
+      basis: size === 'auto' ? '100%' : size.basis || size,
+      shrink: size === 'auto' ? 1 : size.shrink || 0,
+      grow: size === 'auto' ? 1 : size.grow || 0,
+      marginLeft: index === 0 ? null : spacing,
+      spacing: spacing
+    }, column.map(function (cell) {
+      return cell.props.children;
+    }));
+  }));
+}
+
+ColumnView.Column = Column;
+export default ColumnView;

package/dist/esm/ColumnView/index.js

@@ -0,0 +1,2 @@
+import ColumnView from './ColumnView';
+export default ColumnView;