@xfers/design-system 6.1.0-dev.3e700c7ec1 → 6.1.0-dev.62f5a04946
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 +1 -1
- package/cjs/index.js.map +1 -1
- package/dist/components/SelectionBox/index.js +16 -6
- package/dist/components/SelectionBox/index.js.map +1 -1
- package/dist/types/components/SelectionBox/index.d.ts +1 -1
- package/dist/types/components/SelectionBox/types.d.ts +1 -0
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,13 +9,15 @@ 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 fontStyles_1 = require("src/constants/fontStyles");
|
|
12
|
+
var MaterialSymbols_1 = require("src/icons/MaterialSymbols/MaterialSymbols");
|
|
13
|
+
var Tooltip_1 = require("src/components/Tooltip");
|
|
12
14
|
var SelectionBoxGroup = function (_a) {
|
|
13
15
|
var children = _a.children, label = _a.label;
|
|
14
16
|
return (react_1.default.createElement("div", { role: "radiogroup", "aria-label": label }, children));
|
|
15
17
|
};
|
|
16
18
|
exports.SelectionBoxGroup = SelectionBoxGroup;
|
|
17
19
|
var SelectionBox = function (_a) {
|
|
18
|
-
var selectionType = _a.selectionType, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, icon = _a.icon, secondaryText = _a.secondaryText, children = _a.children, onClick = _a.onClick, value = _a.value, name = _a.name;
|
|
20
|
+
var selectionType = _a.selectionType, _b = _a.selected, selected = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, icon = _a.icon, tooltip = _a.tooltip, secondaryText = _a.secondaryText, children = _a.children, onClick = _a.onClick, value = _a.value, name = _a.name;
|
|
19
21
|
var color = (0, ThemeContext_1.useTheme)().color;
|
|
20
22
|
var handleClick = function () {
|
|
21
23
|
if (!disabled && onClick) {
|
|
@@ -50,17 +52,25 @@ var SelectionBox = function (_a) {
|
|
|
50
52
|
return (react_1.default.createElement(Container, { selected: selected, disabled: disabled, borderColor: selected && !disabled ? color.base.primary2 : color.base.line, bgColor: disabled ? color.surface.disabledSurface : color.surface.neutral, onClick: handleClick, onKeyDown: handleKeyDown, role: selectionType === 'radio' ? 'radio' : 'checkbox', "aria-checked": selected, "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, "data-value": value, "data-name": name },
|
|
51
53
|
renderIndicator(),
|
|
52
54
|
react_1.default.createElement(TextWrapper, null,
|
|
53
|
-
react_1.default.createElement(
|
|
55
|
+
react_1.default.createElement(PrimaryRow, null,
|
|
56
|
+
react_1.default.createElement(PrimaryText, { textColor: disabled ? color.surface.disabledOnSurface : color.base.onNeutral }, children),
|
|
57
|
+
tooltip && (react_1.default.createElement(Tooltip_1.default, { content: tooltip, placement: "top" },
|
|
58
|
+
react_1.default.createElement(InfoIconWrapper, { textColor: disabled
|
|
59
|
+
? color.surface.disabledOnSurface
|
|
60
|
+
: color.base.onNeutralSecondary },
|
|
61
|
+
react_1.default.createElement(MaterialSymbols_1.default, { icon: "info", size: "s", fill: 0, color: "currentColor" }))))),
|
|
54
62
|
secondaryText && (react_1.default.createElement(SecondaryText, { textColor: disabled
|
|
55
63
|
? color.surface.disabledOnSurface
|
|
56
64
|
: color.base.onNeutralSecondary }, secondaryText)))));
|
|
57
65
|
};
|
|
58
66
|
SelectionBox.displayName = 'SelectionBox';
|
|
59
67
|
exports.default = SelectionBox;
|
|
60
|
-
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n min-height: 48px;\n border-radius: 12px;\n border: ", "
|
|
68
|
+
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n min-height: 48px;\n border-radius: 12px;\n border: ", "\n solid ", ";\n background: ", ";\n overflow: hidden;\n cursor: ", ";\n user-select: none;\n transition: border-color 0.2s ease;\n box-sizing: border-box;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 16px;\n min-height: 48px;\n border-radius: 12px;\n border: ", "\n solid ", ";\n background: ", ";\n overflow: hidden;\n cursor: ", ";\n user-select: none;\n transition: border-color 0.2s ease;\n box-sizing: border-box;\n\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"])), function (props) { return (props.selected && !props.disabled ? '2px' : '1px'); }, function (props) { return props.borderColor; }, function (props) { return props.bgColor; }, function (props) { return (props.disabled ? 'not-allowed' : 'pointer'); }, function (props) { return props.borderColor; });
|
|
61
69
|
var IndicatorWrapper = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n\n & > svg {\n display: block;\n }\n"], ["\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n\n & > svg {\n display: block;\n }\n"])), function (props) { return (props.disabled ? 0.5 : 1); });
|
|
62
70
|
var TextWrapper = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 4px;\n justify-content: center;\n min-width: 0;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 4px;\n justify-content: center;\n min-width: 0;\n"])));
|
|
63
|
-
var
|
|
64
|
-
var
|
|
65
|
-
var
|
|
71
|
+
var PrimaryRow = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 4px;\n"], ["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
72
|
+
var PrimaryText = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n ", ";\n color: ", ";\n word-break: break-word;\n"], ["\n ", ";\n ", ";\n color: ", ";\n word-break: break-word;\n"])), fontStyles_1.baseStyle, fontStyles_1.pStyle, function (props) { return props.textColor; });
|
|
73
|
+
var SecondaryText = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", ";\n ", ";\n color: ", ";\n word-break: break-word;\n"], ["\n ", ";\n ", ";\n color: ", ";\n word-break: break-word;\n"])), fontStyles_1.baseStyle, fontStyles_1.smallPStyle, function (props) { return props.textColor; });
|
|
74
|
+
var InfoIconWrapper = styled_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n cursor: pointer;\n"], ["\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n cursor: pointer;\n"])), function (props) { return props.textColor; });
|
|
75
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
66
76
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SelectionBox/index.tsx"],"names":[],"mappings":";;;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,uDAAiD;AACjD,uDAAyE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SelectionBox/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { SelectionBoxProps, SelectionBoxGroupProps } from './types';
|
|
|
3
3
|
export type { SelectionBoxProps, SelectionBoxGroupProps, SelectionType, } from './types';
|
|
4
4
|
declare const SelectionBoxGroup: ({ children, label }: SelectionBoxGroupProps) => React.JSX.Element;
|
|
5
5
|
declare const SelectionBox: {
|
|
6
|
-
({ selectionType, selected, disabled, icon, secondaryText, children, onClick, value, name, }: SelectionBoxProps): React.JSX.Element;
|
|
6
|
+
({ selectionType, selected, disabled, icon, tooltip, secondaryText, children, onClick, value, name, }: SelectionBoxProps): React.JSX.Element;
|
|
7
7
|
displayName: string;
|
|
8
8
|
};
|
|
9
9
|
export { SelectionBoxGroup };
|