@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/Media.styled.cjs

@@ -0,0 +1,46 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+var animations = require('../utils/animations.cjs');
+
+const StyledMediaEl = styled.div`
+  ${({ theme }) => styled.css`
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: ${theme.palette.grey[200]};
+  `}
+`;
+const StyledMediaSkeleton = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  z-index: 1;
+  ${animations.inlineGlow}
+`;
+const StyledMedia = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  ${({ as, src }) => styled.css`
+    ${as !== "img" && styled.css`
+      display: block;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-image: url(${src});
+    `}
+
+    ${as === "img" && styled.css`
+      object-fit: cover;
+    `}
+  `}
+`;
+
+exports.StyledMedia = StyledMedia;
+exports.StyledMediaEl = StyledMediaEl;
+exports.StyledMediaSkeleton = StyledMediaSkeleton;

package/dist/cjs/components/Modal.cjs

@@ -0,0 +1,56 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var BaseModal = require('./BaseModal.cjs');
+var Heading = require('./Heading.cjs');
+var LinearProgress = require('./LinearProgress.cjs');
+var ModalActions = require('./ModalActions.cjs');
+var ModalContent = require('./ModalContent.cjs');
+var ModalHeader = require('./ModalHeader.cjs');
+var Skeleton = require('./Skeleton.cjs');
+var boolean = require('../utils/helpers/boolean.cjs');
+
+function Modal({
+  actions = void 0,
+  content = void 0,
+  children = void 0,
+  heading = void 0,
+  loading = false,
+  onClose = void 0,
+  ...rest
+}) {
+  const handleClose = (e, action) => {
+    if (action === "backdropClick") {
+      return;
+    }
+    if (onClose) {
+      onClose(e);
+    }
+  };
+  const header = boolean.isString(heading) ? /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h3", gutterBottom: false, children: heading }) : heading;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    BaseModal.default,
+    {
+      ...rest,
+      onClose: handleClose,
+      slotProps: { paper: { sx: { padding: { xs: "16px", md: "32px" } } } },
+      children: [
+        heading && /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader.default, { onClose: handleClose, children: [
+          loading && /* @__PURE__ */ jsxRuntime.jsx(Skeleton.default, { variant: "text", height: 20, width: 250 }),
+          !loading && header
+        ] }),
+        !loading && /* @__PURE__ */ jsxRuntime.jsxs(ModalContent.default, { disableGutter: true, children: [
+          children,
+          content
+        ] }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx(ModalActions.default, { sx: { marginTop: { xs: "20px", md: "40px" } }, children: actions }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx(ModalContent.default, { disableGutter: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinearProgress.default, {}) })
+      ]
+    }
+  );
+}
+
+exports.default = Modal;

package/dist/cjs/components/ModalActions.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var DialogActions = require('@mui/material/DialogActions');
+
+function ModalActions({
+  align = "flex-end",
+  children,
+  gutter = true,
+  sx = {}
+}) {
+  const styles = {
+    justifyContent: align,
+    ...gutter && { gap: "8px" },
+    ...sx
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogActions, { disableSpacing: !gutter, sx: styles, children });
+}
+
+exports.default = ModalActions;

package/dist/cjs/components/ModalContent.cjs

@@ -0,0 +1,32 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var PropTypes = require('prop-types');
+var DialogContent = require('@mui/material/DialogContent');
+
+function ModalContent({
+  children,
+  disableGutter = false,
+  sx = {}
+}) {
+  const styles = {
+    ...disableGutter && { padding: 0 },
+    ...sx
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { dividers: false, sx: styles, children });
+}
+ModalContent.propTypes = {
+  /**
+   * Contents to display inside dialog
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * If `true`, will not add any padding.
+   */
+  disableGutter: PropTypes.bool
+};
+
+exports.default = ModalContent;

package/dist/cjs/components/ModalHeader.cjs

