@xfers/design-system 4.5.0-dev.aa9add1032 → 4.5.0-dev.f20b83274d
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/cjs/index.js +6 -6
- package/cjs/index.js.map +1 -1
- package/dist/components/Input/HelperText.js +2 -2
- package/dist/components/Input/HelperText.js.map +1 -1
- package/dist/components/Input/InputLabel.js +6 -6
- package/dist/components/Input/InputLabel.js.map +1 -1
- package/dist/components/Input/inputStyles.js +2 -13
- package/dist/components/Input/inputStyles.js.map +1 -1
- package/dist/components/InputWithButton/index.js +22 -6
- package/dist/components/InputWithButton/index.js.map +1 -1
- package/dist/shared/TypographyStyles.js +13 -1
- package/dist/shared/TypographyStyles.js.map +1 -1
- package/dist/types/components/Input/inputStyles.d.ts +2 -13
- package/dist/types/shared/TypographyStyles.d.ts +13 -0
- package/es/index.js +5 -5
- package/es/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.HelperText = HelperText;
|
|
4
4
|
var react_1 = require("react");
|
|
5
|
-
var Typography_1 = require("src/
|
|
5
|
+
var Typography_1 = require("src/constants/Typography/Typography");
|
|
6
6
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
7
7
|
function HelperText(_a) {
|
|
8
8
|
var text = _a.text, error = _a.error;
|
|
@@ -12,6 +12,6 @@ function HelperText(_a) {
|
|
|
12
12
|
var color = error
|
|
13
13
|
? theme.color.status.critical
|
|
14
14
|
: theme.color.component.helperInput;
|
|
15
|
-
return react_1.default.createElement(Typography_1.
|
|
15
|
+
return (react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: color, marginTop: 4 } }, text));
|
|
16
16
|
}
|
|
17
17
|
//# sourceMappingURL=HelperText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../src/components/Input/HelperText.tsx"],"names":[],"mappings":";;AASA,
|
|
1
|
+
{"version":3,"file":"HelperText.js","sourceRoot":"","sources":["../../../src/components/Input/HelperText.tsx"],"names":[],"mappings":";;AASA,gCAiBC;AA1BD,+BAAyB;AACzB,kEAAgE;AAChE,uDAAiD;AAOjD,SAAgB,UAAU,CAAC,EAGT;QAFhB,IAAI,UAAA,EACJ,KAAK,WAAA;IAEL,IAAM,KAAK,GAAG,IAAA,uBAAQ,GAAE,CAAA;IAExB,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAA;IAEtB,IAAM,KAAK,GAAG,KAAK;QACjB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QAC7B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAA;IAErC,OAAO,CACL,8BAAC,uBAAU,CAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,OAAA,EAAE,SAAS,EAAE,CAAC,EAAE,IACtD,IAAI,CACW,CACnB,CAAA;AACH,CAAC"}
|
|
@@ -9,23 +9,23 @@ var react_1 = require("react");
|
|
|
9
9
|
var styled_1 = require("@emotion/styled");
|
|
10
10
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
11
11
|
var icons_1 = require("src/icons");
|
|
12
|
-
var
|
|
12
|
+
var Typography_1 = require("src/constants/Typography/Typography");
|
|
13
13
|
var Tooltip_1 = require("src/components/Tooltip");
|
|
14
|
-
var LabelContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n"], ["\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n"])));
|
|
15
|
-
var LabelText = styled_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-family: ", ";\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n"], ["\n font-family: ", ";\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n"])), TypographyStyles_1.MAIN_FONT);
|
|
16
14
|
function InputLabel(_a) {
|
|
17
15
|
var label = _a.label, required = _a.required, optional = _a.optional, showInfoIcon = _a.showInfoIcon, infoText = _a.infoText, onInfoClick = _a.onInfoClick;
|
|
18
16
|
var theme = (0, ThemeContext_1.useTheme)();
|
|
19
17
|
if (!label)
|
|
20
18
|
return null;
|
|
21
19
|
return (react_1.default.createElement(LabelContainer, null,
|
|
22
|
-
react_1.default.createElement(
|
|
20
|
+
react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: theme.color.base.onNeutral } },
|
|
23
21
|
label,
|
|
24
22
|
required && (react_1.default.createElement("span", { style: { color: theme.error.text, marginLeft: 2 } }, "*"))),
|
|
25
|
-
optional && (react_1.default.createElement(
|
|
23
|
+
optional && (react_1.default.createElement(Typography_1.Typography.Body, { size: "sm", style: { color: theme.color.base.onNeutralSecondary } }, "Optional")),
|
|
26
24
|
showInfoIcon && infoText && (react_1.default.createElement(Tooltip_1.default, { content: infoText, placement: "top" },
|
|
27
25
|
react_1.default.createElement(icons_1.Info, { style: { cursor: 'pointer', width: 16, height: 16 }, onClick: onInfoClick }))),
|
|
28
26
|
showInfoIcon && !infoText && (react_1.default.createElement(icons_1.Info, { style: { cursor: 'pointer', width: 16, height: 16 }, onClick: onInfoClick }))));
|
|
29
27
|
}
|
|
30
|
-
|
|
28
|
+
// ─── Styled Components ───
|
|
29
|
+
var LabelContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n"], ["\n display: flex;\n align-items: center;\n gap: 4px;\n margin-bottom: 4px;\n"])));
|
|
30
|
+
var templateObject_1;
|
|
31
31
|
//# sourceMappingURL=InputLabel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["../../../src/components/Input/InputLabel.tsx"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"InputLabel.js","sourceRoot":"","sources":["../../../src/components/Input/InputLabel.tsx"],"names":[],"mappings":";;;;;;AAgBA,gCA4CC;AA5DD,+BAAyB;AACzB,0CAAoC;AACpC,uDAAiD;AACjD,mCAAgC;AAChC,kEAAgE;AAChE,kDAA4C;AAW5C,SAAgB,UAAU,CAAC,EAOT;QANhB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,WAAW,iBAAA;IAEX,IAAM,KAAK,GAAG,IAAA,uBAAQ,GAAE,CAAA;IAExB,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,8BAAC,cAAc;QACb,8BAAC,uBAAU,CAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;YACpE,KAAK;YACL,QAAQ,IAAI,CACX,wCAAM,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,QAAU,CAClE,CACe;QACjB,QAAQ,IAAI,CACX,8BAAC,uBAAU,CAAC,IAAI,IACd,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,kBAAkB,EAAE,eAGrC,CACnB;QACA,YAAY,IAAI,QAAQ,IAAI,CAC3B,8BAAC,iBAAO,IAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,KAAK;YACzC,8BAAC,YAAI,IACH,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EACnD,OAAO,EAAE,WAAW,GACpB,CACM,CACX;QACA,YAAY,IAAI,CAAC,QAAQ,IAAI,CAC5B,8BAAC,YAAI,IACH,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EACnD,OAAO,EAAE,WAAW,GACpB,CACH,CACc,CAClB,CAAA;AACH,CAAC;AAED,4BAA4B;AAE5B,IAAM,cAAc,GAAG,gBAAM,CAAC,GAAG,qJAAA,kFAKhC,IAAA,CAAA"}
|
|
@@ -3,21 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.SIZE_CONFIG = void 0;
|
|
4
4
|
exports.getBaseInputStyle = getBaseInputStyle;
|
|
5
5
|
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
6
|
-
exports.SIZE_CONFIG
|
|
7
|
-
large: {
|
|
8
|
-
height: '48px',
|
|
9
|
-
borderRadius: '12px',
|
|
10
|
-
padding: '12px 16px',
|
|
11
|
-
},
|
|
12
|
-
small: {
|
|
13
|
-
height: '36px',
|
|
14
|
-
borderRadius: '8px',
|
|
15
|
-
padding: '8px 12px',
|
|
16
|
-
},
|
|
17
|
-
};
|
|
6
|
+
Object.defineProperty(exports, "SIZE_CONFIG", { enumerable: true, get: function () { return TypographyStyles_1.SIZE_CONFIG; } });
|
|
18
7
|
function getBaseInputStyle(theme, size, error, disabledAddon) {
|
|
19
8
|
if (size === void 0) { size = 'large'; }
|
|
20
|
-
var _a =
|
|
9
|
+
var _a = TypographyStyles_1.SIZE_CONFIG[size], height = _a.height, borderRadius = _a.borderRadius, padding = _a.padding;
|
|
21
10
|
var borderColor = error
|
|
22
11
|
? theme.color.status.critical
|
|
23
12
|
: theme.color.base.line;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputStyles.js","sourceRoot":"","sources":["../../../src/components/Input/inputStyles.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"inputStyles.js","sourceRoot":"","sources":["../../../src/components/Input/inputStyles.ts"],"names":[],"mappings":";;;AAUA,8CAmOC;AA7OD,gEAKoC;AAG3B,4FALP,8BAAW,OAKO;AAEpB,SAAgB,iBAAiB,CAC/B,KAA2B,EAC3B,IAAyB,EACzB,KAAe,EACf,aAAuB;IAFvB,qBAAA,EAAA,cAAyB;IAInB,IAAA,KAAoC,8BAAW,CAAC,IAAI,CAAC,EAAnD,MAAM,YAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAsB,CAAA;IAC3D,IAAM,WAAW,GAAG,KAAK;QACvB,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;QAC7B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;IAEzB,OAAO,wLAKQ,OAAO,mCACH,4BAAS,iCACX,4BAAS,CAAC,EAAE,6BAChB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,wDAEzB,MAAM,sFAGL,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,mMAOhC,YAAY,+CACb,WAAW,8BACjB,MAAM,+BACL,OAAO,8CACQ,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,yDAEjC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,0DAEhC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,qQAOlB,YAAY,cAAI,YAAY,iDAC/B,WAAW,8BACjB,MAAM,8CACU,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,yDAEjC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,0DAEhC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,qLAKpB,YAAY,kBAAQ,YAAY,+CACjC,WAAW,8BACjB,MAAM,8CACU,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,yDAEjC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,0DAEhC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,kMAMpB,YAAY,+CACb,WAAW,8BACjB,MAAM,+BACL,OAAO,8CACQ,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,8NASnC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,iRAOzB,WAAW,8BACjB,MAAM,+BACL,OAAO,8CACQ,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,mFAEjC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,waAcxB,YAAY,cAAI,YAAY,uMAK9B,YAAY,kBAAQ,YAAY,0IAK7B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,oCACvC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,6BAC5B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,8CACpB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,2FAG3B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,oCACvC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,yEAEf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,+BAC9C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,uDAEtB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,2HAKhC,4BAAS,6BACf,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,wCACf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,8CAC9B,YAAY,4DACT,YAAY,+CACzB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,6iBAkBf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,4IAK3B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,sCACvC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,+BAC5B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,gDACpB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,gGAIlC,4BAAS,6BACf,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,wCACf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,+CAC7B,YAAY,6DACT,YAAY,+CAC1B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,6iBAkBf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,8FAMjD,aAAa;QACX,CAAC,CAAC,+EAEgB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,6BAC9C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,6FAG9B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,8EAEf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,yGAIrC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,6BAC9C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,6FAG9B,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,8EAEf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe,4BAG1D;QACG,CAAC,CAAC,EAAE,SAET,CAAA;AACH,CAAC"}
|
|
@@ -8,12 +8,6 @@ var react_1 = require("react");
|
|
|
8
8
|
var styled_1 = require("@emotion/styled");
|
|
9
9
|
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
10
10
|
var TypographyStyles_1 = require("src/shared/TypographyStyles");
|
|
11
|
-
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: 48px;\n width: 100%;\n position: relative;\n"], ["\n display: flex;\n height: 48px;\n width: 100%;\n position: relative;\n"])));
|
|
12
|
-
var PrefixContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0 16px;\n border: 1px solid ", ";\n border-right: none;\n border-radius: 12px 0 0 12px;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n overflow: visible;\n\n & > * {\n pointer-events: ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0 16px;\n border: 1px solid ", ";\n border-right: none;\n border-radius: 12px 0 0 12px;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n overflow: visible;\n\n & > * {\n pointer-events: ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.bgColor; }, function (props) { return props.textColor; }, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) { return (props.isDisabled ? 'not-allowed' : 'default'); }, function (props) { return (props.isDisabled ? 'none' : 'auto'); }, function (props) { return (props.isDisabled ? props.bgColor : props.hoverBgColor); });
|
|
13
|
-
var StyledInput = styled_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n height: 100%;\n padding: 12px 16px;\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background-color: ", ";\n outline: none;\n box-sizing: border-box;\n cursor: ", ";\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n flex: 1;\n min-width: 0;\n height: 100%;\n padding: 12px 16px;\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background-color: ", ";\n outline: none;\n box-sizing: border-box;\n cursor: ", ";\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return (props.hasPrefix ? '0' : '12px 0 0 12px'); }, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) { return (props.isDisabled ? props.disabledTextColor : props.textColor); }, function (props) {
|
|
14
|
-
return props.isDisabled ? props.disabledBgColor : 'transparent';
|
|
15
|
-
}, function (props) { return (props.isDisabled ? 'not-allowed' : 'text'); }, function (props) { return props.placeholderColor; }, function (props) { return (props.isDisabled ? props.borderColor : props.focusBorderColor); }, function (props) { return (props.isDisabled ? props.borderColor : props.focusBorderColor); });
|
|
16
|
-
var StyledButton = styled_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 24px;\n border: none;\n border-radius: 0 12px 12px 0;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n\n &:hover {\n opacity: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 24px;\n border: none;\n border-radius: 0 12px 12px 0;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n\n &:hover {\n opacity: ", ";\n }\n"])), function (props) { return (props.isDisabled ? props.disabledBgColor : props.bgColor); }, function (props) { return (props.isDisabled ? props.disabledTextColor : props.textColor); }, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) { return (props.isDisabled ? 'not-allowed' : 'pointer'); }, function (props) { return (props.isDisabled ? 1 : 0.9); });
|
|
17
11
|
var InputWithButton = function (_a) {
|
|
18
12
|
var buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, prefix = _a.prefix, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.disabledInput, disabledInput = _c === void 0 ? false : _c, _d = _a.disabledPrefix, disabledPrefix = _d === void 0 ? false : _d, _e = _a.staticPrefix, staticPrefix = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, className = _a.className;
|
|
19
13
|
var theme = (0, ThemeContext_1.useTheme)();
|
|
@@ -40,5 +34,27 @@ var InputWithButton = function (_a) {
|
|
|
40
34
|
react_1.default.createElement(StyledButton, { type: "button", onClick: onButtonClick, disabled: disabled || error, bgColor: theme.color.base.primary, disabledBgColor: theme.color.surface.disabledSurface, textColor: theme.color.base.onNeutral, disabledTextColor: theme.color.surface.disabledOnSurface, isDisabled: disabled || error }, buttonText)));
|
|
41
35
|
};
|
|
42
36
|
exports.default = InputWithButton;
|
|
37
|
+
// ─── Styled Components ───
|
|
38
|
+
var _a = TypographyStyles_1.SIZE_CONFIG.large, height = _a.height, borderRadius = _a.borderRadius, padding = _a.padding;
|
|
39
|
+
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n height: ", ";\n width: 100%;\n position: relative;\n"], ["\n display: flex;\n height: ", ";\n width: 100%;\n position: relative;\n"])), height);
|
|
40
|
+
var PrefixContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0 16px;\n border: 1px solid ", ";\n border-right: none;\n border-radius: ", " 0 0 ", ";\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n overflow: visible;\n\n & > * {\n pointer-events: ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0 16px;\n border: 1px solid ", ";\n border-right: none;\n border-radius: ", " 0 0 ", ";\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n overflow: visible;\n\n & > * {\n pointer-events: ", ";\n }\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.borderColor; }, borderRadius, borderRadius, function (props) { return props.bgColor; }, function (props) { return props.textColor; }, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) { return (props.isDisabled ? 'not-allowed' : 'default'); }, function (props) { return (props.isDisabled ? 'none' : 'auto'); }, function (props) {
|
|
41
|
+
return props.isDisabled ? props.bgColor : props.hoverBgColor;
|
|
42
|
+
});
|
|
43
|
+
var StyledInput = styled_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n height: 100%;\n padding: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background-color: ", ";\n outline: none;\n box-sizing: border-box;\n cursor: ", ";\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n flex: 1;\n min-width: 0;\n height: 100%;\n padding: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background-color: ", ";\n outline: none;\n box-sizing: border-box;\n cursor: ", ";\n\n &::placeholder {\n color: ", ";\n font-weight: 400;\n }\n\n &:focus {\n border-color: ", ";\n }\n\n &:hover {\n border-color: ", ";\n }\n"])), padding, function (props) { return props.borderColor; }, function (props) {
|
|
44
|
+
return props.hasPrefix ? '0' : "".concat(borderRadius, " 0 0 ").concat(borderRadius);
|
|
45
|
+
}, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) {
|
|
46
|
+
return props.isDisabled ? props.disabledTextColor : props.textColor;
|
|
47
|
+
}, function (props) {
|
|
48
|
+
return props.isDisabled ? props.disabledBgColor : 'transparent';
|
|
49
|
+
}, function (props) { return (props.isDisabled ? 'not-allowed' : 'text'); }, function (props) { return props.placeholderColor; }, function (props) {
|
|
50
|
+
return props.isDisabled ? props.borderColor : props.focusBorderColor;
|
|
51
|
+
}, function (props) {
|
|
52
|
+
return props.isDisabled ? props.borderColor : props.focusBorderColor;
|
|
53
|
+
});
|
|
54
|
+
var StyledButton = styled_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 24px;\n border: none;\n border-radius: 0 ", " ", " 0;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n\n &:hover {\n opacity: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 24px;\n border: none;\n border-radius: 0 ", " ", " 0;\n background-color: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n white-space: nowrap;\n cursor: ", ";\n box-sizing: border-box;\n\n &:hover {\n opacity: ", ";\n }\n"])), borderRadius, borderRadius, function (props) {
|
|
55
|
+
return props.isDisabled ? props.disabledBgColor : props.bgColor;
|
|
56
|
+
}, function (props) {
|
|
57
|
+
return props.isDisabled ? props.disabledTextColor : props.textColor;
|
|
58
|
+
}, TypographyStyles_1.MAIN_FONT, TypographyStyles_1.FONT_SIZE.P1, function (props) { return (props.isDisabled ? 'not-allowed' : 'pointer'); }, function (props) { return (props.isDisabled ? 1 : 0.9); });
|
|
43
59
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
44
60
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputWithButton/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,uDAAiD;AACjD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InputWithButton/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.SECONDARY_FONT = exports.MAIN_FONT = void 0;
|
|
3
|
+
exports.LINE_HEIGHT = exports.SIZE_CONFIG = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.SECONDARY_FONT = exports.MAIN_FONT = void 0;
|
|
4
4
|
exports.MAIN_FONT = 'Hanken Grotesk';
|
|
5
5
|
exports.SECONDARY_FONT = 'Red Hat Display';
|
|
6
6
|
exports.FALLBACK_FONT = 'Inter';
|
|
@@ -24,6 +24,18 @@ var FONT_SIZE;
|
|
|
24
24
|
FONT_SIZE["SMALL"] = "12px";
|
|
25
25
|
FONT_SIZE["SMALL_MOBILE"] = "14px";
|
|
26
26
|
})(FONT_SIZE || (exports.FONT_SIZE = FONT_SIZE = {}));
|
|
27
|
+
exports.SIZE_CONFIG = {
|
|
28
|
+
large: {
|
|
29
|
+
height: '48px',
|
|
30
|
+
borderRadius: '12px',
|
|
31
|
+
padding: '12px 16px',
|
|
32
|
+
},
|
|
33
|
+
small: {
|
|
34
|
+
height: '36px',
|
|
35
|
+
borderRadius: '8px',
|
|
36
|
+
padding: '8px 12px',
|
|
37
|
+
},
|
|
38
|
+
};
|
|
27
39
|
var LINE_HEIGHT;
|
|
28
40
|
(function (LINE_HEIGHT) {
|
|
29
41
|
LINE_HEIGHT["H1"] = "29px";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypographyStyles.js","sourceRoot":"","sources":["../../src/shared/TypographyStyles.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG,gBAAgB,CAAA;AAC5B,QAAA,cAAc,GAAG,iBAAiB,CAAA;AAClC,QAAA,aAAa,GAAG,OAAO,CAAA;AAEpC,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,+CAAU,CAAA;IACV,mDAAY,CAAA;IACZ,qDAAa,CAAA;AACf,CAAC,EAJW,WAAW,2BAAX,WAAW,QAItB;AAED,IAAY,SAYX;AAZD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,2BAAc,CAAA;IACd,kCAAqB,CAAA;AACvB,CAAC,EAZW,SAAS,yBAAT,SAAS,QAYpB;AAED,IAAY,WAYX;AAZD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,6BAAc,CAAA;IACd,oCAAqB,CAAA;AACvB,CAAC,EAZW,WAAW,2BAAX,WAAW,QAYtB"}
|
|
1
|
+
{"version":3,"file":"TypographyStyles.js","sourceRoot":"","sources":["../../src/shared/TypographyStyles.ts"],"names":[],"mappings":";;;AAAa,QAAA,SAAS,GAAG,gBAAgB,CAAA;AAC5B,QAAA,cAAc,GAAG,iBAAiB,CAAA;AAClC,QAAA,aAAa,GAAG,OAAO,CAAA;AAEpC,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,+CAAU,CAAA;IACV,mDAAY,CAAA;IACZ,qDAAa,CAAA;AACf,CAAC,EAJW,WAAW,2BAAX,WAAW,QAItB;AAED,IAAY,SAYX;AAZD,WAAY,SAAS;IACnB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,wBAAW,CAAA;IACX,wBAAW,CAAA;IACX,+BAAkB,CAAA;IAClB,2BAAc,CAAA;IACd,kCAAqB,CAAA;AACvB,CAAC,EAZW,SAAS,yBAAT,SAAS,QAYpB;AAIY,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,MAAM;QACpB,OAAO,EAAE,WAAW;KACrB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,UAAU;KACpB;CACF,CAAA;AAED,IAAY,WAYX;AAZD,WAAY,WAAW;IACrB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,0BAAW,CAAA;IACX,0BAAW,CAAA;IACX,iCAAkB,CAAA;IAClB,6BAAc,CAAA;IACd,oCAAqB,CAAA;AACvB,CAAC,EAZW,WAAW,2BAAX,WAAW,QAYtB"}
|
|
@@ -1,15 +1,4 @@
|
|
|
1
|
+
import { SIZE_CONFIG, InputSize } from 'src/shared/TypographyStyles';
|
|
1
2
|
import { straitsXTheme } from 'src/theme/theme';
|
|
2
|
-
export
|
|
3
|
-
export declare const SIZE_CONFIG: {
|
|
4
|
-
large: {
|
|
5
|
-
height: string;
|
|
6
|
-
borderRadius: string;
|
|
7
|
-
padding: string;
|
|
8
|
-
};
|
|
9
|
-
small: {
|
|
10
|
-
height: string;
|
|
11
|
-
borderRadius: string;
|
|
12
|
-
padding: string;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
3
|
+
export { SIZE_CONFIG, InputSize };
|
|
15
4
|
export declare function getBaseInputStyle(theme: typeof straitsXTheme, size?: InputSize, error?: boolean, disabledAddon?: boolean): string;
|
|
@@ -19,6 +19,19 @@ export declare enum FONT_SIZE {
|
|
|
19
19
|
SMALL = "12px",
|
|
20
20
|
SMALL_MOBILE = "14px"
|
|
21
21
|
}
|
|
22
|
+
export type InputSize = 'large' | 'small';
|
|
23
|
+
export declare const SIZE_CONFIG: {
|
|
24
|
+
large: {
|
|
25
|
+
height: string;
|
|
26
|
+
borderRadius: string;
|
|
27
|
+
padding: string;
|
|
28
|
+
};
|
|
29
|
+
small: {
|
|
30
|
+
height: string;
|
|
31
|
+
borderRadius: string;
|
|
32
|
+
padding: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
22
35
|
export declare enum LINE_HEIGHT {
|
|
23
36
|
H1 = "29px",
|
|
24
37
|
H1_MOBILE = "28px",
|