@rolster/react-components 18.21.35 → 18.21.36

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.
@@ -1,6 +1,6 @@
1
1
  .rls-amount {
2
2
  --pvt-font-size: var(--rlc-amount-font-size, inherit);
3
- --rlc-tabulartext-font-size: var(--pvt-font-size);
3
+ --rlc-tabular-text-font-size: var(--pvt-font-size);
4
4
  display: flex;
5
5
  width: var(--rlc-amount-width, auto);
6
6
  justify-content: var(--rlc-amount-text-align, start);
@@ -9,4 +9,12 @@
9
9
  }
10
10
  .rls-amount[rls-theme] {
11
11
  color: var(--rls-theme-color-500);
12
+ }
13
+ .rls-amount__value {
14
+ display: flex;
15
+ }
16
+ .rls-amount__decimal {
17
+ --rlc-tabular-text-char-width: calc(var(--pvt-font-size) * 0.55);
18
+ --rlc-tabular-text-font-size: calc(var(--pvt-font-size) * 0.75);
19
+ align-items: flex-end;
12
20
  } /*# sourceMappingURL=Amount.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Amount/Amount.scss"],"names":[],"mappings":"AAOA,YACE,sDACA,kDAEA,aACA,oCACA,oDACA,gCACA,+BAEA,uBACE","file":"Amount.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Amount/Amount.scss"],"names":[],"mappings":"AAOA,YACE,sDACA,mDAEA,aACA,oCACA,oDACA,gCACA,+BAEA,uBACE,iCAGF,mBACE,aAGF,qBACE,iEACA,gEAEA","file":"Amount.css"}
@@ -4,7 +4,17 @@ import { useMemo } from 'react';
4
4
  import { RlsTabularText } from '../TabularText/TabularText';
5
5
  import './Amount.css';
6
6
  export function RlsAmount({ value, decimals, rlsTheme, symbol }) {
7
- const amount = useMemo(() => currencyFormat({ value, decimals }), [value, decimals]);
8
- return (_jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && _jsx("span", { children: symbol }), _jsx(RlsTabularText, { value: amount })] }));
7
+ const { decimal, integer } = useMemo(() => {
8
+ const currency = currencyFormat({ value, decimals });
9
+ if (!currency.includes(',')) {
10
+ return { integer: currency, decimal: '' };
11
+ }
12
+ const currencySplit = currency.split(',');
13
+ return {
14
+ integer: currencySplit[0] + (currencySplit[1] ? ',' : ''),
15
+ decimal: currencySplit[1] || ''
16
+ };
17
+ }, [value, decimals]);
18
+ return (_jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && _jsx("span", { children: symbol }), _jsxs("div", { className: "rls-amount__value", children: [_jsx(RlsTabularText, { className: "rls-amount__integer", value: integer }), decimal && (_jsx(RlsTabularText, { className: "rls-amount__decimal", value: decimal }))] })] }));
9
19
  }
10
20
  //# sourceMappingURL=Amount.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Amount.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Amount/Amount.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,cAAc,CAAC;AAStB,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAe;IAC1E,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,EACzC,CAAC,KAAK,EAAE,QAAQ,CAAC,CAClB,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,eAAY,QAAQ,aAC5C,MAAM,IAAI,yBAAO,MAAM,GAAQ,EAChC,KAAC,cAAc,IAAC,KAAK,EAAE,MAAM,GAAI,IAC7B,CACP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"Amount.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Amount/Amount.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,cAAc,CAAC;AAStB,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAe;IAC1E,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,QAAQ,GAAG,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;QAErD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAC5B,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;QAC5C,CAAC;QAED,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE1C,OAAO;YACL,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;YACzD,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,EAAE;SAChC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,eAAY,QAAQ,aAC5C,MAAM,IAAI,yBAAO,MAAM,GAAQ,EAEhC,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,cAAc,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,OAAO,GAAI,EAEjE,OAAO,IAAI,CACV,KAAC,cAAc,IAAC,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,OAAO,GAAI,CACnE,IACG,IACF,CACP,CAAC;AACJ,CAAC"}
@@ -53,11 +53,13 @@
53
53
  }
54
54
  .rls-input__value {
55
55
  position: absolute;
56
+ display: flex;
56
57
  top: 0rem;
57
58
  left: 0rem;
58
59
  width: 100%;
59
60
  height: var(--pvt-height);
60
61
  line-height: var(--pvt-height);
62
+ align-items: center;
61
63
  background: rgba(0, 0, 0, 0);
62
64
  pointer-events: none;
63
65
  overflow: hidden;
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.scss"],"names":[],"mappings":"AAOA,WACE,wEACA,wEAEA,yFAKA,6DACA,oDAEA,8CACA,uBACA,wCAEA,kBACA,WAEA,oBACE,kDACA,oCAGF,qBACE,yBAGF,sBACE,kBACA,WACA,yBACA,8BACA,aACA,YACA,YACA,aACA,yBACA,sCACA,0CACA,+BACA,iCACA,yCAEA,kGAEE,YACA,wBAGF,mCACE,+BAGF,iCACE,sCACA,+BAGF,+BACE,WAIJ,kBACE,kBACA,SACA,UACA,WACA,yBACA,8BACA,yBACA,oBACA,gBACA,mBACA,iCACA,kCACA,0CACA,+BACA,iCACA","file":"Input.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Input/Input.scss"],"names":[],"mappings":"AAOA,WACE,wEACA,wEAEA,yFAKA,6DACA,oDAEA,8CACA,uBACA,wCAEA,kBACA,WAEA,oBACE,kDACA,oCAGF,qBACE,yBAGF,sBACE,kBACA,WACA,yBACA,8BACA,aACA,YACA,YACA,aACA,yBACA,sCACA,0CACA,+BACA,iCACA,yCAEA,kGAEE,YACA,wBAGF,mCACE,+BAGF,iCACE,sCACA,+BAGF,+BACE,WAIJ,kBACE,kBACA,aACA,SACA,UACA,WACA,yBACA,8BACA,mBACA,yBACA,oBACA,gBACA,mBACA,iCACA,kCACA,0CACA,+BACA,iCACA","file":"Input.css"}
@@ -1,6 +1,6 @@
1
1
  .rls-input-money {
2
- --rlc-tabulartext-font-size: var(--rls-input-font-size);
3
- --rlc-tabulartext-char-width: 5.25rem;
2
+ --rlc-tabular-text-font-size: var(--rls-input-font-size);
3
+ --rlc-tabular-text-char-width: 5.25rem;
4
4
  position: relative;
5
5
  width: 100%;
6
6
  box-sizing: border-box;
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/InputMoney/InputMoney.scss"],"names":[],"mappings":"AAOA,iBACE,wDACA,sCAEA,kBACA,WACA","file":"InputMoney.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/InputMoney/InputMoney.scss"],"names":[],"mappings":"AAOA,iBACE,yDACA,uCAEA,kBACA,WACA","file":"InputMoney.css"}
@@ -1,18 +1,27 @@
1
1
  .rls-tabular-text {
2
+ --pvt-char-font-size: var(
3
+ --rlc-tabular-text-font-size,
4
+ var(--rls-body-font-size)
5
+ );
6
+ --pvt-char-height: calc(var(--pvt-char-font-size) + 1rem);
7
+ --pvt-char-width: var(--rlc-tabular-text-char-width, 5.5rem);
8
+ --pvt-pointer-width: var(--rlc-tabular-text-pointer-width, 2rem);
2
9
  display: flex;
3
10
  width: auto;
4
- justify-content: var(--rlc-tabulartext-text-align, flex-start);
11
+ justify-content: var(--rlc-tabular-text-align, flex-start);
5
12
  }
6
13
  .rls-tabular-text span {
7
- font-size: var(--rlc-tabulartext-font-size, var(--rls-body-font-size));
14
+ font-size: var(--pvt-char-font-size);
15
+ height: var(--pvt-char-height);
16
+ line-height: var(--pvt-char-height);
8
17
  }
9
18
  .rls-tabular-text__char {
10
19
  display: block;
20
+ width: var(--pvt-char-width);
11
21
  text-align: center;
12
- width: var(--rlc-tabulartext-char-width, 5.5rem);
13
22
  }
14
23
  .rls-tabular-text__pointer {
15
24
  display: block;
25
+ width: var(--pvt-pointer-width);
16
26
  text-align: center;
17
- width: var(--rlc-tabulartext-pointer-width, 2rem);
18
27
  } /*# sourceMappingURL=TabularText.css.map */
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/TabularText/TabularText.scss"],"names":[],"mappings":"AAOA,kBACE,aACA,WACA,8DAEA,uBACE,sEAGF,wBACE,cACA,kBACA,gDAGF,2BACE,cACA,kBACA","file":"TabularText.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/TabularText/TabularText.scss"],"names":[],"mappings":"AAOA,kBACE,qFAKA,0DACA,6DACA,iEAEA,aACA,WACA,0DAEA,uBACE,oCACA,8BACA,mCAGF,wBACE,cACA,4BACA,kBAGF,2BACE,cACA,+BACA","file":"TabularText.css"}
@@ -1,6 +1,7 @@
1
1
  import './TabularText.css';
