@tenancy.nz/ui 1.2.5 → 1.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/components/Switch.cjs +4 -0
  2. package/dist/cjs/components/Switch.styled.cjs +10 -12
  3. package/dist/cjs/utils/helpers/date.cjs +1 -1
  4. package/dist/esm/components/Switch.js +4 -0
  5. package/dist/esm/components/Switch.styled.js +10 -12
  6. package/dist/esm/utils/helpers/date.js +1 -1
  7. package/package.json +1 -1
package/dist/cjs/components/Switch.cjs CHANGED
@@ -54,8 +54,12 @@ function Switch(_ref) {
54
54
  margin: "none",
55
55
  size: size
56
56
  }, label), /* @__PURE__ */React.createElement(Switch_styled.StyledSwitchTrack, {
57
+ color: color,
58
+ checked: !!checked,
57
59
  size: size
58
60
  }, /* @__PURE__ */React.createElement(Switch_styled.StyledSwitchKnob, {
61
+ color: color,
62
+ checked: !!checked,
59
63
  size: size
60
64
  })));
61
65
  }
package/dist/cjs/components/Switch.styled.cjs CHANGED
@@ -5,7 +5,7 @@ var react = require('@emotion/react');
5
5
  var styled = require('@emotion/styled');
6
6
  var object = require('../utils/helpers/object.cjs');
7
7
 
8
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
8
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
9
9
  var StyledSwitch = styled.label(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n"])), function (_ref) {
10
10
  var disabled = _ref.disabled;
11
11
  return react.css(_templateObject2 || (_templateObject2 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n position: relative;\n cursor: pointer;\n display: inline-flex;\n gap: 20px;\n align-items: center;\n ", "\n "])), disabled && react.css(_templateObject3 || (_templateObject3 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n opacity: 0.5;\n pointer-events: none;\n "]))));
@@ -16,21 +16,19 @@ var StyledSwitchLabel = styled.span(_templateObject4 || (_templateObject4 = _rol
16
16
  return react.css(_templateObject5 || (_templateObject5 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n font-size: 13px;\n font-weight: 600;\n color: ", ";\n\n ", "\n "])), object.getObjectProp(theme, "palette.text.primary"), required && react.css(_templateObject6 || (_templateObject6 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n &:after {\n content: '*';\n color: ", ";\n }\n "])), object.getObjectProp(theme, "palette.error.main")));
17
17
  });
