@spothero/ui 17.0.0-beta.1 → 17.0.0-beta.3
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.
- package/dist/components/Accordion/Accordion.js +13 -0
- package/dist/components/Accordion/Accordion.stories.js +86 -0
- package/dist/components/Accordion/index.js +41 -0
- package/dist/components/Accordion/styles/button.js +23 -0
- package/dist/components/Accordion/styles/container.js +15 -0
- package/dist/components/Accordion/styles/index.js +32 -0
- package/dist/components/Accordion/styles/panel.js +13 -0
- package/dist/components/Alert/Alert.js +119 -0
- package/dist/components/Alert/Alert.stories.js +80 -0
- package/dist/components/Alert/index.js +15 -0
- package/dist/components/Alert/styles/index.js +192 -0
- package/dist/components/AutoSuggestSelect/AutoSuggestSelect.js +189 -0
- package/dist/components/AutoSuggestSelect/index.js +15 -0
- package/dist/components/Badge/Badge.js +13 -0
- package/dist/components/Badge/Badge.stories.js +38 -0
- package/dist/components/Badge/styles/index.js +40 -0
- package/dist/components/Button/Button.js +73 -0
- package/dist/components/Button/Button.spec.js +31 -0
- package/dist/components/Button/Button.styles.js +173 -0
- package/dist/components/Button/button-props.js +90 -0
- package/dist/components/Button/index.js +23 -0
- package/dist/components/Button/stories/button.js +59 -0
- package/dist/components/Button/stories/index.stories.js +124 -0
- package/dist/components/Button/stories/overview.js +96 -0
- package/dist/components/Card/Card.js +38 -0
- package/dist/components/Card/Card.stories.js +41 -0
- package/dist/components/Checkbox/Checkbox.js +13 -0
- package/dist/components/Checkbox/Checkbox.stories.js +44 -0
- package/dist/components/Checkbox/index.js +15 -0
- package/dist/components/Checkbox/styles/index.js +64 -0
- package/dist/components/Container/Container.js +34 -0
- package/dist/components/Container/Container.stories.js +74 -0
- package/dist/components/Container/Container.styles.js +17 -0
- package/dist/components/Divider/Divider.js +47 -0
- package/dist/components/Divider/Divider.stories.js +49 -0
- package/dist/components/Divider/Divider.styles.js +28 -0
- package/dist/components/FormControl/FormControl.js +79 -0
- package/dist/components/Grid/Grid.js +49 -0
- package/dist/components/Grid/Grid.stories.js +141 -0
- package/dist/components/Grid/Grid.styles.js +19 -0
- package/dist/components/Grid/GridItem.js +34 -0
- package/dist/components/Grid/GridItem.styles.js +13 -0
- package/dist/components/Grid/index.js +23 -0
- package/dist/components/Heading/Heading.js +49 -0
- package/dist/components/Heading/Heading.stories.js +54 -0
- package/dist/components/Heading/Heading.styles.js +79 -0
- package/dist/components/Icon/Icon.js +13 -0
- package/dist/components/Icon/Icon.stories.js +47 -0
- package/dist/components/Image/Image.js +106 -0
- package/dist/components/Image/Image.spec.js +83 -0
- package/dist/components/Image/Image.stories.js +92 -0
- package/dist/components/Input/Input.js +61 -0
- package/dist/components/Input/Input.stories.js +71 -0
- package/dist/components/Input/index.js +15 -0
- package/dist/components/Input/styles/index.js +71 -0
- package/dist/components/Link/Link.js +13 -0
- package/dist/components/Link/Link.stories.js +61 -0
- package/dist/components/Link/Link.styles.js +42 -0
- package/dist/components/List/List.js +88 -0
- package/dist/components/List/List.stories.js +124 -0
- package/dist/components/List/index.js +23 -0
- package/dist/components/List/styles/index.js +24 -0
- package/dist/components/List/styles/item.styles.js +11 -0
- package/dist/components/Loader/Loader.js +62 -0
- package/dist/components/Loader/Loader.stories.js +140 -0
- package/dist/components/Modal/Modal.js +52 -0
- package/dist/components/Modal/Modal.stories.js +236 -0
- package/dist/components/Modal/index.js +15 -0
- package/dist/components/Modal/styles/body.js +48 -0
- package/dist/components/Modal/styles/closeButton.js +27 -0
- package/dist/components/Modal/styles/dialog.js +25 -0
- package/dist/components/Modal/styles/dialogContainer.js +26 -0
- package/dist/components/Modal/styles/footer.js +12 -0
- package/dist/components/Modal/styles/header.js +20 -0
- package/dist/components/Modal/styles/index.js +70 -0
- package/dist/components/Modal/styles/overlay.js +12 -0
- package/dist/components/Popover/Popover.js +48 -0
- package/dist/components/Popover/Popover.stories.js +101 -0
- package/dist/components/Popover/PopoverArrow.js +34 -0
- package/dist/components/Popover/PopoverCloseButton.js +34 -0
- package/dist/components/Popover/PopoverContent.js +53 -0
- package/dist/components/Popover/index.js +37 -0
- package/dist/components/Popover/styles/index.js +38 -0
- package/dist/components/Popover/styles/popover-arrow.js +16 -0
- package/dist/components/Popover/styles/popover-body.js +15 -0
- package/dist/components/Popover/styles/popover-close-button.js +30 -0
- package/dist/components/Popover/styles/popover-content.js +29 -0
- package/dist/components/Popover/styles/popover-header.js +12 -0
- package/dist/components/Popover/styles/popper.js +11 -0
- package/dist/components/Radio/Radio.js +52 -0
- package/dist/components/Radio/Radio.stories.js +142 -0
- package/dist/components/Radio/RadioGroup.js +65 -0
- package/dist/components/Radio/index.js +23 -0
- package/dist/components/Radio/styles/index.js +65 -0
- package/dist/components/Select/Select.js +71 -0
- package/dist/components/Select/Select.stories.js +74 -0
- package/dist/components/Select/index.js +15 -0
- package/dist/components/Select/styles/index.js +57 -0
- package/dist/components/Skeleton/Skeleton.stories.js +41 -0
- package/dist/components/Skeleton/Skeleton.styles.js +13 -0
- package/dist/components/Skeleton/index.js +25 -0
- package/dist/components/Spinner/Spinner.js +47 -0
- package/dist/components/Spinner/Spinner.stories.js +134 -0
- package/dist/components/Spinner/Spinner.styles.js +76 -0
- package/dist/components/Switch/Switch.js +59 -0
- package/dist/components/Switch/Switch.stories.js +86 -0
- package/dist/components/Switch/index.js +15 -0
- package/dist/components/Switch/styles/index.js +46 -0
- package/dist/components/Table/Table.js +13 -0
- package/dist/components/Table/Table.stories.js +92 -0
- package/dist/components/Table/Table.styles.js +87 -0
- package/dist/components/Table/index.js +59 -0
- package/dist/components/Tabs/Tabs.js +48 -0
- package/dist/components/Tabs/Tabs.stories.js +51 -0
- package/dist/components/Tabs/combineSizeWithVariant.js +44 -0
- package/dist/components/Tabs/index.js +41 -0
- package/dist/components/Tabs/styles/index.js +52 -0
- package/dist/components/Text/Text.js +44 -0
- package/dist/components/Text/Text.stories.js +56 -0
- package/dist/components/Text/Text.styles.js +67 -0
- package/dist/components/Text/combineAsWithVariant.js +123 -0
- package/dist/components/Text/options.js +9 -0
- package/dist/components/ThemeProvider/ThemeProvider.js +66 -0
- package/dist/components/ThemeProvider/ThemeProvider.stories.js +63 -0
- package/dist/components/index.js +577 -0
- package/dist/components/styles.js +175 -0
- package/dist/theme/base/breakpoints.js +27 -0
- package/dist/theme/base/colors.js +148 -0
- package/dist/theme/base/index.js +59 -0
- package/dist/theme/base/sizes.js +88 -0
- package/dist/theme/base/typography.js +41 -0
- package/dist/theme/base/zindices.js +35 -0
- package/dist/theme/global.js +52 -0
- package/dist/theme/index.js +63 -0
- package/dist/utils/Spaces.js +27 -0
- package/package.json +1 -1
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
|
|
5
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
6
|
+
|
|
7
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
8
|
+
|
|
9
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "__esModule", {
|
|
12
|
+
value: true
|
|
13
|
+
});
|
|
14
|
+
exports.default = void 0;
|
|
15
|
+
|
|
16
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _react2 = require("@chakra-ui/react");
|
|
21
|
+
|
|
22
|
+
var _popoverArrow = _interopRequireDefault(require("./styles/popover-arrow"));
|
|
23
|
+
|
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
+
|
|
26
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
+
|
|
28
|
+
var PopoverArrow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_react2.PopoverArrow, (0, _extends2.default)({
|
|
30
|
+
ref: ref
|
|
31
|
+
}, props, (0, _popoverArrow.default)(props)));
|
|
32
|
+
});
|
|
33
|
+
var _default = PopoverArrow;
|
|
34
|
+
exports.default = _default;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
|
|
5
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
6
|
+
|
|
7
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
8
|
+
|
|
9
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "__esModule", {
|
|
12
|
+
value: true
|
|
13
|
+
});
|
|
14
|
+
exports.default = void 0;
|
|
15
|
+
|
|
16
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
|
+
|
|
18
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
+
|
|
20
|
+
var _react2 = require("@chakra-ui/react");
|
|
21
|
+
|
|
22
|
+
var _popoverCloseButton = _interopRequireDefault(require("./styles/popover-close-button"));
|
|
23
|
+
|
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
+
|
|
26
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
27
|
+
|
|
28
|
+
var PopoverCloseButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_react2.PopoverCloseButton, (0, _extends2.default)({
|
|
30
|
+
ref: ref
|
|
31
|
+
}, props, (0, _popoverCloseButton.default)(props)));
|
|
32
|
+
});
|
|
33
|
+
var _default = PopoverCloseButton;
|
|
34
|
+
exports.default = _default;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
|
|
5
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
6
|
+
|
|
7
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
8
|
+
|
|
9
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "__esModule", {
|
|
12
|
+
value: true
|
|
13
|
+
});
|
|
14
|
+
exports.default = void 0;
|
|
15
|
+
|
|
16
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
|
+
|
|
18
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
22
|
+
var _react2 = require("@chakra-ui/react");
|
|
23
|
+
|
|
24
|
+
var _PopoverArrow = _interopRequireDefault(require("./PopoverArrow"));
|
|
25
|
+
|
|
26
|
+
var _PopoverCloseButton = _interopRequireDefault(require("./PopoverCloseButton"));
|
|
27
|
+
|
|
28
|
+
var _excluded = ["header", "variant", "children", "hideCloseButton"];
|
|
29
|
+
|
|
30
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
+
|
|
32
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
|
+
|
|
34
|
+
var PopoverContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
35
|
+
var header = props.header,
|
|
36
|
+
variant = props.variant,
|
|
37
|
+
children = props.children,
|
|
38
|
+
hideCloseButton = props.hideCloseButton,
|
|
39
|
+
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_react2.PopoverContent, (0, _extends2.default)({}, rest, {
|
|
41
|
+
ref: ref
|
|
42
|
+
}), /*#__PURE__*/_react.default.createElement(_PopoverArrow.default, {
|
|
43
|
+
variant: variant
|
|
44
|
+
}), hideCloseButton ? null : /*#__PURE__*/_react.default.createElement(_PopoverCloseButton.default, {
|
|
45
|
+
variant: variant
|
|
46
|
+
}), header ? /*#__PURE__*/_react.default.createElement(_react2.PopoverHeader, null, header) : null, /*#__PURE__*/_react.default.createElement(_react2.PopoverBody, null, children));
|
|
47
|
+
});
|
|
48
|
+
PopoverContent.defaultProps = {
|
|
49
|
+
variant: 'light',
|
|
50
|
+
hideCloseButton: false
|
|
51
|
+
};
|
|
52
|
+
var _default = PopoverContent;
|
|
53
|
+
exports.default = _default;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "Popover", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _Popover.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "PopoverAnchor", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _react.PopoverAnchor;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports, "PopoverContent", {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function get() {
|
|
23
|
+
return _PopoverContent.default;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(exports, "PopoverTrigger", {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: function get() {
|
|
29
|
+
return _react.PopoverTrigger;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
var _react = require("@chakra-ui/react");
|
|
34
|
+
|
|
35
|
+
var _Popover = _interopRequireDefault(require("./Popover"));
|
|
36
|
+
|
|
37
|
+
var _PopoverContent = _interopRequireDefault(require("./PopoverContent"));
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
11
|
+
|
|
12
|
+
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
13
|
+
|
|
14
|
+
var _popper = _interopRequireDefault(require("./popper"));
|
|
15
|
+
|
|
16
|
+
var _popoverBody = _interopRequireDefault(require("./popover-body"));
|
|
17
|
+
|
|
18
|
+
var _popoverHeader = _interopRequireDefault(require("./popover-header"));
|
|
19
|
+
|
|
20
|
+
var _popoverContent = _interopRequireDefault(require("./popover-content"));
|
|
21
|
+
|
|
22
|
+
var parts = ['popper', 'content', 'header', 'body'];
|
|
23
|
+
|
|
24
|
+
var baseStyle = function baseStyle(props) {
|
|
25
|
+
return {
|
|
26
|
+
header: _popoverHeader.default,
|
|
27
|
+
content: (0, _popoverContent.default)(props),
|
|
28
|
+
body: (0, _popoverBody.default)(props),
|
|
29
|
+
popper: _popper.default
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
var _default = (0, _merge.default)(_theme.default.components.Popover, {
|
|
34
|
+
parts: parts,
|
|
35
|
+
baseStyle: baseStyle
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
exports.default = _default;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var arrowStyles = function arrowStyles(_ref) {
|
|
9
|
+
var variant = _ref.variant;
|
|
10
|
+
return {
|
|
11
|
+
backgroundColor: variant === 'dark' ? 'secondary.default' : 'white'
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
var _default = arrowStyles;
|
|
16
|
+
exports.default = _default;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var pseudoStyles = function pseudoStyles(variant) {
|
|
9
|
+
return {
|
|
10
|
+
bgColor: variant === 'dark' ? 'gray.600' : 'gray.50'
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
var closeButtonStyles = function closeButtonStyles(_ref) {
|
|
15
|
+
var variant = _ref.variant;
|
|
16
|
+
return {
|
|
17
|
+
color: variant === 'dark' ? 'white' : 'black',
|
|
18
|
+
fontSize: '0.5rem',
|
|
19
|
+
position: 'absolute',
|
|
20
|
+
top: 0,
|
|
21
|
+
right: 0,
|
|
22
|
+
padding: 4,
|
|
23
|
+
borderTopRightRadius: 4,
|
|
24
|
+
_hover: pseudoStyles(variant),
|
|
25
|
+
_focus: pseudoStyles(variant)
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
var _default = closeButtonStyles;
|
|
30
|
+
exports.default = _default;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var popoverContentStyles = function popoverContentStyles(_ref) {
|
|
9
|
+
var variant = _ref.variant;
|
|
10
|
+
return {
|
|
11
|
+
padding: 4,
|
|
12
|
+
marginBottom: 0,
|
|
13
|
+
maxWidth: '20rem',
|
|
14
|
+
borderRadius: 'base',
|
|
15
|
+
background: variant === 'dark' ? 'secondary.default' : 'white',
|
|
16
|
+
boxShadow: '2px 2px 4px 0 rgba(0,45,91,0.1)',
|
|
17
|
+
color: variant === 'dark' ? 'white' : 'black',
|
|
18
|
+
borderColor: 'gray.100',
|
|
19
|
+
borderWidth: '1px',
|
|
20
|
+
borderStyle: 'solid',
|
|
21
|
+
'--popper-arrow-shadow-color': function popperArrowShadowColor(t) {
|
|
22
|
+
return t.colors.gray['100'];
|
|
23
|
+
},
|
|
24
|
+
zIndex: 'layer10'
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
var _default = popoverContentStyles;
|
|
29
|
+
exports.default = _default;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
|
|
5
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
6
|
+
|
|
7
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
8
|
+
|
|
9
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "__esModule", {
|
|
12
|
+
value: true
|
|
13
|
+
});
|
|
14
|
+
exports.default = void 0;
|
|
15
|
+
|
|
16
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
|
+
|
|
18
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
22
|
+
var _react2 = require("@chakra-ui/react");
|
|
23
|
+
|
|
24
|
+
var _excluded = ["defaultChecked", "isChecked", "isDisabled", "value", "helperText", "children"];
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
29
|
+
|
|
30
|
+
var Radio = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
31
|
+
var defaultChecked = _ref.defaultChecked,
|
|
32
|
+
isChecked = _ref.isChecked,
|
|
33
|
+
isDisabled = _ref.isDisabled,
|
|
34
|
+
value = _ref.value,
|
|
35
|
+
helperText = _ref.helperText,
|
|
36
|
+
children = _ref.children,
|
|
37
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
38
|
+
return /*#__PURE__*/_react.default.createElement(_react2.Radio, (0, _extends2.default)({
|
|
39
|
+
ref: ref,
|
|
40
|
+
defaultChecked: defaultChecked,
|
|
41
|
+
isChecked: isChecked,
|
|
42
|
+
isDisabled: isDisabled,
|
|
43
|
+
isFocusable: !isDisabled,
|
|
44
|
+
value: value,
|
|
45
|
+
alignItems: "start"
|
|
46
|
+
}, props), children, helperText && /*#__PURE__*/_react.default.createElement(_react2.Box, {
|
|
47
|
+
color: "gray.600",
|
|
48
|
+
fontSize: "xs"
|
|
49
|
+
}, helperText));
|
|
50
|
+
});
|
|
51
|
+
var _default = Radio;
|
|
52
|
+
exports.default = _default;
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.Individual = exports.Group = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireDefault(require("react"));
|
|
13
|
+
|
|
14
|
+
var _Radio = _interopRequireDefault(require("./Radio"));
|
|
15
|
+
|
|
16
|
+
var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
|
|
17
|
+
|
|
18
|
+
var _default = {
|
|
19
|
+
title: 'v2/Radio',
|
|
20
|
+
component: _Radio.default,
|
|
21
|
+
parameters: {
|
|
22
|
+
importBy: 'Radio',
|
|
23
|
+
removeBaseHtmlClass: true,
|
|
24
|
+
chakraLink: 'https://chakra-ui.com/docs/components/radio'
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
exports.default = _default;
|
|
28
|
+
|
|
29
|
+
var Individual = function Individual(props) {
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement(_Radio.default, (0, _extends2.default)({
|
|
31
|
+
value: "1"
|
|
32
|
+
}, props), "Option 1");
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
exports.Individual = Individual;
|
|
36
|
+
Individual.argTypes = {
|
|
37
|
+
helperText: {
|
|
38
|
+
control: {
|
|
39
|
+
type: 'text'
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
isDisabled: {
|
|
43
|
+
control: {
|
|
44
|
+
type: 'boolean'
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
isChecked: {
|
|
48
|
+
control: {
|
|
49
|
+
type: 'boolean'
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
children: {
|
|
53
|
+
table: {
|
|
54
|
+
disable: true
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
defaultChecked: {
|
|
58
|
+
table: {
|
|
59
|
+
disable: true
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
value: {
|
|
63
|
+
table: {
|
|
64
|
+
disable: true
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
Individual.args = {
|
|
69
|
+
helperText: 'Helper text',
|
|
70
|
+
isDisabled: false,
|
|
71
|
+
isChecked: false
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
var Group = function Group(props) {
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement(_RadioGroup.default, (0, _extends2.default)({
|
|
76
|
+
name: "example1",
|
|
77
|
+
defaultValue: "3",
|
|
78
|
+
id: "example1",
|
|
79
|
+
label: "Which option?"
|
|
80
|
+
}, props), /*#__PURE__*/_react.default.createElement(_Radio.default, {
|
|
81
|
+
value: "1"
|
|
82
|
+
}, "Option 1"), /*#__PURE__*/_react.default.createElement(_Radio.default, {
|
|
83
|
+
value: "2"
|
|
84
|
+
}, "Option 2"), /*#__PURE__*/_react.default.createElement(_Radio.default, {
|
|
85
|
+
value: "3"
|
|
86
|
+
}, "Option 3"), /*#__PURE__*/_react.default.createElement(_Radio.default, {
|
|
87
|
+
value: "4"
|
|
88
|
+
}, "Option 4"));
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
exports.Group = Group;
|
|
92
|
+
Group.title = 'v2/RadioGroup';
|
|
93
|
+
Group.component = _RadioGroup.default;
|
|
94
|
+
Group.parameters = {
|
|
95
|
+
importBy: 'RadioGroup'
|
|
96
|
+
};
|
|
97
|
+
Group.argTypes = {
|
|
98
|
+
direction: {
|
|
99
|
+
options: ['column', 'row'],
|
|
100
|
+
control: {
|
|
101
|
+
type: 'radio'
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
isDisabled: {
|
|
105
|
+
control: {
|
|
106
|
+
type: 'boolean'
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
children: {
|
|
110
|
+
table: {
|
|
111
|
+
disable: true
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
defaultChecked: {
|
|
115
|
+
table: {
|
|
116
|
+
disable: true
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
value: {
|
|
120
|
+
table: {
|
|
121
|
+
disable: true
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
isChecked: {
|
|
125
|
+
table: {
|
|
126
|
+
disable: true
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
helperText: {
|
|
130
|
+
table: {
|
|
131
|
+
disable: true
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
Group.args = {
|
|
136
|
+
direction: 'column',
|
|
137
|
+
isDisabled: false,
|
|
138
|
+
isInvalid: false,
|
|
139
|
+
isRequired: false,
|
|
140
|
+
label: 'Label',
|
|
141
|
+
errorMessage: 'Error message'
|
|
142
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
|
4
|
+
|
|
5
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
|
6
|
+
|
|
7
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
|
8
|
+
|
|
9
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "__esModule", {
|
|
12
|
+
value: true
|
|
13
|
+
});
|
|
14
|
+
exports.default = void 0;
|
|
15
|
+
|
|
16
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
17
|
+
|
|
18
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
22
|
+
var _react2 = require("@chakra-ui/react");
|
|
23
|
+
|
|
24
|
+
var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
|
|
25
|
+
|
|
26
|
+
var _excluded = ["label", "errorMessage", "defaultValue", "isDisabled", "isInvalid", "isRequired", "name", "onChange", "value", "children", "direction"];
|
|
27
|
+
|
|
28
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
|
+
|
|
30
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
+
|
|
32
|
+
var RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
33
|
+
var label = _ref.label,
|
|
34
|
+
errorMessage = _ref.errorMessage,
|
|
35
|
+
defaultValue = _ref.defaultValue,
|
|
36
|
+
isDisabled = _ref.isDisabled,
|
|
37
|
+
isInvalid = _ref.isInvalid,
|
|
38
|
+
isRequired = _ref.isRequired,
|
|
39
|
+
name = _ref.name,
|
|
40
|
+
onChange = _ref.onChange,
|
|
41
|
+
value = _ref.value,
|
|
42
|
+
children = _ref.children,
|
|
43
|
+
direction = _ref.direction,
|
|
44
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
45
|
+
return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
|
|
46
|
+
isInvalid: isInvalid,
|
|
47
|
+
isDisabled: isDisabled,
|
|
48
|
+
isRequired: isRequired,
|
|
49
|
+
errorMessage: errorMessage,
|
|
50
|
+
label: label,
|
|
51
|
+
inputId: props.id,
|
|
52
|
+
isFieldset: true
|
|
53
|
+
}, /*#__PURE__*/_react.default.createElement(_react2.RadioGroup, (0, _extends2.default)({
|
|
54
|
+
ref: ref,
|
|
55
|
+
defaultValue: defaultValue,
|
|
56
|
+
name: name,
|
|
57
|
+
onChange: onChange,
|
|
58
|
+
value: value
|
|
59
|
+
}, props), /*#__PURE__*/_react.default.createElement(_react2.Stack, {
|
|
60
|
+
direction: direction ? direction : 'column',
|
|
61
|
+
spacing: direction === 'row' ? 8 : 4
|
|
62
|
+
}, children)));
|
|
63
|
+
});
|
|
64
|
+
var _default = RadioGroup;
|
|
65
|
+
exports.default = _default;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
Object.defineProperty(exports, "Radio", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _Radio.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "RadioGroup", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _RadioGroup.default;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
var _Radio = _interopRequireDefault(require("./Radio"));
|
|
22
|
+
|
|
23
|
+
var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _merge = _interopRequireDefault(require("lodash/merge"));
|
|
11
|
+
|
|
12
|
+
var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
|
|
13
|
+
|
|
14
|
+
var parts = ['control', 'label'];
|
|
15
|
+
var baseStyle = {
|
|
16
|
+
control: {
|
|
17
|
+
borderRadius: '50%',
|
|
18
|
+
borderWidth: '1px',
|
|
19
|
+
borderColor: 'gray.dark',
|
|
20
|
+
backgroundColor: 'white',
|
|
21
|
+
minWidth: 5,
|
|
22
|
+
minHeight: 5,
|
|
23
|
+
marginTop: 1,
|
|
24
|
+
_checked: {
|
|
25
|
+
borderWidth: 0,
|
|
26
|
+
color: 'white',
|
|
27
|
+
backgroundColor: 'primary.default',
|
|
28
|
+
_before: {
|
|
29
|
+
content: '""',
|
|
30
|
+
display: 'inline-block',
|
|
31
|
+
position: 'relative',
|
|
32
|
+
width: 2,
|
|
33
|
+
height: 2,
|
|
34
|
+
borderRadius: '50%',
|
|
35
|
+
background: 'currentcolor'
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
_focus: {
|
|
39
|
+
boxShadow: function boxShadow(t) {
|
|
40
|
+
return "0 0 1px 2px ".concat(t.colors.primary['300']);
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
_disabled: {
|
|
44
|
+
borderColor: 'gray.200',
|
|
45
|
+
_checked: {
|
|
46
|
+
backgroundColor: 'gray.200'
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
label: {
|
|
51
|
+
fontSize: 'base',
|
|
52
|
+
color: 'black',
|
|
53
|
+
marginLeft: 3,
|
|
54
|
+
_disabled: {
|
|
55
|
+
color: 'gray.200'
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
var _default = (0, _merge.default)(_theme.default.components.Radio, {
|
|
61
|
+
parts: parts,
|
|
62
|
+
baseStyle: baseStyle
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
exports.default = _default;
|