@rolster/react-components 19.1.13 → 19.1.15
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/cjs/assets/{index-Dvak5slE.css → index-CvUJnmkm.css} +9 -5
- package/dist/cjs/index.js +10 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/assets/{index-Dvak5slE.css → index-CvUJnmkm.css} +9 -5
- package/dist/es/index.js +10 -7
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/atoms/Amount/Amount.d.ts +3 -4
- package/dist/esm/components/atoms/Amount/Amount.js +6 -2
- package/dist/esm/components/atoms/Amount/Amount.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Icon.css +5 -1
- package/dist/esm/components/atoms/Icon/Icon.css.map +1 -1
- package/dist/esm/components/atoms/Icon/Icon.d.ts +3 -2
- package/dist/esm/components/atoms/Icon/Icon.js +5 -5
- package/dist/esm/components/atoms/Icon/Icon.js.map +1 -1
- package/dist/esm/components/definitions.d.ts +5 -3
- package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.css +4 -4
- package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.css.map +1 -1
- package/package.json +3 -3
|
@@ -217,6 +217,7 @@
|
|
|
217
217
|
.rls-icon {
|
|
218
218
|
--pvt-icon-dimension: var(--rlc-icon-dimension, var(--rls-sizing-x12));
|
|
219
219
|
--pvt-icon-display: block;
|
|
220
|
+
--pvt-icon-color: var(--rlc-icon-color);
|
|
220
221
|
position: relative;
|
|
221
222
|
font-size: var(--pvt-icon-dimension);
|
|
222
223
|
width: var(--pvt-icon-dimension);
|
|
@@ -228,9 +229,12 @@
|
|
|
228
229
|
background: var(--rls-theme-color-300);
|
|
229
230
|
border-radius: var(--rls-sizing-x2);
|
|
230
231
|
}
|
|
232
|
+
.rls-icon[rls-theme] {
|
|
233
|
+
--pvt-icon-color: var(--rls-theme-color-500);
|
|
234
|
+
}
|
|
231
235
|
.rls-icon > i {
|
|
232
236
|
display: var(--pvt-icon-display);
|
|
233
|
-
color: var(--
|
|
237
|
+
color: var(--pvt-icon-color, inherit);
|
|
234
238
|
width: 100%;
|
|
235
239
|
height: 100%;
|
|
236
240
|
line-height: inherit;
|
|
@@ -1918,14 +1922,14 @@
|
|
|
1918
1922
|
.rls-picker-day-range__element--ranged {
|
|
1919
1923
|
--pvt-span-nothover-background: var(--rls-theme-color-100);
|
|
1920
1924
|
}
|
|
1921
|
-
.rls-picker-day-range__element--source {
|
|
1922
|
-
--pvt-span-nothover-background: var(--rls-theme-color-500);
|
|
1923
|
-
--pvt-span-nothover-font-color: var(--rls-app-color-050);
|
|
1924
|
-
}
|
|
1925
1925
|
.rls-picker-day-range__element--end {
|
|
1926
1926
|
--pvt-span-nothover-background: var(--rls-app-color-900);
|
|
1927
1927
|
--pvt-span-nothover-font-color: var(--rls-app-color-050);
|
|
1928
1928
|
}
|
|
1929
|
+
.rls-picker-day-range__element--source {
|
|
1930
|
+
--pvt-span-nothover-background: var(--rls-theme-color-500);
|
|
1931
|
+
--pvt-span-nothover-font-color: var(--rls-app-color-050);
|
|
1932
|
+
}
|
|
1929
1933
|
.rls-picker-day-range__element--forbidden {
|
|
1930
1934
|
--pvt-span-background: var(--rls-app-color-200);
|
|
1931
1935
|
pointer-events: none;
|
package/dist/es/index.js
CHANGED
|
@@ -449,7 +449,10 @@ function RlsTabularText({ className, value }) {
|
|
|
449
449
|
return jsxRuntimeExports.jsx("div", { className: _className, children: codes });
|
|
450
450
|
}
|
|
451
451
|
|
|
452
|
-
function RlsAmount({ value, decimals, rlsTheme, symbol }) {
|
|
452
|
+
function RlsAmount({ value, className, decimals, rlsTheme, symbol }) {
|
|
453
|
+
const classNameAmount = useMemo(() => {
|
|
454
|
+
return renderClassStatus('rls-amount', {}, className);
|
|
455
|
+
}, [className]);
|
|
453
456
|
const { decimal, integer } = useMemo(() => {
|
|
454
457
|
const currency = currencyFormat({ value, decimals });
|
|
455
458
|
if (!currency.includes(',')) {
|
|
@@ -461,7 +464,7 @@ function RlsAmount({ value, decimals, rlsTheme, symbol }) {
|
|
|
461
464
|
decimal: currencySplit[1] || ''
|
|
462
465
|
};
|
|
463
466
|
}, [value, decimals]);
|
|
464
|
-
return (jsxRuntimeExports.jsxs("div", { className:
|
|
467
|
+
return (jsxRuntimeExports.jsxs("div", { className: classNameAmount, "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { className: "rls-amount__symbol", children: symbol }), jsxRuntimeExports.jsxs("div", { className: "rls-amount__content", children: [jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (jsxRuntimeExports.jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
|
|
465
468
|
}
|
|
466
469
|
|
|
467
470
|
function RlsAvatar({ children, contrasted, rounded, skeleton, rlsTheme }) {
|
|
@@ -493,11 +496,11 @@ function RlsBreadcrumb({ labels }) {
|
|
|
493
496
|
return jsxRuntimeExports.jsx("div", { className: "rls-breadcrumb", children: children });
|
|
494
497
|
}
|
|
495
498
|
|
|
496
|
-
function RlsIcon({ value, skeleton }) {
|
|
497
|
-
const
|
|
498
|
-
return renderClassStatus('rls-icon', { skeleton });
|
|
499
|
-
}, [skeleton]);
|
|
500
|
-
return (jsxRuntimeExports.jsx("div", { className:
|
|
499
|
+
function RlsIcon({ value, className, rlsTheme, skeleton }) {
|
|
500
|
+
const classNameIcon = useMemo(() => {
|
|
501
|
+
return renderClassStatus('rls-icon', { skeleton }, className);
|
|
502
|
+
}, [className, skeleton]);
|
|
503
|
+
return (jsxRuntimeExports.jsx("div", { className: classNameIcon, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
|
|
501
504
|
}
|
|
502
505
|
|
|
503
506
|
function RlsSpinner() {
|