18
18
  var StyledSwitchKnob = styled.span(_templateObject7 || (_templateObject7 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n"])), function (_ref3) {
19
- var size = _ref3.size,
19
+ var checked = _ref3.checked,
20
+ size = _ref3.size,
20
21
  theme = _ref3.theme;
21
- return react.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n border-radius: 99999px;\n box-shadow: ", ";\n background: #fff;\n position: absolute;\n transition:\n translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n ", "\n\n ", "\n "])), object.getObjectProp(theme, "shadows.1"), size === "medium" && react.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n top: 2px;\n left: 2px;\n "]))), size === "small" && react.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n width: 14px;\n height: 14px;\n top: 2px;\n left: 2px;\n "]))));
22
+ return react.css(_templateObject8 || (_templateObject8 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n border-radius: 99999px;\n box-shadow: ", ";\n background: #fff;\n position: absolute;\n transition:\n translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n ", "\n\n ", "\n\n ", "\n "])), object.getObjectProp(theme, "shadows.1"), size === "medium" && react.css(_templateObject9 || (_templateObject9 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n top: 2px;\n left: 2px;\n "]))), size === "small" && react.css(_templateObject0 || (_templateObject0 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n width: 14px;\n height: 14px;\n top: 2px;\n left: 2px;\n "]))), checked && react.css(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n transform: translateX(", "px);\n "])), size === "small" ? "20" : "20"));
22
23
  });
23
- var StyledSwitchTrack = styled.span(_templateObject1 || (_templateObject1 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n"])), function (_ref4) {
24
- var size = _ref4.size,
24
+ var StyledSwitchTrack = styled.span(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n"])), function (_ref4) {
25
+ var checked = _ref4.checked,
26
+ color = _ref4.color,
27
+ size = _ref4.size,
25
28
  theme = _ref4.theme;
26
- return react.css(_templateObject10 || (_templateObject10 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n position: relative;\n background: ", ";\n transition: background 150ms linear;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n &:focus {\n box-shadow: 0px 0px 6px #1f1c4f;\n }\n\n ", "\n\n ", "\n "])), object.getObjectProp(theme, "palette.grey.300"), size === "medium" && react.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n height: 24px;\n width: 44px;\n border-radius: 12px;\n "]))), size === "small" && react.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n height: 18px;\n width: 38px;\n border-radius: 11px;\n "]))));
27
- });
28
- var StyledSwitchInput = styled.input(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n ", "\n"])), function (_ref5) {
29
- var color = _ref5.color,
30
- size = _ref5.size,
31
- theme = _ref5.theme;
32
- return react.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 0;\n z-index: -1;\n visibility: hidden;\n opacity: 0;\n\n &:checked ~ ", " {\n background: ", ";\n }\n\n &:checked ~ ", " ", " {\n transform: translateX(", "px);\n }\n "])), StyledSwitchTrack, object.getObjectProp(theme, "palette.".concat(color, ".main")), StyledSwitchTrack, StyledSwitchKnob, size === "small" ? "20" : "20");
29
+ return react.css(_templateObject11 || (_templateObject11 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n position: relative;\n\n transition: background 150ms linear;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n &:focus {\n box-shadow: 0px 0px 6px #1f1c4f;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n "])), size === "medium" && react.css(_templateObject12 || (_templateObject12 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n height: 24px;\n width: 44px;\n border-radius: 12px;\n "]))), size === "small" && react.css(_templateObject13 || (_templateObject13 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n height: 18px;\n width: 38px;\n border-radius: 11px;\n "]))), !checked && react.css(_templateObject14 || (_templateObject14 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n background: ", ";\n "])), object.getObjectProp(theme, "palette.grey.300")), checked && react.css(_templateObject15 || (_templateObject15 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n background: ", ";\n "])), object.getObjectProp(theme, "palette.".concat(color, ".main"))));
33
30
  });
31
+ var StyledSwitchInput = styled.input(_templateObject16 || (_templateObject16 = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 0;\n z-index: -1;\n visibility: hidden;\n opacity: 0;\n margin: 0 !important;\n padding: 0 !important;\n"])));
34
32
 
35
33
  exports.StyledSwitch = StyledSwitch;
36
34
  exports.StyledSwitchInput = StyledSwitchInput;
package/dist/cjs/utils/helpers/date.cjs CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var dayjs = require('dayjs');
6
- var customParseFormat = require('dayjs/plugin/customParseFormat');
6
+ var customParseFormat = require('dayjs/plugin/customParseFormat.js');
7
7
 
8
8
  dayjs.extend(customParseFormat);
9
9
 
package/dist/esm/components/Switch.js CHANGED
@@ -50,8 +50,12 @@ function Switch(_ref) {
50
50
  margin: "none",
51
51
  size: size
52
52
  }, label), /* @__PURE__ */React.createElement(StyledSwitchTrack, {
53
+ color: color,
54
+ checked: !!checked,
53
55
  size: size
54
56
  }, /* @__PURE__ */React.createElement(StyledSwitchKnob, {
57
+ color: color,
58
+ checked: !!checked,
55
59
  size: size
56
60
  })));
57
61
  }
package/dist/esm/components/Switch.styled.js CHANGED
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
3
3
  import styled from '@emotion/styled';
4
4
  import { getObjectProp } from '../utils/helpers/object.js';
5
5
 
6
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
6
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
7
7
  var StyledSwitch = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref) {
8
8
  var disabled = _ref.disabled;
9
9
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n cursor: pointer;\n display: inline-flex;\n gap: 20px;\n align-items: center;\n ", "\n "])), disabled && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n opacity: 0.5;\n pointer-events: none;\n "]))));
@@ -14,20 +14,18 @@ var StyledSwitchLabel = styled.span(_templateObject4 || (_templateObject4 = _tag
14
14
  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 13px;\n font-weight: 600;\n color: ", ";\n\n ", "\n "])), getObjectProp(theme, "palette.text.primary"), required && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n &:after {\n content: '*';\n color: ", ";\n }\n "])), getObjectProp(theme, "palette.error.main")));
