@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/FlashMessage.cjs

@@ -0,0 +1,69 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Snackbar = require('@mui/material/Snackbar');
+var Alert = require('./Alert.cjs');
+
+function FlashMessage({
+  autoHideDuration = 3500,
+  children,
+  color = "success",
+  horizontal = "center",
+  open = false,
+  onClose,
+  vertical = "top",
+  ...rest
+}) {
+  const handleClose = () => {
+    onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Snackbar,
+    {
+      anchorOrigin: { vertical, horizontal },
+      autoHideDuration,
+      open,
+      onClose: handleClose,
+      message: "This is a text snack message",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Alert.default, { color, onClose: handleClose, elevation: 7, children })
+    }
+  );
+}
+FlashMessage.propTypes = {
+  /**
+   * The number of milliseconds to wait before automatically calling the `onClose` function.
+   */
+  autoHideDuration: PropTypes.number,
+  /**
+   * The main color for the component.
+   */
+  color: PropTypes.oneOf(["error", "info", "success", "warning"]),
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Horizontal position of component
+   */
+  horizontal: PropTypes.oneOf(["left", "center", "right"]),
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool,
+  /**
+   * Callback fired when the component requests to be closed.
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * Vertical position of component
+   */
+  vertical: PropTypes.oneOf(["bottom", "top"])
+};
+
+exports.default = FlashMessage;

package/dist/cjs/components/FormControl.cjs

@@ -0,0 +1,102 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var framerMotion = require('framer-motion');
+var FormHelperText = require('@mui/material/FormHelperText');
+var FormLabel = require('./FormLabel.cjs');
+var StatusMessage = require('./StatusMessage.cjs');
+var FormControl_styled = require('./FormControl.styled.cjs');
+var boolean = require('../utils/helpers/boolean.cjs');
+require('mime/lite');
+require('../utils/helpers/time.cjs');
+
+const FormControl = React.forwardRef(
+  function FormControl2({
+    children,
+    color = "default",
+    disabled = false,
+    errorMessage = "",
+    fullWidth = false,
+    helperText = "",
+    label = void 0,
+    message = "",
+    required = false,
+    showError = false,
+    id,
+    size = "medium"
+  }, ref) {
+    const props = {
+      color: showError ? "error" : color,
+      $disabled: disabled,
+      fullWidth,
+      $required: required
+    };
+    const statusMessage = errorMessage || message;
+    return (
+      /** @ts-ignore */
+      /* @__PURE__ */ jsxRuntime.jsxs(FormControl_styled.default, { ...props, ref, children: [
+        !!label && boolean.isString(label) ? /* @__PURE__ */ jsxRuntime.jsx(
+          FormLabel.default,
+          {
+            disabled,
+            htmlFor: id,
+            required,
+            size,
+            children: label
+          }
+        ) : label,
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            layout: true,
+            initial: "collapsed",
+            animate: "open",
+            exit: "collapsed",
+            variants: {
+              open: { opacity: 1, height: "auto" },
+              collapsed: { opacity: 0, height: 0 }
+            },
+            transition: {
+              delay: 0.15,
+              duration: 0.3,
+              ease: [0.04, 0.62, 0.23, 0.98]
+            },
+            children: !!statusMessage && /* @__PURE__ */ jsxRuntime.jsx(
+              StatusMessage.default,
+              {
+                color: props.color === "default" ? "info" : props.color,
+                children: statusMessage
+              }
+            )
+          },
+          `${id}_message`
+        ) }),
+        !!helperText && /* @__PURE__ */ jsxRuntime.jsx(
+          FormHelperText,
+          {
+            sx: {
+              color: "text.primary",
+              fontSize: (theme) => {
+                if (size === "medium") {
+                  return `${theme.typography.fontSize}px`;
+                }
+                return null;
+              },
+              padding: 0,
+              margin: 0,
+              mt: statusMessage ? 0 : "8px"
+            },
+            children: helperText
+          }
+        )
+      ] })
+    );
+  }
+);
+
+exports.default = FormControl;

