@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/StatusMessage.js

@@ -0,0 +1,23 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import Alert from './Alert.js';
+
+function StatusMessage({
+  children,
+  color = "info",
+  sx = {}
+}) {
+  const styles = {
+    color: `${color}.main`,
+    border: "none",
+    background: "none",
+    padding: "0px",
+    "& .MuiAlert-icon": {
+      color: `${color}.main`
+    },
+    ...sx
+  };
+  return /* @__PURE__ */ jsx(Alert, { variant: "standard", sx: styles, children });
+}
+
+export { StatusMessage as default };

package/dist/esm/components/StepIcon.js

@@ -0,0 +1,46 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import CheckIcon from '@mui/icons-material/Check';
+import { StyledContainer, StyledText } from './StepIcon.styled.js';
+
+function StepIcon({ active, completed, error, icon }) {
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const commonProps = {
+    active,
+    completed,
+    error,
+    isMobile
+  };
+  return /* @__PURE__ */ jsx(StyledContainer, { ...commonProps, children: (() => {
+    if (error) {
+      return /* @__PURE__ */ jsx(StyledText, { align: "center", ...commonProps, children: "!" });
+    }
+    if (completed && !active) {
+      return /* @__PURE__ */ jsx(CheckIcon, {});
+    }
+    return /* @__PURE__ */ jsx(StyledText, { align: "center", ...commonProps, children: icon });
+  })() });
+}
+StepIcon.propTypes = {
+  /**
+   * Whether this step is active.
+   */
+  active: PropTypes.bool.isRequired,
+  /**
+   * Mark the step as completed.
+   */
+  completed: PropTypes.bool.isRequired,
+  /**
+   * Whether this step has an error.
+   */
+  error: PropTypes.bool.isRequired,
+  /**
+   * Which step are we displaying
+   */
+  icon: PropTypes.node.isRequired
+};
+
+export { StepIcon as default };

package/dist/esm/components/StepIcon.styled.js

@@ -0,0 +1,54 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+
+const backgroundColorStyles = (active, completed, error, theme) => {
+  if (active || completed) {
+    return theme.palette.primary.main;
+  }
+  if (error) {
+    return theme.palette.secondary.main;
+  }
+  return "#fff";
+};
+const borderStyles = (active, completed, error, theme) => {
+  if (active || completed) {
+    return `1px solid ${theme.palette.primary.main}`;
+  }
+  if (!completed || error) {
+    return `1px solid ${theme.palette.secondary.main}`;
+  }
+  return `1px solid ${theme.palette.grey[400]}`;
+};
+const textColorStyles = (active, completed, error, theme) => {
+  if (!active && !error && !completed) {
+    return theme.palette.secondary.main;
+  }
+  return "#fff";
+};
+const StyledContainer = styled("div")(
+  ({ active, completed, error, isMobile, theme }) => ({
+    borderRadius: 99,
+    height: isMobile ? 32 : 50,
+    width: isMobile ? 32 : 50,
+    display: "flex",
+    zIndex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    fontWeight: 700,
+    backgroundColor: backgroundColorStyles(active, completed, error, theme),
+    border: borderStyles(active, completed, error, theme),
+    "& svg": {
+      color: "#fff"
+    }
+  })
+);
+const StyledText = styled(Typography)(
+  ({ active, completed, error, isMobile, theme }) => ({
+    fontSize: isMobile ? 16 : 22,
+    fontWeight: 700,
+    color: textColorStyles(active, completed, error, theme)
+  })
+);
+
+export { StyledContainer, StyledText };

package/dist/esm/components/Stepper.js

