@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/Select.styled.cjs

@@ -0,0 +1,104 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+require('@emotion/styled');
+var styles = require('@mui/material/styles');
+var MuiMenuItem = require('@mui/material/MenuItem');
+var Select = require('@mui/material/Select');
+var TextInput_styled = require('./TextInput.styled.cjs');
+var object = require('../utils/helpers/object.cjs');
+
+const hoverStyles = react.css`
+  border-color: #1f1c4f;
+`;
+const focusStyles = ({ color, theme }) => react.css`
+  box-shadow: 0px 0px 6px 0px
+    ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+  border-color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const StyledPlaceholder = styles.styled(
+  "span"
+)`
+  ${({ disabled, theme }) => react.css`
+    color: ${object.getObjectProp(theme, "vars.palette.grey.600")};
+
+    ${disabled && `
+      color: ${object.getObjectProp(theme, "vars.palette.grey.600")};
+    `}
+  `}
+`;
+const StyledSelectValue = styles.styled(
+  "span"
+)`
+  ${({ disabled, theme }) => react.css`
+    color: ${object.getObjectProp(theme, "vars.palette.text.primary")};
+
+    ${disabled && `
+      color: ${object.getObjectProp(theme, "vars.palette.grey.600")};
+    `}
+  `}
+`;
+const StyledSelectOption = styles.styled(
+  MuiMenuItem
+)`
+  ${({ theme }) => react.css`
+    color: ${object.getObjectProp(theme, "vars.palette.text.primary")};
+  `}
+`;
+const StyledSelect = styles.styled(Select)`
+  ${({ color, disabled, $edges, multiline, readOnly, size, theme }) => react.css`
+    font-weight: 400;
+    color: ${object.getObjectProp(theme, "vars.palette.text.primary")};
+    ${TextInput_styled.edgesStyles({ edges: $edges, theme })}
+    ${TextInput_styled.sizeStyles({ size, multiline, theme })}
+
+    .MuiSvgIcon-root,
+    .MuiSelect-select {
+      z-index: 2;
+    }
+
+    .MuiSelect-select {
+      padding-left: 0px;
+    }
+
+    .MuiNativeSelect-select {
+      padding-left: 0px;
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+
+    fieldset {
+      ${TextInput_styled.colorStyles({ color, theme })}
+    }
+
+    &&:hover fieldset {
+      ${!disabled && !readOnly && hoverStyles}
+    }
+
+    &&.Mui-focused fieldset {
+      ${!disabled && !readOnly && focusStyles({ color: color === "default" ? "info" : color, theme })}
+    }
+
+    &&.Mui-readOnly fieldset {
+      ${!disabled && readOnly && TextInput_styled.readOnlyStyles({ theme })}
+      border: 1px solid ${object.getObjectProp(theme, "vars.palette.grey.600")};
+    }
+
+    &&.Mui-disabled {
+      color: ${object.getObjectProp(theme, "vars.palette.grey.600")};
+      fieldset {
+        ${disabled && TextInput_styled.disabledStyles({ theme })}
+      }
+    }
+  `}
+`;
+
+exports.StyledPlaceholder = StyledPlaceholder;
+exports.StyledSelectOption = StyledSelectOption;
+exports.StyledSelectValue = StyledSelectValue;
+exports.default = StyledSelect;
+exports.focusStyles = focusStyles;
+exports.hoverStyles = hoverStyles;

package/dist/cjs/components/Skeleton.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Skeleton$1 = require('@mui/material/Skeleton');
+
+function Skeleton({
+  animation = "pulse",
+  children = void 0,
+  light = false,
+  variant = "text",
+  ...others
+}) {
+  const rest = { animation, variant, ...others };
+  const styles = {
+    ...light && { backgroundColor: "rgba(255, 255, 255, 0.13)" }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton$1, { ...rest, sx: styles, children });
+}
+
+exports.default = Skeleton;

package/dist/cjs/components/StatusMessage.cjs

@@ -0,0 +1,27 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Alert = require('./Alert.cjs');
+
+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__ */ jsxRuntime.jsx(Alert.default, { variant: "standard", sx: styles, children });
+}
+
+exports.default = StatusMessage;

package/dist/cjs/components/StepIcon.cjs

@@ -0,0 +1,50 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var CheckIcon = require('@mui/icons-material/Check');
+var StepIcon_styled = require('./StepIcon.styled.cjs');
+
+function StepIcon({ active, completed, error, icon }) {
+  const isMobile = useMediaQuery((theme) => theme.breakpoints.down("sm"));
+  const commonProps = {
+    active,
+    completed,
+    error,
+    isMobile
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(StepIcon_styled.StyledContainer, { ...commonProps, children: (() => {
+    if (error) {
+      return /* @__PURE__ */ jsxRuntime.jsx(StepIcon_styled.StyledText, { align: "center", ...commonProps, children: "!" });
+    }
+    if (completed && !active) {
+      return /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {});
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(StepIcon_styled.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
+};
+
+exports.default = StepIcon;

package/dist/cjs/components/StepIcon.styled.cjs

@@ -0,0 +1,57 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+var Typography = require('@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 = styles.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 = styles.styled(Typography)(
+  ({ active, completed, error, isMobile, theme }) => ({
+    fontSize: isMobile ? 16 : 22,
+    fontWeight: 700,
+    color: textColorStyles(active, completed, error, theme)
+  })
+);
+
+exports.StyledContainer = StyledContainer;
+exports.StyledText = StyledText;

package/dist/cjs/components/Stepper.cjs

@@ -0,0 +1,58 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var StepButton = require('@mui/material/StepButton');
+var Step = require('@mui/material/Step');
+var MuiStepper = require('@mui/material/Stepper');
+var StepLabel = require('@mui/material/StepLabel');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var StepIcon = require('./StepIcon.cjs');
+var Heading = require('./Heading.cjs');
+var Stepper_styled = require('./Stepper.styled.cjs');
+
+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__ */ jsxRuntime.jsxs(Stepper_styled.StyledContainer, { isMobile, children: [
+    isMobile && /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h3", align: "center", gutterBottom: false, children: steps[activeStep].label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MuiStepper,
+      {
+        alternativeLabel: true,
+        activeStep,
+        ...rest,
+        style: { padding: isMobile ? "18px 0" : "5px 0px 24px 0px" },
+        children: steps.map(({ label, error, completed, disabled }, index) => /* @__PURE__ */ jsxRuntime.jsx(Step, { completed, disabled: !!disabled, children: /* @__PURE__ */ jsxRuntime.jsx(StepButton, { onClick: handleStep(index), children: /* @__PURE__ */ jsxRuntime.jsx(StepLabel, { error, StepIconComponent: StepIcon.default, 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
+};
+
+exports.default = Stepper;

package/dist/cjs/components/Stepper.styled.cjs

@@ -0,0 +1,61 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+
+const StyledContainer = styles.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"
+    }
+  }
+}));
+
+exports.StyledContainer = StyledContainer;

package/dist/cjs/components/SuccessModal.cjs

@@ -0,0 +1,43 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var CheckCircleOutlineIcon = require('@mui/icons-material/CheckCircleOutline');
+var SuccessModal_styled = require('./SuccessModal.styled.cjs');
+var Heading = require('./Heading.cjs');
+var Modal = require('./Modal.cjs');
+var ModalContent = require('./ModalContent.cjs');
+
+function SuccessModal({ duration = 1500, message = "Saved!", show = false }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (show) {
+      setIsOpen(true);
+      setTimeout(() => setIsOpen(false), duration);
+    }
+  }, [duration, show]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal.default, { open: isOpen, fullWidth: true, maxWidth: "sm", hideBackdrop: true, children: /* @__PURE__ */ jsxRuntime.jsx(ModalContent.default, { children: /* @__PURE__ */ jsxRuntime.jsxs(SuccessModal_styled.StyledContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SuccessModal_styled.StyledIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckCircleOutlineIcon, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { 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
+};
+
+exports.default = SuccessModal;

package/dist/cjs/components/SuccessModal.styled.cjs

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

package/dist/cjs/components/Switch.cjs

@@ -0,0 +1,46 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var FormLabel = require('./FormLabel.cjs');
+var Switch_styled = require('./Switch.styled.cjs');
+
+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__ */ jsxRuntime.jsxs(Switch_styled.StyledSwitch, { disabled, size, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Switch_styled.StyledSwitchInput,
+      {
+        color,
+        name,
+        size,
+        ...inputProps,
+        type: "checkbox"
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel.default, { required, margin: "none", size, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(Switch_styled.StyledSwitchTrack, { size, children: /* @__PURE__ */ jsxRuntime.jsx(Switch_styled.StyledSwitchKnob, { size }) })
+  ] });
+}
+
+exports.default = Switch;

package/dist/cjs/components/Switch.styled.cjs

@@ -0,0 +1,109 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var styled = require('@emotion/styled');
+var object = require('../utils/helpers/object.cjs');
+
+const StyledSwitch = styled.label`
+  ${({ disabled }) => react.css`
+    position: relative;
+    cursor: pointer;
+    display: inline-flex;
+    gap: 20px;
+    align-items: center;
+    ${disabled && react.css`
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+  `}
+`;
+const StyledSwitchLabel = styled.span`
+  ${({ required, theme }) => react.css`
+    font-size: 13px;
+    font-weight: 600;
+    color: ${object.getObjectProp(theme, "palette.text.primary")};
+
+    ${required && react.css`
+      &:after {
+        content: '*';
+        color: ${object.getObjectProp(theme, "palette.error.main")};
+      }
+    `}
+  `}
+`;
+const StyledSwitchKnob = styled.span`
+  ${({ size, theme }) => react.css`
+    border-radius: 99999px;
+    box-shadow: ${object.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" && react.css`
+      width: 20px;
+      height: 20px;
+      top: 2px;
+      left: 2px;
+    `}
+
+    ${size === "small" && react.css`
+      width: 14px;
+      height: 14px;
+      top: 2px;
+      left: 2px;
+    `}
+  `}
+`;
+const StyledSwitchTrack = styled.span`
+  ${({ size, theme }) => react.css`
+    position: relative;
+    background: ${object.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" && react.css`
+      height: 24px;
+      width: 44px;
+      border-radius: 12px;
+    `}
+
+    ${size === "small" && react.css`
+      height: 18px;
+      width: 38px;
+      border-radius: 11px;
+    `}
+  `}
+`;
+const StyledSwitchInput = styled.input`
+  ${({ color, size, theme }) => react.css`
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: -1;
+    visibility: hidden;
+    opacity: 0;
+
+    &:checked ~ ${StyledSwitchTrack} {
+      background: ${object.getObjectProp(theme, `palette.${color}.main`)};
+    }
+
+    &:checked ~ ${StyledSwitchTrack} ${StyledSwitchKnob} {
+      transform: translateX(${size === "small" ? "20" : "20"}px);
+    }
+  `}
+`;
+
+exports.StyledSwitch = StyledSwitch;
+exports.StyledSwitchInput = StyledSwitchInput;
+exports.StyledSwitchKnob = StyledSwitchKnob;
+exports.StyledSwitchLabel = StyledSwitchLabel;
+exports.StyledSwitchTrack = StyledSwitchTrack;

package/dist/cjs/components/Tab.cjs

@@ -0,0 +1,39 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Tab_styled = require('./Tab.styled.cjs');
+
+function Tab({ label, disabled = false, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tab_styled.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
+};
+
+exports.default = Tab;

package/dist/cjs/components/Tab.styled.cjs

@@ -0,0 +1,14 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+var MuiTab = require('@mui/material/Tab');
+
+const StyledTab = styled(MuiTab)`
+  line-height: 1.4;
+  &&:not(:disabled) {
+    opacity: 1;
+  }
+`;
+
+exports.StyledTab = StyledTab;

package/dist/cjs/components/TabPanel.cjs

@@ -0,0 +1,30 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var TabPanel_styled = require('./TabPanel.styled.cjs');
+
+function TabPanel({ children, index, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabPanel_styled.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
+};
+
+exports.default = TabPanel;