@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/TabPanel.styled.cjs

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

package/dist/cjs/components/Table.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiTable = require('@mui/material/Table');
+
+function Table({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTable, { ...rest, children });
+}
+Table.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = Table;

package/dist/cjs/components/TableBody.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiTableBody = require('@mui/material/TableBody');
+
+function TableBody({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTableBody, { ...rest, children });
+}
+TableBody.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = TableBody;

package/dist/cjs/components/TableCell.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiTableCell = require('@mui/material/TableCell');
+
+function TableCell({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTableCell, { ...rest, children });
+}
+TableCell.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = TableCell;

package/dist/cjs/components/TableContainer.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiTableContainer = require('@mui/material/TableContainer');
+
+function TableContainer({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTableContainer, { ...rest, children });
+}
+TableContainer.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = TableContainer;

package/dist/cjs/components/TableFooter.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiTableFooter = require('@mui/material/TableFooter');
+
+function TableFooter({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTableFooter, { ...rest, children });
+}
+TableFooter.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = TableFooter;

package/dist/cjs/components/TableHead.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiTableHead = require('@mui/material/TableHead');
+
+function TableHead({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTableHead, { ...rest, children });
+}
+TableHead.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = TableHead;

package/dist/cjs/components/TableRow.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiTableRow = require('@mui/material/TableRow');
+
+function TableRow({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiTableRow, { ...rest, children });
+}
+TableRow.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = TableRow;

package/dist/cjs/components/Tabs.cjs

@@ -0,0 +1,65 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var Tabs_styled = require('./Tabs.styled.cjs');
+
+function Tabs({
+  action = () => {
+  },
+  activecolor,
+  children,
+  value = false,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tabs_styled.StyledTabs,
+    {
+      ...rest,
+      action,
+      value,
+      activecolor,
+      textColor: "inherit",
+      children
+    }
+  );
+}
+Tabs.propTypes = {
+  /**
+   * Color to highlight selected tab
+   */
+  activecolor: PropTypes.oneOf([
+    "default",
+    "primary",
+    "primaryAlt",
+    "secondary",
+    "secondaryAlt",
+    "tertiary",
+    "info",
+    "inherit"
+  ]).isRequired,
+  /**
+   * Callback fired when the component mounts. This is useful when you want to
+   * trigger an action programmatically. It supports two actions: `updateIndicator()`
+   * and `updateScrollButtons()`
+   */
+  action: PropTypes.func,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Callback fired when the value changes.
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * The value of the currently selected Tab. If `false` no tab will be selected
+   */
+  value: PropTypes.any
+};
+
+exports.default = Tabs;

package/dist/cjs/components/Tabs.styled.cjs

@@ -0,0 +1,90 @@
+"use strict";
+'use strict';
+
+var styled = require('styled-components');
+var MuiTabs = require('@mui/material/Tabs');
+
+const arrowStyles = (show) => styled.css`
+  content: '';
+  display: ${show ? "block" : "none"};
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 6px 6px 6px;
+  border-style: solid;
+  border-color: transparent transparent #fff transparent;
+`;
+const StyledTabs = styled(MuiTabs)`
+  ${({ activecolor, theme }) => styled.css`
+    @media screen and (max-width: 767px) {
+      & .MuiTabs-flexContainer {
+        flex-direction: column;
+      }
+
+      & .MuiTab-root {
+        max-width: none;
+        position: relative;
+        padding-top: 15px;
+        padding-bottom: 15px;
+      }
+
+      & .MuiTab-root:after {
+        ${arrowStyles(false)}
+      }
+
+      & .MuiTab-root.Mui-selected {
+        ${activecolor !== "inherit" && styled.css`
+          background: ${theme.palette[activecolor].main};
+          color: ${theme.palette[activecolor].contrastText};
+        `}
+        ${activecolor === "inherit" && styled.css`
+          background: inherit;
+          color: inherit;
+        `}
+      }
+
+      & .MuiTab-root.Mui-selected:after {
+        display: block;
+      }
+
+      & .MuiTabs-indicator {
+        display: none;
+      }
+    }
+
+    @media screen and (min-width: 600px) {
+      .MuiTab-root {
+        min-width: 160px;
+      }
+    }
+
+    @media screen and (min-width: 768px) {
+      & .MuiTabs-flexContainer {
+        position: relative;
+        z-index: 2;
+      }
+
+      & .MuiTabs-indicator {
+        height: 100%;
+        z-index: 1;
+        ${activecolor !== "inherit" && styled.css`
+          background: ${theme.palette[activecolor].main};
+          color: ${theme.palette[activecolor].contrastText};
+        `}
+        ${activecolor === "inherit" && styled.css`
+          background: inherit;
+          color: inherit;
+        `}
+      }
+
+      & .MuiTabs-indicator:after {
+        ${arrowStyles(true)}
+      }
+    }
+  `}
+`;
+
+exports.StyledTabs = StyledTabs;

