@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/styles/variants/numberField.js

@@ -0,0 +1,42 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { input } from '../forms/input';
+var sharedStyles = {
+  WebkitAppearance: 'none',
+  margin: 0
+};
+var noDefaultArrows = {
+  'input::-webkit-outer-spin-button': _objectSpread({}, sharedStyles),
+  'input::-webkit-inner-spin-button': _objectSpread({}, sharedStyles),
+  'input[type=number]': {
+    MozAppearance: 'textfield'
+  }
+};
+
+var arrowsWrapper = _objectSpread({
+  display: 'flex',
+  justifyContent: 'center',
+  position: 'relative'
+}, input.container);
+
+var arrows = {
+  position: 'absolute',
+  right: '10px'
+};
+export default {
+  arrowsWrapper: arrowsWrapper,
+  arrows: arrows,
+  noDefaultArrows: noDefaultArrows
+};

package/lib/styles/variants/overlayPanel.js

@@ -0,0 +1,63 @@
+var overlayPanel = {
+  position: 'fixed',
+  overflowY: 'scroll',
+  zIndex: 10,
+  top: 0,
+  bottom: 0,
+  right: '-100%',
+  background: 'white',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderLeft: '1px solid',
+  borderLeftColor: 'neutral.80',
+  boxShadow: '-2px 0px 2px 1px rgba(37, 55, 70, 0.15)',
+  p: '25px',
+  transition: 'right 500ms',
+  maxWidth: '100%',
+  '&.is-small': {
+    width: '400px'
+  },
+  '&.is-medium': {
+    width: '550px'
+  },
+  '&.is-large': {
+    width: '800px'
+  },
+  '&.is-full': {
+    width: 'container.full'
+  },
+  '&.is-open': {
+    display: 'flex !important',
+    right: 0
+  }
+};
+var overlayPanelInner = {
+  position: 'absolute',
+  zIndex: 9,
+  bottom: 0,
+  right: 0,
+  background: 'white',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxShadow: '0px 2px 4px 0px rgb(110 110 110 / 25%) inset',
+  minWidth: '50%',
+  maxWidth: '100%',
+  width: '100%',
+  height: '200px',
+  p: '25px',
+  backgroundColor: 'accent.99'
+};
+var overlayPanelBody = {
+  display: 'none',
+  height: '100%',
+  width: '100%',
+  '&.is-open': {
+    display: 'flex'
+  }
+};
+export default {
+  overlayPanel: overlayPanel,
+  overlayPanelBody: overlayPanelBody,
+  overlayPanelInner: overlayPanelInner
+};

package/lib/styles/variants/popoverMenu.js

@@ -0,0 +1,89 @@
+var container = {
+  visibility: 'hidden',
+  position: 'relative',
+  bg: 'white',
+  color: 'neutral.10',
+  borderRadius: 4,
+  fontSize: 'md',
+  lineHeight: 1.4,
+  outline: 'none',
+  transitionProperty: 'transform,visibility,opacity',
+  'WebkitBoxShadow': '0px 0px 12px 2px #0000002e',
+  'MozBoxShadow': '0px 0px 12px 2px #0000002e',
+  'boxShadow': '0px 0px 12px 2px #0000002e',
+  '&.is-dark-mode': {
+    color: 'white',
+    bg: 'accent.20',
+    '&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
+      borderTopColor: 'accent.20'
+    },
+    '&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
+      borderBottomColor: 'accent.20'
+    },
+    '&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
+      borderLeftColor: 'accent.20'
+    },
+    '&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
+      borderRightColor: 'accent.20'
+    }
+  },
+  '&[data-popover-placement^=top] > [data-popover-arrow="arrow"]': {
+    bottom: 0
+  },
+  '&[data-popover-placement^=top] > [data-popover-arrow="arrow"]:before': {
+    left: '50%',
+    transform: 'translateX(-50%)',
+    borderWidth: '8px 8px 0',
+    borderTopColor: 'white',
+    transformOrigin: 'center top'
+  },
+  '&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]': {
+    top: 0
+  },
+  '&[data-popover-placement^=bottom] > [data-popover-arrow="arrow"]:before': {
+    top: '-8px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    borderWidth: '0 8px 8px',
+    borderBottomColor: 'white',
+    transformOrigin: 'center bottom'
+  },
+  '&[data-popover-placement^=left] > [data-popover-arrow="arrow"]': {
+    right: 0
+  },
+  '&[data-popover-placement^=left] > [data-popover-arrow="arrow"]:before': {
+    right: '-8px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    borderWidth: '8px 0 8px 8px',
+    borderLeftColor: 'white',
+    transformOrigin: 'center left'
+  },
+  '&[data-popover-placement^=right] > [data-popover-arrow="arrow"]': {
+    left: 0
+  },
+  '&[data-popover-placement^=right] > [data-popover-arrow="arrow"]:before': {
+    left: '-8px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    borderWidth: '8px 8px 8px 0',
+    borderRightColor: 'white',
+    transformOrigin: 'center right'
+  },
+  '&.is-open': {
+    visibility: 'visible'
+  }
+};
+var arrow = {
+  color: 'white',
+  '&:before': {
+    content: '""',
+    position: 'absolute',
+    borderColor: 'transparent',
+    borderStyle: 'solid'
+  }
+};
+export default {
+  arrow: arrow,
+  container: container
+};

package/lib/styles/variants/rockerbutton.js

