@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.
@@ -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(--rlc-icon-color, inherit);
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: "rls-amount", "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 }))] })] }));
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 className = useMemo(() => {
498
- return renderClassStatus('rls-icon', { skeleton });
499
- }, [skeleton]);
500
- return (jsxRuntimeExports.jsx("div", { className: className, children: jsxRuntimeExports.jsx("i", { className: `rls-icon-${value}` }) }));
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() {