package/dist/cjs/components/FormControl.styled.cjs

@@ -0,0 +1,22 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+var FormControl = require('@mui/material/FormControl');
+var object = require('../utils/helpers/object.cjs');
+
+const StyledFormControl = styles.styled(FormControl)`
+  ${({ size, theme }) => react.css`
+    ${size === "small" && react.css`
+      font-size: calc(${object.getObjectProp(theme, "typography.fontSize")}px - 2px);
+    `}
+    ${size === "medium" && react.css`
+      font-size: ${object.getObjectProp(theme, "typography.fontSize")}px;
+    `}
+  `}
+`;
+
+exports.default = StyledFormControl;

package/dist/cjs/components/FormFocus.cjs

@@ -0,0 +1,37 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+
+function FormFocus({ name }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      name,
+      style: {
+        appearance: "none",
+        border: "none",
+        outline: "none",
+        margin: 0,
+        padding: 0,
+        // needs to be 'visisble for iOS to scroll to..
+        width: "100%",
+        height: 1,
+        marginBottom: -1,
+        opacity: 0.1,
+        // prevent zoom...
+        fontSize: 20
+      },
+      readOnly: true
+    }
+  );
+}
+FormFocus.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+exports.default = FormFocus;

package/dist/cjs/components/FormLabel.cjs

@@ -0,0 +1,24 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var FormLabel_styled = require('./FormLabel.styled.cjs');
+
+function FormLabel({
+  children,
+  disabled = false,
+  margin = "default",
+  required = false,
+  ...rest
+}) {
+  const props = {
+    disabled,
+    margin,
+    required
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(FormLabel_styled.default, { ...rest, ...props, children });
+}
+
+exports.default = FormLabel;

package/dist/cjs/components/FormLabel.styled.cjs

@@ -0,0 +1,55 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mui/material/styles');
+var react = require('@emotion/react');
+var FormLabel = require('@mui/material/FormLabel');
+var object = require('../utils/helpers/object.cjs');
+
+const colorStyles = ({ disabled, theme }) => react.css`
+  ${!disabled && react.css`
+    color: ${object.getObjectProp(theme, "vars.palette.text.primary")};
+  `}
+
+  ${disabled && react.css`
+    color: ${object.getObjectProp(theme, "vars.palette.grey.400")};
+    pointer-events: none;
+    user-select: none;
+  `}
+`;
+const marginStyles = ({ margin }) => react.css`
+  ${margin === "default" && react.css`
+    margin-bottom: 8px;
+  `}
+  ${margin === "dense" && react.css`
+    margin-bottom: 4px;
+  `}
+`;
+const StyledFormLabel = styles.styled(FormLabel)`
+  ${({ disabled, margin, size, theme }) => react.css`
+    font-weight: 600;
+    ${marginStyles({ margin })}
+    && {
+      display: inline-flex;
+      ${colorStyles({ disabled, theme })}
+    }
+
+    ${size === "small" && react.css`
+      font-size: calc(${object.getObjectProp(theme, "typography.fontSize")}px - 2px);
+    `}
+    ${size === "medium" && react.css`
+      font-size: ${object.getObjectProp(theme, "typography.fontSize")}px;
+    `}
+
+    .MuiFormLabel-asterisk {
+      color: ${object.getObjectProp(
+  theme,
+  disabled ? "vars.palette.grey.400" : "vars.palette.error.main"
+)};
+    }
+  `}
+`;
+
+exports.default = StyledFormLabel;

package/dist/cjs/components/Grid.cjs

@@ -0,0 +1,52 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiGrid = require('@mui/material/GridLegacy');
+var styles = require('@mui/material/styles');
+
+function Grid({
+  children,
+  marginFix = false,
+  spacing = 0,
+  container = false,
+  ...rest
+}) {
+  const theme = styles.useTheme();
+  return marginFix && spacing && container ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: `${theme.spacing(spacing)}` }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MuiGrid,
+    {
+      container: true,
+      spacing,
+      ...rest,
+      children
+    }
+  ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+    MuiGrid,
+    {
+      spacing,
+      container,
+      ...rest,
+      children
+    }
+  );
+}
+Grid.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired,
+  spacing: PropTypes.number,
+  container: PropTypes.bool,
+  /**
+   * Remove negative margin issues on containers
+   * @see https://material-ui.com/components/grid/#negative-margin
+   */
+  marginFix: PropTypes.bool
+};
+
+exports.default = Grid;

