@team-monolith/cds 0.12.5 → 0.12.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -62,7 +62,7 @@ var Checkbox = React.forwardRef(function (props, ref) {
|
|
|
62
62
|
});
|
|
63
63
|
var CheckboxContainer = styled.span(function (_a) {
|
|
64
64
|
var spacer = _a.spacer, disabled = _a.disabled;
|
|
65
|
-
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: inline-
|
|
65
|
+
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: inline-flex;\n position: relative;\n width: 16px;\n height: 16px;\n cursor: ", ";\n margin-bottom: ", ";\n "], ["\n display: inline-flex;\n position: relative;\n width: 16px;\n height: 16px;\n cursor: ", ";\n margin-bottom: ", ";\n "])), disabled ? "default" : "pointer", spacer ? "8px" : "0");
|
|
66
66
|
});
|
|
67
67
|
var StyledInput = styled.input(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n cursor: inherit;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n width: 16px;\n height: 16px;\n margin: 0;\n padding: 0;\n // input \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uBCF4\uC774\uC9C0 \uC54A\uC9C0\uB9CC, \uD074\uB9AD\uC774 \uAC00\uB2A5\uD558\uAC8C z-index\uB97C \uC124\uC815\uD569\uB2C8\uB2E4.\n z-index: ", ";\n"], ["\n cursor: inherit;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n width: 16px;\n height: 16px;\n margin: 0;\n padding: 0;\n // input \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uBCF4\uC774\uC9C0 \uC54A\uC9C0\uB9CC, \uD074\uB9AD\uC774 \uAC00\uB2A5\uD558\uAC8C z-index\uB97C \uC124\uC815\uD569\uB2C8\uB2E4.\n z-index: ", ";\n"])), ZINDEX.inputBase);
|
|
68
68
|
var Label = styled.label(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n position: relative;\n width: fit-content;\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n color: ", ";\n align-self: center;\n"], ["\n display: flex;\n position: relative;\n width: fit-content;\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n color: ", ";\n align-self: center;\n"])), function (_a) {
|
package/dist/components/Input.js
CHANGED
|
@@ -34,16 +34,17 @@ var COLOR_TO_HINT_STYLES = function (theme, color, disabled) {
|
|
|
34
34
|
return disabled
|
|
35
35
|
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.foreground.neutralBaseDisabled) : {
|
|
36
36
|
default: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.foreground.neutralBaseDisabled),
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
base: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.foreground.neutralBaseDisabled),
|
|
38
|
+
activePrimary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.foreground.neutralBaseDisabled),
|
|
39
|
+
activeDanger: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.foreground.danger),
|
|
40
|
+
activeSuccess: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.foreground.success),
|
|
40
41
|
}[color];
|
|
41
42
|
};
|
|
42
43
|
var SIZE_TO_FONT_STYLES = function (size) {
|
|
43
44
|
return ({
|
|
44
|
-
small: css(
|
|
45
|
-
medium: css(
|
|
46
|
-
large: css(
|
|
45
|
+
small: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 20px;\n svg {\n width: 16px;\n height: 16px;\n }\n "], ["\n font-size: 14px;\n line-height: 20px;\n svg {\n width: 16px;\n height: 16px;\n }\n "]))),
|
|
46
|
+
medium: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n svg {\n width: 16px;\n height: 16px;\n }\n "], ["\n font-size: 16px;\n line-height: 24px;\n svg {\n width: 16px;\n height: 16px;\n }\n "]))),
|
|
47
|
+
large: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 28px;\n svg {\n width: 18px;\n height: 18px;\n }\n "], ["\n font-size: 18px;\n line-height: 28px;\n svg {\n width: 18px;\n height: 18px;\n }\n "]))),
|
|
47
48
|
}[size]);
|
|
48
49
|
};
|
|
49
50
|
/**
|
|
@@ -54,20 +55,20 @@ var Input = React.forwardRef(function (props, ref) {
|
|
|
54
55
|
var _className = props.className, inputBaseProps = __rest(props, ["className"]);
|
|
55
56
|
return (_jsxs(InputWrapper, __assign({ className: props.className, size: props.size, fullWidth: props.fullWidth, ref: ref }, other, { children: [label ? (_jsxs(Label, __assign({ disabled: props.disabled }, { children: [label, " ", _jsx(InputBase, __assign({}, inputBaseProps))] }))) : (_jsx(InputBase, __assign({}, inputBaseProps))), hintText && (_jsxs(Hint, __assign({ color: props.color, disabled: props.disabled }, { children: [hintIcon, hintText] })))] })));
|
|
56
57
|
});
|
|
57
|
-
var InputWrapper = styled.span(
|
|
58
|
+
var InputWrapper = styled.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n ", "\n ", "\n\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 8px;\n ", "\n ", "\n\n position: relative;\n"])), function (_a) {
|
|
58
59
|
var size = _a.size;
|
|
59
60
|
return SIZE_TO_FONT_STYLES(size);
|
|
60
61
|
}, function (_a) {
|
|
61
62
|
var fullWidth = _a.fullWidth;
|
|
62
63
|
return fullWidth && "width: 100%;";
|
|
63
64
|
});
|
|
64
|
-
var Label = styled.label(
|
|
65
|
+
var Label = styled.label(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n gap: 8px;\n ", "\n"])), function (_a) {
|
|
65
66
|
var theme = _a.theme, disabled = _a.disabled;
|
|
66
|
-
return disabled && css(
|
|
67
|
+
return disabled && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), theme.color.foreground.neutralBaseDisabled);
|
|
67
68
|
});
|
|
68
69
|
var Hint = styled.div(function (_a) {
|
|
69
70
|
var theme = _a.theme, color = _a.color, disabled = _a.disabled;
|
|
70
|
-
return css(
|
|
71
|
+
return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 4px;\n ", ";\n "], ["\n display: flex;\n align-items: center;\n gap: 4px;\n ", ";\n "])), COLOR_TO_HINT_STYLES(theme, color, disabled));
|
|
71
72
|
});
|
|
72
73
|
export default Input;
|
|
73
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
74
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { InputHTMLAttributes } from "react";
|
|
2
|
-
export type InputBaseColor = "default" | "activePrimary" | "activeDanger" | "activeSuccess";
|
|
2
|
+
export type InputBaseColor = "default" | "base" | "activePrimary" | "activeDanger" | "activeSuccess";
|
|
3
3
|
export type InputBaseSize = "large" | "medium" | "small";
|
|
4
4
|
export interface InputBaseProps {
|
|
5
5
|
className?: string;
|
|
@@ -24,16 +24,17 @@ var COLOR_TO_INPUT_STYLES = function (theme, color, disabled) {
|
|
|
24
24
|
}
|
|
25
25
|
return {
|
|
26
26
|
default: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: none;\n background: ", ";\n color: ", ";\n "], ["\n border: none;\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBase),
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
base: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: none;\n background: ", ";\n color: ", ";\n "], ["\n border: none;\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
28
|
+
activePrimary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "])), theme.color.foreground.primary, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
29
|
+
activeDanger: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "])), theme.color.foreground.danger, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
30
|
+
activeSuccess: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "])), theme.color.foreground.success, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
30
31
|
}[color];
|
|
31
32
|
};
|
|
32
33
|
var SIZE_TO_STYLES = function (size, fullWidth) {
|
|
33
34
|
return ({
|
|
34
|
-
small: css(
|
|
35
|
-
medium: css(
|
|
36
|
-
large: css(
|
|
35
|
+
small: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-top: 8px;\n padding-bottom: 8px;\n ", ";\n height: 36px;\n "], ["\n padding-top: 8px;\n padding-bottom: 8px;\n ", ";\n height: 36px;\n "])), !fullWidth && "max-width: 300px"),
|
|
36
|
+
medium: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-top: 12px;\n padding-bottom: 12px;\n ", ";\n height: 48px;\n "], ["\n padding-top: 12px;\n padding-bottom: 12px;\n ", ";\n height: 48px;\n "])), !fullWidth && "max-width: 375px"),
|
|
37
|
+
large: css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-top: 14px;\n padding-bottom: 14px;\n ", ";\n height: 56px;\n "], ["\n padding-top: 14px;\n padding-bottom: 14px;\n ", ";\n height: 56px;\n "])), !fullWidth && "max-width: 375px"),
|
|
37
38
|
}[size]);
|
|
38
39
|
};
|
|
39
40
|
export function InputBase(props) {
|
|
@@ -42,11 +43,11 @@ export function InputBase(props) {
|
|
|
42
43
|
}
|
|
43
44
|
var InputContainer = styled.div(function (_a) {
|
|
44
45
|
var theme = _a.theme, color = _a.color, inputSize = _a.inputSize, disabled = _a.disabled, fullWidth = _a.fullWidth;
|
|
45
|
-
return css(
|
|
46
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n\n box-sizing: border-box;\n padding: 14px 16px;\n border-radius: 8px;\n ", "\n ", "\n ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n "], ["\n display: flex;\n align-items: center;\n gap: 16px;\n\n box-sizing: border-box;\n padding: 14px 16px;\n border-radius: 8px;\n ", "\n ", "\n ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n "])), COLOR_TO_INPUT_STYLES(theme, color, disabled), SIZE_TO_STYLES(inputSize, fullWidth), fullWidth && "width: inherit;");
|
|
46
47
|
});
|
|
47
48
|
var StyledInput = styled.input(function (_a) {
|
|
48
49
|
var theme = _a.theme;
|
|
49
|
-
return css(
|
|
50
|
+
return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n appearance: none;\n flex: 1;\n width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container\n border: none;\n padding: 0;\n background-color: transparent;\n font: inherit;\n color: currentColor;\n\n &:focus-visible {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n }\n "], ["\n appearance: none;\n flex: 1;\n width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container\n border: none;\n padding: 0;\n background-color: transparent;\n font: inherit;\n color: currentColor;\n\n &:focus-visible {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n }\n "])), theme.color.foreground.neutralBaseDisabled);
|
|
50
51
|
});
|
|
51
|
-
var ClearButton = styled.button(
|
|
52
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
52
|
+
var ClearButton = styled.button(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n color: currentColor;\n &:not(:disabled) {\n cursor: pointer;\n }\n display: flex;\n align-items: center;\n"], ["\n ", "\n color: currentColor;\n &:not(:disabled) {\n cursor: pointer;\n }\n display: flex;\n align-items: center;\n"])), RESET_BUTTON);
|
|
53
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|