@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/esm/components/Tabs.js

@@ -0,0 +1,61 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { StyledTabs } from './Tabs.styled.js';
+
+function Tabs({
+  action = () => {
+  },
+  activecolor,
+  children,
+  value = false,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    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
+};
+
+export { Tabs as default };

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

@@ -0,0 +1,88 @@
+"use strict";
+import styled, { css } from 'styled-components';
+import MuiTabs from '@mui/material/Tabs';
+
+const arrowStyles = (show) => 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 }) => 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" && css`
+          background: ${theme.palette[activecolor].main};
+          color: ${theme.palette[activecolor].contrastText};
+        `}
+        ${activecolor === "inherit" && 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" && css`
+          background: ${theme.palette[activecolor].main};
+          color: ${theme.palette[activecolor].contrastText};
+        `}
+        ${activecolor === "inherit" && css`
+          background: inherit;
+          color: inherit;
+        `}
+      }
+
+      & .MuiTabs-indicator:after {
+        ${arrowStyles(true)}
+      }
+    }
+  `}
+`;
+
+export { StyledTabs };

package/dist/esm/components/Tag.js

@@ -0,0 +1,33 @@
+"use strict";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import StyledTag, { StyledTagIcon, StyledTagIconDot } from './Tag.styled.js';
+
+function Tag({
+  endIcon = void 0,
+  label,
+  startIcon = void 0,
+  color = "default",
+  edges = "smooth",
+  size = "medium",
+  variant = "standard",
+  ...others
+}) {
+  return /* @__PURE__ */ jsxs(
+    StyledTag,
+    {
+      color,
+      edges,
+      variant,
+      size,
+      ...others,
+      children: [
+        startIcon && /* @__PURE__ */ jsx(StyledTagIcon, { size, children: startIcon }),
+        !startIcon && !endIcon && /* @__PURE__ */ jsx(StyledTagIcon, { size, children: /* @__PURE__ */ jsx(StyledTagIconDot, {}) }),
+        /* @__PURE__ */ jsx("span", { children: label }),
+        endIcon && /* @__PURE__ */ jsx(StyledTagIcon, { size, children: endIcon })
+      ]
+    }
+  );
+}
+
+export { Tag as default };

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

@@ -0,0 +1,114 @@
+"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const StyledTagIcon = styled.span`
+  ${({ size }) => css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    ${size === "small" && css`
+      width: 10px;
+      height: 10px;
+    `}
+
+    ${size === "medium" && css`
+      width: 12px;
+      height: 12px;
+    `}
+
+  ${size === "large" && css`
+      width: 14px;
+      height: 14px;
+    `}
+  `}
+`;
+const edgesStyles = ({ edges, theme }) => css`
+  ${edges === "smooth" && css`
+    border-radius: ${getObjectProp(theme, "shape.borderRadius") || 4}px;
+  `}
+  ${edges === "sharp" && css`
+    border-radius: 0px;
+  `}
+    ${edges === "rounded" && css`
+    border-radius: 99999px;
+  `}
+`;
+const sizeStyles = ({ size }) => css`
+  ${size === "small" && css`
+    font-size: 10px;
+    height: 18px;
+    line-height: 18px;
+    padding: 0px 6px;
+  `}
+
+  ${size === "medium" && css`
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0px 8px;
+  `}
+
+  ${size === "large" && css`
+    font-size: 14px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0px 10px;
+  `}
+`;
+const containedStyles = ({
+  color,
+  theme
+}) => css`
+  background-color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
+  color: ${getObjectProp(theme, `vars.palette.${color}.contrastText`)};
+`;
+const standardStyles = ({
+  color,
+  theme
+}) => css`
+  background-color: ${getObjectProp(theme, `vars.palette.${color}.light`)};
+  color: ${getObjectProp(theme, `vars.palette.${color}.main`)};
+`;
+const outlinedStyles = ({
+  color,
+  theme
+}) => css`
+  background-color: transparent;
+  border: 1px solid currentColor;
+  color: ${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
+}) => 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 })}
+  `}
+`;
+
+export { StyledTagIcon, StyledTagIconDot, StyledTag as default };

package/dist/esm/components/Text.js

@@ -0,0 +1,32 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import Typography from '@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__ */ jsx(Typography, { component, ...others, sx: styles, children });
+}
+
+export { Text as default };

package/dist/esm/components/TextInput.js

@@ -0,0 +1,141 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import InputAdornment from '@mui/material/InputAdornment';
+import FormControl from './FormControl.js';
+import FormLabel from './FormLabel.js';
+import StyledTextInput from './TextInput.styled.js';
+import { toNumber } from '../utils/helpers/number.js';
+import Box from './Box.js';
+
+const typeMap = {
+  number: "text"
+};
+const TextInput = 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] = useState(
+    rest.value ? rest.value.length : 0
+  );
+  const inputAttrs = {
+    minLength,
+    ...type === "number" && { inputMode: "decimal" },
+    ...!!maxLength && 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__ */ 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__ */ 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__ */ jsxs(Box, { display: "flex", mb: "8px", children: [
+    /* @__PURE__ */ jsx(Box, { as: "span", children: /* @__PURE__ */ jsx(
+      FormLabel,
+      {
+        disabled,
+        htmlFor: id,
+        required,
+        margin: "none",
+        size,
+        children: label
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        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__ */ jsx(
+    FormControl,
+    {
+      color,
+      id: props.id,
+      label: controlLabel,
+      helperText,
+      showError,
+      message: errorMessage || message,
+      fullWidth,
+      disabled,
+      required,
+      size,
+      ref,
+      children: /* @__PURE__ */ jsx(
+        StyledTextInput,
+        {
+          ...props,
+          error: true,
+          ...showCounter && { onKeyUp: handleChange }
+        }
+      )
+    }
+  );
+});
+
+export { TextInput as default };

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

@@ -0,0 +1,105 @@
+"use strict";
+import { css } from '@emotion/react';
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import { getObjectProp } from '../utils/helpers/object.js';
+
+const colorStyles = ({ color, theme }) => css`
+  ${color === "default" && css`
+    border: 1px solid ${getObjectProp(theme, "vars.palette.grey.400")};
+  `}
+
+  ${color !== "default" && css`
+    border: 1px solid ${getObjectProp(theme, `vars.palette.${color}.main`)};
+    background-color: ${getObjectProp(theme, `vars.palette.${color}.light`)};
+  `}
+`;
+const disabledStyles = ({ theme }) => css`
+  border-color: ${getObjectProp(theme, "vars.palette.grey.200")};
+  color: ${getObjectProp(theme, "vars.palette.grey.600")};
+  background-color: ${getObjectProp(theme, "vars.palette.grey.200")};
+`;
+const edgesStyles = ({ edges, theme }) => css`
+  ${edges === "smooth" && css`
+    border-radius: ${getObjectProp(theme, "vars.shape.borderRadius")};
+  `}
+  ${edges === "sharp" && css`
+    border-radius: 0px;
+  `}
+    ${edges === "rounded" && css`
+    border-radius: 9999px;
+  `}
+`;
+const focusStyles = ({ theme, color }) => css`
+  ${color === "default" && css`
+    &:focus-within {
+      box-shadow: 0px 0px 6px 0px
+        ${getObjectProp(theme, "vars.palette.info.main")};
+      border-color: ${getObjectProp(theme, "vars.palette.info.main")};
+    }
+  `}
+  ${color !== "default" && css`
+    &:focus-within {
+      box-shadow: 0px 0px 6px 0px
+        ${getObjectProp(theme, `vars.palette.${color}.main`)};
+    }
+  `}
+
+  > input:focus::placeholder {
+    opacity: 0;
+  }
+`;
+const hoverStyles = css`
+  &:hover {
+    border-color: #1f1c4f;
+  }
+`;
+const placeholderStyles = ({ theme }) => css`
+  > input::placeholder {
+    color: ${getObjectProp(theme, "vars.palette.grey.600")};
+    opacity: 1;
+    transition: none;
+  }
+`;
+const readOnlyStyles = ({ theme }) => css`
+  background-color: ${getObjectProp(theme, "vars.palette.background.muted")};
+`;
+const sizeStyles = ({ size, multiline, theme }) => css`
+  ${size === "small" && css`
+    height: 36px;
+    padding: 8px 12px;
+    font-size: calc(${getObjectProp(theme, "typography.fontSize")}px - 2px);
+  `}
+  ${size === "medium" && css`
+    height: 48px;
+    padding: 12px 16px;
+    font-size: ${getObjectProp(theme, "typography.fontSize")}px;
+  `}
+  ${multiline && css`
+    height: auto;
+    min-height: 78px;
+  `}
+`;
+const StyledTextInput = styled(InputBase)`
+  ${({ color, disabled, edges, multiline, readOnly, size, theme }) => css`
+    background-color: #fff;
+    font-weight: 400;
+    transition: none;
+    color: ${getObjectProp(theme, "vars.palette.text.primary")};
+
+    ${colorStyles({ color, theme })}
+    ${edgesStyles({ edges, theme })}
+    ${!disabled && !readOnly && hoverStyles}
+    ${!disabled && !readOnly && focusStyles({ theme, color })}
+    ${!disabled && readOnly && readOnlyStyles({ theme })}
+    ${disabled && disabledStyles({ theme })}
+    ${placeholderStyles({ theme })}
+    ${sizeStyles({ size, multiline, theme })}
+
+    > input {
+      padding: 0;
+    }
+  `}
+`;
+
+export { colorStyles, StyledTextInput as default, disabledStyles, edgesStyles, focusStyles, hoverStyles, placeholderStyles, readOnlyStyles, sizeStyles };

package/dist/esm/components/ThemeProvider.js

@@ -0,0 +1,39 @@
+"use strict";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider as ThemeProvider$2 } from '@emotion/react';
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import { createTheme, StyledEngineProvider, ThemeProvider as ThemeProvider$3 } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import theme from '../theme/index.js';
+
+function ThemeProvider({ theme: theme$1 = {}, children, ...rest }) {
+  const mergedTheme = createTheme({
+    ...theme,
+    ...theme$1,
+    cssVariables: { cssVarPrefix: "tn" }
+  });
+  return /* @__PURE__ */ jsx(StyledEngineProvider, { children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme: mergedTheme, children: /* @__PURE__ */ jsx(ThemeProvider$2, { theme: mergedTheme, children: /* @__PURE__ */ jsxs(ThemeProvider$3, { theme: mergedTheme, ...rest, children: [
+    /* @__PURE__ */ jsx(CssBaseline, {}),
+    children
+  ] }) }) }) });
+}
+ThemeProvider.propTypes = {
+  theme: PropTypes.shape({
+    breakpoints: PropTypes.object,
+    mixins: PropTypes.object,
+    overrides: PropTypes.object,
+    palette: PropTypes.object,
+    props: PropTypes.object,
+    shadows: PropTypes.array,
+    typography: PropTypes.object,
+    spacing: PropTypes.func,
+    shape: PropTypes.object,
+    transitions: PropTypes.object,
+    zIndex: PropTypes.object
+  }),
+  children: PropTypes.any.isRequired
+};
+
+export { ThemeProvider as default };