@@ -0,0 +1,24 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var iconsMaterial = require('@mui/icons-material');
+var Box = require('./Box.cjs');
+var IconButton = require('./IconButton.cjs');
+var ModalHeader_styled = require('./ModalHeader.styled.cjs');
+
+function ModalHeader({
+  children,
+  closeIcon = void 0,
+  onClose = void 0,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader_styled.default, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box.default, { overflow: "hidden", width: "100%", marginRight: "8px", marginLeft: "0px", children }),
+    onClose && /* @__PURE__ */ jsxRuntime.jsx(Box.default, { children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.default, { color: "inherit", size: "small", onClick: onClose, children: !closeIcon ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Close, {}) : closeIcon }) })
+  ] });
+}
+
+exports.default = ModalHeader;

package/dist/cjs/components/ModalHeader.styled.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+var object = require('../utils/helpers/object.cjs');
+
+const StyledModalHeader = styles.styled(
+  "div"
+)`
+  ${({ disableGap, theme, transparent }) => react.css`
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 9;
+    background: ${transparent ? "transparent" : object.getObjectProp(theme, "vars.palette.background.paper")};
+    color: ${object.getObjectProp(theme, "vars.palette.text.secondary")};
+
+    ${!disableGap && react.css`
+      margin-bottom: 8px;
+    `};
+  `}
+`;
+
+exports.default = StyledModalHeader;

package/dist/cjs/components/Nameplate.cjs

@@ -0,0 +1,110 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Skeleton = require('@mui/material/Skeleton');
+var MuiContainer = require('@mui/material/Container');
+var Box = require('@mui/material/Box');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var Heading = require('./Heading.cjs');
+var Text = require('./Text.cjs');
+var Nameplate_styled = require('./Nameplate.styled.cjs');
+
+function Nameplate({
+  heading = "",
+  logo = "",
+  skeleton = false,
+  subHeading = "",
+  title = "",
+  ...rest
+}) {
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  return /* @__PURE__ */ jsxRuntime.jsx(Nameplate_styled.StyledWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(MuiContainer, { maxWidth: "lg", ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        flexWrap: "nowrap",
+        alignItems: "center",
+        px: isMobile ? 2 : 0,
+        py: 4
+      },
+      children: skeleton ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flexGrow: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Skeleton,
+            {
+              width: isMobile ? "80%" : "40%",
+              height: isMobile ? 22 : 30
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Skeleton,
+            {
+              width: isMobile ? "60%" : "30%",
+              height: isMobile ? 22 : 30
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", height: 100, width: 100 })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          title && /* @__PURE__ */ jsxRuntime.jsxs(Text.default, { color: "textSecondary", variant: "body1", weight: "600", children: [
+            isMobile && /* @__PURE__ */ jsxRuntime.jsx("small", { children: /* @__PURE__ */ jsxRuntime.jsx("small", { children: title }) }),
+            !isMobile && title
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Heading.default,
+            {
+              as: isMobile ? "h5" : "h3",
+              weight: "400",
+              color: "textPrimary",
+              gutterBottom: false,
+              children: [
+                heading,
+                subHeading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                  " ",
+                  subHeading
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Nameplate_styled.StyledImgWrapper, { children: [
+          logo && /* @__PURE__ */ jsxRuntime.jsx(Nameplate_styled.StyledImg, { src: logo, alt: heading }),
+          !logo && heading && /* @__PURE__ */ jsxRuntime.jsx(Nameplate_styled.StyledImgText, { children: heading[0].toUpperCase() })
+        ] })
+      ] })
+    }
+  ) }) });
+}
+Nameplate.propTypes = {
+  /**
+   * Heading
+   */
+  heading: PropTypes.string,
+  /**
+   * Sub Heading
+   */
+  subHeading: PropTypes.string,
+  /**
+   * Show skeleton layout
+   */
+  skeleton: PropTypes.bool,
+  /**
+   * URL for the property manager logo
+   */
+  logo: PropTypes.string,
+  /**
+   * Text displayed before heading
+   */
+  title: PropTypes.string
+};
+
+exports.default = Nameplate;

