@trafilea/afrodita-components 5.0.0-beta.210 → 5.0.0-beta.212

package/build/index.d.ts

@@ -1857,8 +1857,9 @@ interface RadioGroupInputProps {
     onChange: (value: RadioGroupOption) => void;
     size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
     disabled?: boolean;
+    style?: React.CSSProperties;
 }
-declare const RadioGroupInput: ({ name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => JSX.Element;
+declare const RadioGroupInput: ({ style, name, options, value, onChange, size, disabled, }: RadioGroupInputProps) => JSX.Element;
 
 interface SimpleProps {
     title: string;
@@ -2076,8 +2077,9 @@ declare const OrderBar: ({ message, color }: OrderBarProps) => JSX.Element;
 interface TableProps$1 {
     headers: string[];
     data: string[][];
+    className?: string;
 }
-declare const SizeTable: ({ headers, data }: TableProps$1) => JSX.Element;
+declare const SizeTable: ({ headers, data, className }: TableProps$1) => JSX.Element;
 
 interface TableProps {
     headers: string[];
@@ -2448,8 +2450,9 @@ interface RadioProps {
     checked?: boolean;
     disabled?: boolean;
     onChange: (option: RadioGroupOption) => void;
+    style?: React.CSSProperties;
 }
-declare const RadioInput: ({ name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
+declare const RadioInput: ({ style, name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
 
 declare type PortalProps = {
     id: string;

package/build/index.esm.js

@@ -5150,7 +5150,7 @@ var H3$2 = newStyled.h3(templateObject_2$S || (templateObject_2$S = __makeTempla
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
     var theme = useTheme();
-    return (jsx$1(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
+    return (jsx$1(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, offText] }), void 0) }), void 0));
 };
 var templateObject_1$1k, templateObject_2$S;
 
@@ -12104,25 +12104,25 @@ var StyledLabel$1 = newStyled(Label$4)(templateObject_3$B || (templateObject_3$B
     return theme.component.radio.lineHeight;
 });
 var RadioInput = function (_a) {
-    var name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
+    var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
     var theme = useTheme();
     var handleChange = function (event, label) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$K, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
+    return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$K, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
 };
 var templateObject_1$13, templateObject_2$K, templateObject_3$B;
 
 var RadioGroupInput = function (_a) {
-    var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
     var _e = useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
     var handleChange = function (selected) {
         setSelectedInput(selected);
         onChange(selected);
     };
     return (jsx$1("div", __assign$1({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
-            return (jsx$1(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input" }, index));
+            return (jsx$1(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", style: style }, index));
         }) }), void 0));
 };
 
@@ -12648,9 +12648,9 @@ var TableCell$1 = newStyled.td(templateObject_2$w || (templateObject_2$w = __mak
 var TableHead$1 = newStyled.th(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
 var TableRow$1 = newStyled.tr(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"], ["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; });
 var SizeTable = function (_a) {
-    var headers = _a.headers, data = _a.data;
+    var headers = _a.headers, data = _a.data, className = _a.className;
     var theme = useTheme();
-    return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
+    return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
 };
 var templateObject_1$N, templateObject_2$w, templateObject_3$t, templateObject_4$k;
 

package/build/index.js

@@ -5176,7 +5176,7 @@ var H3$2 = newStyled.h3(templateObject_2$S || (templateObject_2$S = __makeTempla
 var DiscountTag = function (_a) {
     var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
     var theme = useTheme();
-    return (jsxRuntime.jsx(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
+    return (jsxRuntime.jsx(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, offText] }), void 0) }), void 0));
 };
 var templateObject_1$1k, templateObject_2$S;
 
@@ -12130,25 +12130,25 @@ var StyledLabel$1 = newStyled(Label$4)(templateObject_3$B || (templateObject_3$B
     return theme.component.radio.lineHeight;
 });
 var RadioInput = function (_a) {
-    var name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
+    var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
     var theme = useTheme();
     var handleChange = function (event, label) {
         var value = event.currentTarget.value;
         onChange({ value: value, label: label });
     };
-    return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$K, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
+    return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$K, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
 };
 var templateObject_1$13, templateObject_2$K, templateObject_3$B;
 
 var RadioGroupInput = function (_a) {
-    var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
+    var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
     var _e = React$2.useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
     var handleChange = function (selected) {
         setSelectedInput(selected);
         onChange(selected);
     };
     return (jsxRuntime.jsx("div", __assign$1({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
-            return (jsxRuntime.jsx(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input" }, index));
+            return (jsxRuntime.jsx(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", style: style }, index));
         }) }), void 0));
 };
 
@@ -12674,9 +12674,9 @@ var TableCell$1 = newStyled.td(templateObject_2$w || (templateObject_2$w = __mak
 var TableHead$1 = newStyled.th(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"], ["\n  border-bottom: 0.063rem solid ", ";\n  border-right: 0.063rem solid ", ";\n  font-weight: 700;\n\n  &:last-child {\n    border-right: none;\n  }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
 var TableRow$1 = newStyled.tr(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"], ["\n  &:last-child {\n    td {\n      border-bottom: none;\n    }\n  }\n\n  &.background {\n    background-color: ", ";\n  }\n"])), function (props) { return props.backgroundColor; });
 var SizeTable = function (_a) {
-    var headers = _a.headers, data = _a.data;
+    var headers = _a.headers, data = _a.data, className = _a.className;
     var theme = useTheme();
-    return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
+    return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
 };
 var templateObject_1$N, templateObject_2$w, templateObject_3$t, templateObject_4$k;
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Trafilea's Design System",
   "author": "Trafilea",
   "repository": "https://github.com/trafilea/afrodita-components",
-  "version": "5.0.0-beta.210",
+  "version": "5.0.0-beta.212",
   "private": false,
   "main": "build/index.js",
   "style": "build/index.css",