package/dist/cjs/components/Tag.cjs

@@ -0,0 +1,37 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Tag_styled = require('./Tag.styled.cjs');
+
+function Tag({
+  endIcon = void 0,
+  label,
+  startIcon = void 0,
+  color = "default",
+  edges = "smooth",
+  size = "medium",
+  variant = "standard",
+  ...others
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Tag_styled.default,
+    {
+      color,
+      edges,
+      variant,
+      size,
+      ...others,
+      children: [
+        startIcon && /* @__PURE__ */ jsxRuntime.jsx(Tag_styled.StyledTagIcon, { size, children: startIcon }),
+        !startIcon && !endIcon && /* @__PURE__ */ jsxRuntime.jsx(Tag_styled.StyledTagIcon, { size, children: /* @__PURE__ */ jsxRuntime.jsx(Tag_styled.StyledTagIconDot, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+        endIcon && /* @__PURE__ */ jsxRuntime.jsx(Tag_styled.StyledTagIcon, { size, children: endIcon })
+      ]
+    }
+  );
+}
+
+exports.default = Tag;

package/dist/cjs/components/Tag.styled.cjs

@@ -0,0 +1,120 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var styled = require('@emotion/styled');
+var object = require('../utils/helpers/object.cjs');
+
+const StyledTagIcon = styled.span`
+  ${({ size }) => react.css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    ${size === "small" && react.css`
+      width: 10px;
+      height: 10px;
+    `}
+
+    ${size === "medium" && react.css`
+      width: 12px;
+      height: 12px;
+    `}
+
+  ${size === "large" && react.css`
+      width: 14px;
+      height: 14px;
+    `}
+  `}
+`;
+const edgesStyles = ({ edges, theme }) => react.css`
+  ${edges === "smooth" && react.css`
+    border-radius: ${object.getObjectProp(theme, "shape.borderRadius") || 4}px;
+  `}
+  ${edges === "sharp" && react.css`
+    border-radius: 0px;
+  `}
+    ${edges === "rounded" && react.css`
+    border-radius: 99999px;
+  `}
+`;
+const sizeStyles = ({ size }) => react.css`
+  ${size === "small" && react.css`
+    font-size: 10px;
+    height: 18px;
+    line-height: 18px;
+    padding: 0px 6px;
+  `}
+
+  ${size === "medium" && react.css`
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0px 8px;
+  `}
+
+  ${size === "large" && react.css`
+    font-size: 14px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0px 10px;
+  `}
+`;
+const containedStyles = ({
+  color,
+  theme
+}) => react.css`
+  background-color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+  color: ${object.getObjectProp(theme, `vars.palette.${color}.contrastText`)};
+`;
+const standardStyles = ({
+  color,
+  theme
+}) => react.css`
+  background-color: ${object.getObjectProp(theme, `vars.palette.${color}.light`)};
+  color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const outlinedStyles = ({
+  color,
+  theme
+}) => react.css`
+  background-color: transparent;
+  border: 1px solid currentColor;
+  color: ${object.getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const StyledTagIconDot = styled.span`
+  display: inline-flex;
+  width: 0px;
+  height: 0px;
+  border-radius: 2px;
+  border-width: 3px;
+  border-style: solid;
+  border-color: currentColor;
+`;
+const StyledTag = styled.div`
+  ${({
+  color = "default",
+  edges = "smooth",
+  size = "medium",
+  theme,
+  variant
+}) => react.css`
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+    gap: 4px;
+
+    ${edgesStyles({ edges, theme })}
+    ${sizeStyles({ size })}
+    ${variant === "standard" && standardStyles({ color, theme })}
+    ${variant === "outlined" && outlinedStyles({ color, theme })}
+    ${variant === "contained" && containedStyles({ color, theme })}
+  `}
+`;
+
+exports.StyledTagIcon = StyledTagIcon;
+exports.StyledTagIconDot = StyledTagIconDot;
+exports.default = StyledTag;

package/dist/cjs/components/Text.cjs

@@ -0,0 +1,36 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('@mui/material/Typography');
+
+function Text({
+  as = "p",
+  children,
+  italic = false,
+  transform = void 0,
+  weight = "500",
+  display = "block",
+  paragraph = false,
+  sx = {},
+  ...others
+}) {
+  const component = paragraph ? "p" : as;
+  const inlineComponents = ["span", "small", "strong"];
+  const textStyles = {
+    fontWeight: weight,
+    ...italic && { fontStyle: "italic" },
+    ...transform && { textTransform: transform }
+  };
+  const styles = {
+    display: inlineComponents.includes(component) ? "inline-block" : display,
+    ...textStyles,
+    ...paragraph && { my: "8px" },
+    ...sx
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Typography, { component, ...others, sx: styles, children });
+}
+
+exports.default = Text;

package/dist/cjs/components/TextInput.cjs

@@ -0,0 +1,145 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var InputAdornment = require('@mui/material/InputAdornment');
+var FormControl = require('./FormControl.cjs');
+var FormLabel = require('./FormLabel.cjs');
+var TextInput_styled = require('./TextInput.styled.cjs');
+var number = require('../utils/helpers/number.cjs');
+var Box = require('./Box.cjs');
+
+const typeMap = {
+  number: "text"
+};
+const TextInput = React.forwardRef(function TextInput2({
+  autoComplete = "off",
+  autoFocus = false,
+  color = "default",
+  disabled = false,
+  edges = "smooth",
+  endAdornment = void 0,
+  errorMessage = "",
+  fullWidth = true,
+  helperText = "",
+  id = void 0,
+  inputRef = void 0,
+  inputProps = {},
+  label = "",
+  maxLength = void 0,
+  minLength = void 0,
+  message = "",
+  multiline = false,
+  name,
+  placeholder = "",
+  required = false,
+  showCounter = false,
+  showError = false,
+  size = "medium",
+  startAdornment = void 0,
+  readOnly = false,
+  type = "text",
+  ...rest
+}, ref) {
+  const [noOfChars, setNoOfChars] = React.useState(
+    rest.value ? rest.value.length : 0
+  );
+  const inputAttrs = {
+    minLength,
+    ...type === "number" && { inputMode: "decimal" },
+    ...!!maxLength && number.toNumber(maxLength) >= 0 && { maxLength },
+    ...readOnly && { readOnly },
+    ...inputProps
+  };
+  const textareaProps = { multiline, rows: 3.4 };
+  const props = {
+    autoComplete,
+    autoFocus,
+    color: showError ? "error" : color,
+    disabled,
+    endAdornment: endAdornment && /* @__PURE__ */ jsxRuntime.jsx(InputAdornment, { position: "end", variant: "outlined", children: endAdornment }),
+    edges,
+    fullWidth,
+    id: id || name,
+    inputProps: inputAttrs,
+    inputRef,
+    name,
+    placeholder,
+    required,
+    $error: showError,
+    readOnly,
+    size,
+    startAdornment: startAdornment && /* @__PURE__ */ jsxRuntime.jsx(InputAdornment, { position: "start", variant: "outlined", children: startAdornment }),
+    type: typeMap[type] || type,
+    ...multiline && textareaProps,
+    ...rest,
+    margin: "none"
+  };
+  const handleChange = (event) => {
+    const { value } = event.target;
+    setNoOfChars(value.length);
+  };
+  const controlLabel = showCounter ? /* @__PURE__ */ jsxRuntime.jsxs(Box.default, { display: "flex", mb: "8px", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box.default, { as: "span", children: /* @__PURE__ */ jsxRuntime.jsx(
+      FormLabel.default,
+      {
+        disabled,
+        htmlFor: id,
+        required,
+        margin: "none",
+        size,
+        children: label
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Box.default,
+      {
+        as: "span",
+        sx: {
+          color: disabled ? "grey.400" : "grey.600",
+          flexShrink: 0,
+          ml: "auto",
+          fontSize: (theme) => {
+            if (size === "medium") {
+              return `${theme.typography.fontSize}px`;
+            }
+            return null;
+          }
+        },
+        children: [
+          noOfChars,
+          maxLength ? ` / ${maxLength}` : ""
+        ]
+      }
+    )
+  ] }) : label;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormControl.default,
+    {
+      color,
+      id: props.id,
+      label: controlLabel,
+      helperText,
+      showError,
+      message: errorMessage || message,
+      fullWidth,
+      disabled,
+      required,
+      size,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        TextInput_styled.default,
+        {
+          ...props,
+          error: true,
+          ...showCounter && { onKeyUp: handleChange }
+        }
+      )
+    }
+  );
+});
+
+exports.default = TextInput;