package/dist/cjs/components/Nameplate.styled.cjs

@@ -0,0 +1,49 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+var styles = require('@mui/material/styles');
+var colors = require('../utils/colors.cjs');
+
+const StyledWrapper = styles.styled("div")(({ theme }) => ({
+  background: "#fff",
+  borderBottom: `1px solid ${colors.hexToRgba(theme.palette.default.main, 0.4)}`
+}));
+const StyledImgWrapper = styled.div`
+  ${({ theme }) => styled.css`
+    display: flex;
+    overflow: hidden;
+    margin-left: 0.5em;
+    flex-basis: 150px;
+    justify-content: flex-end;
+    align-items: center;
+    height: 80px;
+
+    @media screen and (min-width: ${theme.breakpoints.md}px) {
+      margin-left: 1em;
+      flex-basis: 200px;
+      height: 100px;
+    }
+  `}
+`;
+const StyledImg = styled.img`
+  max-width: 100%;
+  max-height: 100%;
+`;
+const StyledImgText = styled.div`
+  ${({ theme }) => styled.css`
+    width: 100%;
+    height: 100%;
+    background: ${theme.palette.grey[400]};
+    color: ${theme.palette.background.paper};
+    font-size: ${theme.typography.size.scale(9)};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `}
+`;
+
+exports.StyledImg = StyledImg;
+exports.StyledImgText = StyledImgText;
+exports.StyledImgWrapper = StyledImgWrapper;
+exports.StyledWrapper = StyledWrapper;

package/dist/cjs/components/Pagination.cjs

@@ -0,0 +1,147 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var uuid = require('react-uuid');
+var usePagination = require('@mui/material/usePagination');
+var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
+var Pagination_styled = require('./Pagination.styled.cjs');
+
+const getLabel = (type) => {
+  if (type === "first") {
+    return "First";
+  }
+  if (type === "last") {
+    return "Last";
+  }
+  if (type === "previous") {
+    return "Prev";
+  }
+  if (type === "next") {
+    return "Next";
+  }
+  if (type === "start-ellipsis" || type === "end-ellipsis") {
+    return /* @__PURE__ */ jsxRuntime.jsx(MoreHorizIcon, { fontSize: "inherit" });
+  }
+  return null;
+};
+function Pagination({
+  boundaryCount = 1,
+  color = "textPrimary",
+  count = 1,
+  defaultPage = 1,
+  disabled = false,
+  onChange = void 0,
+  shape = "round",
+  showFirstLastButtons = false,
+  showNexPrevButtons = true,
+  siblingCount = 1,
+  size = "large",
+  ...others
+}) {
+  const rest = {
+    boundaryCount,
+    color,
+    count,
+    defaultPage,
+    disabled,
+    onChange,
+    shape,
+    showFirstLastButtons,
+    showNexPrevButtons,
+    siblingCount,
+    size,
+    ...others
+  };
+  const { items } = usePagination({
+    ...rest,
+    hideNextButton: !showNexPrevButtons,
+    hidePrevButton: !showNexPrevButtons,
+    showFirstButton: showFirstLastButtons,
+    showLastButton: showFirstLastButtons
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(Pagination_styled.StyledList, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(Pagination_styled.StyledListItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Pagination_styled.StyledButton,
+    {
+      color,
+      shape,
+      size,
+      type: item.type,
+      ...item,
+      children: [
+        item.type !== "page" && getLabel(item.type),
+        item.type === "page" && item.page
+      ]
+    }
+  ) }, uuid(item))) });
+}
+Pagination.propTypes = {
+  /**
+   * Number of always visible pages at the beginning and end.
+   */
+  boundaryCount: PropTypes.number,
+  /**
+   * The color of the component. It supports those theme
+   * colors that make sense for this component.
+   */
+  color: PropTypes.oneOf([
+    "default",
+    "primary",
+    "primaryAlt",
+    "secondary",
+    "secondaryAlt",
+    "textPrimary",
+    "textSecondary",
+    "tertiary",
+    "error",
+    "warning",
+    "success",
+    "info"
+  ]),
+  /**
+   * The total number of pages.
+   */
+  count: PropTypes.number,
+  /**
+   * The page selected by default when the component is uncontrolled.
+   */
+  defaultPage: PropTypes.number,
+  /**
+   * If `true`, the pagination component will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Callback fired when the page is changed.
+   */
+  onChange: PropTypes.func,
+  /**
+   * The current page.
+   */
+  page: PropTypes.number.isRequired,
+  /**
+   * The shape of the pagination items.
+   */
+  shape: PropTypes.oneOf(["round", "rounded"]),
+  /**
+   * If `true`, will show the first & last page buttons.
+   */
+  showFirstLastButtons: PropTypes.bool,
+  /**
+   * If `true`, will show the next & prev page buttons.
+   */
+  showNexPrevButtons: PropTypes.bool,
+  /**
+   * Number of always visible pages before and after the current page.
+   */
+  siblingCount: PropTypes.number,
+  /**
+   * The size of the pagination component.
+   */
+  size: PropTypes.oneOf(["large", "small"])
+};
+
+exports.default = Pagination;

