phx-react 1.3.1719 → 1.3.1720
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/components/BlockStack/BlockStack.d.ts +2 -2
- package/dist/cjs/components/BlockStack/BlockStack.js +7 -1
- package/dist/cjs/components/BlockStack/BlockStack.js.map +1 -1
- package/dist/cjs/components/Box/Box.d.ts +11 -11
- package/dist/cjs/components/Box/Box.js +13 -13
- package/dist/cjs/components/Box/Box.js.map +1 -1
- package/dist/cjs/components/InlineGrid/InlineGrid.d.ts +2 -2
- package/dist/cjs/components/InlineGrid/InlineGrid.js +17 -10
- package/dist/cjs/components/InlineGrid/InlineGrid.js.map +1 -1
- package/dist/cjs/components/TableV3/TableV3.d.ts +1 -1
- package/dist/cjs/components/TableV5/TableV5.d.ts +1 -1
- package/dist/cjs/components/TableV6/TableV6.d.ts +1 -1
- package/dist/cjs/components/TextV2/TextV2.d.ts +13 -13
- package/dist/cjs/components/TextV2/TextV2.js +24 -24
- package/dist/cjs/components/TextV2/TextV2.js.map +1 -1
- package/dist/cjs/components/types.d.ts +7 -0
- package/dist/cjs/helpers/helpers.d.ts +2 -0
- package/dist/cjs/helpers/helpers.js +22 -1
- package/dist/cjs/helpers/helpers.js.map +1 -1
- package/dist/esm/components/BlockStack/BlockStack.d.ts +2 -2
- package/dist/esm/components/BlockStack/BlockStack.js +7 -1
- package/dist/esm/components/BlockStack/BlockStack.js.map +1 -1
- package/dist/esm/components/Box/Box.d.ts +11 -11
- package/dist/esm/components/Box/Box.js +13 -13
- package/dist/esm/components/Box/Box.js.map +1 -1
- package/dist/esm/components/InlineGrid/InlineGrid.d.ts +2 -2
- package/dist/esm/components/InlineGrid/InlineGrid.js +17 -10
- package/dist/esm/components/InlineGrid/InlineGrid.js.map +1 -1
- package/dist/esm/components/TableV3/TableV3.d.ts +1 -1
- package/dist/esm/components/TableV5/TableV5.d.ts +1 -1
- package/dist/esm/components/TableV6/TableV6.d.ts +1 -1
- package/dist/esm/components/TextV2/TextV2.d.ts +13 -13
- package/dist/esm/components/TextV2/TextV2.js +24 -24
- package/dist/esm/components/TextV2/TextV2.js.map +1 -1
- package/dist/esm/components/types.d.ts +7 -0
- package/dist/esm/helpers/helpers.d.ts +2 -0
- package/dist/esm/helpers/helpers.js +20 -0
- package/dist/esm/helpers/helpers.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { AlignItems, JustifyContent, SpacingScale } from '../types';
|
|
2
|
+
import { AlignItems, JustifyContent, Responsive, SpacingScale } from '../types';
|
|
3
3
|
export interface PHXBlockStackProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
/** Khoảng cách giữa các item */
|
|
6
|
-
gap?: SpacingScale
|
|
6
|
+
gap?: Responsive<SpacingScale>;
|
|
7
7
|
/** Căn ngang các item */
|
|
8
8
|
inlineAlign?: AlignItems;
|
|
9
9
|
/** Căn dọc các item (Trục chính - Justify Content) */
|
|
@@ -5,6 +5,7 @@ exports.PHXBlockStack = void 0;
|
|
|
5
5
|
const tslib_1 = require("tslib");
|
|
6
6
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
7
7
|
const Box_1 = require("../Box");
|
|
8
|
+
const helpers_1 = require("../../helpers/helpers");
|
|
8
9
|
const PHXBlockStack = ({ children, gap = 'none', inlineAlign = 'stretch', align = 'start', }) => {
|
|
9
10
|
const inlineAlignMap = {
|
|
10
11
|
start: 'items-start',
|
|
@@ -20,7 +21,12 @@ const PHXBlockStack = ({ children, gap = 'none', inlineAlign = 'stretch', align
|
|
|
20
21
|
between: 'justify-between',
|
|
21
22
|
around: 'justify-around',
|
|
22
23
|
};
|
|
23
|
-
const classes = [
|
|
24
|
+
const classes = [
|
|
25
|
+
'flex flex-col',
|
|
26
|
+
(0, helpers_1.getResponsiveClass)('gap', gap, Box_1.spacingMap),
|
|
27
|
+
inlineAlignMap[inlineAlign],
|
|
28
|
+
alignMap[align],
|
|
29
|
+
];
|
|
24
30
|
return react_1.default.createElement("div", { className: classes.filter(Boolean).join(' ') }, children);
|
|
25
31
|
};
|
|
26
32
|
exports.PHXBlockStack = PHXBlockStack;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockStack.js","sourceRoot":"","sources":["../../../../src/components/BlockStack/BlockStack.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AACZ,0DAAyB;AAEzB,gCAAmC;
|
|
1
|
+
{"version":3,"file":"BlockStack.js","sourceRoot":"","sources":["../../../../src/components/BlockStack/BlockStack.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AACZ,0DAAyB;AAEzB,gCAAmC;AACnC,mDAA0D;AAYnD,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,GAAG,GAAG,MAAM,EACZ,WAAW,GAAG,SAAS,EACvB,KAAK,GAAG,OAAO,GACI,EAAE,EAAE;IACvB,MAAM,cAAc,GAA+B;QACjD,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,cAAc;QACtB,GAAG,EAAE,WAAW;QAChB,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,gBAAgB;KAC3B,CAAA;IACD,MAAM,QAAQ,GAAG;QACf,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,gBAAgB;QACxB,GAAG,EAAE,aAAa;QAClB,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,gBAAgB;KACzB,CAAA;IAED,MAAM,OAAO,GAAG;QACd,eAAe;QACf,IAAA,4BAAkB,EAAC,KAAK,EAAE,GAAG,EAAE,gBAAU,CAAC;QAC1C,cAAc,CAAC,WAAW,CAAC;QAC3B,QAAQ,CAAC,KAAK,CAAC;KAChB,CAAA;IAED,OAAO,uCAAK,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC5E,CAAC,CAAA;AA7BY,QAAA,aAAa,iBA6BzB"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SpacingScale } from '../types';
|
|
2
|
+
import { Responsive, SpacingScale } from '../types';
|
|
3
3
|
export declare const spacingMap: Record<SpacingScale, string>;
|
|
4
4
|
export interface PHXBoxProps {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
|
-
p?: SpacingScale
|
|
7
|
-
pt?: SpacingScale
|
|
8
|
-
pb?: SpacingScale
|
|
9
|
-
pl?: SpacingScale
|
|
10
|
-
pr?: SpacingScale
|
|
11
|
-
m?: SpacingScale
|
|
12
|
-
mt?: SpacingScale
|
|
13
|
-
mb?: SpacingScale
|
|
14
|
-
ml?: SpacingScale
|
|
15
|
-
mr?: SpacingScale
|
|
6
|
+
p?: Responsive<SpacingScale>;
|
|
7
|
+
pt?: Responsive<SpacingScale>;
|
|
8
|
+
pb?: Responsive<SpacingScale>;
|
|
9
|
+
pl?: Responsive<SpacingScale>;
|
|
10
|
+
pr?: Responsive<SpacingScale>;
|
|
11
|
+
m?: Responsive<SpacingScale>;
|
|
12
|
+
mt?: Responsive<SpacingScale>;
|
|
13
|
+
mb?: Responsive<SpacingScale>;
|
|
14
|
+
ml?: Responsive<SpacingScale>;
|
|
15
|
+
mr?: Responsive<SpacingScale>;
|
|
16
16
|
background?: 'surface' | 'subdued' | 'transparent';
|
|
17
17
|
}
|
|
18
18
|
export declare const PHXBox: ({ children, p, pt, pb, pl, pr, m, mt, mb, ml, mr, background }: PHXBoxProps) => React.JSX.Element;
|
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
4
4
|
exports.PHXBox = exports.spacingMap = void 0;
|
|
5
5
|
const tslib_1 = require("tslib");
|
|
6
6
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
7
|
+
const helpers_1 = require("../../helpers/helpers");
|
|
7
8
|
exports.spacingMap = {
|
|
8
9
|
none: '0',
|
|
9
10
|
atomic: '1',
|
|
@@ -19,22 +20,21 @@ const PHXBox = ({ children, p, pt, pb, pl, pr, m, mt, mb, ml, mr, background = '
|
|
|
19
20
|
subdued: 'bg-gray-50',
|
|
20
21
|
transparent: 'bg-transparent',
|
|
21
22
|
};
|
|
22
|
-
const getSpacing = (prefix, val) => (val ? `${prefix}-${exports.spacingMap[val]}` : '');
|
|
23
23
|
const classes = [
|
|
24
24
|
// Background
|
|
25
25
|
bgMap[background],
|
|
26
|
-
//
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
//
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
26
|
+
// Margin classes
|
|
27
|
+
(0, helpers_1.getResponsiveClass)('m', m, exports.spacingMap),
|
|
28
|
+
(0, helpers_1.getResponsiveClass)('mt', mt, exports.spacingMap),
|
|
29
|
+
(0, helpers_1.getResponsiveClass)('mb', mb, exports.spacingMap),
|
|
30
|
+
(0, helpers_1.getResponsiveClass)('ml', ml, exports.spacingMap),
|
|
31
|
+
(0, helpers_1.getResponsiveClass)('mr', mr, exports.spacingMap),
|
|
32
|
+
// Padding classes
|
|
33
|
+
(0, helpers_1.getResponsiveClass)('p', p, exports.spacingMap),
|
|
34
|
+
(0, helpers_1.getResponsiveClass)('pt', pt, exports.spacingMap),
|
|
35
|
+
(0, helpers_1.getResponsiveClass)('pb', pb, exports.spacingMap),
|
|
36
|
+
(0, helpers_1.getResponsiveClass)('pl', pl, exports.spacingMap),
|
|
37
|
+
(0, helpers_1.getResponsiveClass)('pr', pr, exports.spacingMap),
|
|
38
38
|
background ? background : '',
|
|
39
39
|
];
|
|
40
40
|
return react_1.default.createElement("div", { className: classes.filter(Boolean).join(' ') }, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AACZ,0DAAyB;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AACZ,0DAAyB;AAEzB,mDAA0D;AAE7C,QAAA,UAAU,GAAiC;IACtD,IAAI,EAAE,GAAG;IACT,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG;CACb,CAAA;AAoBM,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,GAAG,aAAa,EAAe,EAAE,EAAE;IACpH,MAAM,KAAK,GAAG;QACZ,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,YAAY;QACrB,WAAW,EAAE,gBAAgB;KAC9B,CAAA;IAED,MAAM,OAAO,GAAG;QACd,aAAa;QACb,KAAK,CAAC,UAAU,CAAC;QACjB,iBAAiB;QACjB,IAAA,4BAAkB,EAAC,GAAG,EAAE,CAAC,EAAE,kBAAU,CAAC;QACtC,IAAA,4BAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,kBAAU,CAAC;QACxC,IAAA,4BAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,kBAAU,CAAC;QACxC,IAAA,4BAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,kBAAU,CAAC;QACxC,IAAA,4BAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,kBAAU,CAAC;QACxC,kBAAkB;QAClB,IAAA,4BAAkB,EAAC,GAAG,EAAE,CAAC,EAAE,kBAAU,CAAC;QACtC,IAAA,4BAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,kBAAU,CAAC;QACxC,IAAA,4BAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,kBAAU,CAAC;QACxC,IAAA,4BAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,kBAAU,CAAC;QACxC,IAAA,4BAAkB,EAAC,IAAI,EAAE,EAAE,EAAE,kBAAU,CAAC;QACxC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KAC7B,CAAA;IAED,OAAO,uCAAK,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC5E,CAAC,CAAA;AA1BY,QAAA,MAAM,UA0BlB"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { GridColumns, SpacingScale } from '../types';
|
|
2
|
+
import { GridColumns, Responsive, SpacingScale } from '../types';
|
|
3
3
|
export interface PHXInlineGridProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
/** Số cột hoặc tỷ lệ cột */
|
|
6
|
-
columns?: GridColumns
|
|
6
|
+
columns?: Responsive<GridColumns>;
|
|
7
7
|
/** Khoảng cách giữa các ô */
|
|
8
8
|
gap?: SpacingScale;
|
|
9
9
|
/** Căn chỉnh các item theo chiều dọc trong ô */
|
|
@@ -5,17 +5,18 @@ exports.PHXInlineGrid = void 0;
|
|
|
5
5
|
const tslib_1 = require("tslib");
|
|
6
6
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
7
7
|
const Box_1 = require("../Box");
|
|
8
|
+
const helpers_1 = require("../../helpers/helpers");
|
|
8
9
|
const PHXInlineGrid = ({ children, columns = 1, gap = 'none', alignItems = 'stretch', className = '', }) => {
|
|
9
10
|
const columnMap = {
|
|
10
|
-
1: '
|
|
11
|
-
2: '
|
|
12
|
-
3: '
|
|
13
|
-
4: '
|
|
14
|
-
5: '
|
|
15
|
-
6: '
|
|
16
|
-
12: '
|
|
17
|
-
'1/3': '
|
|
18
|
-
'2/3': '
|
|
11
|
+
1: 'cols-1',
|
|
12
|
+
2: 'cols-2',
|
|
13
|
+
3: 'cols-3',
|
|
14
|
+
4: 'cols-4',
|
|
15
|
+
5: 'cols-5',
|
|
16
|
+
6: 'cols-6',
|
|
17
|
+
12: 'cols-12',
|
|
18
|
+
'1/3': 'cols-[1fr_2fr]', // Cột trái bằng 1/3
|
|
19
|
+
'2/3': 'cols-[2fr_1fr]', // Cột trái bằng 2/3
|
|
19
20
|
};
|
|
20
21
|
const alignMap = {
|
|
21
22
|
start: 'items-start',
|
|
@@ -23,7 +24,13 @@ const PHXInlineGrid = ({ children, columns = 1, gap = 'none', alignItems = 'stre
|
|
|
23
24
|
end: 'items-end',
|
|
24
25
|
stretch: 'items-stretch',
|
|
25
26
|
};
|
|
26
|
-
const classes = [
|
|
27
|
+
const classes = [
|
|
28
|
+
'grid',
|
|
29
|
+
(0, helpers_1.getResponsiveClass)('grid', columns, columnMap),
|
|
30
|
+
(0, helpers_1.getResponsiveClass)('gap', gap, Box_1.spacingMap),
|
|
31
|
+
alignMap[alignItems],
|
|
32
|
+
className,
|
|
33
|
+
];
|
|
27
34
|
return react_1.default.createElement("div", { className: classes.filter(Boolean).join(' ') }, children);
|
|
28
35
|
};
|
|
29
36
|
exports.PHXInlineGrid = PHXInlineGrid;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineGrid.js","sourceRoot":"","sources":["../../../../src/components/InlineGrid/InlineGrid.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AACZ,0DAAyB;AAEzB,gCAAmC;
|
|
1
|
+
{"version":3,"file":"InlineGrid.js","sourceRoot":"","sources":["../../../../src/components/InlineGrid/InlineGrid.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AACZ,0DAAyB;AAEzB,gCAAmC;AACnC,mDAA0D;AAanD,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,MAAM,EACZ,UAAU,GAAG,SAAS,EACtB,SAAS,GAAG,EAAE,GACK,EAAE,EAAE;IACvB,MAAM,SAAS,GAA2B;QACxC,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,gBAAgB,EAAE,oBAAoB;QAC7C,KAAK,EAAE,gBAAgB,EAAE,oBAAoB;KAC9C,CAAA;IAED,MAAM,QAAQ,GAAG;QACf,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,cAAc;QACtB,GAAG,EAAE,WAAW;QAChB,OAAO,EAAE,eAAe;KACzB,CAAA;IAED,MAAM,OAAO,GAAG;QACd,MAAM;QACN,IAAA,4BAAkB,EAAC,MAAM,EAAE,OAAO,EAAE,SAA4C,CAAC;QACjF,IAAA,4BAAkB,EAAC,KAAK,EAAE,GAAG,EAAE,gBAAU,CAAC;QAC1C,QAAQ,CAAC,UAAU,CAAC;QACpB,SAAS;KACV,CAAA;IAED,OAAO,uCAAK,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC5E,CAAC,CAAA;AAnCY,QAAA,aAAa,iBAmCzB"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Color, LineHeight, SpacingScale, TextSize, TextWeight } from '../types';
|
|
2
|
+
import { Color, LineHeight, Responsive, SpacingScale, TextSize, TextWeight } from '../types';
|
|
3
3
|
export interface PHXTextProps {
|
|
4
4
|
as?: 'p' | 'span';
|
|
5
5
|
children: string | React.ReactNode;
|
|
6
|
-
size?: TextSize
|
|
6
|
+
size?: Responsive<TextSize>;
|
|
7
7
|
weight?: TextWeight;
|
|
8
8
|
color?: Color;
|
|
9
9
|
align?: 'left' | 'center' | 'right';
|
|
10
10
|
maxWidth?: string | number;
|
|
11
|
-
m?: SpacingScale
|
|
12
|
-
mt?: SpacingScale
|
|
13
|
-
mb?: SpacingScale
|
|
14
|
-
ml?: SpacingScale
|
|
15
|
-
mr?: SpacingScale
|
|
16
|
-
p?: SpacingScale
|
|
17
|
-
pt?: SpacingScale
|
|
18
|
-
pb?: SpacingScale
|
|
19
|
-
pl?: SpacingScale
|
|
20
|
-
pr?: SpacingScale
|
|
21
|
-
lineHeight?: LineHeight
|
|
11
|
+
m?: Responsive<SpacingScale>;
|
|
12
|
+
mt?: Responsive<SpacingScale>;
|
|
13
|
+
mb?: Responsive<SpacingScale>;
|
|
14
|
+
ml?: Responsive<SpacingScale>;
|
|
15
|
+
mr?: Responsive<SpacingScale>;
|
|
16
|
+
p?: Responsive<SpacingScale>;
|
|
17
|
+
pt?: Responsive<SpacingScale>;
|
|
18
|
+
pb?: Responsive<SpacingScale>;
|
|
19
|
+
pl?: Responsive<SpacingScale>;
|
|
20
|
+
pr?: Responsive<SpacingScale>;
|
|
21
|
+
lineHeight?: Responsive<LineHeight>;
|
|
22
22
|
}
|
|
23
23
|
export declare const PHXTextV2: ({ as: Tag, children, size, weight, color, align, maxWidth, m, mt, mb, ml, mr, p, pt, pb, pl, pr, lineHeight, }: PHXTextProps) => React.JSX.Element;
|
|
@@ -5,14 +5,15 @@ exports.PHXTextV2 = void 0;
|
|
|
5
5
|
const tslib_1 = require("tslib");
|
|
6
6
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
7
7
|
const Box_1 = require("../Box");
|
|
8
|
+
const helpers_1 = require("../../helpers/helpers");
|
|
8
9
|
const PHXTextV2 = ({ as: Tag = 'p', children, size = 'body', weight = 'regular', color = 'default', align = 'left', maxWidth, m, mt, mb, ml, mr, p, pt, pb, pl, pr, lineHeight = 'none', }) => {
|
|
9
10
|
const sizeMap = {
|
|
10
|
-
heading: '
|
|
11
|
-
title: '
|
|
12
|
-
body: '
|
|
13
|
-
subtitle: '
|
|
14
|
-
caption: '
|
|
15
|
-
micro: '
|
|
11
|
+
heading: '2xl',
|
|
12
|
+
title: 'xl',
|
|
13
|
+
body: 'base',
|
|
14
|
+
subtitle: 'sm',
|
|
15
|
+
caption: 'xs',
|
|
16
|
+
micro: '[11px]',
|
|
16
17
|
};
|
|
17
18
|
const weightMap = {
|
|
18
19
|
regular: 'font-normal',
|
|
@@ -35,13 +36,12 @@ const PHXTextV2 = ({ as: Tag = 'p', children, size = 'body', weight = 'regular',
|
|
|
35
36
|
danger: 'text-[#FFC1BF]',
|
|
36
37
|
};
|
|
37
38
|
const lineHeightMap = {
|
|
38
|
-
none: '
|
|
39
|
-
tight: '
|
|
40
|
-
snappy: '
|
|
41
|
-
base: '
|
|
42
|
-
loose: '
|
|
39
|
+
none: 'none',
|
|
40
|
+
tight: 'tight',
|
|
41
|
+
snappy: 'snug',
|
|
42
|
+
base: 'normal',
|
|
43
|
+
loose: 'loose',
|
|
43
44
|
};
|
|
44
|
-
const getS = (prefix, val) => (val ? `${prefix}-${Box_1.spacingMap[val]}` : '');
|
|
45
45
|
const getMaxWidthClass = () => {
|
|
46
46
|
if (!maxWidth)
|
|
47
47
|
return '';
|
|
@@ -52,25 +52,25 @@ const PHXTextV2 = ({ as: Tag = 'p', children, size = 'body', weight = 'regular',
|
|
|
52
52
|
return `max-w-[${maxWidth}]`;
|
|
53
53
|
};
|
|
54
54
|
const classes = [
|
|
55
|
-
|
|
55
|
+
(0, helpers_1.getResponsiveClass)('text', size, sizeMap),
|
|
56
56
|
weightMap[weight],
|
|
57
57
|
colorMap[color],
|
|
58
58
|
`text-${align}`,
|
|
59
59
|
getMaxWidthClass(),
|
|
60
60
|
maxWidth ? 'truncate' : '',
|
|
61
61
|
// Margin classes
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
(0, helpers_1.getResponsiveClass)('m', m, Box_1.spacingMap),
|
|
63
|
+
(0, helpers_1.getResponsiveClass)('mt', mt, Box_1.spacingMap),
|
|
64
|
+
(0, helpers_1.getResponsiveClass)('mb', mb, Box_1.spacingMap),
|
|
65
|
+
(0, helpers_1.getResponsiveClass)('ml', ml, Box_1.spacingMap),
|
|
66
|
+
(0, helpers_1.getResponsiveClass)('mr', mr, Box_1.spacingMap),
|
|
67
67
|
// Padding classes
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
68
|
+
(0, helpers_1.getResponsiveClass)('p', p, Box_1.spacingMap),
|
|
69
|
+
(0, helpers_1.getResponsiveClass)('pt', pt, Box_1.spacingMap),
|
|
70
|
+
(0, helpers_1.getResponsiveClass)('pb', pb, Box_1.spacingMap),
|
|
71
|
+
(0, helpers_1.getResponsiveClass)('pl', pl, Box_1.spacingMap),
|
|
72
|
+
(0, helpers_1.getResponsiveClass)('pr', pr, Box_1.spacingMap),
|
|
73
|
+
(0, helpers_1.getResponsiveClass)('leading', lineHeight, lineHeightMap),
|
|
74
74
|
];
|
|
75
75
|
return react_1.default.createElement(Tag, { className: classes.filter(Boolean).join(' ') }, children);
|
|
76
76
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextV2.js","sourceRoot":"","sources":["../../../../src/components/TextV2/TextV2.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AACZ,0DAAyB;AACzB,gCAAmC;
|
|
1
|
+
{"version":3,"file":"TextV2.js","sourceRoot":"","sources":["../../../../src/components/TextV2/TextV2.tsx"],"names":[],"mappings":"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"}
|
|
@@ -85,4 +85,11 @@ export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12 | '1/3' | '2/3';
|
|
|
85
85
|
export type TextSize = 'heading' | 'title' | 'body' | 'subtitle' | 'caption' | 'micro';
|
|
86
86
|
export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
87
87
|
export type LineHeight = 'none' | 'tight' | 'snappy' | 'base' | 'loose';
|
|
88
|
+
export type Responsive<T> = T | {
|
|
89
|
+
initial?: T;
|
|
90
|
+
sm?: T;
|
|
91
|
+
md?: T;
|
|
92
|
+
lg?: T;
|
|
93
|
+
xl?: T;
|
|
94
|
+
};
|
|
88
95
|
export {};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { Responsive } from '../components/types';
|
|
1
2
|
export declare const encryptDataSync: (data: any) => string;
|
|
2
3
|
export declare const decryptCookie: (encryptedJson: string) => any;
|
|
3
4
|
export declare function unaccentValue(rawValue: string): string;
|
|
5
|
+
export declare const getResponsiveClass: <T extends string | number>(prefix: string, value?: Responsive<T>, map?: Record<T, string>) => string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.decryptCookie = exports.encryptDataSync = void 0;
|
|
3
|
+
exports.getResponsiveClass = exports.decryptCookie = exports.encryptDataSync = void 0;
|
|
4
4
|
exports.unaccentValue = unaccentValue;
|
|
5
5
|
const tslib_1 = require("tslib");
|
|
6
6
|
const crypto_js_1 = tslib_1.__importDefault(require("crypto-js"));
|
|
@@ -47,4 +47,25 @@ function unaccentValue(rawValue) {
|
|
|
47
47
|
.replace(/Đ/g, 'D') // Thay Đ thành D
|
|
48
48
|
.replace(/đ/g, 'd'); // Thay đ thành d
|
|
49
49
|
}
|
|
50
|
+
const getResponsiveClass = (prefix, value, map) => {
|
|
51
|
+
if (!value)
|
|
52
|
+
return '';
|
|
53
|
+
if (typeof value !== 'object') {
|
|
54
|
+
const finalVal = map ? map[value] : value;
|
|
55
|
+
return `${prefix}-${String(finalVal)}`;
|
|
56
|
+
}
|
|
57
|
+
return Object.entries(value)
|
|
58
|
+
.map(([breakpoint, val]) => {
|
|
59
|
+
if (val === undefined)
|
|
60
|
+
return '';
|
|
61
|
+
const finalVal = map ? map[val] : val;
|
|
62
|
+
if (breakpoint === 'initial') {
|
|
63
|
+
return `${prefix}-${String(finalVal)}`;
|
|
64
|
+
}
|
|
65
|
+
return `${breakpoint}:${prefix}-${String(finalVal)}`;
|
|
66
|
+
})
|
|
67
|
+
.filter(Boolean)
|
|
68
|
+
.join(' ');
|
|
69
|
+
};
|
|
70
|
+
exports.getResponsiveClass = getResponsiveClass;
|
|
50
71
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/helpers/helpers.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/helpers/helpers.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { AlignItems, JustifyContent, SpacingScale } from '../types';
|
|
2
|
+
import { AlignItems, JustifyContent, Responsive, SpacingScale } from '../types';
|
|
3
3
|
export interface PHXBlockStackProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
/** Khoảng cách giữa các item */
|
|
6
|
-
gap?: SpacingScale
|
|
6
|
+
gap?: Responsive<SpacingScale>;
|
|
7
7
|
/** Căn ngang các item */
|
|
8
8
|
inlineAlign?: AlignItems;
|
|
9
9
|
/** Căn dọc các item (Trục chính - Justify Content) */
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { spacingMap } from '../Box';
|
|
4
|
+
import { getResponsiveClass } from '../../helpers/helpers';
|
|
4
5
|
export const PHXBlockStack = ({ children, gap = 'none', inlineAlign = 'stretch', align = 'start', }) => {
|
|
5
6
|
const inlineAlignMap = {
|
|
6
7
|
start: 'items-start',
|
|
@@ -16,7 +17,12 @@ export const PHXBlockStack = ({ children, gap = 'none', inlineAlign = 'stretch',
|
|
|
16
17
|
between: 'justify-between',
|
|
17
18
|
around: 'justify-around',
|
|
18
19
|
};
|
|
19
|
-
const classes = [
|
|
20
|
+
const classes = [
|
|
21
|
+
'flex flex-col',
|
|
22
|
+
getResponsiveClass('gap', gap, spacingMap),
|
|
23
|
+
inlineAlignMap[inlineAlign],
|
|
24
|
+
alignMap[align],
|
|
25
|
+
];
|
|
20
26
|
return React.createElement("div", { className: classes.filter(Boolean).join(' ') }, children);
|
|
21
27
|
};
|
|
22
28
|
//# sourceMappingURL=BlockStack.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlockStack.js","sourceRoot":"","sources":["../../../../src/components/BlockStack/BlockStack.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"BlockStack.js","sourceRoot":"","sources":["../../../../src/components/BlockStack/BlockStack.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAY1D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,GAAG,GAAG,MAAM,EACZ,WAAW,GAAG,SAAS,EACvB,KAAK,GAAG,OAAO,GACI,EAAE,EAAE;IACvB,MAAM,cAAc,GAA+B;QACjD,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,cAAc;QACtB,GAAG,EAAE,WAAW;QAChB,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,gBAAgB;KAC3B,CAAA;IACD,MAAM,QAAQ,GAAG;QACf,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,gBAAgB;QACxB,GAAG,EAAE,aAAa;QAClB,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,gBAAgB;KACzB,CAAA;IAED,MAAM,OAAO,GAAG;QACd,eAAe;QACf,kBAAkB,CAAC,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC;QAC1C,cAAc,CAAC,WAAW,CAAC;QAC3B,QAAQ,CAAC,KAAK,CAAC;KAChB,CAAA;IAED,OAAO,6BAAK,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC5E,CAAC,CAAA"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SpacingScale } from '../types';
|
|
2
|
+
import { Responsive, SpacingScale } from '../types';
|
|
3
3
|
export declare const spacingMap: Record<SpacingScale, string>;
|
|
4
4
|
export interface PHXBoxProps {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
|
-
p?: SpacingScale
|
|
7
|
-
pt?: SpacingScale
|
|
8
|
-
pb?: SpacingScale
|
|
9
|
-
pl?: SpacingScale
|
|
10
|
-
pr?: SpacingScale
|
|
11
|
-
m?: SpacingScale
|
|
12
|
-
mt?: SpacingScale
|
|
13
|
-
mb?: SpacingScale
|
|
14
|
-
ml?: SpacingScale
|
|
15
|
-
mr?: SpacingScale
|
|
6
|
+
p?: Responsive<SpacingScale>;
|
|
7
|
+
pt?: Responsive<SpacingScale>;
|
|
8
|
+
pb?: Responsive<SpacingScale>;
|
|
9
|
+
pl?: Responsive<SpacingScale>;
|
|
10
|
+
pr?: Responsive<SpacingScale>;
|
|
11
|
+
m?: Responsive<SpacingScale>;
|
|
12
|
+
mt?: Responsive<SpacingScale>;
|
|
13
|
+
mb?: Responsive<SpacingScale>;
|
|
14
|
+
ml?: Responsive<SpacingScale>;
|
|
15
|
+
mr?: Responsive<SpacingScale>;
|
|
16
16
|
background?: 'surface' | 'subdued' | 'transparent';
|
|
17
17
|
}
|
|
18
18
|
export declare const PHXBox: ({ children, p, pt, pb, pl, pr, m, mt, mb, ml, mr, background }: PHXBoxProps) => React.JSX.Element;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React from 'react';
|
|
3
|
+
import { getResponsiveClass } from '../../helpers/helpers';
|
|
3
4
|
export const spacingMap = {
|
|
4
5
|
none: '0',
|
|
5
6
|
atomic: '1',
|
|
@@ -15,22 +16,21 @@ export const PHXBox = ({ children, p, pt, pb, pl, pr, m, mt, mb, ml, mr, backgro
|
|
|
15
16
|
subdued: 'bg-gray-50',
|
|
16
17
|
transparent: 'bg-transparent',
|
|
17
18
|
};
|
|
18
|
-
const getSpacing = (prefix, val) => (val ? `${prefix}-${spacingMap[val]}` : '');
|
|
19
19
|
const classes = [
|
|
20
20
|
// Background
|
|
21
21
|
bgMap[background],
|
|
22
|
-
//
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
//
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
22
|
+
// Margin classes
|
|
23
|
+
getResponsiveClass('m', m, spacingMap),
|
|
24
|
+
getResponsiveClass('mt', mt, spacingMap),
|
|
25
|
+
getResponsiveClass('mb', mb, spacingMap),
|
|
26
|
+
getResponsiveClass('ml', ml, spacingMap),
|
|
27
|
+
getResponsiveClass('mr', mr, spacingMap),
|
|
28
|
+
// Padding classes
|
|
29
|
+
getResponsiveClass('p', p, spacingMap),
|
|
30
|
+
getResponsiveClass('pt', pt, spacingMap),
|
|
31
|
+
getResponsiveClass('pb', pb, spacingMap),
|
|
32
|
+
getResponsiveClass('pl', pl, spacingMap),
|
|
33
|
+
getResponsiveClass('pr', pr, spacingMap),
|
|
34
34
|
background ? background : '',
|
|
35
35
|
];
|
|
36
36
|
return React.createElement("div", { className: classes.filter(Boolean).join(' ') }, children);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE1D,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,GAAG;IACT,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,GAAG;CACb,CAAA;AAoBD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,UAAU,GAAG,aAAa,EAAe,EAAE,EAAE;IACpH,MAAM,KAAK,GAAG;QACZ,OAAO,EAAE,UAAU;QACnB,OAAO,EAAE,YAAY;QACrB,WAAW,EAAE,gBAAgB;KAC9B,CAAA;IAED,MAAM,OAAO,GAAG;QACd,aAAa;QACb,KAAK,CAAC,UAAU,CAAC;QACjB,iBAAiB;QACjB,kBAAkB,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,CAAC;QACtC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB;QAClB,kBAAkB,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,CAAC;QACtC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;KAC7B,CAAA;IAED,OAAO,6BAAK,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC5E,CAAC,CAAA"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { GridColumns, SpacingScale } from '../types';
|
|
2
|
+
import { GridColumns, Responsive, SpacingScale } from '../types';
|
|
3
3
|
export interface PHXInlineGridProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
/** Số cột hoặc tỷ lệ cột */
|
|
6
|
-
columns?: GridColumns
|
|
6
|
+
columns?: Responsive<GridColumns>;
|
|
7
7
|
/** Khoảng cách giữa các ô */
|
|
8
8
|
gap?: SpacingScale;
|
|
9
9
|
/** Căn chỉnh các item theo chiều dọc trong ô */
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { spacingMap } from '../Box';
|
|
4
|
+
import { getResponsiveClass } from '../../helpers/helpers';
|
|
4
5
|
export const PHXInlineGrid = ({ children, columns = 1, gap = 'none', alignItems = 'stretch', className = '', }) => {
|
|
5
6
|
const columnMap = {
|
|
6
|
-
1: '
|
|
7
|
-
2: '
|
|
8
|
-
3: '
|
|
9
|
-
4: '
|
|
10
|
-
5: '
|
|
11
|
-
6: '
|
|
12
|
-
12: '
|
|
13
|
-
'1/3': '
|
|
14
|
-
'2/3': '
|
|
7
|
+
1: 'cols-1',
|
|
8
|
+
2: 'cols-2',
|
|
9
|
+
3: 'cols-3',
|
|
10
|
+
4: 'cols-4',
|
|
11
|
+
5: 'cols-5',
|
|
12
|
+
6: 'cols-6',
|
|
13
|
+
12: 'cols-12',
|
|
14
|
+
'1/3': 'cols-[1fr_2fr]', // Cột trái bằng 1/3
|
|
15
|
+
'2/3': 'cols-[2fr_1fr]', // Cột trái bằng 2/3
|
|
15
16
|
};
|
|
16
17
|
const alignMap = {
|
|
17
18
|
start: 'items-start',
|
|
@@ -19,7 +20,13 @@ export const PHXInlineGrid = ({ children, columns = 1, gap = 'none', alignItems
|
|
|
19
20
|
end: 'items-end',
|
|
20
21
|
stretch: 'items-stretch',
|
|
21
22
|
};
|
|
22
|
-
const classes = [
|
|
23
|
+
const classes = [
|
|
24
|
+
'grid',
|
|
25
|
+
getResponsiveClass('grid', columns, columnMap),
|
|
26
|
+
getResponsiveClass('gap', gap, spacingMap),
|
|
27
|
+
alignMap[alignItems],
|
|
28
|
+
className,
|
|
29
|
+
];
|
|
23
30
|
return React.createElement("div", { className: classes.filter(Boolean).join(' ') }, children);
|
|
24
31
|
};
|
|
25
32
|
//# sourceMappingURL=InlineGrid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineGrid.js","sourceRoot":"","sources":["../../../../src/components/InlineGrid/InlineGrid.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"InlineGrid.js","sourceRoot":"","sources":["../../../../src/components/InlineGrid/InlineGrid.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AACnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAa1D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,MAAM,EACZ,UAAU,GAAG,SAAS,EACtB,SAAS,GAAG,EAAE,GACK,EAAE,EAAE;IACvB,MAAM,SAAS,GAA2B;QACxC,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,CAAC,EAAE,QAAQ;QACX,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,gBAAgB,EAAE,oBAAoB;QAC7C,KAAK,EAAE,gBAAgB,EAAE,oBAAoB;KAC9C,CAAA;IAED,MAAM,QAAQ,GAAG;QACf,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,cAAc;QACtB,GAAG,EAAE,WAAW;QAChB,OAAO,EAAE,eAAe;KACzB,CAAA;IAED,MAAM,OAAO,GAAG;QACd,MAAM;QACN,kBAAkB,CAAC,MAAM,EAAE,OAAO,EAAE,SAA4C,CAAC;QACjF,kBAAkB,CAAC,KAAK,EAAE,GAAG,EAAE,UAAU,CAAC;QAC1C,QAAQ,CAAC,UAAU,CAAC;QACpB,SAAS;KACV,CAAA;IAED,OAAO,6BAAK,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC5E,CAAC,CAAA"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Color, LineHeight, SpacingScale, TextSize, TextWeight } from '../types';
|
|
2
|
+
import { Color, LineHeight, Responsive, SpacingScale, TextSize, TextWeight } from '../types';
|
|
3
3
|
export interface PHXTextProps {
|
|
4
4
|
as?: 'p' | 'span';
|
|
5
5
|
children: string | React.ReactNode;
|
|
6
|
-
size?: TextSize
|
|
6
|
+
size?: Responsive<TextSize>;
|
|
7
7
|
weight?: TextWeight;
|
|
8
8
|
color?: Color;
|
|
9
9
|
align?: 'left' | 'center' | 'right';
|
|
10
10
|
maxWidth?: string | number;
|
|
11
|
-
m?: SpacingScale
|
|
12
|
-
mt?: SpacingScale
|
|
13
|
-
mb?: SpacingScale
|
|
14
|
-
ml?: SpacingScale
|
|
15
|
-
mr?: SpacingScale
|
|
16
|
-
p?: SpacingScale
|
|
17
|
-
pt?: SpacingScale
|
|
18
|
-
pb?: SpacingScale
|
|
19
|
-
pl?: SpacingScale
|
|
20
|
-
pr?: SpacingScale
|
|
21
|
-
lineHeight?: LineHeight
|
|
11
|
+
m?: Responsive<SpacingScale>;
|
|
12
|
+
mt?: Responsive<SpacingScale>;
|
|
13
|
+
mb?: Responsive<SpacingScale>;
|
|
14
|
+
ml?: Responsive<SpacingScale>;
|
|
15
|
+
mr?: Responsive<SpacingScale>;
|
|
16
|
+
p?: Responsive<SpacingScale>;
|
|
17
|
+
pt?: Responsive<SpacingScale>;
|
|
18
|
+
pb?: Responsive<SpacingScale>;
|
|
19
|
+
pl?: Responsive<SpacingScale>;
|
|
20
|
+
pr?: Responsive<SpacingScale>;
|
|
21
|
+
lineHeight?: Responsive<LineHeight>;
|
|
22
22
|
}
|
|
23
23
|
export declare const PHXTextV2: ({ as: Tag, children, size, weight, color, align, maxWidth, m, mt, mb, ml, mr, p, pt, pb, pl, pr, lineHeight, }: PHXTextProps) => React.JSX.Element;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { spacingMap } from '../Box';
|
|
4
|
+
import { getResponsiveClass } from '../../helpers/helpers';
|
|
4
5
|
export const PHXTextV2 = ({ as: Tag = 'p', children, size = 'body', weight = 'regular', color = 'default', align = 'left', maxWidth, m, mt, mb, ml, mr, p, pt, pb, pl, pr, lineHeight = 'none', }) => {
|
|
5
6
|
const sizeMap = {
|
|
6
|
-
heading: '
|
|
7
|
-
title: '
|
|
8
|
-
body: '
|
|
9
|
-
subtitle: '
|
|
10
|
-
caption: '
|
|
11
|
-
micro: '
|
|
7
|
+
heading: '2xl',
|
|
8
|
+
title: 'xl',
|
|
9
|
+
body: 'base',
|
|
10
|
+
subtitle: 'sm',
|
|
11
|
+
caption: 'xs',
|
|
12
|
+
micro: '[11px]',
|
|
12
13
|
};
|
|
13
14
|
const weightMap = {
|
|
14
15
|
regular: 'font-normal',
|
|
@@ -31,13 +32,12 @@ export const PHXTextV2 = ({ as: Tag = 'p', children, size = 'body', weight = 're
|
|
|
31
32
|
danger: 'text-[#FFC1BF]',
|
|
32
33
|
};
|
|
33
34
|
const lineHeightMap = {
|
|
34
|
-
none: '
|
|
35
|
-
tight: '
|
|
36
|
-
snappy: '
|
|
37
|
-
base: '
|
|
38
|
-
loose: '
|
|
35
|
+
none: 'none',
|
|
36
|
+
tight: 'tight',
|
|
37
|
+
snappy: 'snug',
|
|
38
|
+
base: 'normal',
|
|
39
|
+
loose: 'loose',
|
|
39
40
|
};
|
|
40
|
-
const getS = (prefix, val) => (val ? `${prefix}-${spacingMap[val]}` : '');
|
|
41
41
|
const getMaxWidthClass = () => {
|
|
42
42
|
if (!maxWidth)
|
|
43
43
|
return '';
|
|
@@ -48,25 +48,25 @@ export const PHXTextV2 = ({ as: Tag = 'p', children, size = 'body', weight = 're
|
|
|
48
48
|
return `max-w-[${maxWidth}]`;
|
|
49
49
|
};
|
|
50
50
|
const classes = [
|
|
51
|
-
|
|
51
|
+
getResponsiveClass('text', size, sizeMap),
|
|
52
52
|
weightMap[weight],
|
|
53
53
|
colorMap[color],
|
|
54
54
|
`text-${align}`,
|
|
55
55
|
getMaxWidthClass(),
|
|
56
56
|
maxWidth ? 'truncate' : '',
|
|
57
57
|
// Margin classes
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
58
|
+
getResponsiveClass('m', m, spacingMap),
|
|
59
|
+
getResponsiveClass('mt', mt, spacingMap),
|
|
60
|
+
getResponsiveClass('mb', mb, spacingMap),
|
|
61
|
+
getResponsiveClass('ml', ml, spacingMap),
|
|
62
|
+
getResponsiveClass('mr', mr, spacingMap),
|
|
63
63
|
// Padding classes
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
64
|
+
getResponsiveClass('p', p, spacingMap),
|
|
65
|
+
getResponsiveClass('pt', pt, spacingMap),
|
|
66
|
+
getResponsiveClass('pb', pb, spacingMap),
|
|
67
|
+
getResponsiveClass('pl', pl, spacingMap),
|
|
68
|
+
getResponsiveClass('pr', pr, spacingMap),
|
|
69
|
+
getResponsiveClass('leading', lineHeight, lineHeightMap),
|
|
70
70
|
];
|
|
71
71
|
return React.createElement(Tag, { className: classes.filter(Boolean).join(' ') }, children);
|
|
72
72
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextV2.js","sourceRoot":"","sources":["../../../../src/components/TextV2/TextV2.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"TextV2.js","sourceRoot":"","sources":["../../../../src/components/TextV2/TextV2.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAEnC,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAyB1D,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,GAAG,GAAG,GAAG,EACb,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,SAAS,EACjB,KAAK,GAAG,MAAM,EACd,QAAQ,EACR,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,CAAC,EACD,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,UAAU,GAAG,MAAM,GACN,EAAE,EAAE;IACjB,MAAM,OAAO,GAA6B;QACxC,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,IAAI;QACX,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,QAAQ;KAChB,CAAA;IAED,MAAM,SAAS,GAA+B;QAC5C,OAAO,EAAE,aAAa;QACtB,MAAM,EAAE,aAAa;QACrB,QAAQ,EAAE,eAAe;QACzB,IAAI,EAAE,WAAW;KAClB,CAAA;IAED,MAAM,QAAQ,GAA0B;QACtC,OAAO,EAAE,eAAe;QACxB,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,cAAc;QACxB,OAAO,EAAE,kBAAkB;QAC3B,OAAO,EAAE,eAAe;QACxB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,gBAAgB;QAC3B,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,gBAAgB;QAC3B,UAAU,EAAE,gBAAgB;QAC5B,MAAM,EAAE,gBAAgB;KACzB,CAAA;IAED,MAAM,aAAa,GAA+B;QAChD,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,OAAO;KACf,CAAA;IAED,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAA;QACxB,IAAI,OAAO,QAAQ,KAAK,QAAQ;YAAE,OAAO,UAAU,QAAQ,KAAK,CAAA;QAChE,IAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,OAAO,CAAC;YAAE,OAAO,QAAQ,CAAC,QAAQ,EAAE,CAAA;QACvE,OAAO,UAAU,QAAQ,GAAG,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,OAAO,GAAG;QACd,kBAAkB,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC;QACzC,SAAS,CAAC,MAAM,CAAC;QACjB,QAAQ,CAAC,KAAK,CAAC;QACf,QAAQ,KAAK,EAAE;QACf,gBAAgB,EAAE;QAClB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;QAC1B,iBAAiB;QACjB,kBAAkB,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,CAAC;QACtC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB;QAClB,kBAAkB,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,CAAC;QACtC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,IAAI,EAAE,EAAE,EAAE,UAAU,CAAC;QACxC,kBAAkB,CAAC,SAAS,EAAE,UAAU,EAAE,aAAa,CAAC;KACzD,CAAA;IAED,OAAO,oBAAC,GAAG,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC5E,CAAC,CAAA"}
|
|
@@ -85,4 +85,11 @@ export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12 | '1/3' | '2/3';
|
|
|
85
85
|
export type TextSize = 'heading' | 'title' | 'body' | 'subtitle' | 'caption' | 'micro';
|
|
86
86
|
export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
87
87
|
export type LineHeight = 'none' | 'tight' | 'snappy' | 'base' | 'loose';
|
|
88
|
+
export type Responsive<T> = T | {
|
|
89
|
+
initial?: T;
|
|
90
|
+
sm?: T;
|
|
91
|
+
md?: T;
|
|
92
|
+
lg?: T;
|
|
93
|
+
xl?: T;
|
|
94
|
+
};
|
|
88
95
|
export {};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { Responsive } from '../components/types';
|
|
1
2
|
export declare const encryptDataSync: (data: any) => string;
|
|
2
3
|
export declare const decryptCookie: (encryptedJson: string) => any;
|
|
3
4
|
export declare function unaccentValue(rawValue: string): string;
|
|
5
|
+
export declare const getResponsiveClass: <T extends string | number>(prefix: string, value?: Responsive<T>, map?: Record<T, string>) => string;
|
|
@@ -40,4 +40,24 @@ export function unaccentValue(rawValue) {
|
|
|
40
40
|
.replace(/Đ/g, 'D') // Thay Đ thành D
|
|
41
41
|
.replace(/đ/g, 'd'); // Thay đ thành d
|
|
42
42
|
}
|
|
43
|
+
export const getResponsiveClass = (prefix, value, map) => {
|
|
44
|
+
if (!value)
|
|
45
|
+
return '';
|
|
46
|
+
if (typeof value !== 'object') {
|
|
47
|
+
const finalVal = map ? map[value] : value;
|
|
48
|
+
return `${prefix}-${String(finalVal)}`;
|
|
49
|
+
}
|
|
50
|
+
return Object.entries(value)
|
|
51
|
+
.map(([breakpoint, val]) => {
|
|
52
|
+
if (val === undefined)
|
|
53
|
+
return '';
|
|
54
|
+
const finalVal = map ? map[val] : val;
|
|
55
|
+
if (breakpoint === 'initial') {
|
|
56
|
+
return `${prefix}-${String(finalVal)}`;
|
|
57
|
+
}
|
|
58
|
+
return `${breakpoint}:${prefix}-${String(finalVal)}`;
|
|
59
|
+
})
|
|
60
|
+
.filter(Boolean)
|
|
61
|
+
.join(' ');
|
|
62
|
+
};
|
|
43
63
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/helpers/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/helpers/helpers.ts"],"names":[],"mappings":"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"}
|