@@ -0,0 +1,15 @@
+var rockerContainer = {
+  alignItems: 'flex-start'
+};
+var rockerContainerInner = {
+  bg: 'accent.95',
+  border: '1px solid',
+  borderColor: 'accent.90',
+  boxShadow: 'standard',
+  borderRadius: '15px',
+  padding: '2px'
+};
+export default {
+  rockerContainer: rockerContainer,
+  rockerContainerInner: rockerContainerInner
+};

package/lib/styles/variants/separator.js

@@ -0,0 +1,45 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var base = {
+  bg: 'neutral.80',
+  width: '100%',
+  height: '1px',
+  my: '5px',
+  '&.is-vertical': {
+    width: '1px',
+    height: '100%',
+    mx: '5px'
+  }
+};
+
+var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  width: '100%',
+  backgroundColor: 'neutral.60',
+  my: 0
+});
+
+var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
+  mt: '15px',
+  mb: '15px',
+  ml: '45px',
+  width: 'calc(100% - 60px)',
+  backgroundColor: 'neutral.60'
+});
+
+export default {
+  base: base,
+  navBarSeparator: navBarSeparator,
+  navBarSubtitleSeparator: navBarSubtitleSeparator
+};

package/lib/styles/variants/stepper.js

@@ -0,0 +1,105 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** Tabs styles */
+var wrapper = {
+  width: '100%'
+};
+var tabs = {
+  outline: 'none',
+  borderBottom: 'none',
+  mb: 0,
+  width: '100%'
+};
+var tab = {
+  mb: 0,
+  mr: 0,
+  outline: 'none',
+  '&.is-focused': {
+    boxShadow: 'focus',
+    borderRadius: '50%'
+  },
+  '&:not(:first-of-type)': {
+    flex: 1,
+    maxWidth: 122
+  }
+};
+var tabLabel = {
+  mb: 0
+};
+var stepWrapper = {
+  alignItems: 'center'
+};
+/** Step styles */
+
+var stepBase = {
+  width: 32,
+  height: 32,
+  minWidth: 32,
+  minHeight: 32,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderRadius: '50%',
+  fontSize: '17px',
+  fontWeight: 3,
+  cursor: 'pointer',
+  '&[aria-expanded="true"]': {
+    backgroundColor: 'active',
+    borderColor: 'active',
+    color: 'text.primaryLight'
+  }
+};
+var step = {
+  active: _objectSpread({
+    backgroundColor: 'accent.95',
+    borderColor: 'active',
+    color: 'active'
+  }, stepBase),
+  completed: _objectSpread({
+    backgroundColor: 'active',
+    borderColor: 'active',
+    color: 'text.primaryLight'
+  }, stepBase),
+  inactive: _objectSpread({
+    backgroundColor: 'white',
+    borderColor: 'neutral.80',
+    color: 'neutral.40'
+  }, stepBase)
+};
+/** Line styles */
+
+var line = {
+  alignSelf: 'center',
+  width: '100%',
+  maxWidth: '90px',
+  borderBottomWidth: 1,
+  borderBottomStyle: 'solid',
+  borderBottomColor: 'active',
+  '&.is-inactive': {
+    borderBottomStyle: 'dashed',
+    borderBottomColor: 'neutral.80'
+  }
+};
+export default {
+  wrapper: wrapper,
+  tabs: tabs,
+  tab: tab,
+  tabLabel: tabLabel,
+  stepWrapper: stepWrapper,
+  step: step,
+  line: line
+};

package/lib/styles/variants/table.js

@@ -0,0 +1,51 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { text } from '../variants/text';
+
+var tableHead = _objectSpread(_objectSpread({}, text.label), {}, {
+  fontWeight: 500,
+  width: '100%',
+  flexDirection: 'row !important',
+  p: '10px'
+});
+
+var tableData = _objectSpread(_objectSpread({}, text.tableData), {}, {
+  width: '100%',
+  p: '10px'
+});
+
+var tableBody = {
+  borderTop: '1px solid',
+  borderTopColor: 'neutral.40',
+  borderBottom: '1px solid',
+  borderBottomColor: 'neutral.80',
+  '&& > tr:nth-of-type(odd) ': {
+    backgroundColor: 'neutral.95'
+  }
+};
+var tableRow = {
+  width: '100%',
+  flexDirection: 'row !important'
+};
+var table = {
+  width: '100%'
+};
+export default {
+  tableHead: tableHead,
+  tableData: tableData,
+  tableBody: tableBody,
+  tableRow: tableRow,
+  table: table
+};

package/lib/styles/variants/tabs.js

@@ -0,0 +1,36 @@
+export var tab = {
+  pt: 10,
+  cursor: 'pointer',
+  alignItems: 'center',
+  display: 'inline-flex',
+  outline: 'none',
+  transform: 'translateY(1px)',
+  width: '100%',
+  '&.is-focused': {
+    boxShadow: 'focus'
+  },
+  '&.is-disabled': {
+    cursor: 'default'
+  },
+  '&.is-selected.is-vertical': {
+    bg: 'accent.95'
+  },
+  '& > svg': {
+    flexShrink: 0
+  }
+};
+export var tabLine = {
+  height: '2px',
+  width: '100%',
+  bg: 'active',
+  flexShrink: 0
+};
+export var tabPanel = {
+  outline: 'none'
+};
+export var tabs = {
+  borderBottomWidth: 1,
+  borderBottomStyle: 'solid',
+  borderBottomColor: 'neutral.90',
+  mb: 'lg'
+};