@team-monolith/cds 0.12.5 → 0.12.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.
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;
|