@icoms-detection/ui
Version:
This is the OFFICIAL UI library created by Icoms Detection to design their apps.
1,331 lines (1,262 loc) • 34 kB
JavaScript
import { debounce, truncate } from 'lodash-es';
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { createStitches } from '@stitches/react';
function getSize(el) {
if (!el) {
return {
width: 0,
height: 0
};
}
return {
width: el.offsetWidth,
height: el.offsetHeight
};
}
function useComponentSize(ref) {
var _useState = useState(getSize(ref ? ref.current : {})),
componentSize = _useState[0],
setComponentSize = _useState[1];
var handleResize = useCallback(function handleResize() {
if (ref.current) {
setComponentSize(getSize(ref.current));
}
}, [ref]); // useLayoutEffect(
useEffect(function () {
if (!ref.current) {
return;
}
handleResize();
if (typeof ResizeObserver === "function") {
var resizeObserver = new ResizeObserver( // ResizeObserver loop limit exceeded quick fix
debounce(function () {
handleResize();
}, 200));
resizeObserver.observe(ref.current);
return function () {
resizeObserver.disconnect(); // @ts-ignore
resizeObserver = null;
};
} else {
window.addEventListener("resize", handleResize);
return function () {
window.removeEventListener("resize", handleResize);
};
}
}, [ref.current]);
return componentSize;
}
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 _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;
}
var mediaQueries = {
sm: 640
};
var navbar_width = 80;
var _createStitches = /*#__PURE__*/createStitches({
theme: {
fonts: {
header: "SF-New-Republic",
content: "Frutiger"
},
fontSizes: {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem"
},
lineHeights: {
xs: "1rem",
sm: "1.25rem",
base: "1.5rem",
lg: "1.75rem",
xl: "2rem"
},
colors: {
primary_50: "#FFF9F7",
primary_100: "#FEE4D9",
primary_200: "#FDB99D",
primary_300: "#FB8E61",
primary_400: "#FA6325",
primary_500: "#DD4405",
primary_600: "#AB3504",
primary_700: "#792503",
primary_800: "#471602",
primary_900: "#160700",
secondary_50: "#FFF8E9",
secondary_100: "#FFF0CF",
secondary_200: "#FFDF9C",
secondary_300: "#FFCF69",
secondary_400: "#FFBE36",
secondary_500: "#FFAE03",
secondary_600: "#CF8C00",
secondary_700: "#9C6A00",
secondary_800: "#694700",
secondary_900: "#362500",
neutral_50: "#F0F0F1",
neutral_100: "#E0E1E2",
neutral_200: "#C0C2C4",
neutral_300: "#A1A3A7",
neutral_400: "#818589",
neutral_500: "#63666A",
neutral_600: "#4A4D50",
neutral_700: "#323335",
neutral_800: "#191A1B",
neutral_900: "#000001"
},
shadows: {
base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);"
}
},
media: {
sm: "(min-width: " + mediaQueries.sm + "px)",
md: "(min-width: 768px)",
lg: "(min-width: 1024px)"
},
utils: {
ringColor: function ringColor(value) {
return {
// Uses default "color" property to set box-shadow color
boxShadow: "inset 0 0 0 1px $colors" + value
};
},
text: function text(value) {
return {
fontSize: "$" + value,
lineHeight: "$" + value
};
}
}
}),
styled = _createStitches.styled;
// Button Compounds
var buttonCompounds = [{
variant: "primary",
color: "primary",
css: {
color: "$primary_50",
backgroundColor: "$primary_500",
"&:focus": {
boxShadow: "0 0 0 2px white, 0 0 0 4px $colors$primary_500"
}
}
}, {
variant: "primary",
color: "secondary",
css: {
color: "$secondary_50",
backgroundColor: "$secondary_500",
"&:focus": {
boxShadow: "0 0 0 2px white, 0 0 0 4px $colors$secondary_500"
}
}
}, {
variant: "secondary",
color: "primary",
css: {
color: "$primary_500",
backgroundColor: "$primary_100"
}
}, {
variant: "secondary",
color: "secondary",
css: {
color: "$secondary_600",
backgroundColor: "$secondary_100"
}
}, {
variant: "ghost",
color: "primary",
css: {
stroke: "$primary_500",
color: "$primary_500",
"&:hover": {
backgroundColor: "$primary_100"
}
}
}, {
variant: "ghost",
color: "secondary",
css: {
stroke: "$secondary_500",
color: "$secondary_500",
"&:hover": {
backgroundColor: "$secondary_100"
}
}
}, {
variant: "outline",
color: "primary",
css: {
stroke: "$primary_500",
color: "$primary_500",
ringColor: "$primary_500",
"&:hover": {
backgroundColor: "$primary_100",
ringColor: "$primary_500"
}
}
}, {
variant: "outline",
color: "secondary",
css: {
stroke: "$secondary_500",
color: "$secondary_500",
ringColor: "$secondary_500",
"&:hover": {
backgroundColor: "$secondary_100",
ringColor: "$secondary_500"
}
}
}, {
variant: "text",
color: "primary",
css: {
color: "$primary_500",
"&:hover": {
color: "$primary_600"
}
}
}, {
variant: "text",
color: "secondary",
css: {
color: "$secondary_500",
"&:hover": {
color: "$secondary_600"
}
}
}]; // Variants
var variants = {
primary: {
color: "$neutral_50",
backgroundColor: "$neutral_700",
transitionDuration: ".1s",
"&:hover": {
filter: "brightness(1.05)"
},
"&:focus": {
boxShadow: "0 0 0 2px white, 0 0 0 4px $colors$neutral_700"
}
},
secondary: {
color: "$neutral_700",
backgroundColor: "$neutral_50",
transitionDuration: ".1s",
"&:hover": {
filter: "brightness(.95)"
}
},
ghost: {
stroke: "$neutral_500",
color: "$neutral_500",
backgroundColor: "transparent",
transitionDuration: ".1s",
"&:hover": {
backgroundColor: "$neutral_100"
}
},
outline: {
stroke: "$neutral_500",
color: "$neutral_500",
ringColor: "$neutral_500",
backgroundColor: "transparent",
transitionDuration: ".1s",
"&:hover": {
backgroundColor: "$neutral_100",
ringColor: "$neutral_500"
}
},
text: {
color: "$neutral_500",
backgroundColor: "transparent",
padding: "0px",
transitionDuration: ".1s",
"&:hover": {
color: "$neutral_600"
}
}
}; // Sizes
var sizes = {
"2xs": {
fontSize: "0.75rem",
lineHeight: "0.75rem",
padding: "0.375rem 0.625rem"
},
xs: {
fontSize: "0.75rem",
lineHeight: "0.75rem",
padding: "0.375rem 0.625rem"
},
sm: {
fontSize: "0.875rem",
lineHeight: "1rem",
padding: "0.5rem 0.75rem"
},
base: {
fontSize: "1rem",
lineHeight: "1.25rem",
padding: "0.5rem 1rem"
},
lg: {
fontSize: "1.125rem",
lineHeight: "1.25rem",
padding: "0.5rem 1rem"
},
xl: {
fontSize: "1.25rem",
lineHeight: "1.25rem",
padding: "0.75rem 1.25rem"
},
"2xl": {
fontSize: "1.5rem",
lineHeight: "2rem",
padding: "1rem 1.5rem"
}
}; // Squared
var squared = {
"2xs": {
width: "1.5rem",
height: "1.5rem"
},
xs: {
width: "1.75rem",
height: "1.75rem"
},
sm: {
width: "2rem",
height: "2rem"
},
base: {
width: "2.25rem",
height: "2.25rem"
},
lg: {
width: "2.5rem",
height: "2.5rem"
},
xl: {
width: "3rem",
height: "3rem"
},
"2xl": {
width: "3.5rem",
height: "3.5rem"
}
}; // Rounded
var rounded = {
"2xs": {
borderRadius: "0.25rem"
},
xs: {
borderRadius: "0.25rem"
},
sm: {
borderRadius: "0.25rem"
},
base: {
borderRadius: "0.375rem"
},
lg: {
borderRadius: "0.375rem"
},
xl: {
borderRadius: "0.375rem"
},
"2xl": {
borderRadius: "0.5rem"
}
}; // Default styles applied
var defaultStyle = {
borderRadius: "5px",
display: "flex",
justifyContent: "center",
alignItems: "center",
border: "none",
color: "$neutral_700",
backgroundColor: "$neutral_100",
fontWeight: 400,
fontFamily: "$header",
paddingTop: "10px",
fontSize: "1rem",
lineHeight: "1.25rem",
padding: "0.5rem 1rem",
paddingBottom: "10px",
paddingLeft: "16px",
paddingRight: "16px",
"&:hover": {
cursor: "pointer"
}
}; // Button styles
var stitchesButtonStyles = /*#__PURE__*/_extends({}, defaultStyle, {
variants: {
variant: variants,
color: {
primary: {},
secondary: {}
},
size: sizes,
squared: squared,
rounded: rounded,
icon: {
"true": {
padding: "0px",
justifyContent: "center"
}
},
round: {
"true": {
borderRadius: "9999px"
}
},
loading: {
"true": {
"&:hover": {
cursor: "wait"
}
}
}
},
compoundVariants: buttonCompounds
});
var StyledSvg = /*#__PURE__*/styled("svg", {
stroke: "inherit",
fill: "none",
height: "24px",
width: "24px",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg"
});
var StyledStopSvg = /*#__PURE__*/styled("stop", {
stopColor: "$colors$primary_500",
variants: {
color: {
primary: {
stopColor: "$colors$primary_50"
},
secondary: {
stopColor: "$colors$secondary_50"
}
}
}
});
var StyledCircleSvg = /*#__PURE__*/styled("circle", {
fill: "$colors$primary_50",
variants: {
color: {
primary: {
stopColor: "$colors$primary_50"
},
secondary: {
stopColor: "$colors$secondary_50"
}
}
}
});
var LogoutIcon = function LogoutIcon() {
return /*#__PURE__*/React.createElement(StyledSvg, null, /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
}));
};
var HomeIcon = function HomeIcon() {
return /*#__PURE__*/React.createElement(StyledSvg, null, /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
}));
};
var HamburgerIcon = function HamburgerIcon() {
return /*#__PURE__*/React.createElement(StyledSvg, null, /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M4 6h16M4 12h16M4 18h16"
}));
};
var XIcon = function XIcon() {
return /*#__PURE__*/React.createElement(StyledSvg, null, /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M6 18L18 6M6 6l12 12"
}));
};
var SettingsIcon = function SettingsIcon() {
return /*#__PURE__*/React.createElement(StyledSvg, null, /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
}), /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
}));
};
var LoadingIcon = function LoadingIcon(_ref) {
var color = _ref.color;
return /*#__PURE__*/React.createElement("svg", {
width: "24",
height: "24",
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
x1: "8.042%",
y1: "0%",
x2: "65.682%",
y2: "23.865%",
id: "a"
}, /*#__PURE__*/React.createElement(StyledStopSvg, {
color: color,
stopOpacity: "0",
offset: "0%"
}), /*#__PURE__*/React.createElement(StyledStopSvg, {
color: color,
stopOpacity: ".631",
offset: "63.146%"
}), /*#__PURE__*/React.createElement(StyledStopSvg, {
color: color,
offset: "100%"
}))), /*#__PURE__*/React.createElement("g", {
fill: "none",
fillRule: "evenodd"
}, /*#__PURE__*/React.createElement("g", {
transform: "translate(1 1)"
}, /*#__PURE__*/React.createElement("path", {
d: "M36 18c0-9.94-8.06-18-18-18",
id: "Oval-2",
stroke: "url(#a)",
strokeWidth: "2"
}, /*#__PURE__*/React.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})), /*#__PURE__*/React.createElement(StyledCircleSvg, {
color: color,
cx: "36",
cy: "18",
r: "1"
}, /*#__PURE__*/React.createElement("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 18 18",
to: "360 18 18",
dur: "0.9s",
repeatCount: "indefinite"
})))));
};
var _excluded = ["variant", "color", "size", "icon", "round", "squared", "loading", "children"];
var StyledButton = /*#__PURE__*/styled("button", stitchesButtonStyles);
var Button = function Button(_ref) {
var variant = _ref.variant,
color = _ref.color,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "base" : _ref$size,
_ref$icon = _ref.icon,
icon = _ref$icon === void 0 ? false : _ref$icon,
_ref$round = _ref.round,
round = _ref$round === void 0 ? false : _ref$round,
squared = _ref.squared,
_ref$loading = _ref.loading,
loading = _ref$loading === void 0 ? false : _ref$loading,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
return /*#__PURE__*/React.createElement(StyledButton, Object.assign({
variant: variant,
color: color,
size: size,
icon: icon,
round: round,
rounded: size,
squared: squared,
loading: loading,
disabled: loading
}, props), loading ? /*#__PURE__*/React.createElement(LoadingIcon, {
color: color
}) : children);
};
var StyledNavButtons = /*#__PURE__*/styled("div", {
position: "absolute",
backgroundColor: "$primary_500",
top: navbar_width + "px",
width: navbar_width + "px",
height: "calc(100vh - 80px)",
color: "$neutral_50",
stroke: "$neutral_50",
"@sm": {
width: "auto",
position: "initial"
}
});
var StyledHomeButton = /*#__PURE__*/styled("button", {
position: "relative",
width: navbar_width + "px",
height: "100%",
display: "flex",
flexShrink: 0,
justifyContent: "center",
alignItems: "center",
backgroundColor: "$primary_600",
border: "none",
padding: "0",
cursor: "pointer",
"@sm": {
width: "100%",
height: navbar_width + "px"
}
});
var StyledNavbar = /*#__PURE__*/styled("div", {
width: "100%",
height: "80px",
display: "flex",
position: "fixed",
zIndex: 10,
top: 0,
left: 0,
backgroundColor: "$primary_500",
flexDirection: "column",
"@sm": {
height: "100vh",
width: "80px"
}
});
var StyledCompanyIcon = /*#__PURE__*/styled("img", {
height: "40%",
width: "40%"
});
var StyledMobileNavbar = /*#__PURE__*/styled("div", {
display: "flex",
height: navbar_width + "px",
width: "inherit",
justifyContent: "space-between",
"@sm": {
width: "auto"
}
});
var StyledNavChildren = /*#__PURE__*/styled("div", {
flex: "1 0",
paddingTop: navbar_width + "px",
minHeight: "100vh",
height: "100%",
"@sm": {
paddingLeft: navbar_width + "px",
paddingTop: "0px"
}
});
var _excluded$1 = ["children", "companyLogo", "companyLogoAlt", "navButtons", "onHome", "onLogout"];
var Navbar = function Navbar(_ref) {
var children = _ref.children,
companyLogo = _ref.companyLogo,
_ref$companyLogoAlt = _ref.companyLogoAlt,
companyLogoAlt = _ref$companyLogoAlt === void 0 ? "company icon" : _ref$companyLogoAlt,
_ref$navButtons = _ref.navButtons,
navButtons = _ref$navButtons === void 0 ? [] : _ref$navButtons,
_ref$onHome = _ref.onHome,
onHome = _ref$onHome === void 0 ? function () {
return console.log("home button");
} : _ref$onHome,
_ref$onLogout = _ref.onLogout,
onLogout = _ref$onLogout === void 0 ? function () {
return console.log("logout button");
} : _ref$onLogout,
props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
var _useState = useState(false),
isOpen = _useState[0],
setIsOpen = _useState[1];
var pageRef = useRef(null);
var navbarRef = useRef(null);
var size = useComponentSize(pageRef);
var width = size.width;
useEffect(function () {
if (width <= mediaQueries.sm) setIsOpen(false);else setIsOpen(true);
}, [width]);
var handleClickOutside = function handleClickOutside(e) {
if (width <= mediaQueries.sm) {
if (navbarRef.current && navbarRef.current.contains(e.target)) {
// inside click
return;
} // outside click
setIsOpen(false);
} else return;
};
return /*#__PURE__*/React.createElement("div", Object.assign({
ref: pageRef,
onClick: function onClick(e) {
handleClickOutside(e);
},
style: {
display: "flex",
height: "auto",
width: "100%",
position: "relative",
flexDirection: width <= mediaQueries.sm ? "column" : "row"
}
}, props), /*#__PURE__*/React.createElement(StyledNavbar, {
ref: navbarRef,
css: isOpen ? {
zIndex: "10 !important",
"&:before": {
content: "",
display: "block",
left: navbar_width - 1 + "px",
top: navbar_width + "px",
position: "absolute",
height: "calc(100% - " + navbar_width + "px)",
width: "1px",
boxShadow: "2px 0 10px 2px $colors$neutral_700",
opacity: 0.3,
zIndex: "10 !important"
},
"@sm": {
"&:before": {
top: 0,
height: "100%"
}
}
} : {}
}, /*#__PURE__*/React.createElement(StyledMobileNavbar, null, /*#__PURE__*/React.createElement(StyledHomeButton, {
onClick: onHome,
css: {
"&:before": {
display: "" + (!isOpen && "none")
}
}
}, /*#__PURE__*/React.createElement(StyledCompanyIcon, {
src: companyLogo,
alt: companyLogoAlt
})), /*#__PURE__*/React.createElement(Button, {
variant: "outline",
icon: true,
squared: "xl",
color: "primary",
css: {
margin: "auto 30px auto 0",
"&:not(:hover)": {
stroke: "$primary_100",
ringColor: "$primary_100"
},
"@sm": {
display: "none"
}
},
onClick: function onClick() {
return setIsOpen(function (prevState) {
return !prevState;
});
}
}, isOpen ? /*#__PURE__*/React.createElement(XIcon, null) : /*#__PURE__*/React.createElement(HamburgerIcon, null))), isOpen && /*#__PURE__*/React.createElement(NavButtons, {
navButtons: navButtons,
onLogout: onLogout
})), /*#__PURE__*/React.createElement(StyledNavChildren, null, children));
};
var NavButtons = function NavButtons(_ref2) {
var navButtons = _ref2.navButtons,
onLogout = _ref2.onLogout;
return /*#__PURE__*/React.createElement(StyledNavButtons, null, /*#__PURE__*/React.createElement("div", {
style: {
flexGrow: 1,
height: "100%",
maxHeight: "calc(100% - 100px)",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
paddingTop: "20px",
overflowY: "scroll"
}
}, /*#__PURE__*/React.createElement("div", null, navButtons)), /*#__PURE__*/React.createElement(Logout, {
onLogout: onLogout
}));
};
var Logout = function Logout(_ref3) {
var onLogout = _ref3.onLogout;
return /*#__PURE__*/React.createElement(Button, {
css: {
margin: "10px auto 0 auto",
flexShrink: 0,
"&:not(:hover)": {
stroke: "$primary_100"
}
},
variant: "ghost",
icon: true,
squared: "2xl",
color: "primary",
onClick: function onClick() {
return onLogout();
}
}, /*#__PURE__*/React.createElement(LogoutIcon, null));
};
var shadow = {
"true": {
boxShadow: "$base"
}
};
var defaultStyle$1 = {
padding: "0.75rem 1.5rem 0.75rem 1.5rem",
borderRadius: ".5rem",
backgroundColor: "white",
height: "100%",
boxSizing: "border-box"
};
var stitchesCardStyles = /*#__PURE__*/_extends({}, defaultStyle$1, {
variants: {
shadow: shadow
}
});
var StyledCardHeader = /*#__PURE__*/styled("h3", {
fontFamily: "$header",
text: "sm",
margin: "0",
"@sm": {
text: "base"
}
});
var _excluded$2 = ["children", "shadow", "header"];
var StyledCard = /*#__PURE__*/styled("div", stitchesCardStyles);
var Card = function Card(_ref) {
var children = _ref.children,
_ref$shadow = _ref.shadow,
shadow = _ref$shadow === void 0 ? true : _ref$shadow,
header = _ref.header,
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
return /*#__PURE__*/React.createElement("div", Object.assign({}, props), header && /*#__PURE__*/React.createElement(StyledCardHeader, null, header), /*#__PURE__*/React.createElement(StyledCard, {
shadow: shadow
}, children));
};
var defaultStyle$2 = {
display: "block",
backgroundColor: "white",
width: "100%",
padding: "0.5rem",
textAlign: "left",
text: "sm",
fontFamily: "$content",
border: "1px solid $colors$neutral_200",
borderRadius: "0.375rem",
"-moz-appearance": "none"
/* Firefox */
,
"-webkit-appearance": "none"
/* Safari and Chrome */
,
appearance: "none",
backgroundImage: "url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")",
backgroundRepeat: "no-repeat",
backgroundPositionX: "98%",
backgroundPositionY: "50%",
"&:focus": {
outline: "none",
border: "1px solid $colors$primary_500"
}
};
var stitchesSelectStyles = /*#__PURE__*/_extends({}, defaultStyle$2, {
variants: {}
});
var _excluded$3 = ["options", "isSelected", "onSelectChange", "defaultOption"];
var StyledSelect = /*#__PURE__*/styled("select", stitchesSelectStyles);
var Select = function Select(_ref) {
var options = _ref.options,
isSelected = _ref.isSelected,
onSelectChange = _ref.onSelectChange,
defaultOption = _ref.defaultOption,
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
return /*#__PURE__*/React.createElement("div", Object.assign({
style: {
position: "relative",
width: "100%",
minWidth: "100px",
maxWidth: "220px",
display: "flex",
flex: "1 1 0%",
alignItems: "center"
}
}, props), /*#__PURE__*/React.createElement(StyledSelect, {
onChange: onSelectChange
}, defaultOption && /*#__PURE__*/React.createElement("option", {
selected: true,
disabled: true
}, defaultOption), options.map(function (option, i) {
return /*#__PURE__*/React.createElement("option", {
selected: isSelected === options[i],
value: options[i]
}, option);
})));
};
var StyledInputContainer = /*#__PURE__*/styled("div", {
position: "relative",
width: "100%",
minWidth: "100px",
maxWidth: "220px",
display: "flex",
flex: "1 1 0%",
alignItems: "center"
});
var StyledInput = /*#__PURE__*/styled("input", {
display: "block",
width: "100%",
padding: "0.5rem 2.5rem 0.5rem 0.5rem",
textAlign: "right",
text: "sm",
fontFamily: "$content",
border: "1px solid $colors$neutral_200",
borderRadius: "0.375rem",
"&:focus": {
outline: "none",
border: "1px solid $colors$primary_500"
},
"&::placeholder": {
color: "$neutral_300"
},
"&[type='file']": {
display: "none"
}
});
var StyledSpan = /*#__PURE__*/styled("span", {
fontFamily: "$content",
color: "$neutral_500",
text: "sm"
});
var StyledLabel = /*#__PURE__*/styled("label", {
fontFamily: "$content",
text: "sm",
border: "1px solid $colors$neutral_200",
padding: "0.5rem 2rem",
color: "$neutral_500",
borderRadius: "5px",
width: "100%",
overflow: "scroll",
textAlign: "center",
"&:hover": {
color: "$primary_500",
backgroundColor: "$primary_50",
border: "1px solid $colors$primary_500"
}
});
var _excluded$4 = ["inputType", "name", "unit", "inputTypeFileLabel", "min", "max", "step"];
var Input = function Input(_ref) {
var _ref$inputType = _ref.inputType,
inputType = _ref$inputType === void 0 ? "text" : _ref$inputType,
name = _ref.name,
_ref$unit = _ref.unit,
unit = _ref$unit === void 0 ? "" : _ref$unit,
_ref$inputTypeFileLab = _ref.inputTypeFileLabel,
inputTypeFileLabel = _ref$inputTypeFileLab === void 0 ? "Browse..." : _ref$inputTypeFileLab,
min = _ref.min,
max = _ref.max,
step = _ref.step,
props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
return /*#__PURE__*/React.createElement(StyledInputContainer, null, inputType === "file" && /*#__PURE__*/React.createElement(StyledLabel, {
htmlFor: name
}, inputTypeFileLabel), /*#__PURE__*/React.createElement(StyledInput, Object.assign({
css: !unit || unit.length > 3 ? {
paddingRight: "0.5rem"
} : {},
min: min,
max: max,
step: step
}, props, {
id: name,
type: inputType
})), unit && /*#__PURE__*/React.createElement("div", {
style: {
position: "absolute",
top: 0,
bottom: 0,
right: 0,
paddingRight: "0.75rem",
display: "flex",
alignItems: "center"
}
}, /*#__PURE__*/React.createElement(StyledSpan, null, unit.length > 3 ? truncate(unit, {
length: 3,
omission: ""
}) : unit)));
};
var defaultStyleButton = {
backgroundColor: "rgb(245, 245, 245)",
border: "none",
borderRight: "1px solid $colors$neutral_200",
borderBottom: "1px solid $colors$neutral_200",
borderTop: "1px solid $colors$neutral_200",
padding: "0.5rem 0.75rem",
cursor: "pointer",
fontFamily: "$content",
margin: 0,
text: "xs",
borderBox: "box-sizing",
color: "$neutral_300",
"&:first-child": {
borderTopLeftRadius: "5px",
borderBottomLeftRadius: "5px",
borderLeft: "1px solid $colors$neutral_200"
},
"&:last-child": {
borderTopRightRadius: "5px",
borderBottomRightRadius: "5px",
borderRight: "1px solid $colors$neutral_200"
},
"&:hover": {
color: "$primary_500",
border: "1px solid $colors$primary_500",
marginLeft: "-1px"
},
"&:hover:first-child": {
marginLeft: "0px"
}
};
var stitchesButtonStyles$1 = /*#__PURE__*/_extends({}, defaultStyleButton, {
variants: {
selected: {
"true": {
fontWeight: 900,
backgroundColor: "$primary_200",
color: "$primary_500",
border: "1px solid $colors$primary_500",
marginLeft: "-1px",
"&:first-child": {
marginLeft: "0px",
borderLeft: "1px solid $colors$primary_500"
},
"&:last-child": {
borderRight: "1px solid $colors$primary_500"
}
}
}
}
});
var stitchesButtonGroupStyles = {
width: "auto",
maxWidth: "max-content",
boxSizing: "border-box",
display: "inline-block"
};
var _excluded$5 = ["buttons", "selectedIndex"],
_excluded2 = ["children"];
var StyledButtonGroup = /*#__PURE__*/styled("span", stitchesButtonGroupStyles);
var StyledButton$1 = /*#__PURE__*/styled("button", stitchesButtonStyles$1);
var ButtonGroup = function ButtonGroup(_ref) {
var buttons = _ref.buttons,
selectedIndex = _ref.selectedIndex,
props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
return /*#__PURE__*/React.createElement(StyledButtonGroup, Object.assign({}, props), buttons.map(function (btn, i) {
return /*#__PURE__*/React.createElement(Button$1, {
key: i,
selected: selectedIndex === buttons[i],
onClick: props.onClick
}, btn);
}));
};
var Button$1 = function Button(_ref2) {
var children = _ref2.children,
props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
return /*#__PURE__*/React.createElement(StyledButton$1, Object.assign({}, props), children);
};
var StyledText = /*#__PURE__*/styled("p", {
fontFamily: "$content",
text: "sm",
color: "$neutral_700",
margin: 0,
variants: {
isExtra: {
"true": {
text: "xs",
color: "$neutral_500"
}
},
isError: {
"true": {
text: "xs",
color: "$primary_600"
}
}
}
});
var _excluded$6 = ["isExtra", "isError", "children"];
var Text = function Text(_ref) {
var _ref$isExtra = _ref.isExtra,
isExtra = _ref$isExtra === void 0 ? false : _ref$isExtra,
_ref$isError = _ref.isError,
isError = _ref$isError === void 0 ? false : _ref$isError,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
return /*#__PURE__*/React.createElement(StyledText, Object.assign({
isExtra: isExtra,
isError: isError
}, props), children);
};
var _excluded$7 = ["label", "extra", "children", "name", "error"];
var LabelledInput = function LabelledInput(_ref) {
var label = _ref.label,
extra = _ref.extra,
children = _ref.children,
name = _ref.name,
error = _ref.error,
props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
return /*#__PURE__*/React.createElement("div", Object.assign({
style: {
padding: "0.75rem 0",
textAlign: "left"
}
}, props), /*#__PURE__*/React.createElement("div", {
style: {
display: "flex",
paddingBottom: "0.375rem",
width: "100%",
alignItems: "center"
}
}, /*#__PURE__*/React.createElement("label", {
htmlFor: name,
style: {
flex: 1,
marginRight: "1rem"
}
}, /*#__PURE__*/React.createElement(Text, null, label), /*#__PURE__*/React.createElement(Text, {
isExtra: true
}, extra)), children), error && /*#__PURE__*/React.createElement(Text, {
isError: true
}, error));
};
var sizes$1 = {
"2xs": {
maxWidth: "200px"
},
xs: {
maxWidth: "250px"
},
sm: {
maxWidth: "300px"
},
base: {
maxWidth: "320px"
},
lg: {
maxWidth: "380px"
},
xl: {
maxWidth: "460px"
},
"2xl": {
maxWidth: "540px"
}
};
var SubDialog = /*#__PURE__*/styled("div", {
alignItems: "center",
justifyContent: "center",
minHeight: "100vh",
textAlign: "center",
display: "flex",
padding: "1rem",
"@sm": {
display: "block",
padding: 0
}
});
var DialogOverlay = /*#__PURE__*/styled("div", {
position: "fixed",
top: "0px",
right: "0px",
bottom: "0px",
left: "0px",
backgroundColor: "$neutral_500",
opacity: 0.9
});
var TrickySpan = /*#__PURE__*/styled("span", {
display: "none",
"@sm": {
height: "100vh",
verticalAlign: "middle",
display: "inline-block"
}
});
var StyledModal = /*#__PURE__*/styled("div", {
position: "relative",
display: "inline-block",
verticalAlign: "bottom",
backgroundColor: "white",
borderRadius: "5px",
padding: "1.25rem 1rem 1rem 1rem",
overflow: "hidden",
width: "100%",
boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"@sm": {
margin: "2rem 0",
verticalAlign: "middle",
padding: "1.5rem"
},
variants: {
size: sizes$1
}
});
var _excluded$8 = ["isOpen", "onClose", "closeOnOutsideClick", "size", "children"];
var Modal = function Modal(_ref) {
var _ref$isOpen = _ref.isOpen,
isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
onClose = _ref.onClose,
_ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "base" : _ref$size,
children = _ref.children,
props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
var modalRef = useRef(null);
var handleClickOutside = function handleClickOutside(e) {
if (modalRef.current && modalRef.current.contains(e.target)) {
// inside click
return;
} // outside click
onClose();
};
return /*#__PURE__*/React.createElement("div", {
onClick: function onClick(e) {
if (closeOnOutsideClick) handleClickOutside(e);
},
style: {
position: "fixed",
zIndex: 10,
top: "0px",
right: "0px",
bottom: "0px",
left: "0px",
overflowY: "auto",
display: isOpen ? "" : "none"
}
}, /*#__PURE__*/React.createElement(SubDialog, null, /*#__PURE__*/React.createElement(DialogOverlay, null), /*#__PURE__*/React.createElement(TrickySpan, null, "\u200B"), /*#__PURE__*/React.createElement(StyledModal, Object.assign({}, props, {
ref: modalRef,
size: size
}), children)));
};
export { Button, ButtonGroup, Card, HomeIcon, Input, LabelledInput, LoadingIcon, Modal, Navbar, Select, SettingsIcon, Text, useComponentSize };
//# sourceMappingURL=ui.esm.js.map