takeat-design-system-ui-kit 0.1.104 → 0.1.106
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/cjs/components/Dropdown/index.js +4 -9
- package/dist/cjs/components/Dropdown/index.js.map +1 -1
- package/dist/cjs/components/FormItens/Checkbox/index.js +1 -1
- package/dist/cjs/components/FormItens/Checkbox/index.js.map +1 -1
- package/dist/cjs/components/FormItens/Checkbox/styles.js +4 -4
- package/dist/cjs/components/FormItens/Checkbox/styles.js.map +1 -1
- package/dist/esm/components/Dropdown/index.js +4 -9
- package/dist/esm/components/Dropdown/index.js.map +1 -1
- package/dist/esm/components/FormItens/Checkbox/index.js +2 -2
- package/dist/esm/components/FormItens/Checkbox/index.js.map +1 -1
- package/dist/esm/components/FormItens/Checkbox/styles.js +4 -4
- package/dist/esm/components/FormItens/Checkbox/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,24 +7,18 @@ var react_1 = require("react");
|
|
|
7
7
|
var styles_1 = require("./styles");
|
|
8
8
|
exports.Dropdown = (0, react_1.forwardRef)(function Dropdown(_a, ref) {
|
|
9
9
|
var isOpen = _a.isOpen, toggle = _a.toggle, anchor = _a.anchor, children = _a.children, props = tslib_1.__rest(_a, ["isOpen", "toggle", "anchor", "children"]);
|
|
10
|
-
var _b = (0, react_1.useState)(
|
|
10
|
+
var _b = (0, react_1.useState)(null), position = _b[0], setPosition = _b[1];
|
|
11
11
|
var anchorElement = document.getElementById(anchor);
|
|
12
12
|
var anchorRect = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.getBoundingClientRect();
|
|
13
|
-
console.log("Anchor: ", anchor);
|
|
14
|
-
console.log("Anchor element: ", anchorElement);
|
|
15
|
-
console.log("Anchor rect: ", anchorRect);
|
|
16
13
|
(0, react_1.useEffect)(function () {
|
|
17
14
|
if (anchorRect) {
|
|
18
15
|
setPosition({
|
|
19
16
|
top: anchorRect.top + anchorRect.height + 4,
|
|
20
|
-
right: anchorRect.
|
|
17
|
+
right: window.innerWidth - anchorRect.right,
|
|
21
18
|
width: anchorRect.width,
|
|
22
19
|
});
|
|
23
20
|
}
|
|
24
21
|
}, [isOpen]);
|
|
25
|
-
(0, react_1.useEffect)(function () {
|
|
26
|
-
console.log("Position: ", position);
|
|
27
|
-
}, [position]);
|
|
28
22
|
// close dropdown when clicking outside
|
|
29
23
|
(0, react_1.useEffect)(function () {
|
|
30
24
|
var handleClickOutside = function (event) {
|
|
@@ -41,6 +35,7 @@ exports.Dropdown = (0, react_1.forwardRef)(function Dropdown(_a, ref) {
|
|
|
41
35
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
42
36
|
};
|
|
43
37
|
}, [ref, toggle]);
|
|
44
|
-
return (
|
|
38
|
+
return (position &&
|
|
39
|
+
isOpen && ((0, jsx_runtime_1.jsx)(styles_1.DropdownContainer, tslib_1.__assign({ top: position.top, right: position.right, minWidth: position.width, ref: ref }, props, { children: children }))));
|
|
45
40
|
});
|
|
46
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":";;;;;AAAA,+BAA+E;AAC/E,mCAA6C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":";;;;;AAAA,+BAA+E;AAC/E,mCAA6C;AAchC,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAAC,SAAS,QAAQ,CAClD,EAA6D,EAC7D,GAA8B;IAD5B,IAAA,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,sBAA5C,0CAA8C,CAAF;IAGtC,IAAA,KAA0B,IAAA,gBAAQ,EAAuB,IAAI,CAAC,EAA7D,QAAQ,QAAA,EAAE,WAAW,QAAwC,CAAC;IACrE,IAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACtD,IAAM,UAAU,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,qBAAqB,EAAE,CAAC;IAE1D,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,EAAE,CAAC;YACf,WAAW,CAAC;gBACV,GAAG,EAAE,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC;gBAC3C,KAAK,EAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK;gBAC3C,KAAK,EAAE,UAAU,CAAC,KAAK;aACxB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,uCAAuC;IACvC,IAAA,iBAAS,EAAC;QACR,IAAM,kBAAkB,GAAG,UAAC,KAAiB;;YAC3C,IACE,GAAG;gBACH,aAAa;gBACb,CAAC,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA;gBAC5C,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA,EAC9C,CAAC;gBACD,MAAM,EAAE,CAAC;YACX,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAE3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,QAAQ;QACR,MAAM,IAAI,CACR,uBAAC,0BAAiB,qBAChB,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,GAAG,EAAE,GAAG,IACJ,KAAK,cAER,QAAQ,IACS,CACrB,CACF,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -9,6 +9,6 @@ var icons_1 = require("../../icons");
|
|
|
9
9
|
exports.Checkbox = (0, react_1.forwardRef)(function Checkbox(_a, ref) {
|
|
10
10
|
var label = _a.label, labelStyles = _a.labelStyles, containerStyles = _a.containerStyles, description = _a.description, register = _a.register, props = tslib_1.__rest(_a, ["label", "labelStyles", "containerStyles", "description", "register"]);
|
|
11
11
|
var disabled = props.disabled;
|
|
12
|
-
return ((0, jsx_runtime_1.jsxs)(styles_1.CheckboxWrapper, { style: containerStyles, children: [(0, jsx_runtime_1.jsxs)("label", { className: "checkbox-label", "aria-disabled": disabled, style: labelStyles, children: [(0, jsx_runtime_1.jsx)("input", tslib_1.__assign({ ref: ref, type: "checkbox", disabled: disabled, className: "checkbox-input" }, props, register)),
|
|
12
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.CheckboxWrapper, { style: containerStyles, children: [(0, jsx_runtime_1.jsxs)("label", { className: "checkbox-label", "aria-disabled": disabled, style: labelStyles, children: [(0, jsx_runtime_1.jsx)("input", tslib_1.__assign({ ref: ref, type: "checkbox", disabled: disabled, className: "checkbox-input" }, props, register)), (0, jsx_runtime_1.jsx)(icons_1.IconCheckbox, { className: "icon-not-checked" }), (0, jsx_runtime_1.jsx)(icons_1.IconCheckboxCheckedFilled, { className: "icon-checked" }), label] }), description && ((0, jsx_runtime_1.jsx)("p", { "aria-disabled": disabled, className: "checkbox-description", children: description }))] }));
|
|
13
13
|
});
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Checkbox/index.tsx"],"names":[],"mappings":";;;;;AAAA,+BAA0C;AAC1C,mCAA2C;AAE3C,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Checkbox/index.tsx"],"names":[],"mappings":";;;;;AAAA,+BAA0C;AAC1C,mCAA2C;AAE3C,qCAAsE;AAUzD,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAAC,SAAS,QAAQ,CAClD,EAOgB,EAChB,GAAgC;IAP9B,IAAA,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,eAAe,qBAAA,EACf,WAAW,iBAAA,EACX,QAAQ,cAAA,EACL,KAAK,sBANV,sEAOC,CADS;IAIF,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,OAAO,CACL,wBAAC,wBAAe,IAAC,KAAK,EAAE,eAAe,aACrC,mCACE,SAAS,EAAC,gBAAgB,mBACX,QAAQ,EACvB,KAAK,EAAE,WAAW,aAElB,mDACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,gBAAgB,IACtB,KAAK,EACL,QAAQ,EACZ,EACF,uBAAC,oBAAY,IAAC,SAAS,EAAC,kBAAkB,GAAG,EAC7C,uBAAC,iCAAyB,IAAC,SAAS,EAAC,cAAc,GAAG,EACrD,KAAK,IACA,EACP,WAAW,IAAI,CACd,+CAAkB,QAAQ,EAAE,SAAS,EAAC,sBAAsB,YACzD,WAAW,GACV,CACL,IACe,CACnB,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.CheckboxWrapper = void 0;
|
|
4
4
|
var tslib_1 = require("tslib");
|
|
5
5
|
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
|
|
6
|
-
exports.CheckboxWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: ", ";\n user-select: none;\n\n label {\n cursor: pointer;\n width: 100%;\n color: ", ";\n font-size: 14px;\n font-style: normal;\n font-weight:
|
|
6
|
+
exports.CheckboxWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: ", ";\n user-select: none;\n\n label {\n cursor: pointer;\n width: 100%;\n color: ", ";\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; /* 142.857% */\n letter-spacing: 0.1px;\n display: flex;\n gap: ", ";\n align-items: center;\n border-radius: 4px;\n\n &[aria-disabled=\"true\"] {\n color: ", ";\n cursor: default;\n }\n }\n\n input[type=\"checkbox\"] {\n display: none;\n }\n\n input[type=\"checkbox\"]:focus,\n input[type=\"checkbox\"]:focus-visible {\n outline: none;\n }\n\n label:has(> input[type=\"checkbox\"]:focus-visible) {\n outline: 1px solid ", ";\n outline-offset: 2px;\n }\n\n input[type=\"checkbox\"]:disabled {\n cursor: default;\n border-color: ", ";\n\n &::before {\n background-color: ", ";\n }\n }\n\n p {\n margin: 0;\n color: ", ";\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 133.333% */\n letter-spacing: 0.4px;\n\n &[aria-disabled=\"true\"] {\n color: ", ";\n }\n }\n\n svg {\n transition: opacity 0.3s;\n font-size: 24px;\n }\n\n .icon-not-checked {\n fill: ", ";\n }\n\n .icon-checked {\n display: none;\n fill: ", ";\n opacity: 0;\n }\n\n input[type=\"checkbox\"]:disabled ~ svg {\n fill: ", ";\n }\n\n input[type=\"checkbox\"]:checked ~ .icon-not-checked {\n display: none;\n }\n\n input[type=\"checkbox\"]:checked ~ .icon-checked {\n display: unset;\n opacity: 1;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: ", ";\n user-select: none;\n\n label {\n cursor: pointer;\n width: 100%;\n color: ", ";\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; /* 142.857% */\n letter-spacing: 0.1px;\n display: flex;\n gap: ", ";\n align-items: center;\n border-radius: 4px;\n\n &[aria-disabled=\"true\"] {\n color: ", ";\n cursor: default;\n }\n }\n\n input[type=\"checkbox\"] {\n display: none;\n }\n\n input[type=\"checkbox\"]:focus,\n input[type=\"checkbox\"]:focus-visible {\n outline: none;\n }\n\n label:has(> input[type=\"checkbox\"]:focus-visible) {\n outline: 1px solid ", ";\n outline-offset: 2px;\n }\n\n input[type=\"checkbox\"]:disabled {\n cursor: default;\n border-color: ", ";\n\n &::before {\n background-color: ", ";\n }\n }\n\n p {\n margin: 0;\n color: ", ";\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 133.333% */\n letter-spacing: 0.4px;\n\n &[aria-disabled=\"true\"] {\n color: ", ";\n }\n }\n\n svg {\n transition: opacity 0.3s;\n font-size: 24px;\n }\n\n .icon-not-checked {\n fill: ", ";\n }\n\n .icon-checked {\n display: none;\n fill: ", ";\n opacity: 0;\n }\n\n input[type=\"checkbox\"]:disabled ~ svg {\n fill: ", ";\n }\n\n input[type=\"checkbox\"]:checked ~ .icon-not-checked {\n display: none;\n }\n\n input[type=\"checkbox\"]:checked ~ .icon-checked {\n display: unset;\n opacity: 1;\n }\n"])), function (_a) {
|
|
7
7
|
var theme = _a.theme;
|
|
8
8
|
return theme.spacing.xxs;
|
|
9
9
|
}, function (_a) {
|
|
@@ -18,9 +18,6 @@ exports.CheckboxWrapper = styled_components_1.default.div(templateObject_1 || (t
|
|
|
18
18
|
}, function (_a) {
|
|
19
19
|
var theme = _a.theme;
|
|
20
20
|
return theme.colors.neutral.darker;
|
|
21
|
-
}, function (_a) {
|
|
22
|
-
var theme = _a.theme;
|
|
23
|
-
return theme.colors.neutral.darker;
|
|
24
21
|
}, function (_a) {
|
|
25
22
|
var theme = _a.theme;
|
|
26
23
|
return theme.colors.neutral.default;
|
|
@@ -33,6 +30,9 @@ exports.CheckboxWrapper = styled_components_1.default.div(templateObject_1 || (t
|
|
|
33
30
|
}, function (_a) {
|
|
34
31
|
var theme = _a.theme;
|
|
35
32
|
return theme.colors.neutral.default;
|
|
33
|
+
}, function (_a) {
|
|
34
|
+
var theme = _a.theme;
|
|
35
|
+
return theme.colors.neutral.darker;
|
|
36
36
|
}, function (_a) {
|
|
37
37
|
var theme = _a.theme;
|
|
38
38
|
return theme.colors.green.default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Checkbox/styles.ts"],"names":[],"mappings":";;;;AAAA,gFAAuC;AAE1B,QAAA,eAAe,GAAG,2BAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Checkbox/styles.ts"],"names":[],"mappings":";;;;AAAA,gFAAuC;AAE1B,QAAA,eAAe,GAAG,2BAAM,CAAC,GAAG,kqDAAA,+EAIhC,EAAgC,2FAM5B,EAA0C,2KAO5C,EAAgC,wGAK5B,EAA2C,8RAejC,EAA0C,qHAM/C,EAA2C,gDAGrC,EAA2C,qDAMxD,EAAwC,8LAQtC,EAA2C,yHAU9C,EAA0C,6DAK1C,EAAyC,oFAKzC,EAA2C,kMAWtD,KAvFQ,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,GAAG;AAAjB,CAAiB,EAM5B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAO5C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,GAAG;AAAjB,CAAiB,EAK5B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAejC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAM/C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAGrC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAMxD,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAAzB,CAAyB,EAQtC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAU9C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAK1C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;AAA1B,CAA0B,EAKzC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAWrD"}
|
|
@@ -4,24 +4,18 @@ import { forwardRef, useEffect, useState } from "react";
|
|
|
4
4
|
import { DropdownContainer } from "./styles";
|
|
5
5
|
export var Dropdown = forwardRef(function Dropdown(_a, ref) {
|
|
6
6
|
var isOpen = _a.isOpen, toggle = _a.toggle, anchor = _a.anchor, children = _a.children, props = __rest(_a, ["isOpen", "toggle", "anchor", "children"]);
|
|
7
|
-
var _b = useState(
|
|
7
|
+
var _b = useState(null), position = _b[0], setPosition = _b[1];
|
|
8
8
|
var anchorElement = document.getElementById(anchor);
|
|
9
9
|
var anchorRect = anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.getBoundingClientRect();
|
|
10
|
-
console.log("Anchor: ", anchor);
|
|
11
|
-
console.log("Anchor element: ", anchorElement);
|
|
12
|
-
console.log("Anchor rect: ", anchorRect);
|
|
13
10
|
useEffect(function () {
|
|
14
11
|
if (anchorRect) {
|
|
15
12
|
setPosition({
|
|
16
13
|
top: anchorRect.top + anchorRect.height + 4,
|
|
17
|
-
right: anchorRect.
|
|
14
|
+
right: window.innerWidth - anchorRect.right,
|
|
18
15
|
width: anchorRect.width,
|
|
19
16
|
});
|
|
20
17
|
}
|
|
21
18
|
}, [isOpen]);
|
|
22
|
-
useEffect(function () {
|
|
23
|
-
console.log("Position: ", position);
|
|
24
|
-
}, [position]);
|
|
25
19
|
// close dropdown when clicking outside
|
|
26
20
|
useEffect(function () {
|
|
27
21
|
var handleClickOutside = function (event) {
|
|
@@ -38,6 +32,7 @@ export var Dropdown = forwardRef(function Dropdown(_a, ref) {
|
|
|
38
32
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
39
33
|
};
|
|
40
34
|
}, [ref, toggle]);
|
|
41
|
-
return (
|
|
35
|
+
return (position &&
|
|
36
|
+
isOpen && (_jsx(DropdownContainer, __assign({ top: position.top, right: position.right, minWidth: position.width, ref: ref }, props, { children: children }))));
|
|
42
37
|
});
|
|
43
38
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":";;AAAA,OAAc,EAAE,UAAU,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":";;AAAA,OAAc,EAAE,UAAU,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAc7C,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAA6D,EAC7D,GAA8B;IAD5B,IAAA,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA5C,0CAA8C,CAAF;IAGtC,IAAA,KAA0B,QAAQ,CAAuB,IAAI,CAAC,EAA7D,QAAQ,QAAA,EAAE,WAAW,QAAwC,CAAC;IACrE,IAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACtD,IAAM,UAAU,GAAG,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,qBAAqB,EAAE,CAAC;IAE1D,SAAS,CAAC;QACR,IAAI,UAAU,EAAE,CAAC;YACf,WAAW,CAAC;gBACV,GAAG,EAAE,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC;gBAC3C,KAAK,EAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK;gBAC3C,KAAK,EAAE,UAAU,CAAC,KAAK;aACxB,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,uCAAuC;IACvC,SAAS,CAAC;QACR,IAAM,kBAAkB,GAAG,UAAC,KAAiB;;YAC3C,IACE,GAAG;gBACH,aAAa;gBACb,CAAC,CAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA;gBAC5C,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA,EAC9C,CAAC;gBACD,MAAM,EAAE,CAAC;YACX,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAE3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,QAAQ;QACR,MAAM,IAAI,CACR,KAAC,iBAAiB,aAChB,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,GAAG,EAAE,GAAG,IACJ,KAAK,cAER,QAAQ,IACS,CACrB,CACF,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -2,10 +2,10 @@ import { __assign, __rest } from "tslib";
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import { CheckboxWrapper } from "./styles";
|
|
5
|
-
import { IconCheckboxCheckedFilled } from "../../icons";
|
|
5
|
+
import { IconCheckbox, IconCheckboxCheckedFilled } from "../../icons";
|
|
6
6
|
export var Checkbox = forwardRef(function Checkbox(_a, ref) {
|
|
7
7
|
var label = _a.label, labelStyles = _a.labelStyles, containerStyles = _a.containerStyles, description = _a.description, register = _a.register, props = __rest(_a, ["label", "labelStyles", "containerStyles", "description", "register"]);
|
|
8
8
|
var disabled = props.disabled;
|
|
9
|
-
return (_jsxs(CheckboxWrapper, { style: containerStyles, children: [_jsxs("label", { className: "checkbox-label", "aria-disabled": disabled, style: labelStyles, children: [_jsx("input", __assign({ ref: ref, type: "checkbox", disabled: disabled, className: "checkbox-input" }, props, register)),
|
|
9
|
+
return (_jsxs(CheckboxWrapper, { style: containerStyles, children: [_jsxs("label", { className: "checkbox-label", "aria-disabled": disabled, style: labelStyles, children: [_jsx("input", __assign({ ref: ref, type: "checkbox", disabled: disabled, className: "checkbox-input" }, props, register)), _jsx(IconCheckbox, { className: "icon-not-checked" }), _jsx(IconCheckboxCheckedFilled, { className: "icon-checked" }), label] }), description && (_jsx("p", { "aria-disabled": disabled, className: "checkbox-description", children: description }))] }));
|
|
10
10
|
});
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Checkbox/index.tsx"],"names":[],"mappings":";;AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Checkbox/index.tsx"],"names":[],"mappings":";;AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAUtE,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAOgB,EAChB,GAAgC;IAP9B,IAAA,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,eAAe,qBAAA,EACf,WAAW,iBAAA,EACX,QAAQ,cAAA,EACL,KAAK,cANV,sEAOC,CADS;IAIF,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,OAAO,CACL,MAAC,eAAe,IAAC,KAAK,EAAE,eAAe,aACrC,iBACE,SAAS,EAAC,gBAAgB,mBACX,QAAQ,EACvB,KAAK,EAAE,WAAW,aAElB,yBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,gBAAgB,IACtB,KAAK,EACL,QAAQ,EACZ,EACF,KAAC,YAAY,IAAC,SAAS,EAAC,kBAAkB,GAAG,EAC7C,KAAC,yBAAyB,IAAC,SAAS,EAAC,cAAc,GAAG,EACrD,KAAK,IACA,EACP,WAAW,IAAI,CACd,6BAAkB,QAAQ,EAAE,SAAS,EAAC,sBAAsB,YACzD,WAAW,GACV,CACL,IACe,CACnB,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __makeTemplateObject } from "tslib";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
export var CheckboxWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: ", ";\n user-select: none;\n\n label {\n cursor: pointer;\n width: 100%;\n color: ", ";\n font-size: 14px;\n font-style: normal;\n font-weight:
|
|
3
|
+
export var CheckboxWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: ", ";\n user-select: none;\n\n label {\n cursor: pointer;\n width: 100%;\n color: ", ";\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; /* 142.857% */\n letter-spacing: 0.1px;\n display: flex;\n gap: ", ";\n align-items: center;\n border-radius: 4px;\n\n &[aria-disabled=\"true\"] {\n color: ", ";\n cursor: default;\n }\n }\n\n input[type=\"checkbox\"] {\n display: none;\n }\n\n input[type=\"checkbox\"]:focus,\n input[type=\"checkbox\"]:focus-visible {\n outline: none;\n }\n\n label:has(> input[type=\"checkbox\"]:focus-visible) {\n outline: 1px solid ", ";\n outline-offset: 2px;\n }\n\n input[type=\"checkbox\"]:disabled {\n cursor: default;\n border-color: ", ";\n\n &::before {\n background-color: ", ";\n }\n }\n\n p {\n margin: 0;\n color: ", ";\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 133.333% */\n letter-spacing: 0.4px;\n\n &[aria-disabled=\"true\"] {\n color: ", ";\n }\n }\n\n svg {\n transition: opacity 0.3s;\n font-size: 24px;\n }\n\n .icon-not-checked {\n fill: ", ";\n }\n\n .icon-checked {\n display: none;\n fill: ", ";\n opacity: 0;\n }\n\n input[type=\"checkbox\"]:disabled ~ svg {\n fill: ", ";\n }\n\n input[type=\"checkbox\"]:checked ~ .icon-not-checked {\n display: none;\n }\n\n input[type=\"checkbox\"]:checked ~ .icon-checked {\n display: unset;\n opacity: 1;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n gap: ", ";\n user-select: none;\n\n label {\n cursor: pointer;\n width: 100%;\n color: ", ";\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; /* 142.857% */\n letter-spacing: 0.1px;\n display: flex;\n gap: ", ";\n align-items: center;\n border-radius: 4px;\n\n &[aria-disabled=\"true\"] {\n color: ", ";\n cursor: default;\n }\n }\n\n input[type=\"checkbox\"] {\n display: none;\n }\n\n input[type=\"checkbox\"]:focus,\n input[type=\"checkbox\"]:focus-visible {\n outline: none;\n }\n\n label:has(> input[type=\"checkbox\"]:focus-visible) {\n outline: 1px solid ", ";\n outline-offset: 2px;\n }\n\n input[type=\"checkbox\"]:disabled {\n cursor: default;\n border-color: ", ";\n\n &::before {\n background-color: ", ";\n }\n }\n\n p {\n margin: 0;\n color: ", ";\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 133.333% */\n letter-spacing: 0.4px;\n\n &[aria-disabled=\"true\"] {\n color: ", ";\n }\n }\n\n svg {\n transition: opacity 0.3s;\n font-size: 24px;\n }\n\n .icon-not-checked {\n fill: ", ";\n }\n\n .icon-checked {\n display: none;\n fill: ", ";\n opacity: 0;\n }\n\n input[type=\"checkbox\"]:disabled ~ svg {\n fill: ", ";\n }\n\n input[type=\"checkbox\"]:checked ~ .icon-not-checked {\n display: none;\n }\n\n input[type=\"checkbox\"]:checked ~ .icon-checked {\n display: unset;\n opacity: 1;\n }\n"])), function (_a) {
|
|
4
4
|
var theme = _a.theme;
|
|
5
5
|
return theme.spacing.xxs;
|
|
6
6
|
}, function (_a) {
|
|
@@ -15,9 +15,6 @@ export var CheckboxWrapper = styled.div(templateObject_1 || (templateObject_1 =
|
|
|
15
15
|
}, function (_a) {
|
|
16
16
|
var theme = _a.theme;
|
|
17
17
|
return theme.colors.neutral.darker;
|
|
18
|
-
}, function (_a) {
|
|
19
|
-
var theme = _a.theme;
|
|
20
|
-
return theme.colors.neutral.darker;
|
|
21
18
|
}, function (_a) {
|
|
22
19
|
var theme = _a.theme;
|
|
23
20
|
return theme.colors.neutral.default;
|
|
@@ -30,6 +27,9 @@ export var CheckboxWrapper = styled.div(templateObject_1 || (templateObject_1 =
|
|
|
30
27
|
}, function (_a) {
|
|
31
28
|
var theme = _a.theme;
|
|
32
29
|
return theme.colors.neutral.default;
|
|
30
|
+
}, function (_a) {
|
|
31
|
+
var theme = _a.theme;
|
|
32
|
+
return theme.colors.neutral.darker;
|
|
33
33
|
}, function (_a) {
|
|
34
34
|
var theme = _a.theme;
|
|
35
35
|
return theme.colors.green.default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Checkbox/styles.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,+
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Checkbox/styles.ts"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,0pDAAA,+EAIhC,EAAgC,2FAM5B,EAA0C,2KAO5C,EAAgC,wGAK5B,EAA2C,8RAejC,EAA0C,qHAM/C,EAA2C,gDAGrC,EAA2C,qDAMxD,EAAwC,8LAQtC,EAA2C,yHAU9C,EAA0C,6DAK1C,EAAyC,oFAKzC,EAA2C,kMAWtD,KAvFQ,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,GAAG;AAAjB,CAAiB,EAM5B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAO5C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,OAAO,CAAC,GAAG;AAAjB,CAAiB,EAK5B,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAejC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAM/C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAGrC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAMxD,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;AAAzB,CAAyB,EAQtC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,EAU9C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;AAA3B,CAA2B,EAK1C,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO;AAA1B,CAA0B,EAKzC,UAAC,EAAS;QAAP,KAAK,WAAA;IAAO,OAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO;AAA5B,CAA4B,CAWtD,CAAC"}
|