@@ -0,0 +1,54 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import PropTypes from 'prop-types';
+import StepButton from '@mui/material/StepButton';
+import Step from '@mui/material/Step';
+import MuiStepper from '@mui/material/Stepper';
+import StepLabel from '@mui/material/StepLabel';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import StepIcon from './StepIcon.js';
+import Heading from './Heading.js';
+import { StyledContainer } from './Stepper.styled.js';
+
+function Stepper({ steps, onChange = () => null, ...rest }) {
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const [activeStep, setActiveStep] = React.useState(0);
+  const handleStep = (step) => () => {
+    setActiveStep(step);
+    onChange(step);
+  };
+  return /* @__PURE__ */ jsxs(StyledContainer, { isMobile, children: [
+    isMobile && /* @__PURE__ */ jsx(Heading, { as: "h3", align: "center", gutterBottom: false, children: steps[activeStep].label }),
+    /* @__PURE__ */ jsx(
+      MuiStepper,
+      {
+        alternativeLabel: true,
+        activeStep,
+        ...rest,
+        style: { padding: isMobile ? "18px 0" : "5px 0px 24px 0px" },
+        children: steps.map(({ label, error, completed, disabled }, index) => /* @__PURE__ */ jsx(Step, { completed, disabled: !!disabled, children: /* @__PURE__ */ jsx(StepButton, { onClick: handleStep(index), children: /* @__PURE__ */ jsx(StepLabel, { error, StepIconComponent: StepIcon, children: !isMobile && label }) }) }, label))
+      }
+    )
+  ] });
+}
+Stepper.propTypes = {
+  /**
+   * Array of step labels
+   */
+  steps: PropTypes.arrayOf(
+    PropTypes.shape({
+      optional: PropTypes.bool,
+      label: PropTypes.string,
+      error: PropTypes.bool,
+      completed: PropTypes.bool,
+      disabled: PropTypes.bool
+    })
+  ).isRequired,
+  /**
+   * Function to trigger action when activeStep changes...
+   */
+  onChange: PropTypes.func
+};
+
+export { Stepper as default };

package/dist/esm/components/Stepper.styled.js

@@ -0,0 +1,59 @@
+"use strict";
+import { styled } from '@mui/material/styles';
+
+const StyledContainer = styled("div")(({ isMobile, theme }) => ({
+  width: "100%",
+  paddingTop: isMobile ? 12 : 0,
+  "& .MuiStepper-root": {
+    paddingLeft: isMobile ? 0 : null,
+    paddingRight: isMobile ? 0 : null
+  },
+  "& .MuiStepConnector-alternativeLabel": {
+    top: "auto",
+    bottom: isMobile ? 15 : 25,
+    zIndex: 0
+  },
+  "& .MuiStepConnector-lineHorizontal": {
+    borderWidth: "2px"
+  },
+  "& .MuiStepConnector-completed .MuiStepConnector-lineHorizontal": {
+    borderColor: theme.palette.primary.main
+  },
+  "& .MuiStepper-alternativeLabel": {
+    alignItems: "flex-end"
+  },
+  "& .MuiStepButton-root": {
+    paddingTop: isMobile ? 0 : null
+  },
+  "& .MuiStepLabel-alternativeLabel": {
+    flexDirection: "column-reverse",
+    marginTop: theme.spacing(2),
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  "& .MuiStepLabel-alternativeLabel .Mui-error": {
+    color: theme.palette.secondary.main
+  },
+  "& .MuiStepConnector-horizontal": {
+    left: isMobile ? "-50%" : null,
+    right: isMobile ? "50%" : null
+  },
+  "& .MuiStepButton-touchRipple": {
+    display: "none"
+  },
+  // disabled state
+  "& .MuiStepLabel-alternativeLabel:not(.Mui-error), & .MuiStep-alternativeLabel:not(.MuiStep-completed)": {
+    "& .Mui-disabled .MuiStepLabel-iconContainer > div": {
+      border: "1px solid rgba(236, 0, 140, 0.5)"
+    },
+    "& .Mui-disabled .MuiStepLabel-iconContainer > div > p": {
+      color: "rgba(236, 0, 140, 0.5)"
+    }
+  },
+  "& .MuiStepLabel-alternativeLabel.Mui-error, & .MuiStepLabel-alternativeLabel.Mui-error.Mui-disabled": {
+    "& .MuiStepLabel-iconContainer > div > p": {
+      color: "#fff !important"
+    }
+  }
+}));
+
+export { StyledContainer };

package/dist/esm/components/SuccessModal.js

@@ -0,0 +1,39 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import { StyledContent, StyledIcon } from './SuccessModal.styled.js';
+import Heading from './Heading.js';
+import Modal from './Modal.js';
+import ModalContent from './ModalContent.js';
+
+function SuccessModal({ duration = 1500, message = "Saved!", show = false }) {
+  const [isOpen, setIsOpen] = useState(false);
+  useEffect(() => {
+    if (show) {
+      setIsOpen(true);
+      setTimeout(() => setIsOpen(false), duration);
+    }
+  }, [duration, show]);
+  return /* @__PURE__ */ jsx(Modal, { open: isOpen, fullWidth: true, maxWidth: "sm", hideBackdrop: true, children: /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsxs(StyledContent, { children: [
+    /* @__PURE__ */ jsx(StyledIcon, { children: /* @__PURE__ */ jsx(CheckCircleOutlineIcon, {}) }),
+    /* @__PURE__ */ jsx(Heading, { align: "center", as: "h4", gutterBottom: false, children: message })
+  ] }) }) });
+}
+SuccessModal.propTypes = {
+  /**
+   * How long modal should remain visible on screen
+   */
+  duration: PropTypes.number,
+  /**
+   * Message to display under the icon
+   */
+  message: PropTypes.string,
+  /**
+   * If `true`, then modal will be visible
+   */
+  show: PropTypes.bool
+};
+
+export { SuccessModal as default };