package/dist/cjs/components/Grid.styled.cjs

@@ -0,0 +1,12 @@
+"use strict";
+'use strict';
+
+var Box = require('@mui/material/Box');
+var styles = require('@mui/material/styles');
+
+const StyledGridBox = styles.styled(Box)(({ borderStyle, error, theme }) => ({
+  border: `${borderStyle} 1px ${error ? theme.palette.error.main : theme.palette.grey.A100}`,
+  borderRadius: theme.shape.borderRadius
+}));
+
+exports.StyledGridBox = StyledGridBox;

package/dist/cjs/components/Heading.cjs

@@ -0,0 +1,41 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('@mui/material/Typography');
+
+function Heading({
+  as,
+  children,
+  color = "textPrimary",
+  italic = false,
+  transform = void 0,
+  weight = "600",
+  sx = {},
+  ...rest
+}) {
+  const textStyles = {
+    fontWeight: weight,
+    ...italic && { fontStyle: "italic" },
+    ...transform && { textTransform: transform }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Typography,
+    {
+      ...rest,
+      color,
+      component: as,
+      variant: as,
+      paragraph: false,
+      sx: {
+        ...textStyles,
+        ...sx
+      },
+      children
+    }
+  );
+}
+
+exports.default = Heading;

package/dist/cjs/components/IconButton.cjs

@@ -0,0 +1,31 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var IconButton_styled = require('./IconButton.styled.cjs');
+
+function IconButton({
+  children,
+  color = "default",
+  edges = "smooth",
+  disabled = false,
+  size = "medium",
+  ...others
+}) {
+  const rest = { size, ...others };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconButton_styled.default,
+    {
+      type: "button",
+      color,
+      edges,
+      disabled,
+      ...rest,
+      children
+    }
+  );
+}
+
+exports.default = IconButton;

package/dist/cjs/components/IconButton.styled.cjs

@@ -0,0 +1,31 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+var IconButton = require('@mui/material/IconButton');
+var Button_styled = require('./Button.styled.cjs');
+
+const sizeStyles = ({ size }) => react.css`
+  ${size === "small" && react.css`
+    font-size: 24px;
+  `}
+  ${size === "medium" && react.css`
+    font-size: 30px;
+  `}
+    ${size === "large" && react.css`
+    font-size: 36px;
+  `}
+`;
+const StyledIconButton = styles.styled(IconButton)`
+  ${({ disabled, edges, size, theme }) => react.css`
+    padding: 4px;
+    ${disabled && Button_styled.disabledStyles}
+    ${Button_styled.edgesStyles({ edges, theme })}
+    ${sizeStyles({ size })}
+  `}
+`;
+
+exports.default = StyledIconButton;

package/dist/cjs/components/Icons.cjs

