breakfast-ui
Version:
Your tasty component library
761 lines (681 loc) • 33.6 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 React = require('react');
var React__default = _interopDefault(React);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : 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 _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 styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Manrope:wght@200;300;400;500;600;700;800&display=swap\");body,button{font-family:Manrope,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:3rem;font-weight:500}.lds-ellipsis{align-items:center;display:inline-block;height:1.5em;margin:auto 7px;position:relative;width:1.5em}.lds-ellipsis div{-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0);border-radius:50%;bottom:0;height:.3em;margin:auto;position:absolute;top:0;width:.3em}.lds-ellipsis div:first-child{-webkit-animation:lds-ellipsis1 .6s infinite;animation:lds-ellipsis1 .6s infinite;left:.2em}.lds-ellipsis div:nth-child(2){left:.2em}.lds-ellipsis div:nth-child(2),.lds-ellipsis div:nth-child(3){-webkit-animation:lds-ellipsis2 .6s infinite;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:.8em}.lds-ellipsis div:nth-child(4){-webkit-animation:lds-ellipsis3 .6s infinite;animation:lds-ellipsis3 .6s infinite;left:1.4em}@-webkit-keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(.6em)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(.6em)}}";
styleInject(css_248z);
var css_248z$1 = ".simple-btn{align-items:center;background-color:#000;border:none;border-radius:.8rem;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:.8rem}.primary{background-color:#f65a83}.secondary{background-color:#65c18c}.yummy{background-color:#f68989}.chocolatey{background-color:#a64b2a}.dark{background-color:#2c3333}.xs{border-radius:.5rem;font-size:x-small;padding:.5rem}.sm{border-radius:.6rem;font-size:small}.md{border-radius:.7rem;font-size:medium}.lg{font-size:large;padding:.9rem}.xl{font-size:x-large;padding:1.1rem}.xxl{font-size:xx-large;padding:1.3rem}";
styleInject(css_248z$1);
var _excluded = ["btnType", "title", "textColor", "bgColor", "btnSize", "isLoading", "styles", "className"];
var Button = function Button(_ref) {
var _ref$btnType = _ref.btnType,
btnType = _ref$btnType === void 0 ? 'primary' : _ref$btnType,
_ref$title = _ref.title,
title = _ref$title === void 0 ? 'Tasty !' : _ref$title,
_ref$textColor = _ref.textColor,
textColor = _ref$textColor === void 0 ? 'white' : _ref$textColor,
bgColor = _ref.bgColor,
_ref$btnSize = _ref.btnSize,
btnSize = _ref$btnSize === void 0 ? 'md' : _ref$btnSize,
_ref$isLoading = _ref.isLoading,
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
styles = _ref.styles,
className = _ref.className,
otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
// const styles = {
// color: textColor,
// backgroundColor: bgColor,
// fontSize: btnSize,
// };
return React__default.createElement("button", Object.assign({
className: "simple-btn " + btnSize + " " + btnType + " " + className,
style: _extends({
color: textColor,
backgroundColor: bgColor
}, styles)
}, otherAttributes), title, React__default.createElement("div", {
className: "lds-ellipsis",
style: {
display: isLoading ? 'inline-block' : 'none'
}
}, React__default.createElement("div", {
style: {
background: textColor
}
}), React__default.createElement("div", {
style: {
background: textColor
}
}), React__default.createElement("div", {
style: {
background: textColor
}
}), React__default.createElement("div", {
style: {
background: textColor
}
})));
};
// export {Button};
var css_248z$2 = ".simple-outlined-btn{align-items:center;background-color:#fff;border:3px solid #f65a83;border-radius:.8rem;color:#f65a83;cursor:pointer;display:flex;justify-content:center;padding:.8rem}.setDefaultColor{background-color:#f65a83}.outlined-btn-primary{border:3px solid #f65a83;color:#f65a83}.outlined-btn-secondary{border:3px solid #65c18c;color:#65c18c}.outlined-btn-yummy{border:3px solid #f68989;color:#f68989}.outlined-btn-chocolatey{border:3px solid #a64b2a;color:#a64b2a}.outlined-btn-dark{border:3px solid #2c3333;color:#2c3333}.outlined-btn-loader-primary{background-color:#f65a83}.outlined-btn-loader-secondary{background-color:#65c18c}.outlined-btn-loader-yummy{background-color:#f68989}.outlined-btn-loader-chocolatey{background-color:#a64b2a}.outlined-btn-loader-dark{background-color:#2c3333}";
styleInject(css_248z$2);
var OutlinedButton = function OutlinedButton(_ref) {
var _ref$title = _ref.title,
title = _ref$title === void 0 ? "Tasty !" : _ref$title,
btnType = _ref.btnType,
_ref$color = _ref.color,
color = _ref$color === void 0 ? "" : _ref$color,
_ref$btnSize = _ref.btnSize,
btnSize = _ref$btnSize === void 0 ? "md" : _ref$btnSize,
_ref$isLoading = _ref.isLoading,
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
styles = _ref.styles;
return React__default.createElement("button", {
className: "simple-outlined-btn " + getButtonType[btnType] + " " + btnSize,
style: _extends({
border: "3px solid " + color,
color: color
}, styles)
}, title, React__default.createElement("div", {
className: "lds-ellipsis",
style: {
display: isLoading ? "inline-block" : "none"
}
}, React__default.createElement("div", {
className: (color === "" && "setDefaultColor") + " " + getColorType[btnType],
style: {
background: color
}
}), React__default.createElement("div", {
className: (color === "" && "setDefaultColor") + " " + getColorType[btnType],
style: {
background: color
}
}), React__default.createElement("div", {
className: (color === "" && "setDefaultColor") + " " + getColorType[btnType],
style: {
background: color
}
}), React__default.createElement("div", {
className: (color === "" && "setDefaultColor") + " " + getColorType[btnType],
style: {
background: color
}
})));
};
var getButtonType = {
primary: "outlined-btn-primary",
secondary: "outlined-btn-secondary",
yummy: "outlined-btn-yummy",
chocolatey: "outlined-btn-chocolatey",
dark: "outlined-btn-dark"
};
var getColorType = {
primary: "outlined-btn-loader-primary",
secondary: "outlined-btn-loader-secondary",
yummy: "outlined-btn-loader-yummy",
chocolatey: "outlined-btn-loader-chocolatey",
dark: "outlined-btn-loader-dark"
};
var css_248z$3 = ".circular-avatar-img{border:tra;border-radius:50%;-o-object-fit:cover;object-fit:cover}.circular-avatar-shadow{box-shadow:0 0 20px 3px #969696}";
styleInject(css_248z$3);
var _excluded$1 = ["url", "size", "border", "borderColor", "shadow", "styles"];
var CircularAvatar = function CircularAvatar(_ref) {
var _ref$url = _ref.url,
url = _ref$url === void 0 ? 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=600' : _ref$url,
_ref$size = _ref.size,
size = _ref$size === void 0 ? '100px' : _ref$size,
_ref$border = _ref.border,
border = _ref$border === void 0 ? true : _ref$border,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? '#181818' : _ref$borderColor,
_ref$shadow = _ref.shadow,
shadow = _ref$shadow === void 0 ? false : _ref$shadow,
styles = _ref.styles,
others = _objectWithoutPropertiesLoose(_ref, _excluded$1);
return React__default.createElement("img", Object.assign({
className: "circular-avatar-img " + (shadow ? 'circular-avatar-shadow' : ''),
src: url,
loading: "lazy",
alt: "",
style: _extends({
width: size,
height: size,
border: border ? '3px solid ' + borderColor : '0px solid transparent'
}, styles)
}, others));
};
var css_248z$4 = ".rounded-avatar-img{border:tra;border-radius:20%;-o-object-fit:cover;object-fit:cover}.rounded-avatar-shadow{box-shadow:0 0 20px 3px #969696}";
styleInject(css_248z$4);
var _excluded$2 = ["url", "size", "border", "borderColor", "shadow", "styles"];
var RoundedAvatar = function RoundedAvatar(_ref) {
var _ref$url = _ref.url,
url = _ref$url === void 0 ? "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=600" : _ref$url,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "100px" : _ref$size,
_ref$border = _ref.border,
border = _ref$border === void 0 ? true : _ref$border,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? "#181818" : _ref$borderColor,
_ref$shadow = _ref.shadow,
shadow = _ref$shadow === void 0 ? false : _ref$shadow,
styles = _ref.styles,
others = _objectWithoutPropertiesLoose(_ref, _excluded$2);
return React__default.createElement("img", Object.assign({
className: "rounded-avatar-img " + (shadow ? "rounded-avatar-shadow" : ""),
src: url,
loading: "lazy",
alt: "",
style: _extends({
width: size,
height: size,
border: border ? "3px solid " + borderColor : "0px solid transparent"
}, styles)
}, others));
};
var css_248z$5 = ".circular-loader{-webkit-animation:rotation 1s linear infinite;animation:rotation 1s linear infinite;border-radius:50%;border-right:3px solid transparent;box-sizing:border-box;display:inline-block;height:1em;margin:0;width:1em}@-webkit-keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}";
styleInject(css_248z$5);
var _excluded$3 = ["size", "color", "styles"];
var CircularLoader = function CircularLoader(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? "30px" : _ref$size,
_ref$color = _ref.color,
color = _ref$color === void 0 ? "#FA7070" : _ref$color,
styles = _ref.styles,
others = _objectWithoutPropertiesLoose(_ref, _excluded$3);
return React__default.createElement("div", Object.assign({
className: "circular-loader",
style: _extends({
borderTop: "3px solid " + color,
fontSize: size
}, styles)
}, others));
};
var css_248z$6 = "div.spinner{background-color:transparent;display:inline-block;height:1em;padding:.2em;position:relative;width:1em}div.spinner div{-webkit-animation:fade 1s linear infinite;animation:fade 1s linear infinite;border-radius:30%;box-shadow:0 0 3px rgba(0,0,0,.2);height:16%;left:49%;opacity:0;position:absolute;top:43%;width:6%}@-webkit-keyframes fade{0%{opacity:1}to{opacity:.25}}@keyframes fade{0%{opacity:1}to{opacity:.25}}div.spinner div.bar1{-webkit-animation-delay:0s;animation-delay:0s;transform:rotate(0deg) translateY(-130%)}div.spinner div.bar2{-webkit-animation-delay:-.9167s;animation-delay:-.9167s;transform:rotate(30deg) translateY(-130%)}div.spinner div.bar3{-webkit-animation-delay:-.833s;animation-delay:-.833s;transform:rotate(60deg) translateY(-130%)}div.spinner div.bar4{-webkit-animation-delay:-.7497s;animation-delay:-.7497s;transform:rotate(90deg) translateY(-130%)}div.spinner div.bar5{-webkit-animation-delay:-.667s;animation-delay:-.667s;transform:rotate(120deg) translateY(-130%)}div.spinner div.bar6{-webkit-animation-delay:-.5837s;animation-delay:-.5837s;transform:rotate(150deg) translateY(-130%)}div.spinner div.bar7{-webkit-animation-delay:-.5s;animation-delay:-.5s;transform:rotate(180deg) translateY(-130%)}div.spinner div.bar8{-webkit-animation-delay:-.4167s;animation-delay:-.4167s;transform:rotate(210deg) translateY(-130%)}div.spinner div.bar9{-webkit-animation-delay:-.333s;animation-delay:-.333s;transform:rotate(240deg) translateY(-130%)}div.spinner div.bar10{-webkit-animation-delay:-.2497s;animation-delay:-.2497s;transform:rotate(270deg) translateY(-130%)}div.spinner div.bar11{-webkit-animation-delay:-.167s;animation-delay:-.167s;transform:rotate(300deg) translateY(-130%)}div.spinner div.bar12{-webkit-animation-delay:-.0833s;animation-delay:-.0833s;transform:rotate(330deg) translateY(-130%)}";
styleInject(css_248z$6);
var _excluded$4 = ["size", "color", "styles"];
var SpinnerLoader = function SpinnerLoader(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? '2rem' : _ref$size,
_ref$color = _ref.color,
color = _ref$color === void 0 ? '#FA7070' : _ref$color,
styles = _ref.styles,
others = _objectWithoutPropertiesLoose(_ref, _excluded$4);
return React__default.createElement("div", Object.assign({
className: "spinner",
style: _extends({
fontSize: size
}, styles)
}, others), React__default.createElement("div", {
className: "bar1",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar2",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar3",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar4",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar5",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar6",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar7",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar8",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar9",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar10",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar11",
style: {
background: color
}
}), React__default.createElement("div", {
className: "bar12",
style: {
background: color
}
}));
};
var _excluded$5 = ["size", "color", "styles"];
var EllipseLoader = function EllipseLoader(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? '2rem' : _ref$size,
_ref$color = _ref.color,
color = _ref$color === void 0 ? '#FA7070' : _ref$color,
styles = _ref.styles,
other = _objectWithoutPropertiesLoose(_ref, _excluded$5);
return React__default.createElement("div", Object.assign({
className: "lds-ellipsis",
style: _extends({
fontSize: size,
marginRight: '1rem',
display: 'inline-block'
}, styles)
}, other), React__default.createElement("div", {
style: {
background: color
}
}), React__default.createElement("div", {
style: {
background: color
}
}), React__default.createElement("div", {
style: {
background: color
}
}), React__default.createElement("div", {
style: {
background: color
}
}));
};
var css_248z$7 = "@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Manrope:wght@200;300;400;500;600;700;800&display=swap\");.button-textbox{align-items:center;display:flex;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.button-textbox input{border:1px solid #b4b4b4;border-radius:0;display:block;font-family:Manrope,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0 2rem 0 0;outline:none;padding:1rem;transition:border .2s ease-in-out;width:250px;z-index:1}.button-textbox button{border:none;border-radius:.5rem;cursor:pointer;font-size:1rem;padding:.5rem 1rem;position:absolute;right:0;transition:all .2s ease;z-index:2}.button-textbox button:hover{transform:scale(1.1)}.button-textbox-section span{color:red;display:block;font-size:1rem;margin:1rem .3rem}";
styleInject(css_248z$7);
var _excluded$6 = ["placeholder", "styles", "buttonTextColor", "accentColor", "errorMessage", "showError"];
var ButtonTextBox = function ButtonTextBox(_ref) {
var _ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? 'Your email' : _ref$placeholder,
styles = _ref.styles,
_ref$buttonTextColor = _ref.buttonTextColor,
buttonTextColor = _ref$buttonTextColor === void 0 ? '#ffffff' : _ref$buttonTextColor,
_ref$accentColor = _ref.accentColor,
accentColor = _ref$accentColor === void 0 ? '#65C18C' : _ref$accentColor,
_ref$errorMessage = _ref.errorMessage,
errorMessage = _ref$errorMessage === void 0 ? 'email should not be left empty' : _ref$errorMessage,
_ref$showError = _ref.showError,
showError = _ref$showError === void 0 ? true : _ref$showError,
others = _objectWithoutPropertiesLoose(_ref, _excluded$6);
var _React$useState = React__default.useState(false),
active = _React$useState[0],
setActive = _React$useState[1];
return React__default.createElement("div", {
className: "button-textbox-section"
}, React__default.createElement("div", {
className: "button-textbox"
}, React__default.createElement("input", Object.assign({
type: "text",
className: "",
placeholder: placeholder,
onFocus: function onFocus(e) {
setActive(true);
e.currentTarget.style.border = "3px solid " + accentColor;
},
onBlur: function onBlur(e) {
setActive(false);
e.currentTarget.style.border = "1px solid #b4b4b4";
},
style: _extends({}, styles)
}, others)), React__default.createElement("button", {
className: "",
style: {
background: active ? accentColor : '#CFD2CF',
color: active ? buttonTextColor : 'black'
}
}, "Send")), showError && React__default.createElement("span", null, errorMessage));
};
var css_248z$8 = ".MaterialTextBox{display:block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-bottom:0;position:relative;transition:all .5s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.MaterialTextBox label{bottom:10%;font-size:1rem;margin:0 0 0 .8rem;pointer-events:none;position:absolute}@-webkit-keyframes animUp{0%{bottom:10%;font-size:1rem}to{bottom:67%;font-size:.8rem}}@keyframes animUp{0%{bottom:10%;font-size:1rem}to{bottom:67%;font-size:.8rem}}@-webkit-keyframes animDown{0%{bottom:67%;font-size:.8rem}to{bottom:10%;font-size:1rem}}@keyframes animDown{0%{bottom:67%;font-size:.8rem}to{bottom:10%;font-size:1rem}}.MaterialTextBox input{border:none;border-bottom:2px solid #737373;display:block;font-size:1.5rem;margin:0;padding:1.8rem 1rem .5rem .7rem;transition:all .5s ease;width:250px}.MaterialTextBox input:focus{border-radius:.5rem;outline:none}.MaterialTextBoxSection small{color:red;display:block;font-size:1rem;margin:.5rem}";
styleInject(css_248z$8);
var _excluded$7 = ["label", "accentColor", "borderColor", "styles", "errorMessage", "showError"];
var MaterialTextBox = function MaterialTextBox(_ref) {
var _ref$label = _ref.label,
label = _ref$label === void 0 ? "your name" : _ref$label,
_ref$accentColor = _ref.accentColor,
accentColor = _ref$accentColor === void 0 ? "rgb(223, 244, 247)" : _ref$accentColor,
_ref$borderColor = _ref.borderColor,
borderColor = _ref$borderColor === void 0 ? "rgb(97, 174, 184)" : _ref$borderColor,
styles = _ref.styles,
_ref$errorMessage = _ref.errorMessage,
errorMessage = _ref$errorMessage === void 0 ? "name should not be left empty" : _ref$errorMessage,
_ref$showError = _ref.showError,
showError = _ref$showError === void 0 ? false : _ref$showError,
other = _objectWithoutPropertiesLoose(_ref, _excluded$7);
var _useState = React.useState(),
labelStyle = _useState[0],
setLabelStyle = _useState[1];
return React__default.createElement("div", {
className: "MaterialTextBoxSection"
}, React__default.createElement("div", {
className: "MaterialTextBox"
}, React__default.createElement("label", {
htmlFor: "in",
style: labelStyle
}, label), React__default.createElement("input", Object.assign({
type: "text",
name: "in",
className: "",
style: _extends({}, styles)
}, other, {
onFocus: function onFocus(e) {
setLabelStyle({
animation: "animUp .3s forwards"
});
e.currentTarget.style.backgroundColor = accentColor;
e.currentTarget.style.border = "2px solid " + borderColor;
},
onBlur: function onBlur(e) {
if (e.currentTarget.value === "") {
setLabelStyle({
animation: "animDown .3s forwards"
});
e.currentTarget.style.backgroundColor = "white";
e.currentTarget.style.border = "0";
e.currentTarget.style.borderBottom = "2px solid #737373";
}
}
}))), showError && React__default.createElement("small", null, errorMessage));
};
var css_248z$9 = ".textbox-simple{border:2px solid #c5c5c5;border-radius:10px;flex-direction:row;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.textbox-simple,.textbox-simple .label-box{align-items:center;display:flex;transition:all .3s ease}.textbox-simple .label-box{background-color:#efefef;border-radius:8.3px 0 0 8.3px;height:50px;padding:0 1rem}.change-border .label-box{background-color:#65c18c}.change-border .label-box h3{color:#fff}.textbox-simple-label-end{flex-direction:row-reverse}.textbox-simple-label-end .label-box{border-radius:0 8.3px 8.3px 0}.change-border{border:2px solid #65c18c}.textbox-simple h3{color:#979797;font-size:1rem;font-weight:500;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-top:14px;padding:0}.textbox-simple input{border:none;border-radius:.5rem;display:inline-block;font-size:1rem;height:50px;margin:0 0 0 1px;padding:0 1rem}.textbox-simple input:focus{outline:none}.textbox-simple-section span{color:red;font-size:1rem;margin:1rem .3rem}";
styleInject(css_248z$9);
var _excluded$8 = ["label", "labelColor", "activeColor", "width", "errorMessage", "showError", "labelPosition"];
var TextBoxSimple = function TextBoxSimple(_ref) {
var _ref$label = _ref.label,
label = _ref$label === void 0 ? "Your Name" : _ref$label,
_ref$labelColor = _ref.labelColor,
labelColor = _ref$labelColor === void 0 ? "#ffffff" : _ref$labelColor,
_ref$activeColor = _ref.activeColor,
activeColor = _ref$activeColor === void 0 ? "#65C18C" : _ref$activeColor,
width = _ref.width,
_ref$errorMessage = _ref.errorMessage,
errorMessage = _ref$errorMessage === void 0 ? "name should not be left empty !" : _ref$errorMessage,
_ref$showError = _ref.showError,
showError = _ref$showError === void 0 ? false : _ref$showError,
_ref$labelPosition = _ref.labelPosition,
labelPosition = _ref$labelPosition === void 0 ? "start" : _ref$labelPosition,
otherAttributes = _objectWithoutPropertiesLoose(_ref, _excluded$8);
// const [border, setBorder] = React.useState("");
var _React$useState = React.useState(false),
isFocused = _React$useState[0],
setIsFocused = _React$useState[1]; // let color = activeColor ? activeColor : " #65C18C";
var styleWhenActive = {
border: "2px solid " + activeColor
};
var styleWhenNotActive = {
border: "2px solid #c5c5c5"
};
return React.createElement("div", {
className: "textbox-simple-section"
}, React.createElement("div", {
className: "textbox-simple " + (isFocused && "change-border") + " " + (labelPosition === "end" ? "textbox-simple-label-end" : ""),
style: _extends({
width: width
}, isFocused ? styleWhenActive : styleWhenNotActive)
}, React.createElement("div", {
className: "label-box",
style: {
backgroundColor: isFocused ? activeColor : "#efefef"
}
}, React.createElement("h3", {
style: {
color: isFocused ? labelColor : "#979797"
}
}, label)), React.createElement("input", Object.assign({
className: "",
type: "text",
placeholder: "",
name: "name",
id: "",
onFocus: function onFocus() {
setIsFocused(true);
},
onBlur: function onBlur() {
setIsFocused(false);
}
}, otherAttributes))), React.createElement("span", {
style: {
display: showError ? "block" : "none"
}
}, errorMessage));
};
var css_248z$a = ".description{display:block;font-size:1rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.description-cap{font-size:2em;font-weight:700}";
styleInject(css_248z$a);
var randomText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.";
var Description = function Description(_ref) {
var _ref$title = _ref.title,
title = _ref$title === void 0 ? randomText : _ref$title,
color = _ref.color,
size = _ref.size,
_ref$cap = _ref.cap,
cap = _ref$cap === void 0 ? false : _ref$cap,
capColor = _ref.capColor,
styles = _ref.styles;
return React__default.createElement("p", {
className: "description",
style: _extends({
color: color,
fontSize: size
}, styles)
}, React__default.createElement("span", {
className: "" + (cap && "description-cap"),
style: {
color: capColor
}
}, title.charAt(0)), title.slice(1));
};
var css_248z$b = ".error-text{align-items:center;color:#eb1d36;display:flex;font-size:1.5rem;margin:0}.error-text-icon{display:inline-block;height:1.3em;margin-left:1rem;width:1.3em}";
styleInject(css_248z$b);
var ErrorText = function ErrorText(_ref) {
var _ref$title = _ref.title,
title = _ref$title === void 0 ? 'Oops ! email validation failed' : _ref$title,
_ref$icon = _ref.icon,
icon = _ref$icon === void 0 ? 'type1' : _ref$icon,
_ref$showIcon = _ref.showIcon,
showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
styles = _ref.styles;
return React__default.createElement("p", {
style: styles,
className: "error-text"
}, title, showIcon && React__default.createElement("img", {
className: "error-text-icon",
src: icon === 'type1' || 'type2' || 'type3' ? getIcon[icon] : icon,
alt: ""
}));
};
var getIcon = {
type1: 'https://i.postimg.cc/YqbZnzjY/error1.png',
type2: 'https://i.postimg.cc/ry9PsN13/error2.png',
type3: 'https://i.postimg.cc/VkJG7yxP/error3.png'
};
var css_248z$c = ".heading{display:block;font-size:3.5rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}";
styleInject(css_248z$c);
var _excluded$9 = ["title", "size", "color", "underlined", "styles"];
var Heading = function Heading(_ref) {
var _ref$title = _ref.title,
title = _ref$title === void 0 ? "This is a yummy text !" : _ref$title,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "large" : _ref$size,
color = _ref.color,
_ref$underlined = _ref.underlined,
underlined = _ref$underlined === void 0 ? false : _ref$underlined,
styles = _ref.styles,
others = _objectWithoutPropertiesLoose(_ref, _excluded$9);
return React__default.createElement("div", null, React__default.createElement("h1", Object.assign({
className: "heading",
style: _extends({
fontSize: calc(size),
color: color,
textDecoration: underlined ? "underline" : "none"
}, styles)
}, others), title));
};
var calc = function calc(size) {
if (size === "extraLarge" || size === "large" || size === "medium") {
return getSize[size];
} else {
return size;
}
};
var getSize = {
"extra-large": "3.5rem",
large: "2.5rem",
medium: "1.5rem"
};
var css_248z$d = ".loader-text{align-items:center;display:flex;font-size:1rem;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.loader-start{flex-direction:row-reverse}";
styleInject(css_248z$d);
var _excluded$a = ["text", "loaderPosition", "color", "isLoading", "fontSize", "styles"];
var LoaderText = function LoaderText(_ref) {
var _ref$text = _ref.text,
text = _ref$text === void 0 ? 'This is a sample loading text' : _ref$text,
_ref$loaderPosition = _ref.loaderPosition,
loaderPosition = _ref$loaderPosition === void 0 ? 'end' : _ref$loaderPosition,
_ref$color = _ref.color,
color = _ref$color === void 0 ? '#E94560' : _ref$color,
_ref$isLoading = _ref.isLoading,
isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
_ref$fontSize = _ref.fontSize,
fontSize = _ref$fontSize === void 0 ? '1rem' : _ref$fontSize,
styles = _ref.styles,
others = _objectWithoutPropertiesLoose(_ref, _excluded$a);
return React__default.createElement("p", Object.assign({
className: "loader-text " + (loaderPosition === 'start' && 'loader-start'),
style: _extends({
color: color,
fontSize: fontSize
}, styles)
}, others), text, isLoading && React__default.createElement("div", {
className: "lds-ellipsis",
style: {
marginRight: '1rem',
display: isLoading ? 'inline-block' : 'none'
}
}, React__default.createElement("div", {
style: {
background: color
}
}), React__default.createElement("div", {
style: {
background: color
}
}), React__default.createElement("div", {
style: {
background: color
}
}), React__default.createElement("div", {
style: {
background: color
}
})));
};
var css_248z$e = ".success-text{align-items:center;color:#4da527;display:flex;font-size:1.5rem;margin:0}.success-text-icon{display:inline-block;height:1.3em;margin-left:1rem;width:1.3em}";
styleInject(css_248z$e);
var _excluded$b = ["title", "icon", "showIcon", "styles"];
var SuccessText = function SuccessText(_ref) {
var _ref$title = _ref.title,
title = _ref$title === void 0 ? 'your email was updated successfully' : _ref$title,
_ref$icon = _ref.icon,
icon = _ref$icon === void 0 ? 'type1' : _ref$icon,
_ref$showIcon = _ref.showIcon,
showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
styles = _ref.styles,
others = _objectWithoutPropertiesLoose(_ref, _excluded$b);
return React__default.createElement("p", Object.assign({
className: "success-text"
}, others, {
style: styles
}), title, showIcon && React__default.createElement("img", {
className: "success-text-icon",
src: icon === 'type1' || 'type2' || 'type3' ? getType[icon] : icon,
alt: ""
}));
};
var getType = {
type1: 'https://i.postimg.cc/HsVCXNsF/type1.png',
type2: 'https://i.postimg.cc/G2KH8fhH/type2.png',
type3: 'https://i.postimg.cc/RFgZVnXt/type3.png'
};
exports.Button = Button;
exports.ButtonTextBox = ButtonTextBox;
exports.CircularAvatar = CircularAvatar;
exports.CircularLoader = CircularLoader;
exports.Description = Description;
exports.EllipseLoader = EllipseLoader;
exports.ErrorText = ErrorText;
exports.Heading = Heading;
exports.LoaderText = LoaderText;
exports.MaterialTextBox = MaterialTextBox;
exports.OutlinedButton = OutlinedButton;
exports.RoundedAvatar = RoundedAvatar;
exports.SpinnerLoader = SpinnerLoader;
exports.SuccessText = SuccessText;
exports.TextBoxSimple = TextBoxSimple;
//# sourceMappingURL=breakfast-ui.cjs.development.js.map