@tenancy.nz/ui 1.2.5 → 1.2.6

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 (5) hide show
  1. package/dist/cjs/components/Switch.cjs +4 -0
  2. package/dist/cjs/components/Switch.styled.cjs +10 -12
  3. package/dist/esm/components/Switch.js +4 -0
  4. package/dist/esm/components/Switch.styled.js +10 -12
  5. 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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tenancy.nz/ui",
3
- "version": "1.2.5",
3
+ "version": "1.2.6",
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": [