package/dist/esm/components/SuccessModal.styled.js

@@ -0,0 +1,19 @@
+"use strict";
+import styled, { css } from 'styled-components';
+
+const StyledContent = styled.div`
+  text-align: center;
+  padding: 5rem;
+  & svg {
+    font-size: 150px;
+  }
+`;
+const StyledIcon = styled.div`
+  ${({ theme }) => css`
+    display: inline-flex;
+    margin-bottom: 10px;
+    color: ${theme.palette.success.main};
+  `}
+`;
+
+export { StyledContent, StyledIcon };

package/dist/esm/components/Switch.js

@@ -0,0 +1,42 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import FormLabel from './FormLabel.js';
+import { StyledSwitch, StyledSwitchInput, StyledSwitchTrack, StyledSwitchKnob } from './Switch.styled.js';
+
+function Switch({
+  checked = void 0,
+  color = "primary",
+  defaultChecked = void 0,
+  disabled = false,
+  label = void 0,
+  onChange = void 0,
+  name,
+  required = void 0,
+  size = "medium",
+  value = void 0
+}) {
+  const inputProps = {
+    disabled,
+    ...checked !== void 0 && { checked },
+    ...defaultChecked !== void 0 && { defaultChecked },
+    ...onChange !== void 0 && { onChange },
+    ...required !== void 0 && { required },
+    ...value !== void 0 && { value }
+  };
+  return /* @__PURE__ */ jsxs(StyledSwitch, { disabled, size, children: [
+    /* @__PURE__ */ jsx(
+      StyledSwitchInput,
+      {
+        color,
+        name,
+        size,
+        ...inputProps,
+        type: "checkbox"
+      }
+    ),
+    label && /* @__PURE__ */ jsx(FormLabel, { required, margin: "none", size, children: label }),
+    /* @__PURE__ */ jsx(StyledSwitchTrack, { size, children: /* @__PURE__ */ jsx(StyledSwitchKnob, { size }) })
+  ] });
+}
+
+export { Switch as default };

package/dist/esm/components/Switch.styled.js