package/dist/cjs/components/Pagination.styled.cjs

@@ -0,0 +1,83 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+
+const mapColors = (color, theme) => {
+  if (color === "textPrimary") {
+    return theme.palette.text.primary;
+  }
+  if (color === "textSecondary") {
+    return theme.palette.text.secondary;
+  }
+  if (color !== "textPrimary" && color !== "textSecondary") {
+    return theme.palette[color].main;
+  }
+  return "inherit";
+};
+const StyledList = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+`;
+const StyledListItem = styled.li`
+  margin: 0 3px;
+`;
+const StyledButton = styled.button`
+  ${({ color, disabled, selected, shape, size, theme, type }) => styled.css`
+    background: transparent;
+    border: none;
+    box-sizing: border-box;
+    color: ${mapColors(color, theme)};
+    cursor: pointer;
+    font-family: ${theme.typography.fontFamily};
+    font-weight: 400;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+
+    ${size === "small" && styled.css`
+      height: 28px;
+      min-width: 28px;
+      font-size: ${theme.typography.size.small};
+    `}
+
+    ${size === "large" && styled.css`
+      height: 32px;
+      min-width: 32px;
+      font-size: ${theme.typography.size.large};
+    `}
+
+    ${disabled && styled.css`
+      opacity: 0.38;
+      pointer-events: none;
+      cursor: default;
+    `}
+
+    ${shape === "round" && styled.css`
+      border-radius: 99999px;
+    `}
+
+    ${shape === "rounded" && styled.css`
+      border-radius: 4px;
+    `}
+
+    ${["end-ellipsis", "start-ellipsis"].includes(type) && styled.css`
+      svg {
+        vertical-align: bottom;
+      }
+    `}
+
+    ${selected && styled.css`
+      font-weight: 600;
+      border: 1px solid currentColor;
+    `}
+  `}
+`;
+
+exports.StyledButton = StyledButton;
+exports.StyledList = StyledList;
+exports.StyledListItem = StyledListItem;

package/dist/cjs/components/Paper.cjs

@@ -0,0 +1,34 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Paper_styled = require('./Paper.styled.cjs');
+
+function Paper({
+  children,
+  elevate = true,
+  fill = false,
+  inset = "none",
+  outlined = false,
+  overflow = true,
+  rounded = true,
+  sx = {}
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Paper_styled.default,
+    {
+      elevate: outlined ? false : elevate,
+      fill,
+      inset,
+      outlined,
+      rounded,
+      noOverflow: !overflow,
+      sx,
+      children
+    }
+  );
+}
+
+exports.default = Paper;