parvus-ui
Version:
A micro UI kit with all the main UI components in less than 5KB
1,383 lines (1,230 loc) • 41.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var createReactContext = _interopDefault(require('create-react-context'));
var React = _interopDefault(require('react'));
var PropTypes = _interopDefault(require('prop-types'));
var cxs = _interopDefault(require('cxs'));
var themeContext = createReactContext();
var ThemeProvider = function ThemeProvider(props) {
var children = props.children,
theme = props.theme;
var _theme = {
backgroundColor: theme.backgroundColor || "#ffffff",
primaryColor: theme.primaryColor || "blue",
secondaryColor: theme.secondaryColor || "gray",
tertiaryColor: theme.tertiaryColor || "white",
successColor: theme.successColor || "green",
errorColor: theme.errorColor || "red",
warningColor: theme.warningColor || "orange",
borderRadius: theme.borderRadius || 0,
fontColor: theme.fontColor || '#000000',
fontFamily: theme.fontFamily || 'Helvetica Neue, Helvetica, Arial, sans-serif'
};
return React.createElement(themeContext.Provider, {
value: _theme
}, children);
};
ThemeProvider.propTypes = {
children: function children() {
return (typeof PropTypes.node === "function" ? PropTypes.node.isRequired ? PropTypes.node.isRequired : PropTypes.node : PropTypes.shape(PropTypes.node).isRequired).apply(this, arguments);
},
theme: PropTypes.shape({
backgroundColor: PropTypes.string,
borderRadius: PropTypes.number,
primaryColor: PropTypes.string,
secondaryColor: PropTypes.string,
tertiaryColor: PropTypes.string,
successColor: PropTypes.string,
errorColor: PropTypes.string,
warningColor: PropTypes.string,
fontColor: PropTypes.string,
fontFamily: PropTypes.string
}).isRequired
};
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
var withTheme = function withTheme(Component) {
return function (props) {
return React.createElement(themeContext.Consumer, null, function (theme) {
return React.createElement(Component, _extends({}, props, {
theme: theme
}));
});
};
};
var A = function A(props) {
var className = props.className,
children = props.children,
styles = props.styles,
otherProps = _objectWithoutProperties(props, ["className", "children", "styles"]);
var _styles = cxs(_objectSpread({
backgroundColor: 'transparent',
color: '#0275d8',
cursor: 'pointer',
fontSize: '1.25rem',
fontWeight: 400,
textDecoration: 'none',
':hover': {
textDecoration: 'underline'
},
':disabled': {
opacity: 0.3
}
}, styles));
return React.createElement("a", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
A.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
otherProps: PropTypes.object
};
var _this = undefined;
var memoize = (function (fn) {
var cache = {};
return function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
if (cache[args]) {
return cache[args];
}
var result = fn.apply(_this, args);
cache[args] = result;
return result;
};
});
var hexToRgb = function hexToRgb(hex) {
return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, function (m, r, g, b) {
return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
}).substring(1).match(/.{2}/g).map(function (num) {
return parseInt(num, 16);
});
};
var checkWithYIQ = function checkWithYIQ(rgbList) {
var _rgbList = _slicedToArray(rgbList, 3),
r = _rgbList[0],
g = _rgbList[1],
b = _rgbList[2];
return (r * 299 + g * 587 + b * 114) / 1000 <= 128;
};
var isDarkColor = memoize(function (enteredColor) {
if (enteredColor.includes('#')) {
return checkWithYIQ(hexToRgb(enteredColor));
}
return checkWithYIQ(enteredColor.replace(/[^\d,]/g, '').split(','));
});
var Alert = function Alert(props) {
var className = props.className,
children = props.children,
styles = props.styles,
theme = props.theme,
type = props.type,
otherProps = _objectWithoutProperties(props, ["className", "children", "styles", "theme", "type"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme[type + 'Color'] : '#000000',
border: '0.0625rem solid transparent',
borderRadius: theme ? theme.borderRadius : 0,
color: theme ? isDarkColor(theme[type + 'Color']) ? '#ffffff' : '#000000' : '#ffffff',
fontFamily: theme ? theme.fontFamily : 'Helvetica Neue, Helvetica, Arial, sans-serif',
fontSize: '1.25rem',
fontWeight: 400,
lineHeight: '1.5',
padding: '.75rem 1.25rem;',
textAlign: 'left',
width: 'auto'
}, styles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
Alert.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
type: PropTypes.string,
otherProps: PropTypes.object
};
Alert.defaultProps = {
type: 'primary'
};
var Alert$1 = withTheme(Alert);
var Background = function Background(props) {
var bgClassName = props.bgClassName,
className = props.className,
children = props.children,
bgStyles = props.bgStyles,
styles = props.styles,
theme = props.theme,
otherProps = _objectWithoutProperties(props, ["bgClassName", "className", "children", "bgStyles", "styles", "theme"]);
var _bgStyles = cxs(_objectSpread({
position: 'absolute',
top: '0',
left: '0',
width: '100%',
height: '100%',
margin: '0',
padding: '0',
backgroundColor: theme ? theme.backgroundColor : '#ffffff',
zIndex: '-1'
}, bgStyles));
var _styles = cxs(_objectSpread({
fontFamily: theme ? theme.fontFamily : 'Helvetica Neue, Helvetica, Arial, sans-serif',
color: theme ? theme.color : '#000000',
fontSize: '1.25rem'
}, styles));
return React.createElement("div", null, React.createElement("div", {
className: "".concat(_bgStyles, " ").concat(bgClassName || '')
}), React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children));
};
Background.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
bgClassName: PropTypes.string,
className: PropTypes.string,
bgStyles: PropTypes.object,
styles: PropTypes.object,
theme: PropTypes.object,
otherProps: PropTypes.object
};
var Background$1 = withTheme(Background);
var Breadcrumb = function Breadcrumb(props) {
var className = props.className,
children = props.children,
styles = props.styles,
otherProps = _objectWithoutProperties(props, ["className", "children", "styles"]);
var _styles = cxs(_objectSpread({
padding: 0,
margin: 0,
listStyle: 'none'
}, styles));
return React.createElement("ul", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
Breadcrumb.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
otherProps: PropTypes.object
};
var BreadcrumbItem = function BreadcrumbItem(props) {
var className = props.className,
children = props.children,
styles = props.styles,
theme = props.theme,
otherProps = _objectWithoutProperties(props, ["className", "children", "styles", "theme"]);
var _styles = cxs(_objectSpread({
display: 'inline',
':before': {
padding: '.5rem',
color: theme ? isDarkColor(theme.backgroundColor) ? '#ffffff' : '#000000' : '#000000',
content: '"/"'
},
':nth-child(1)': {
':before': {
content: '""'
}
}
}, styles));
return React.createElement("li", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
BreadcrumbItem.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
otherProps: PropTypes.object
};
var BreadcrumbItem$1 = withTheme(BreadcrumbItem);
var Button = function Button(props) {
var className = props.className,
children = props.children,
htmlType = props.htmlType,
styles = props.styles,
theme = props.theme,
type = props.type,
otherProps = _objectWithoutProperties(props, ["className", "children", "htmlType", "styles", "theme", "type"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme[type + 'Color'] : '#000000',
borderRadius: theme ? theme.borderRadius : 0,
border: 0,
color: theme ? isDarkColor(theme[type + 'Color']) ? '#ffffff' : '#000000' : '#ffffff',
fontSize: '1.25rem',
fontWeight: 400,
minWidth: '6rem',
padding: '.375rem .75rem',
textAlign: 'center',
':disabled': {
opacity: 0.3
},
':focus': {
opacity: 0.7
},
':hover': {
opacity: 0.7
}
}, styles));
return React.createElement("button", _extends({
className: "".concat(_styles, " ").concat(className || ''),
type: htmlType
}, otherProps), children);
};
Button.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
htmlType: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
type: PropTypes.string,
otherProps: PropTypes.object
};
Button.defaultProps = {
type: 'primary'
};
var Button$1 = withTheme(Button);
var Card = function Card(props) {
var children = props.children,
className = props.className,
styles = props.styles,
theme = props.theme,
otherProps = _objectWithoutProperties(props, ["children", "className", "styles", "theme"]);
var _styles = cxs(_objectSpread({
borderRadius: theme ? theme.borderRadius : 0,
fontSize: '1.25rem',
width: '100%',
border: '0.0625rem solid #dcdcdc'
}, styles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
Card.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
otherProps: PropTypes.object
};
var Card$1 = withTheme(Card);
var CardHeader = function CardHeader(props) {
var children = props.children,
className = props.className,
styles = props.styles,
theme = props.theme,
otherProps = _objectWithoutProperties(props, ["children", "className", "styles", "theme"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme.neutralColor : '#f9f9f9',
borderBottom: '0.75px solid #dcdcdc',
padding: '.75rem 1.25rem'
}, styles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
CardHeader.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
otherProps: PropTypes.object
};
var CardHeader$1 = withTheme(CardHeader);
var CardContent = function CardContent(props) {
var children = props.children,
className = props.className,
styles = props.styles,
theme = props.theme,
otherProps = _objectWithoutProperties(props, ["children", "className", "styles", "theme"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme.neutralColor : '#f9f9f9',
padding: '1.25rem'
}, styles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
CardContent.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
otherProps: PropTypes.object
};
var CardContent$1 = withTheme(CardContent);
var CardFooter = function CardFooter(props) {
var children = props.children,
className = props.className,
styles = props.styles,
theme = props.theme,
otherProps = _objectWithoutProperties(props, ["children", "className", "styles", "theme"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme.neutralColor : '#f9f9f9',
borderTop: '0.75px solid #dcdcdc',
padding: '.75rem 1.25rem'
}, styles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
CardFooter.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
otherProps: PropTypes.object
};
var CardFooter$1 = withTheme(CardFooter);
var Checkbox = function Checkbox(props) {
var checked = props.checked,
className = props.className,
containerClassName = props.containerClassName,
inputClassName = props.inputClassName,
styles = props.styles,
containerStyles = props.containerStyles,
inputStyles = props.inputStyles,
theme = props.theme,
onChange = props.onChange,
otherProps = _objectWithoutProperties(props, ["checked", "className", "containerClassName", "inputClassName", "styles", "containerStyles", "inputStyles", "theme", "onChange"]);
var _containerStyles = cxs(_objectSpread({
display: 'block',
position: 'relative',
paddingLeft: '1.563rem',
height: '1.563rem',
cursor: 'pointer'
}, containerStyles));
var _inputStyles = cxs(_objectSpread({
position: 'absolute',
opacity: 0,
cursor: 'pointer'
}, inputStyles));
var _styles = cxs(_objectSpread({
backgroundColor: checked ? '#2196f3' : '#dcdcdc',
borderRadius: theme ? theme.borderRadius : 0,
position: 'absolute',
top: 0,
left: 0,
width: '1.563rem',
height: '1.563rem',
':hover': {
opacity: checked ? 1 : 0.7
},
':after': {
content: '""',
position: 'absolute',
display: checked ? 'block' : 'none',
left: '0.5625rem',
top: '0.3125rem',
width: '0.3125rem',
height: '0.625rem',
border: 'solid white',
borderWidth: '0 0.1875rem 0.1875rem 0',
transform: 'rotate(45deg)'
}
}, styles));
return React.createElement("label", {
className: "".concat(_containerStyles, " ").concat(containerClassName || ''),
"aria-hidden": true
}, React.createElement("input", _extends({
className: "".concat(_inputStyles, " ").concat(inputClassName || ''),
type: "checkbox",
onChange: onChange,
checked: checked
}, otherProps)), React.createElement("span", {
className: "".concat(_styles, " ").concat(className || '')
}));
};
Checkbox.propTypes = {
checked: PropTypes.bool.isRequired,
className: PropTypes.string,
containerClassName: PropTypes.string,
inputClassName: PropTypes.string,
styles: PropTypes.object,
containerStyles: PropTypes.object,
inputStyles: PropTypes.object,
theme: PropTypes.object,
onChange: PropTypes.func.isRequired,
otherProps: PropTypes.object
};
var Checkbox$1 = withTheme(Checkbox);
var Input = function Input(props) {
var className = props.className,
styles = props.styles,
type = props.type,
theme = props.theme,
value = props.value,
onChange = props.onChange,
otherProps = _objectWithoutProperties(props, ["className", "styles", "type", "theme", "value", "onChange"]);
var _styles = cxs(_objectSpread({
borderRadius: theme ? theme.borderRadius : 0,
fontFamily: theme ? theme.fontFamily : 'Helvetica Neue, Helvetica, Arial, sans-serif',
fontSize: '1.25rem'
}, styles));
return React.createElement("input", _extends({
className: "".concat(_styles, " ").concat(className || ''),
onChange: onChange,
value: value,
type: type
}, otherProps));
};
Input.propTypes = {
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
type: PropTypes.string,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
otherProps: PropTypes.object
};
Input.defaultProps = {
type: 'text'
};
var Input$1 = withTheme(Input);
var Label = function Label(props) {
var children = props.children,
className = props.className,
htmlFor = props.htmlFor,
styles = props.styles,
otherProps = _objectWithoutProperties(props, ["children", "className", "htmlFor", "styles"]);
var _styles = cxs(_objectSpread({
fontSize: '1.25rem'
}, styles));
return React.createElement("label", _extends({
className: "".concat(_styles, " ").concat(className || ''),
htmlFor: htmlFor
}, otherProps), children);
};
Label.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
htmlFor: PropTypes.string,
otherProps: PropTypes.object
};
var Label$1 = withTheme(Label);
var Menu = function Menu(props) {
var className = props.className,
children = props.children,
styles = props.styles,
theme = props.theme,
type = props.type,
otherProps = _objectWithoutProperties(props, ["className", "children", "styles", "theme", "type"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme[type + 'Color'] : '#000000',
border: '0.0625rem solid transparent',
borderRadius: theme ? theme.borderRadius : 0,
color: theme ? isDarkColor(theme[type + 'Color']) ? '#ffffff' : '#000000' : '#ffffff',
fontFamily: theme ? theme.fontFamily : 'Helvetica Neue, Helvetica, Arial, sans-serif',
fontSize: '1.25rem',
fontWeight: 400,
lineHeight: '1.5',
textAlign: 'left',
width: 'auto',
minHeight: '3rem'
}, styles));
return React.createElement("nav", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
Menu.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
type: PropTypes.string,
otherProps: PropTypes.object
};
Menu.defaultProps = {
type: 'primary'
};
var Menu$1 = withTheme(Menu);
var MenuItem = function MenuItem(props) {
var className = props.className,
children = props.children,
styles = props.styles,
theme = props.theme,
type = props.type,
otherProps = _objectWithoutProperties(props, ["className", "children", "styles", "theme", "type"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme[type + 'Color'] : '#000000',
borderRadius: theme ? theme.borderRadius : 0,
border: 0,
color: theme ? isDarkColor(theme[type + 'Color']) ? '#ffffff' : '#000000' : '#ffffff',
fontSize: '1.25rem',
fontWeight: 400,
minWidth: '6rem',
padding: '.75rem .75rem',
textAlign: 'center',
'> a': {
textDecoration: 'none',
color: theme ? isDarkColor(theme[type + 'Color']) ? '#ffffff' : '#000000' : '#ffffff'
},
'> button': {
background: 'transparent',
border: 0,
fontSize: '1.25rem',
fontWeight: 400,
color: theme ? isDarkColor(theme[type + 'Color']) ? '#ffffff' : '#000000' : '#ffffff'
},
':disabled': {
opacity: 0.3
},
':focus': {
opacity: 0.7
},
':hover': {
opacity: 0.7
}
}, styles));
return React.createElement("span", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
MenuItem.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
type: PropTypes.string,
otherProps: PropTypes.object
};
MenuItem.defaultProps = {
type: 'primary'
};
var MenuItem$1 = withTheme(MenuItem);
var MenuDropdownItem = function MenuDropdownItem(props) {
var className = props.className,
children = props.children,
styles = props.styles,
label = props.label,
listStyles = props.listStyles,
theme = props.theme,
type = props.type,
otherProps = _objectWithoutProperties(props, ["className", "children", "styles", "label", "listStyles", "theme", "type"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme[type + 'Color'] : '#000000',
borderRadius: theme ? theme.borderRadius : 0,
border: 0,
color: theme ? isDarkColor(theme[type + 'Color']) ? '#ffffff' : '#000000' : '#ffffff',
fontSize: '1.25rem',
fontWeight: 400,
minWidth: '6rem',
padding: '.75rem .75rem',
textAlign: 'center',
position: 'relative',
display: 'inline-block',
zIndex: 1,
':disabled': {
opacity: 0.3
},
':focus': {
opacity: 0.7
},
':hover label': {
opacity: 0.7
},
':hover div': {
display: 'block'
}
}, styles));
var _listStyles = cxs(_objectSpread({
display: 'none',
position: 'absolute',
minWidth: '10rem',
marginTop: '.84rem'
}, listStyles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), React.createElement("label", null, label), React.createElement("div", {
className: "".concat(_listStyles, " ").concat(className || '')
}, children));
};
MenuDropdownItem.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
label: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
listStyles: PropTypes.object,
theme: PropTypes.object,
type: PropTypes.string,
otherProps: PropTypes.object
};
MenuDropdownItem.defaultProps = {
type: 'primary'
};
var MenuDropdownItem$1 = withTheme(MenuDropdownItem);
var MenuDropdownSubItem = function MenuDropdownSubItem(props) {
var className = props.className,
children = props.children,
styles = props.styles,
theme = props.theme,
type = props.type,
otherProps = _objectWithoutProperties(props, ["className", "children", "styles", "theme", "type"]);
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme[type + 'Color'] : '#000000',
borderRadius: theme ? theme.borderRadius : 0,
border: 0,
color: theme ? isDarkColor(theme[type + 'Color']) ? '#ffffff' : '#000000' : '#ffffff',
fontSize: '1.25rem',
fontWeight: 400,
minWidth: '6rem',
padding: '.75rem .75rem',
textAlign: 'left',
display: 'block',
zIndex: 2,
':disabled': {
opacity: 0.3
},
':focus': {
opacity: 0.7
},
':hover': {
opacity: 0.7
}
}, styles));
return React.createElement("span", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
MenuDropdownSubItem.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
type: PropTypes.string,
otherProps: PropTypes.object
};
MenuDropdownSubItem.defaultProps = {
type: 'primary'
};
var MenuDropdownSubItem$1 = withTheme(MenuDropdownSubItem);
var Modal = function Modal(props) {
var className = props.className,
children = props.children,
isOpen = props.isOpen,
styles = props.styles,
otherProps = _objectWithoutProperties(props, ["className", "children", "isOpen", "styles"]);
var _styles = cxs(_objectSpread({
display: isOpen ? 'visible' : 'none',
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)'
}, styles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
Modal.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
isOpen: PropTypes.bool.isRequired,
styles: PropTypes.object,
otherProps: PropTypes.object
};
var ModalOverlay = function ModalOverlay(props) {
var className = props.className,
children = props.children,
isOpen = props.isOpen,
styles = props.styles,
otherProps = _objectWithoutProperties(props, ["className", "children", "isOpen", "styles"]);
var _styles = cxs(_objectSpread({
display: isOpen ? 'visible' : 'none',
backgroundColor: 'rgba(0,0,0,0.6)',
position: 'fixed',
zIndex: 1,
left: 0,
top: 0,
width: '100%',
height: '100%',
overflow: 'auto'
}, styles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
ModalOverlay.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
isOpen: PropTypes.bool.isRequired,
styles: PropTypes.object,
otherProps: PropTypes.object
};
var Radio = function Radio(props) {
var checked = props.checked,
className = props.className,
containerClassName = props.containerClassName,
inputClassName = props.inputClassName,
styles = props.styles,
containerStyles = props.containerStyles,
inputStyles = props.inputStyles,
onChange = props.onChange,
otherProps = _objectWithoutProperties(props, ["checked", "className", "containerClassName", "inputClassName", "styles", "containerStyles", "inputStyles", "onChange"]);
var _containerStyles = cxs(_objectSpread({
display: 'block',
position: 'relative',
paddingLeft: '1.563rem',
height: '1.563rem',
cursor: 'pointer'
}, containerStyles));
var _inputStyles = cxs(_objectSpread({
position: 'absolute',
opacity: 0,
cursor: 'pointer'
}, inputStyles));
var _styles = cxs(_objectSpread({
backgroundColor: checked ? '#2196f3' : '#dcdcdc',
borderRadius: '50%',
position: 'absolute',
top: 0,
left: 0,
width: '1.563rem',
height: '1.563rem',
zIndex: 0,
':hover': {
opacity: checked ? 1 : 0.7
},
':after': {
content: '""',
position: 'absolute',
display: checked ? 'block' : 'none',
top: '0.5625rem',
left: '0.5625rem',
width: '0.5rem',
height: '0.5rem',
borderRadius: '50%',
backgroundColor: '#ffffff'
}
}, styles));
return React.createElement("label", {
className: "".concat(_containerStyles, " ").concat(containerClassName || ''),
"aria-hidden": true
}, React.createElement("input", _extends({
className: "".concat(_inputStyles, " ").concat(inputClassName || ''),
type: "radio",
onChange: onChange,
checked: checked
}, otherProps)), React.createElement("span", {
className: "".concat(_styles, " ").concat(className || '')
}));
};
Radio.propTypes = {
checked: PropTypes.bool.isRequired,
className: PropTypes.string,
containerClassName: PropTypes.string,
inputClassName: PropTypes.string,
styles: PropTypes.object,
containerStyles: PropTypes.object,
inputStyles: PropTypes.object,
onChange: PropTypes.func.isRequired,
otherProps: PropTypes.object
};
var Select = function Select(props) {
var children = props.children,
className = props.className,
styles = props.styles,
theme = props.theme,
outerClassName = props.outerClassName,
outerStyles = props.outerStyles,
otherProps = _objectWithoutProperties(props, ["children", "className", "styles", "theme", "outerClassName", "outerStyles"]);
var _outerStyles = cxs(_objectSpread({
border: '0.0625rem solid #dcdcdc',
borderRadius: theme ? theme.borderRadius : 0,
display: 'inline-block',
padding: '.25rem',
minWidth: '5rem'
}, outerStyles));
var _styles = cxs(_objectSpread({
backgroundColor: theme ? theme.backgroundColor : '#ffffff',
border: 0,
fontFamily: theme ? theme.fontFamily : 'Helvetica Neue, Helvetica, Arial, sans-serif',
fontSize: '1.25rem'
}, styles));
return React.createElement("div", {
className: "".concat(_outerStyles, " ").concat(outerClassName || '')
}, React.createElement("select", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children));
};
Select.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
outerClassName: PropTypes.string,
outerStyles: PropTypes.object,
otherProps: PropTypes.object
};
var Select$1 = withTheme(Select);
var Option = function Option(props) {
var children = props.children,
className = props.className,
styles = props.styles,
otherProps = _objectWithoutProperties(props, ["children", "className", "styles"]);
var _styles = cxs(_objectSpread({
fontSize: '1.25rem'
}, styles));
return React.createElement("option", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), children);
};
Option.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
className: PropTypes.string,
styles: PropTypes.object,
otherProps: PropTypes.object
};
var Textarea = function Textarea(props) {
var className = props.className,
styles = props.styles,
theme = props.theme,
value = props.value,
onChange = props.onChange,
otherProps = _objectWithoutProperties(props, ["className", "styles", "theme", "value", "onChange"]);
var _styles = cxs(_objectSpread({
borderRadius: theme ? theme.borderRadius : 0,
fontFamily: theme ? theme.fontFamily : 'Helvetica Neue, Helvetica, Arial, sans-serif',
fontSize: '1.25rem'
}, styles));
return React.createElement("textarea", _extends({
className: "".concat(_styles, " ").concat(className || ''),
onChange: onChange,
value: value
}, otherProps));
};
Textarea.propTypes = {
className: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
otherProps: PropTypes.object
};
var Textarea$1 = withTheme(Textarea);
var getPositionStyles = function getPositionStyles(position) {
if (position === 'top') {
return {
width: '7.5rem',
bottom: '190%',
left: '50%',
marginLeft: '-3.75rem',
':before': {
content: '""',
position: 'absolute',
bottom: '-1.6rem',
right: '40%',
width: 0,
height: 0,
borderLeft: '0.8125rem solid transparent',
borderTop: '1.625rem solid #000000',
borderRight: '0.8125rem solid transparent'
}
};
}
if (position === 'left') {
return {
top: '-0.3125rem',
right: '125%',
':before': {
content: '""',
position: 'absolute',
left: '100%',
top: '1rem',
width: 0,
height: 0,
borderTop: '0.8125rem solid transparent',
borderLeft: '1.625rem solid #000000',
borderBottom: '0.8125rem solid transparent'
}
};
}
if (position === 'bottom') {
return {
width: '7.5rem',
top: '190%',
left: '50%',
marginLeft: '-3.75rem',
':before': {
content: '""',
position: 'absolute',
top: '-1.6rem',
right: '40%',
width: 0,
height: 0,
borderLeft: '0.8125rem solid transparent',
borderBottom: '1.625rem solid #000000',
borderRight: '0.8125rem solid transparent'
}
};
}
return {
top: '-1rem',
left: '125%',
':before': {
content: '""',
position: 'absolute',
right: '100%',
top: '1rem',
width: 0,
height: 0,
borderTop: '0.8125rem solid transparent',
borderRight: '1.625rem solid #000000',
borderBottom: '0.8125rem solid transparent'
}
};
};
var Tooltip = function Tooltip(props) {
var className = props.className,
textClassName = props.textClassName,
styles = props.styles,
theme = props.theme,
textStyles = props.textStyles,
tooltipText = props.tooltipText,
label = props.label,
textPosition = props.textPosition,
otherProps = _objectWithoutProperties(props, ["className", "textClassName", "styles", "theme", "textStyles", "tooltipText", "label", "textPosition"]);
var _textStyles = cxs(_objectSpread({
display: 'none',
width: '120px',
backgroundColor: '#000000',
color: '#ffffff',
textAlign: 'center',
borderRadius: theme ? theme.borderRadius : 0,
padding: '.25rem 0',
position: 'absolute',
zIndex: 1
}, getPositionStyles(textPosition || ''), textStyles));
var _styles = cxs(_objectSpread({
position: 'relative',
display: 'inline-block',
':hover span': {
display: 'inline'
}
}, styles));
return React.createElement("div", _extends({
className: "".concat(_styles, " ").concat(className || '')
}, otherProps), label, React.createElement("span", {
className: "".concat(_textStyles, " ").concat(textClassName || '')
}, tooltipText));
};
Tooltip.propTypes = {
className: PropTypes.string,
textClassName: PropTypes.string,
styles: PropTypes.object,
theme: PropTypes.object,
textStyles: PropTypes.object,
tooltipText: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
label: PropTypes.oneOfType([PropTypes.string, function () {
return (typeof PropTypes.node === "function" ? PropTypes.node : PropTypes.shape(PropTypes.node)).apply(this, arguments);
}]).isRequired,
textPosition: PropTypes.string,
otherProps: PropTypes.object
};
Tooltip.defaultProps = {
position: 'right'
};
var Tooltip$1 = withTheme(Tooltip);
var index = {
themeContext: themeContext,
ThemeProvider: ThemeProvider,
withTheme: withTheme,
A: A,
Alert: Alert$1,
Background: Background$1,
Breadcrumb: Breadcrumb,
BreadcrumbItem: BreadcrumbItem$1,
Button: Button$1,
Card: Card$1,
CardHeader: CardHeader$1,
CardContent: CardContent$1,
CardFooter: CardFooter$1,
Checkbox: Checkbox$1,
Input: Input$1,
Label: Label$1,
Menu: Menu$1,
MenuItem: MenuItem$1,
MenuDropdownItem: MenuDropdownItem$1,
MenuDropdownSubItem: MenuDropdownSubItem$1,
Modal: Modal,
ModalOverlay: ModalOverlay,
Radio: Radio,
Select: Select$1,
Textarea: Textarea$1,
Tooltip: Tooltip$1,
Option: Option
};
exports.themeContext = themeContext;
exports.ThemeProvider = ThemeProvider;
exports.withTheme = withTheme;
exports.A = A;
exports.Alert = Alert$1;
exports.Background = Background$1;
exports.Breadcrumb = Breadcrumb;
exports.BreadcrumbItem = BreadcrumbItem$1;
exports.Button = Button$1;
exports.Card = Card$1;
exports.CardHeader = CardHeader$1;
exports.CardContent = CardContent$1;
exports.CardFooter = CardFooter$1;
exports.Checkbox = Checkbox$1;
exports.Input = Input$1;
exports.Label = Label$1;
exports.Menu = Menu$1;
exports.MenuItem = MenuItem$1;
exports.MenuDropdownItem = MenuDropdownItem$1;
exports.MenuDropdownSubItem = MenuDropdownSubItem$1;
exports.Modal = Modal;
exports.ModalOverlay = ModalOverlay;
exports.Radio = Radio;
exports.Select = Select$1;
exports.Textarea = Textarea$1;
exports.Tooltip = Tooltip$1;
exports.Option = Option;
exports.default = index;