maru_design2 2.15.2 → 2.16.1
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/CHANGELOG.md +20 -0
- package/dist/components/atoms/input/Input.d.ts +4 -1
- package/dist/index.js +9 -9
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [2.16.1](https://github.com/42maru-ai/maru-design2/compare/v2.16.0...v2.16.1) (2024-09-23)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* :lipstick: Radio - UPDATE primary color hover style ([2ecfdb6](https://github.com/42maru-ai/maru-design2/commit/2ecfdb696c8b14b2ab4d2c64f0a72e5ea9196b04))
|
|
9
|
+
|
|
10
|
+
## [2.16.0](https://github.com/42maru-ai/maru-design2/compare/v2.15.2...v2.16.0) (2024-09-10)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* :art: Input - UPDATE errorMessage to invalid.on & invalid.message ([ecc09e8](https://github.com/42maru-ai/maru-design2/commit/ecc09e8f4b2632f9b7de0093b82efb729186efb6))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* :dizzy: Toast - UPDATE transitions ([3eccdf0](https://github.com/42maru-ai/maru-design2/commit/3eccdf0580b0db984a9ac9c02edd7b6625a6547e))
|
|
21
|
+
* :lipstick: Input - UPDATE invalid style ([de176e9](https://github.com/42maru-ai/maru-design2/commit/de176e9c81801d474308408c54465a0b3d2ec19c))
|
|
22
|
+
|
|
3
23
|
## [2.15.2](https://github.com/42maru-ai/maru-design2/compare/v2.15.1...v2.15.2) (2024-08-28)
|
|
4
24
|
|
|
5
25
|
|
|
@@ -5,7 +5,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
|
|
|
5
5
|
/**
|
|
6
6
|
* 에러났을때 메시지. (@v1 isValid, validMessage)
|
|
7
7
|
*/
|
|
8
|
-
|
|
8
|
+
invalid?: {
|
|
9
|
+
on: boolean;
|
|
10
|
+
message?: string;
|
|
11
|
+
};
|
|
9
12
|
label?: string;
|
|
10
13
|
/**
|
|
11
14
|
* 데이터 타입. ['text', 'password', 'number']
|
package/dist/index.js
CHANGED
|
@@ -4151,11 +4151,11 @@ function Chip(_a) {
|
|
|
4151
4151
|
}));
|
|
4152
4152
|
}
|
|
4153
4153
|
|
|
4154
|
-
var css_248z$d = ".maru-input-wrapper.disabled input {\n opacity: 0.5;\n pointer-events: none;\n}\n.maru-input-wrapper.disabled .maru-input-default:hover,\n.maru-input-wrapper.disabled .maru-input-default:focus-within,\n.maru-input-wrapper.disabled .maru-input-underline:hover,\n.maru-input-wrapper.disabled .maru-input-underline:focus-within {\n border-color: transparent;\n outline: transparent;\n}\n.maru-input-wrapper .maru-input-label {\n margin-bottom: 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n.maru-input-wrapper .maru-input-label label {\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n border: 1px solid #e4e4e4;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n height: 37px;\n padding: 8px 10px 8px 14px;\n border-radius: 6px;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n border: 2px solid #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input
|
|
4154
|
+
var css_248z$d = ".maru-input-wrapper.disabled input {\n opacity: 0.5;\n pointer-events: none;\n}\n.maru-input-wrapper.disabled .maru-input-default:hover,\n.maru-input-wrapper.disabled .maru-input-default:focus-within,\n.maru-input-wrapper.disabled .maru-input-underline:hover,\n.maru-input-wrapper.disabled .maru-input-underline:focus-within {\n border-color: transparent;\n outline: transparent;\n}\n.maru-input-wrapper .maru-input-label {\n margin-bottom: 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n.maru-input-wrapper .maru-input-label label {\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input {\n border: 1px solid #e4e4e4;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n height: 37px;\n padding: 8px 10px 8px 14px;\n border-radius: 6px;\n}\n.maru-input-wrapper .maru-input:focus-visible, .maru-input-wrapper .maru-input:focus-within {\n border: 2px solid #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input:hover {\n border: 2px solid #e4e4e4;\n background-color: #fafafa;\n}\n.maru-input-wrapper .maru-input.errored {\n border: 2px solid #e53e3e;\n}\n.maru-input-wrapper .maru-input > input {\n width: 100%;\n border: unset;\n outline: unset;\n background-color: transparent;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n}\n.maru-input-wrapper .maru-input > input::-webkit-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-moz-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input:-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::-ms-input-placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input > input::placeholder {\n color: #bdbdbd;\n}\n.maru-input-wrapper .maru-input-start-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n margin-right: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button {\n padding: unset;\n margin: unset;\n border: unset;\n background-color: unset;\n cursor: pointer;\n width: 16px;\n height: 16px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper > button:last-of-type {\n margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-end-node-wrapper .maru-input-end-node {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n margin-left: 10px;\n}\n.maru-input-wrapper .maru-input-footer {\n display: block;\n margin-top: 4px;\n}\n.maru-input-wrapper .maru-input-footer > span {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 12px;\n letter-spacing: -0.48px;\n font-weight: 500;\n color: #e53e3e;\n}";
|
|
4155
4155
|
styleInject(css_248z$d);
|
|
4156
4156
|
|
|
4157
4157
|
var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
|
|
4158
|
-
var
|
|
4158
|
+
var invalid = _a.invalid,
|
|
4159
4159
|
label = _a.label,
|
|
4160
4160
|
_b = _a.type,
|
|
4161
4161
|
type = _b === void 0 ? 'text' : _b,
|
|
@@ -4165,7 +4165,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
|
|
|
4165
4165
|
startNode = _a.startNode,
|
|
4166
4166
|
endNode = _a.endNode,
|
|
4167
4167
|
className = _a.className,
|
|
4168
|
-
props = __rest(_a, ["
|
|
4168
|
+
props = __rest(_a, ["invalid", "label", "type", "onClear", "hiddenClearButton", "wrapperRef", "startNode", "endNode", "className"]);
|
|
4169
4169
|
var _c = useState(true),
|
|
4170
4170
|
pwdVision = _c[0],
|
|
4171
4171
|
setPwdVision = _c[1];
|
|
@@ -4243,7 +4243,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
|
|
|
4243
4243
|
}))
|
|
4244
4244
|
})), jsxs("div", __assign({
|
|
4245
4245
|
className: classNames('maru-input', {
|
|
4246
|
-
errored:
|
|
4246
|
+
errored: invalid === null || invalid === void 0 ? void 0 : invalid.on
|
|
4247
4247
|
})
|
|
4248
4248
|
}, {
|
|
4249
4249
|
children: [startNode && jsx("div", __assign({
|
|
@@ -4287,17 +4287,17 @@ var Input = /*#__PURE__*/forwardRef(function (_a, inputRef) {
|
|
|
4287
4287
|
})
|
|
4288
4288
|
}))]
|
|
4289
4289
|
}))]
|
|
4290
|
-
})),
|
|
4290
|
+
})), invalid && invalid.on && jsx("div", __assign({
|
|
4291
4291
|
className: "maru-input-footer"
|
|
4292
4292
|
}, {
|
|
4293
4293
|
children: jsx("span", {
|
|
4294
|
-
children:
|
|
4294
|
+
children: invalid.message
|
|
4295
4295
|
})
|
|
4296
4296
|
}))]
|
|
4297
4297
|
}));
|
|
4298
4298
|
});
|
|
4299
4299
|
Input.defaultProps = {
|
|
4300
|
-
|
|
4300
|
+
invalid: undefined,
|
|
4301
4301
|
label: undefined,
|
|
4302
4302
|
type: 'text',
|
|
4303
4303
|
onClear: undefined,
|
|
@@ -6197,7 +6197,7 @@ function Popover(_a) {
|
|
|
6197
6197
|
}) : PopoverBody;
|
|
6198
6198
|
}
|
|
6199
6199
|
|
|
6200
|
-
var css_248z$b = ".maru-radio-wrapper-8px {\n display: flex;\n gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n display: flex;\n gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n display: flex;\n gap: 2px;\n}\n\n.maru-radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid #5c5c5c;\n position: relative;\n display: inline-block;\n cursor: pointer;\n}\n.maru-radio:checked::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: #5c5c5c;\n}\n
|
|
6200
|
+
var css_248z$b = ".maru-radio-wrapper-8px {\n display: flex;\n gap: 8px;\n}\n\n.maru-radio-wrapper-4px {\n display: flex;\n gap: 4px;\n}\n\n.maru-radio-wrapper-2px {\n display: flex;\n gap: 2px;\n}\n\n.maru-radio {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 2px solid #5c5c5c;\n position: relative;\n display: inline-block;\n cursor: pointer;\n}\n.maru-radio:checked::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: #5c5c5c;\n}\n.maru-radio:not(:disabled):hover::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background-color: #5c5c5c;\n}\n\n.maru-radio-primary {\n border: 2px solid var(--p);\n}\n.maru-radio-primary:checked::before {\n background-color: var(--p);\n}\n.maru-radio-primary:not(:disabled):hover::before {\n background-color: var(--p);\n}\n\n.maru-radio-label {\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n cursor: pointer;\n}\n\n.maru-radio:disabled,\n.label-disabled {\n cursor: default;\n opacity: 0.5;\n}";
|
|
6201
6201
|
styleInject(css_248z$b);
|
|
6202
6202
|
|
|
6203
6203
|
var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
@@ -24777,7 +24777,7 @@ function Details(_a) {
|
|
|
24777
24777
|
}));
|
|
24778
24778
|
}
|
|
24779
24779
|
|
|
24780
|
-
var css_248z = ".maru-toast-style {\n padding: 10px 10px 10px 12px;\n border-radius: 6px;\n background-color: #fff;\n box-shadow: 0 0 6px 0 #bdbdbd;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: column;\n}\n.maru-toast-style div:first-child {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n width: 100%;\n}\n.maru-toast-style .maru-toast-style-content {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n gap: 8px;\n margin-right: 16px;\n}\n.maru-toast-style .maru-toast-details {\n width: 100%;\n background-color: #fafafa;\n padding: 10px 10px 10px 14px;\n margin-top: 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n}\n.maru-toast-style .maru-toast-details summary {\n margin-top: 6px;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: row;\n white-space: pre-wrap;\n cursor: pointer;\n}\n.maru-toast-style .maru-toast-details summary > div {\n width: auto;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n.maru-toast-style .maru-toast-details summary > div .maru-toast-details-summary-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n margin-left: 8px;\n}\n.maru-toast-style .maru-toast-details summary:first-child {\n margin: 0;\n}\n.maru-toast-style .maru-toast-details li {\n margin-left: 10px;\n}\n\n.maru-toast {\n margin-top: 24px;\n position: relative;\n opacity: 0;\n transform:
|
|
24780
|
+
var css_248z = ".maru-toast-style {\n padding: 10px 10px 10px 12px;\n border-radius: 6px;\n background-color: #fff;\n box-shadow: 0 0 6px 0 #bdbdbd;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: column;\n}\n.maru-toast-style div:first-child {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: row;\n width: 100%;\n}\n.maru-toast-style .maru-toast-style-content {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n gap: 8px;\n margin-right: 16px;\n}\n.maru-toast-style .maru-toast-details {\n width: 100%;\n background-color: #fafafa;\n padding: 10px 10px 10px 14px;\n margin-top: 8px;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 500;\n color: #5c5c5c;\n}\n.maru-toast-style .maru-toast-details summary {\n margin-top: 6px;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n flex-direction: row;\n white-space: pre-wrap;\n cursor: pointer;\n}\n.maru-toast-style .maru-toast-details summary > div {\n width: auto;\n font-family: Pretendard;\n font-style: normal;\n line-height: 150%;\n font-size: 14px;\n letter-spacing: -0.56px;\n font-weight: 600;\n}\n.maru-toast-style .maru-toast-details summary > div .maru-toast-details-summary-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n margin-left: 8px;\n}\n.maru-toast-style .maru-toast-details summary:first-child {\n margin: 0;\n}\n.maru-toast-style .maru-toast-details li {\n margin-left: 10px;\n}\n\n.maru-toast {\n margin-top: 24px;\n position: relative;\n opacity: 0;\n transform: translateX(100%);\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease-out;\n}\n.maru-toast.entered {\n transform: translateX(0);\n opacity: 1;\n}\n.maru-toast.fade-out {\n opacity: 0;\n transform: translateX(100%);\n}\n\n.maru-toaster {\n position: fixed;\n z-index: 6007;\n right: 24px;\n bottom: 24px;\n transition: transform 0.5s ease-out;\n display: flex;\n flex-direction: column-reverse;\n align-items: flex-end;\n}";
|
|
24781
24781
|
styleInject(css_248z);
|
|
24782
24782
|
|
|
24783
24783
|
function ToastStyle(_a) {
|