@@ -0,0 +1,103 @@
+"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const StyledSwitch = styled.label`
+  ${({ disabled }) => css`
+    position: relative;
+    cursor: pointer;
+    display: inline-flex;
+    gap: 20px;
+    align-items: center;
+    ${disabled && css`
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+  `}
+`;
+const StyledSwitchLabel = styled.span`
+  ${({ required, theme }) => css`
+    font-size: 13px;
+    font-weight: 600;
+    color: ${getObjectProp(theme, "palette.text.primary")};
+
+    ${required && css`
+      &:after {
+        content: '*';
+        color: ${getObjectProp(theme, "palette.error.main")};
+      }
+    `}
+  `}
+`;
+const StyledSwitchKnob = styled.span`
+  ${({ size, theme }) => css`
+    border-radius: 99999px;
+    box-shadow: ${getObjectProp(theme, "shadows.1")};
+    background: #fff;
+    position: absolute;
+    transition:
+      translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    ${size === "medium" && css`
+      width: 20px;
+      height: 20px;
+      top: 2px;
+      left: 2px;
+    `}
+
+    ${size === "small" && css`
+      width: 14px;
+      height: 14px;
+      top: 2px;
+      left: 2px;
+    `}
+  `}
+`;
+const StyledSwitchTrack = styled.span`
+  ${({ size, theme }) => css`
+    position: relative;
+    background: ${getObjectProp(theme, "palette.grey.300")};
+    transition: background 150ms linear;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    &:focus {
+      box-shadow: 0px 0px 6px #1f1c4f;
+    }
+
+    ${size === "medium" && css`
+      height: 24px;
+      width: 44px;
+      border-radius: 12px;
+    `}
+
+    ${size === "small" && css`
+      height: 18px;
+      width: 38px;
+      border-radius: 11px;
+    `}
+  `}
+`;
+const StyledSwitchInput = styled.input`
+  ${({ color, size, theme }) => css`
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    visibility: hidden;
+    opacity: 0;
+
+    &:checked ~ ${StyledSwitchTrack} {
+      background: ${getObjectProp(theme, `palette.${color}.main`)};
+    }
+
+    &:checked ~ ${StyledSwitchTrack} ${StyledSwitchKnob} {
+      transform: translateX(${size === "small" ? "20" : "20"}px);
+    }
+  `}
+`;
+
+export { StyledSwitch, StyledSwitchInput, StyledSwitchKnob, StyledSwitchLabel, StyledSwitchTrack };

package/dist/esm/components/Tab.js

@@ -0,0 +1,35 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledTab } from './Tab.styled.js';
+
+function Tab({ label, disabled = false, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    StyledTab,
+    {
+      label,
+      disabled,
+      ...rest,
+      disableRipple: true,
+      disableFocusRipple: true,
+      disableTouchRipple: true
+    }
+  );
+}
+Tab.propTypes = {
+  /**
+   * If `true`, the tab will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The content of the component. React component, node, text etc.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value: PropTypes.any.isRequired
+};
+
+export { Tab as default };

package/dist/esm/components/Tab.styled.js

@@ -0,0 +1,12 @@
+"use strict";
+import styled from 'styled-components';
+import MuiTab from '@mui/material/Tab';
+
+const StyledTab = styled(MuiTab)`
+  line-height: 1.4;
+  &&:not(:disabled) {
+    opacity: 1;
+  }
+`;
+
+export { StyledTab };

package/dist/esm/components/TabPanel.js

@@ -0,0 +1,26 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledTabPanel } from './TabPanel.styled.js';
+
+function TabPanel({ children, index, value }) {
+  return /* @__PURE__ */ jsx(StyledTabPanel, { index, value, children });
+}
+TabPanel.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Tab content number
+   */
+  index: PropTypes.any.isRequired,
+  /**
+   * The value of the corresponding Tab. Must use the
+   * `index` of the Tab when no value was passed to Tab.
+   */
+  value: PropTypes.any.isRequired
+};
+
+export { TabPanel as default };

package/dist/esm/components/TabPanel.styled.js

@@ -0,0 +1,10 @@
+"use strict";
+import styled, { css } from 'styled-components';
+
+const StyledTabPanel = styled.div`
+  ${({ index, value }) => css`
+    display: ${index === value ? "block" : "none"};
+  `}
+`;
+
+export { StyledTabPanel };

package/dist/esm/components/Table.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiTable from '@mui/material/Table';
+
+function Table({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(MuiTable, { ...rest, children });
+}
+Table.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { Table as default };

package/dist/esm/components/TableBody.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiTableBody from '@mui/material/TableBody';
+
+function TableBody({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(MuiTableBody, { ...rest, children });
+}
+TableBody.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { TableBody as default };

package/dist/esm/components/TableCell.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiTableCell from '@mui/material/TableCell';
+
+function TableCell({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(MuiTableCell, { ...rest, children });
+}
+TableCell.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { TableCell as default };

package/dist/esm/components/TableContainer.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiTableContainer from '@mui/material/TableContainer';
+
+function TableContainer({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(MuiTableContainer, { ...rest, children });
+}
+TableContainer.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { TableContainer as default };

package/dist/esm/components/TableFooter.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiTableFooter from '@mui/material/TableFooter';
+
+function TableFooter({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(MuiTableFooter, { ...rest, children });
+}
+TableFooter.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { TableFooter as default };

package/dist/esm/components/TableHead.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiTableHead from '@mui/material/TableHead';
+
+function TableHead({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(MuiTableHead, { ...rest, children });
+}
+TableHead.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { TableHead as default };

package/dist/esm/components/TableRow.js

@@ -0,0 +1,17 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import MuiTableRow from '@mui/material/TableRow';
+
+function TableRow({ children, ...rest }) {
+  return /* @__PURE__ */ jsx(MuiTableRow, { ...rest, children });
+}
+TableRow.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+export { TableRow as default };