@compositor/kit/dist/ui.js

Components for development environments, style guides, and demos

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Code = exports.Text = exports.Measure = exports.Divider = exports.Select = exports.Input = exports.Label = exports.Grid = exports.Flex = exports.Box = undefined;

var _nanoStyle = require('nano-style');

var _nanoStyle2 = _interopRequireDefault(_nanoStyle);

var _styledSystem = require('styled-system');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var px = _styledSystem.util.px;
var Box = exports.Box = (0, _nanoStyle2.default)('div')(_styledSystem.color, _styledSystem.space, _styledSystem.width, _styledSystem.flex, _styledSystem.alignSelf);
Box.displayName = 'Box';

var Flex = exports.Flex = (0, _nanoStyle2.default)(Box)({
  display: 'flex'
}, _styledSystem.alignItems, _styledSystem.justifyContent, _styledSystem.flexWrap, _styledSystem.flexDirection);
Flex.displayName = 'Flex';

var gridWidth = function gridWidth(props) {
  return props.width ? {
    gridTemplateColumns: 'repeat(auto-fit, minmax(' + px(props.width) + ', 1fr))'
  } : null;
};

var gridGap = function gridGap(props) {
  return props.gap ? {
    gridGap: px(props.gap)
  } : null;
};

var gridHeight = function gridHeight(props) {
  return props.height ? {
    gridAutoRows: px(props.height)
  } : null;
};

var Grid = exports.Grid = (0, _nanoStyle2.default)('div')({
  display: 'grid'
}, gridWidth, gridHeight, gridGap);
Grid.displayName = 'Grid';
Grid.defaultProps = {
  width: 256,
  height: 192
};

var Label = exports.Label = (0, _nanoStyle2.default)('label')({
  display: 'block',
  fontSize: '10px'
}, _styledSystem.space);
Label.displayName = 'Label';

var Input = exports.Input = (0, _nanoStyle2.default)('input')({
  display: 'block',
  width: '100%',
  fontFamily: 'inherit',
  fontSize: 'inherit',
  lineHeight: 1.25,
  appearance: 'none',
  padding: '4px',
  color: 'inherit',
  backgroundColor: 'transparent',
  border: '1px solid #ddd',
  borderRadius: '4px',
  '&:focus': {}
}, _styledSystem.space);
Input.displayName = 'Input';
Input.defaultProps = {
  m: 0
};

var Select = exports.Select = (0, _nanoStyle2.default)('select')({
  display: 'block',
  width: '100%',
  fontFamily: 'inherit',
  fontSize: 'inherit',
  lineHeight: 1.25,
  // appearance: 'none',
  padding: '4px',
  color: 'inherit',
  backgroundColor: 'transparent',
  border: '1px solid #ddd',
  borderRadius: '4px',
  '&:focus': {}
}, _styledSystem.space);
Select.displayName = 'Select';
Select.defaultProps = {
  m: 0
};

var Divider = exports.Divider = (0, _nanoStyle2.default)('hr')({
  width: '100%',
  margin: 0,
  border: 0,
  borderBottom: '1px solid #ddd'
});
Divider.displayName = 'Divider';

var Measure = exports.Measure = (0, _nanoStyle2.default)('p')({}, _styledSystem.fontSize, _styledSystem.lineHeight, _styledSystem.maxWidth);
Measure.displayName = 'Measure';
Measure.defaultProps = {
  fontSize: 3,
  lineHeight: 1.8,
  maxWidth: '30em'
};

var Text = exports.Text = (0, _nanoStyle2.default)('div')({}, _styledSystem.fontSize, _styledSystem.fontWeight);
Text.displayName = 'Text';

var Code = exports.Code = (0, _nanoStyle2.default)(Text)({ fontFamily: 'monospace' });
Code.displayName = 'Code';

exports.default = {
  Box: Box,
  Flex: Flex,
  Grid: Grid,
  Label: Label,
  Input: Input,
  Select: Select,
  Divider: Divider
};