@@ -0,0 +1,62 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var AddCircleIcon = require('@mui/icons-material/AddCircle');
+var Heading = require('./Heading.cjs');
+var Link = require('./Link.cjs');
+var Text = require('./Text.cjs');
+
+const Code = styled.code`
+  line-height: 1;
+  margin: 0 2px;
+  padding: 3px 5px;
+  white-space: nowrap;
+  border-radius: 3px;
+  font-size: 13px;
+  border: 1px solid #eeeeee;
+  color: rgba(51, 51, 51, 0.9);
+  background-color: #f8f8f8;
+`;
+function Icons() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h3", children: "Icons" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Text.default, { color: "inherit", children: [
+      "This design system uses ",
+      /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "@mui/icons-material" }),
+      ", which includes the 1,100+ official Material icons converted to ",
+      /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "SvgIcon" }),
+      " ",
+      "components."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Text.default, { color: "inherit", children: [
+      "Visit",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Link.default,
+        {
+          href: "https://material-ui.com/components/material-icons/",
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Material UI Documentation"
+        }
+      ),
+      " ",
+      "for full list and examples."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h5", children: "Basic usage" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text.default, { as: "div", children: /* @__PURE__ */ jsxRuntime.jsx(Code, { children: "import AddCircleIcon from '@mui/icons-material/AddCircle';" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text.default, { as: "div", paragraph: false, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AddCircleIcon, {}),
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(Text.default, { as: "span", paragraph: false, children: "Add Circle Icon" })
+    ] }) })
+  ] });
+}
+
+exports.default = Icons;

package/dist/cjs/components/LinearProgress.cjs

@@ -0,0 +1,14 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var LinearProgress$1 = require('@mui/material/LinearProgress');
+
+function LinearProgress({ ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress$1, { ...rest });
+}
+
+exports.default = LinearProgress;

package/dist/cjs/components/Link.cjs

@@ -0,0 +1,37 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Link_styled = require('./Link.styled.cjs');
+
+function Link({ children, color = "primary", underline = "none", ...others }) {
+  const rest = { color, underline, ...others };
+  return /* @__PURE__ */ jsxRuntime.jsx(Link_styled.StyledLink, { ...rest, children });
+}
+Link.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * The color of the link.
+   */
+  color: PropTypes.oneOf([
+    "error",
+    "inherit",
+    "primary",
+    "secondary",
+    "textPrimary",
+    "textSecondary"
+  ]),
+  /**
+   * When the link should have an underline.
+   */
+  underline: PropTypes.oneOf(["always", "hover", "none"])
+};
+
+exports.default = Link;

package/dist/cjs/components/Link.styled.cjs

@@ -0,0 +1,39 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+
+const colour = (color, theme) => {
+  const colors = {
+    error: theme.palette.error.main,
+    inherit: "inherit",
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    textPrimary: theme.palette.text.primary,
+    textSecondary: theme.palette.text.secondary
+  };
+  if (colors[color]) {
+    return colors[color];
+  }
+  return colors.inherit;
+};
+const StyledLink = styled.a`
+  ${({ color, underline, theme }) => styled.css`
+    font-family: ${theme.typography.fontFamily};
+    font-weight: 500;
+    text-decoration: none;
+    ${underline === "hover" && styled.css`
+      &:hover {
+        text-decoration: underline;
+      }
+    `}
+    ${underline === "always" && styled.css`
+      text-decoration: underline;
+    `}
+    ${color && styled.css`
+      color: ${colour(color, theme)};
+    `}
+  `}
+`;
+
+exports.StyledLink = StyledLink;

package/dist/cjs/components/Media.cjs

@@ -0,0 +1,44 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Media_styled = require('./Media.styled.cjs');
+
+function Media({ as = "div", skeleton = false, src, title = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Media_styled.StyledMediaEl, { children: [
+    skeleton && /* @__PURE__ */ jsxRuntime.jsx(Media_styled.StyledMediaSkeleton, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Media_styled.StyledMedia,
+      {
+        as,
+        src: !skeleton ? src : "",
+        title,
+        alt: as === "img" ? title : ""
+      }
+    )
+  ] });
+}
+Media.propTypes = {
+  /**
+   * Which image node to render as
+   */
+  as: PropTypes.oneOf(["div", "img"]),
+  /**
+   * Specifies the path to the image
+   */
+  src: PropTypes.string.isRequired,
+  /**
+   * If `true`, shows component in loading state
+   */
+  skeleton: PropTypes.bool,
+  /**
+   * Specifies an title & alternate text for an image
+   */
+  title: PropTypes.string
+};
+
+exports.default = Media;