@rolster/react-components 18.21.35 → 18.21.37

package/dist/es/assets/{index-D3ZlI-1N.css → index-DfP7ve81.css}

@@ -1,33 +1,56 @@
 .rls-tabular-text {
+  --pvt-char-font-size: var(
+    --rlc-tabular-text-font-size,
+    var(--rls-body-font-size)
+  );
+  --pvt-char-height: calc(var(--pvt-char-font-size) + 1rem);
+  --pvt-char-width: var(--rlc-tabular-text-char-width, 5.5rem);
+  --pvt-pointer-width: var(--rlc-tabular-text-pointer-width, 2rem);
   display: flex;
   width: auto;
-  justify-content: var(--rlc-tabulartext-text-align, flex-start);
+  justify-content: var(--rlc-tabular-text-align, flex-start);
 }
 .rls-tabular-text span {
-  font-size: var(--rlc-tabulartext-font-size, var(--rls-body-font-size));
+  font-size: var(--pvt-char-font-size);
+  height: var(--pvt-char-height);
+  line-height: var(--pvt-char-height);
 }
 .rls-tabular-text__char {
   display: block;
+  width: var(--pvt-char-width);
   text-align: center;
-  width: var(--rlc-tabulartext-char-width, 5.5rem);
 }
 .rls-tabular-text__pointer {
   display: block;
+  width: var(--pvt-pointer-width);
   text-align: center;
-  width: var(--rlc-tabulartext-pointer-width, 2rem);
 } /*# sourceMappingURL=TabularText.css.map */
 
 .rls-amount {
   --pvt-font-size: var(--rlc-amount-font-size, inherit);
-  --rlc-tabulartext-font-size: var(--pvt-font-size);
+  --rlc-tabular-text-font-size: var(--pvt-font-size);
   display: flex;
   width: var(--rlc-amount-width, auto);
-  justify-content: var(--rlc-amount-text-align, start);
+  justify-content: var(--rlc-amount-text-align, flex-start);
   column-gap: var(--rls-sizing-x2);
   font-size: var(--pvt-font-size);
 }
 .rls-amount[rls-theme] {
   color: var(--rls-theme-color-500);
+}
+.rls-amount__symbol {
+  display: block;
+  line-height: calc(var(--pvt-font-size) + 1rem);
+  height: calc(var(--pvt-font-size) + 1rem);
+}
+.rls-amount__content {
+  display: flex;
+  justify-content: var(--rlc-amount-text-align, flex-start);
+}
+.rls-amount__decimal {
+  --rlc-tabular-text-char-width: calc(var(--pvt-font-size) * 0.55);
+  --rlc-tabular-text-font-size: calc(var(--pvt-font-size) * 0.75);
+  align-items: flex-end;
 } /*# sourceMappingURL=Amount.css.map */
 
 .rls-avatar {
@@ -537,11 +560,13 @@
 }
 .rls-input__value {
   position: absolute;
+  display: flex;
   top: 0rem;
   left: 0rem;
   width: 100%;
   height: var(--pvt-height);
   line-height: var(--pvt-height);
+  align-items: center;
   background: rgba(0, 0, 0, 0);
   pointer-events: none;
   overflow: hidden;
@@ -555,8 +580,8 @@
 } /*# sourceMappingURL=Input.css.map */
 
 .rls-input-money {
-  --rlc-tabulartext-font-size: var(--rls-input-font-size);
-  --rlc-tabulartext-char-width: 5.25rem;
+  --rlc-tabular-text-font-size: var(--rls-input-font-size);
+  --rlc-tabular-text-char-width: 5.25rem;
   position: relative;
   width: 100%;
   box-sizing: border-box;

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import require$$0, { useState, useEffect, useMemo, useCallback, useRef, createContext } from 'react';
+import require$$0, { useMemo, useCallback, useState, useRef, useEffect, createContext } from 'react';
 import { currencyFormat, floorDecimals, itIsDefined, PartialSealed } from '@rolster/commons';
 import { dateFormatTemplate, DAY_LABELS, DateRange, normalizeMinTime, assignDayInDate, dateIsBefore, MONTH_NAMES, Month, assignYearInDate, assignMonthInDate } from '@rolster/dates';
 import { i18n, i18nSubscribe } from '@rolster/i18n';
@@ -1342,26 +1342,6 @@ if (process.env.NODE_ENV === 'production') {
 
 var jsxRuntimeExports = jsxRuntime.exports;
 
-const className = 'rls-tabular-text';
-const pointers = ['.', ','];
-function getCharClass(char) {
-    return pointers.includes(char)
-        ? `${className}__pointer`
-        : `${className}__char`;
-}
-function RlsTabularText({ value }) {
-    const [codes, setCodes] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
-    useEffect(() => {
-        setCodes(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: value?.split('').map((char, index) => (jsxRuntimeExports.jsx("span", { className: getCharClass(char), children: char }, index))) }));
-    }, [value]);
-    return jsxRuntimeExports.jsx("div", { className: "rls-tabular-text", children: codes });
-}
-
-function RlsAmount({ value, decimals, rlsTheme, symbol }) {
-    const amount = useMemo(() => currencyFormat({ value, decimals }), [value, decimals]);
-    return (jsxRuntimeExports.jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsxRuntimeExports.jsx("span", { children: symbol }), jsxRuntimeExports.jsx(RlsTabularText, { value: amount })] }));
-}
-
 function renderClassStatus(base, status = {}, additionals) {
     const _classElement = [base];
     Object.entries(status).forEach(([key, state]) => {
@@ -1483,6 +1463,38 @@ function msgErrorsI18n(key, language, interpolators) {
     return _msgErrorsI18n(key, { language, interpolators });
 }
 
+const className = 'rls-tabular-text';
+const pointers = ['.', ','];
+function getCharClass(char) {
+    return pointers.includes(char)
+        ? `${className}__pointer`
+        : `${className}__char`;
+}
+function RlsTabularText({ className, value }) {
+    const codes = useMemo(() => {
+        return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: value?.split('').map((char, index) => (jsxRuntimeExports.jsx("span", { className: getCharClass(char), children: char }, index))) }));
+    }, [value]);
+    const _className = useMemo(() => {
+        return renderClassStatus('rls-tabular-text', {}, className);
+    }, [className]);
+    return jsxRuntimeExports.jsx("div", { className: _className, children: codes });
+}
+
+function RlsAmount({ value, decimals, rlsTheme, symbol }) {
+    const { decimal, integer } = useMemo(() => {
+        const currency = currencyFormat({ value, decimals });
+        if (!currency.includes(',')) {
+            return { integer: currency, decimal: '' };
+        }
+        const currencySplit = currency.split(',');
+        return {
+            integer: currencySplit[0] + (currencySplit[1] ? ',' : ''),
+            decimal: currencySplit[1] || ''
+        };
+    }, [value, decimals]);
+    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 }))] })] }));
+}
+
 function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-avatar', { rounded, skeleton });