2
2
  interface TabularTextProps {
3
+ className?: string;
3
4
  value?: string;
4
5
  }
5
- export declare function RlsTabularText({ value }: TabularTextProps): import("react/jsx-runtime").JSX.Element;
6
+ export declare function RlsTabularText({ className, value }: TabularTextProps): import("react/jsx-runtime").JSX.Element;
6
7
  export {};
@@ -1,5 +1,6 @@
1
- import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
- import { useEffect, useState } from 'react';
1
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { useMemo } from 'react';
3
+ import { renderClassStatus } from '../../../helpers';
3
4
  import './TabularText.css';
4
5
  const className = 'rls-tabular-text';
5
6
  const pointers = ['.', ','];
@@ -8,11 +9,13 @@ function getCharClass(char) {
8
9
  ? `${className}__pointer`
9
10
  : `${className}__char`;
10
11
  }
11
- export function RlsTabularText({ value }) {
12
- const [codes, setCodes] = useState(_jsx(_Fragment, {}));
13
- useEffect(() => {
14
- setCodes(_jsx(_Fragment, { children: value?.split('').map((char, index) => (_jsx("span", { className: getCharClass(char), children: char }, index))) }));
12
+ export function RlsTabularText({ className, value }) {
13
+ const codes = useMemo(() => {
14
+ return (_jsx(_Fragment, { children: value?.split('').map((char, index) => (_jsx("span", { className: getCharClass(char), children: char }, index))) }));
15
15
  }, [value]);
16
- return _jsx("div", { className: "rls-tabular-text", children: codes });
16
+ const _className = useMemo(() => {
17
+ return renderClassStatus('rls-tabular-text', {}, className);
18
+ }, [className]);
19
+ return _jsx("div", { className: _className, children: codes });
17
20
  }
18
21
  //# sourceMappingURL=TabularText.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TabularText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/TabularText/TabularText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,SAAS,GAAG,kBAAkB,CAAC;AACrC,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAE5B,SAAS,YAAY,CAAC,IAAY;IAChC,OAAO,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC5B,CAAC,CAAC,GAAG,SAAS,WAAW;QACzB,CAAC,CAAC,GAAG,SAAS,QAAQ,CAAC;AAC3B,CAAC;AAMD,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAoB;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,mBAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CACN,4BACG,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,eAAkB,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,YAC5C,IAAI,IADI,KAAK,CAET,CACR,CAAC,GACD,CACJ,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,cAAK,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAO,CAAC;AACzD,CAAC"}
1
+ {"version":3,"file":"TabularText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/TabularText/TabularText.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,mBAAmB,CAAC;AAE3B,MAAM,SAAS,GAAG,kBAAkB,CAAC;AACrC,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAE5B,SAAS,YAAY,CAAC,IAAY;IAChC,OAAO,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC5B,CAAC,CAAC,GAAG,SAAS,WAAW;QACzB,CAAC,CAAC,GAAG,SAAS,QAAQ,CAAC;AAC3B,CAAC;AAOD,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAoB;IACnE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,OAAO,CACL,4BACG,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,eAAkB,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,YAC5C,IAAI,IADI,KAAK,CAET,CACR,CAAC,GACD,CACJ,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,iBAAiB,CAAC,kBAAkB,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,cAAK,SAAS,EAAE,UAAU,YAAG,KAAK,GAAO,CAAC;AACnD,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.21.35",
3
+ "version": "18.21.36",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",
@@ -49,7 +49,7 @@
49
49
  "@rollup/plugin-node-resolve": "^15.2.1",
50
50
  "@rollup/plugin-typescript": "^11.1.3",
51
51
  "@rolster/rollup": "^1.0.6",
52
- "@rolster/styles-foundations": "^2.5.25",
52
+ "@rolster/styles-foundations": "^2.5.26",
53
53
  "@rolster/types": "^1.1.0",
54
54
  "@types/node-sass": "^4.11.4",
55
55
  "@types/react": "^18.0.28",