15
15
  });
16
16
  var StyledSwitchKnob = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref3) {
17
- var size = _ref3.size,
17
+ var checked = _ref3.checked,
18
+ size = _ref3.size,
18
19
  theme = _ref3.theme;
19
- return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-radius: 99999px;\n box-shadow: ", ";\n background: #fff;\n position: absolute;\n transition:\n translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n ", "\n\n ", "\n "])), getObjectProp(theme, "shadows.1"), size === "medium" && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n top: 2px;\n left: 2px;\n "]))), size === "small" && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n width: 14px;\n height: 14px;\n top: 2px;\n left: 2px;\n "]))));
20
+ return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-radius: 99999px;\n box-shadow: ", ";\n background: #fff;\n position: absolute;\n transition:\n translate 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n\n ", "\n\n ", "\n\n ", "\n "])), getObjectProp(theme, "shadows.1"), size === "medium" && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n top: 2px;\n left: 2px;\n "]))), size === "small" && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n width: 14px;\n height: 14px;\n top: 2px;\n left: 2px;\n "]))), checked && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n transform: translateX(", "px);\n "])), size === "small" ? "20" : "20"));
20
21
  });
21
- var StyledSwitchTrack = styled.span(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref4) {
22
- var size = _ref4.size,
22
+ var StyledSwitchTrack = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref4) {
23
+ var checked = _ref4.checked,
24
+ color = _ref4.color,
25
+ size = _ref4.size,
23
26
  theme = _ref4.theme;
24
- return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n position: relative;\n background: ", ";\n transition: background 150ms linear;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n &:focus {\n box-shadow: 0px 0px 6px #1f1c4f;\n }\n\n ", "\n\n ", "\n "])), getObjectProp(theme, "palette.grey.300"), size === "medium" && css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n height: 24px;\n width: 44px;\n border-radius: 12px;\n "]))), size === "small" && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n height: 18px;\n width: 38px;\n border-radius: 11px;\n "]))));
25
- });
26
- var StyledSwitchInput = styled.input(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n ", "\n"])), function (_ref5) {
27
- var color = _ref5.color,
28
- size = _ref5.size,
29
- theme = _ref5.theme;
30
- return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 0;\n z-index: -1;\n visibility: hidden;\n opacity: 0;\n\n &:checked ~ ", " {\n background: ", ";\n }\n\n &:checked ~ ", " ", " {\n transform: translateX(", "px);\n }\n "])), StyledSwitchTrack, getObjectProp(theme, "palette.".concat(color, ".main")), StyledSwitchTrack, StyledSwitchKnob, size === "small" ? "20" : "20");
27
+ return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n position: relative;\n\n transition: background 150ms linear;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n\n &:focus {\n box-shadow: 0px 0px 6px #1f1c4f;\n }\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n "])), size === "medium" && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n height: 24px;\n width: 44px;\n border-radius: 12px;\n "]))), size === "small" && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n height: 18px;\n width: 38px;\n border-radius: 11px;\n "]))), !checked && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n background: ", ";\n "])), getObjectProp(theme, "palette.grey.300")), checked && css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n background: ", ";\n "])), getObjectProp(theme, "palette.".concat(color, ".main"))));
31
28
  });
29
+ var StyledSwitchInput = styled.input(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 0;\n z-index: -1;\n visibility: hidden;\n opacity: 0;\n margin: 0 !important;\n padding: 0 !important;\n"])));
32
30
 
33
31
  export { StyledSwitch, StyledSwitchInput, StyledSwitchKnob, StyledSwitchLabel, StyledSwitchTrack };
package/dist/esm/utils/helpers/date.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import dayjs from 'dayjs';
2
2
  export { default } from 'dayjs';
3
- import customParseFormat from 'dayjs/plugin/customParseFormat';
3
+ import customParseFormat from 'dayjs/plugin/customParseFormat.js';
4
4
 
5
5
  dayjs.extend(customParseFormat);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tenancy.nz/ui",
3
- "version": "1.2.5",
3
+ "version": "1.2.7",
4
4
  "description": "Library of React UI components for tenancy.co.nz apps.",
5
5
  "author": "Tenancy.co.nz <monty@tenancy.co.nz>",
6
6
  "keywords": [