@metamask-previews/design-system-react 0.0.0-preview.909f2e9 → 0.0.0-preview.f4da8f1
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/components/button/Button.cjs.map +1 -0
- package/dist/components/button/Button.d.cts.map +1 -0
- package/dist/components/button/Button.d.mts.map +1 -0
- package/dist/components/button/Button.mjs.map +1 -0
- package/dist/components/button/index.cjs +6 -0
- package/dist/components/button/index.cjs.map +1 -0
- package/dist/components/button/index.d.cts +3 -0
- package/dist/components/button/index.d.cts.map +1 -0
- package/dist/components/button/index.d.mts +3 -0
- package/dist/components/button/index.d.mts.map +1 -0
- package/dist/components/button/index.mjs +2 -0
- package/dist/components/button/index.mjs.map +1 -0
- package/dist/components/index.cjs +16 -0
- package/dist/components/index.cjs.map +1 -0
- package/dist/components/index.d.cts +6 -0
- package/dist/components/index.d.cts.map +1 -0
- package/dist/components/index.d.mts +6 -0
- package/dist/components/index.d.mts.map +1 -0
- package/dist/components/index.mjs +4 -0
- package/dist/components/index.mjs.map +1 -0
- package/dist/components/text/Text.cjs +17 -0
- package/dist/components/text/Text.cjs.map +1 -0
- package/dist/components/text/Text.constants.cjs +27 -0
- package/dist/components/text/Text.constants.cjs.map +1 -0
- package/dist/components/text/Text.constants.d.cts +5 -0
- package/dist/components/text/Text.constants.d.cts.map +1 -0
- package/dist/components/text/Text.constants.d.mts +5 -0
- package/dist/components/text/Text.constants.d.mts.map +1 -0
- package/dist/components/text/Text.constants.mjs +24 -0
- package/dist/components/text/Text.constants.mjs.map +1 -0
- package/dist/components/text/Text.d.cts +4 -0
- package/dist/components/text/Text.d.cts.map +1 -0
- package/dist/components/text/Text.d.mts +4 -0
- package/dist/components/text/Text.d.mts.map +1 -0
- package/dist/components/text/Text.mjs +17 -0
- package/dist/components/text/Text.mjs.map +1 -0
- package/dist/components/text/Text.types.cjs +96 -0
- package/dist/components/text/Text.types.cjs.map +1 -0
- package/dist/components/text/Text.types.d.cts +143 -0
- package/dist/components/text/Text.types.d.cts.map +1 -0
- package/dist/components/text/Text.types.d.mts +143 -0
- package/dist/components/text/Text.types.d.mts.map +1 -0
- package/dist/components/text/Text.types.mjs +93 -0
- package/dist/components/text/Text.types.mjs.map +1 -0
- package/dist/components/text/index.cjs +14 -0
- package/dist/components/text/index.cjs.map +1 -0
- package/dist/components/text/index.d.cts +4 -0
- package/dist/components/text/index.d.cts.map +1 -0
- package/dist/components/text/index.d.mts +4 -0
- package/dist/components/text/index.d.mts.map +1 -0
- package/dist/components/text/index.mjs +3 -0
- package/dist/components/text/index.mjs.map +1 -0
- package/dist/index.cjs +15 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -2
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +1 -2
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +1 -2
- package/dist/index.mjs.map +1 -1
- package/dist/utils/tw-merge.cjs +67 -0
- package/dist/utils/tw-merge.cjs.map +1 -0
- package/dist/utils/tw-merge.d.cts +13 -0
- package/dist/utils/tw-merge.d.cts.map +1 -0
- package/dist/utils/tw-merge.d.mts +13 -0
- package/dist/utils/tw-merge.d.mts.map +1 -0
- package/dist/utils/tw-merge.mjs +64 -0
- package/dist/utils/tw-merge.mjs.map +1 -0
- package/package.json +9 -8
- package/dist/Button.cjs.map +0 -1
- package/dist/Button.d.cts.map +0 -1
- package/dist/Button.d.mts.map +0 -1
- package/dist/Button.mjs.map +0 -1
- package/dist/Button.test.cjs +0 -29
- package/dist/Button.test.cjs.map +0 -1
- package/dist/Button.test.d.cts +0 -2
- package/dist/Button.test.d.cts.map +0 -1
- package/dist/Button.test.d.mts +0 -2
- package/dist/Button.test.d.mts.map +0 -1
- package/dist/Button.test.mjs +0 -32
- package/dist/Button.test.mjs.map +0 -1
- package/dist/Text.cjs +0 -40
- package/dist/Text.cjs.map +0 -1
- package/dist/Text.d.cts +0 -19
- package/dist/Text.d.cts.map +0 -1
- package/dist/Text.d.mts +0 -19
- package/dist/Text.d.mts.map +0 -1
- package/dist/Text.mjs +0 -40
- package/dist/Text.mjs.map +0 -1
- package/dist/Text.test.cjs +0 -23
- package/dist/Text.test.cjs.map +0 -1
- package/dist/Text.test.d.cts +0 -2
- package/dist/Text.test.d.cts.map +0 -1
- package/dist/Text.test.d.mts +0 -2
- package/dist/Text.test.d.mts.map +0 -1
- package/dist/Text.test.mjs +0 -26
- package/dist/Text.test.mjs.map +0 -1
- /package/dist/{Button.cjs → components/button/Button.cjs} +0 -0
- /package/dist/{Button.d.cts → components/button/Button.d.cts} +0 -0
- /package/dist/{Button.d.mts → components/button/Button.d.mts} +0 -0
- /package/dist/{Button.mjs → components/button/Button.mjs} +0 -0
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type TextProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Optional prop to change the font size of the component. The Text component uses responsive font sizes.
|
|
5
|
+
* Different variants map to specific HTML elements by default.
|
|
6
|
+
* @default TextVariant.BodyMd
|
|
7
|
+
*/
|
|
8
|
+
variant?: TextVariant;
|
|
9
|
+
/**
|
|
10
|
+
* The text content or elements to be rendered within the component.
|
|
11
|
+
*/
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Optional prop for additional CSS classes to be applied to the Text component.
|
|
15
|
+
*/
|
|
16
|
+
className?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Optional prop to control the font weight of the text.
|
|
19
|
+
* - Normal: 400
|
|
20
|
+
* - Medium: 500
|
|
21
|
+
* - Bold: 700
|
|
22
|
+
*/
|
|
23
|
+
fontWeight?: FontWeight;
|
|
24
|
+
/**
|
|
25
|
+
* Optional prop to control the font style of the text.
|
|
26
|
+
* Options: Normal, Italic
|
|
27
|
+
*/
|
|
28
|
+
fontStyle?: FontStyle;
|
|
29
|
+
/**
|
|
30
|
+
* Optional prop to apply text transformation to the content.
|
|
31
|
+
* Options: Uppercase, Lowercase, Capitalize, Normal
|
|
32
|
+
*/
|
|
33
|
+
textTransform?: TextTransform;
|
|
34
|
+
/**
|
|
35
|
+
* Optional prop to control the text alignment within its container.
|
|
36
|
+
* Options: Left, Center, Right, Justify
|
|
37
|
+
*/
|
|
38
|
+
textAlign?: TextAlign;
|
|
39
|
+
/**
|
|
40
|
+
* Optional prop to determine how text should wrap when it reaches the edge of its container.
|
|
41
|
+
* Options: BreakWord, Anywhere, Normal
|
|
42
|
+
*/
|
|
43
|
+
overflowWrap?: OverflowWrap;
|
|
44
|
+
/**
|
|
45
|
+
* Optional prop that when true, adds an ellipsis (...) when text overflows its container.
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
ellipsis?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Optional prop that changes the root HTML element of the Text component.
|
|
51
|
+
* Uses semantic HTML tags like h1, p, span, etc.
|
|
52
|
+
*/
|
|
53
|
+
as?: ValidTag;
|
|
54
|
+
/**
|
|
55
|
+
* Optional prop that sets the color of the text using predefined theme colors.
|
|
56
|
+
* @default TextColor.TextDefault
|
|
57
|
+
*/
|
|
58
|
+
color?: TextColor;
|
|
59
|
+
};
|
|
60
|
+
export declare enum TextVariant {
|
|
61
|
+
DisplayLg = "display-lg",
|
|
62
|
+
DisplayMd = "display-md",
|
|
63
|
+
HeadingLg = "heading-lg",
|
|
64
|
+
HeadingMd = "heading-md",
|
|
65
|
+
HeadingSm = "heading-sm",
|
|
66
|
+
BodyLg = "body-lg",
|
|
67
|
+
BodyMd = "body-md",
|
|
68
|
+
BodySm = "body-sm",
|
|
69
|
+
BodyXs = "body-xs"
|
|
70
|
+
}
|
|
71
|
+
export declare enum TextColor {
|
|
72
|
+
/** For default neutral text. */
|
|
73
|
+
TextDefault = "text-default",
|
|
74
|
+
/** For softer contrast neutral text */
|
|
75
|
+
TextAlternative = "text-alternative",
|
|
76
|
+
/** For the softest contrast neutral text (not accessible) */
|
|
77
|
+
TextMuted = "text-muted",
|
|
78
|
+
/** For elements used on top of overlay/alternative. Used for text, icon or border */
|
|
79
|
+
OverlayInverse = "text-overlay-inverse",
|
|
80
|
+
/** For interactive, active, and selected semantics. Used for text, background, icon or border */
|
|
81
|
+
PrimaryDefault = "text-primary-default",
|
|
82
|
+
/** For elements used on top of primary/default. Used for text, icon or border */
|
|
83
|
+
PrimaryInverse = "text-primary-inverse",
|
|
84
|
+
/** For the critical alert semantic elements. Used for text, background, icon or border */
|
|
85
|
+
ErrorDefault = "text-error-default",
|
|
86
|
+
/** For the stronger contrast error semantic elements. */
|
|
87
|
+
ErrorAlternative = "text-error-alternative",
|
|
88
|
+
/** For elements used on top of error/default. Used for text, icon or border */
|
|
89
|
+
ErrorInverse = "text-error-inverse",
|
|
90
|
+
/** For the positive semantic elements. Used for text, background, icon or border */
|
|
91
|
+
SuccessDefault = "text-success-default",
|
|
92
|
+
/** For elements used on top of success/default. Used for text, icon or border */
|
|
93
|
+
SuccessInverse = "text-success-inverse",
|
|
94
|
+
/** For the caution alert semantic elements. Used for text, background, icon or border */
|
|
95
|
+
WarningDefault = "text-warning-default",
|
|
96
|
+
/** For elements used on top of warning/default. Used for text, icon or border */
|
|
97
|
+
WarningInverse = "text-warning-inverse",
|
|
98
|
+
/** For informational read-only elements. Used for text, background, icon or border */
|
|
99
|
+
InfoDefault = "text-info-default",
|
|
100
|
+
/** For elements used on top of info/default. Used for text, icon or border */
|
|
101
|
+
InfoInverse = "text-info-inverse",
|
|
102
|
+
/** Inherit the color of the parent element */
|
|
103
|
+
Inherit = "text-inherit",
|
|
104
|
+
/** Make the text color transparent */
|
|
105
|
+
Transparent = "text-transparent"
|
|
106
|
+
}
|
|
107
|
+
export declare enum TextAlign {
|
|
108
|
+
Left = "text-left",
|
|
109
|
+
Center = "text-center",
|
|
110
|
+
Right = "text-right",
|
|
111
|
+
Justify = "text-justify"
|
|
112
|
+
}
|
|
113
|
+
export type ValidTag = 'dd' | 'div' | 'dt' | 'em' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'li' | 'p' | 'span' | 'strong' | 'ul' | 'label' | 'input' | 'header' | 'a' | 'button';
|
|
114
|
+
export declare enum FontWeight {
|
|
115
|
+
/**
|
|
116
|
+
* Weight - 700
|
|
117
|
+
*/
|
|
118
|
+
Bold = "font-bold",
|
|
119
|
+
/**
|
|
120
|
+
* Weight - 500
|
|
121
|
+
*/
|
|
122
|
+
Medium = "font-medium",
|
|
123
|
+
/**
|
|
124
|
+
* Weight - 400
|
|
125
|
+
*/
|
|
126
|
+
Normal = "font-normal"
|
|
127
|
+
}
|
|
128
|
+
export declare enum OverflowWrap {
|
|
129
|
+
BreakWord = "break-words",
|
|
130
|
+
Anywhere = "break-all",
|
|
131
|
+
Normal = "break-normal"
|
|
132
|
+
}
|
|
133
|
+
export declare enum FontStyle {
|
|
134
|
+
Italic = "italic",
|
|
135
|
+
Normal = "not-italic"
|
|
136
|
+
}
|
|
137
|
+
export declare enum TextTransform {
|
|
138
|
+
Uppercase = "uppercase",
|
|
139
|
+
Lowercase = "lowercase",
|
|
140
|
+
Capitalize = "capitalize",
|
|
141
|
+
Normal = "normal-case"
|
|
142
|
+
}
|
|
143
|
+
//# sourceMappingURL=Text.types.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.types.d.mts","sourceRoot":"","sources":["../../../src/components/text/Text.types.ts"],"names":[],"mappings":";AAAA,MAAM,MAAM,SAAS,GAAG;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AACF,oBAAY,WAAW;IAErB,SAAS,eAAe;IACxB,SAAS,eAAe;IAGxB,SAAS,eAAe;IACxB,SAAS,eAAe;IACxB,SAAS,eAAe;IAGxB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;CACnB;AAED,oBAAY,SAAS;IACnB,gCAAgC;IAChC,WAAW,iBAAiB;IAC5B,uCAAuC;IACvC,eAAe,qBAAqB;IACpC,6DAA6D;IAC7D,SAAS,eAAe;IACxB,qFAAqF;IACrF,cAAc,yBAAyB;IACvC,iGAAiG;IACjG,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,0FAA0F;IAC1F,YAAY,uBAAuB;IACnC,yDAAyD;IACzD,gBAAgB,2BAA2B;IAC3C,+EAA+E;IAC/E,YAAY,uBAAuB;IACnC,oFAAoF;IACpF,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,yFAAyF;IACzF,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,sFAAsF;IACtF,WAAW,sBAAsB;IACjC,8EAA8E;IAC9E,WAAW,sBAAsB;IACjC,8CAA8C;IAC9C,OAAO,iBAAiB;IACxB,sCAAsC;IACtC,WAAW,qBAAqB;CACjC;AAED,oBAAY,SAAS;IACnB,IAAI,cAAc;IAClB,MAAM,gBAAgB;IACtB,KAAK,eAAe;IACpB,OAAO,iBAAiB;CACzB;AAED,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,KAAK,GACL,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,QAAQ,GACR,IAAI,GACJ,OAAO,GACP,OAAO,GACP,QAAQ,GACR,GAAG,GACH,QAAQ,CAAC;AAEb,oBAAY,UAAU;IACpB;;OAEG;IACH,IAAI,cAAc;IAClB;;OAEG;IACH,MAAM,gBAAgB;IACtB;;OAEG;IACH,MAAM,gBAAgB;CACvB;AAED,oBAAY,YAAY;IACtB,SAAS,gBAAgB;IACzB,QAAQ,cAAc;IACtB,MAAM,iBAAiB;CACxB;AAED,oBAAY,SAAS;IACnB,MAAM,WAAW;IACjB,MAAM,eAAe;CACtB;AAED,oBAAY,aAAa;IACvB,SAAS,cAAc;IACvB,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,MAAM,gBAAgB;CACvB"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
export var TextVariant;
|
|
2
|
+
(function (TextVariant) {
|
|
3
|
+
// Display Sizes
|
|
4
|
+
TextVariant["DisplayLg"] = "display-lg";
|
|
5
|
+
TextVariant["DisplayMd"] = "display-md";
|
|
6
|
+
// Heading Sizes
|
|
7
|
+
TextVariant["HeadingLg"] = "heading-lg";
|
|
8
|
+
TextVariant["HeadingMd"] = "heading-md";
|
|
9
|
+
TextVariant["HeadingSm"] = "heading-sm";
|
|
10
|
+
// Font Sizes
|
|
11
|
+
TextVariant["BodyLg"] = "body-lg";
|
|
12
|
+
TextVariant["BodyMd"] = "body-md";
|
|
13
|
+
TextVariant["BodySm"] = "body-sm";
|
|
14
|
+
TextVariant["BodyXs"] = "body-xs";
|
|
15
|
+
})(TextVariant || (TextVariant = {}));
|
|
16
|
+
export var TextColor;
|
|
17
|
+
(function (TextColor) {
|
|
18
|
+
/** For default neutral text. */
|
|
19
|
+
TextColor["TextDefault"] = "text-default";
|
|
20
|
+
/** For softer contrast neutral text */
|
|
21
|
+
TextColor["TextAlternative"] = "text-alternative";
|
|
22
|
+
/** For the softest contrast neutral text (not accessible) */
|
|
23
|
+
TextColor["TextMuted"] = "text-muted";
|
|
24
|
+
/** For elements used on top of overlay/alternative. Used for text, icon or border */
|
|
25
|
+
TextColor["OverlayInverse"] = "text-overlay-inverse";
|
|
26
|
+
/** For interactive, active, and selected semantics. Used for text, background, icon or border */
|
|
27
|
+
TextColor["PrimaryDefault"] = "text-primary-default";
|
|
28
|
+
/** For elements used on top of primary/default. Used for text, icon or border */
|
|
29
|
+
TextColor["PrimaryInverse"] = "text-primary-inverse";
|
|
30
|
+
/** For the critical alert semantic elements. Used for text, background, icon or border */
|
|
31
|
+
TextColor["ErrorDefault"] = "text-error-default";
|
|
32
|
+
/** For the stronger contrast error semantic elements. */
|
|
33
|
+
TextColor["ErrorAlternative"] = "text-error-alternative";
|
|
34
|
+
/** For elements used on top of error/default. Used for text, icon or border */
|
|
35
|
+
TextColor["ErrorInverse"] = "text-error-inverse";
|
|
36
|
+
/** For the positive semantic elements. Used for text, background, icon or border */
|
|
37
|
+
TextColor["SuccessDefault"] = "text-success-default";
|
|
38
|
+
/** For elements used on top of success/default. Used for text, icon or border */
|
|
39
|
+
TextColor["SuccessInverse"] = "text-success-inverse";
|
|
40
|
+
/** For the caution alert semantic elements. Used for text, background, icon or border */
|
|
41
|
+
TextColor["WarningDefault"] = "text-warning-default";
|
|
42
|
+
/** For elements used on top of warning/default. Used for text, icon or border */
|
|
43
|
+
TextColor["WarningInverse"] = "text-warning-inverse";
|
|
44
|
+
/** For informational read-only elements. Used for text, background, icon or border */
|
|
45
|
+
TextColor["InfoDefault"] = "text-info-default";
|
|
46
|
+
/** For elements used on top of info/default. Used for text, icon or border */
|
|
47
|
+
TextColor["InfoInverse"] = "text-info-inverse";
|
|
48
|
+
/** Inherit the color of the parent element */
|
|
49
|
+
TextColor["Inherit"] = "text-inherit";
|
|
50
|
+
/** Make the text color transparent */
|
|
51
|
+
TextColor["Transparent"] = "text-transparent";
|
|
52
|
+
})(TextColor || (TextColor = {}));
|
|
53
|
+
export var TextAlign;
|
|
54
|
+
(function (TextAlign) {
|
|
55
|
+
TextAlign["Left"] = "text-left";
|
|
56
|
+
TextAlign["Center"] = "text-center";
|
|
57
|
+
TextAlign["Right"] = "text-right";
|
|
58
|
+
TextAlign["Justify"] = "text-justify";
|
|
59
|
+
})(TextAlign || (TextAlign = {}));
|
|
60
|
+
export var FontWeight;
|
|
61
|
+
(function (FontWeight) {
|
|
62
|
+
/**
|
|
63
|
+
* Weight - 700
|
|
64
|
+
*/
|
|
65
|
+
FontWeight["Bold"] = "font-bold";
|
|
66
|
+
/**
|
|
67
|
+
* Weight - 500
|
|
68
|
+
*/
|
|
69
|
+
FontWeight["Medium"] = "font-medium";
|
|
70
|
+
/**
|
|
71
|
+
* Weight - 400
|
|
72
|
+
*/
|
|
73
|
+
FontWeight["Normal"] = "font-normal";
|
|
74
|
+
})(FontWeight || (FontWeight = {}));
|
|
75
|
+
export var OverflowWrap;
|
|
76
|
+
(function (OverflowWrap) {
|
|
77
|
+
OverflowWrap["BreakWord"] = "break-words";
|
|
78
|
+
OverflowWrap["Anywhere"] = "break-all";
|
|
79
|
+
OverflowWrap["Normal"] = "break-normal";
|
|
80
|
+
})(OverflowWrap || (OverflowWrap = {}));
|
|
81
|
+
export var FontStyle;
|
|
82
|
+
(function (FontStyle) {
|
|
83
|
+
FontStyle["Italic"] = "italic";
|
|
84
|
+
FontStyle["Normal"] = "not-italic";
|
|
85
|
+
})(FontStyle || (FontStyle = {}));
|
|
86
|
+
export var TextTransform;
|
|
87
|
+
(function (TextTransform) {
|
|
88
|
+
TextTransform["Uppercase"] = "uppercase";
|
|
89
|
+
TextTransform["Lowercase"] = "lowercase";
|
|
90
|
+
TextTransform["Capitalize"] = "capitalize";
|
|
91
|
+
TextTransform["Normal"] = "normal-case";
|
|
92
|
+
})(TextTransform || (TextTransform = {}));
|
|
93
|
+
//# sourceMappingURL=Text.types.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.types.mjs","sourceRoot":"","sources":["../../../src/components/text/Text.types.ts"],"names":[],"mappings":"AA0DA,MAAM,CAAN,IAAY,WAeX;AAfD,WAAY,WAAW;IACrB,gBAAgB;IAChB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IAExB,gBAAgB;IAChB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IAExB,aAAa;IACb,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAfW,WAAW,KAAX,WAAW,QAetB;AAED,MAAM,CAAN,IAAY,SAmCX;AAnCD,WAAY,SAAS;IACnB,gCAAgC;IAChC,yCAA4B,CAAA;IAC5B,uCAAuC;IACvC,iDAAoC,CAAA;IACpC,6DAA6D;IAC7D,qCAAwB,CAAA;IACxB,qFAAqF;IACrF,oDAAuC,CAAA;IACvC,iGAAiG;IACjG,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,0FAA0F;IAC1F,gDAAmC,CAAA;IACnC,yDAAyD;IACzD,wDAA2C,CAAA;IAC3C,+EAA+E;IAC/E,gDAAmC,CAAA;IACnC,oFAAoF;IACpF,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,yFAAyF;IACzF,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,sFAAsF;IACtF,8CAAiC,CAAA;IACjC,8EAA8E;IAC9E,8CAAiC,CAAA;IACjC,8CAA8C;IAC9C,qCAAwB,CAAA;IACxB,sCAAsC;IACtC,6CAAgC,CAAA;AAClC,CAAC,EAnCW,SAAS,KAAT,SAAS,QAmCpB;AAED,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,+BAAkB,CAAA;IAClB,mCAAsB,CAAA;IACtB,iCAAoB,CAAA;IACpB,qCAAwB,CAAA;AAC1B,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAwBD,MAAM,CAAN,IAAY,UAaX;AAbD,WAAY,UAAU;IACpB;;OAEG;IACH,gCAAkB,CAAA;IAClB;;OAEG;IACH,oCAAsB,CAAA;IACtB;;OAEG;IACH,oCAAsB,CAAA;AACxB,CAAC,EAbW,UAAU,KAAV,UAAU,QAarB;AAED,MAAM,CAAN,IAAY,YAIX;AAJD,WAAY,YAAY;IACtB,yCAAyB,CAAA;IACzB,sCAAsB,CAAA;IACtB,uCAAuB,CAAA;AACzB,CAAC,EAJW,YAAY,KAAZ,YAAY,QAIvB;AAED,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,8BAAiB,CAAA;IACjB,kCAAqB,CAAA;AACvB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED,MAAM,CAAN,IAAY,aAKX;AALD,WAAY,aAAa;IACvB,wCAAuB,CAAA;IACvB,wCAAuB,CAAA;IACvB,0CAAyB,CAAA;IACzB,uCAAsB,CAAA;AACxB,CAAC,EALW,aAAa,KAAb,aAAa,QAKxB","sourcesContent":["export type TextProps = {\n /**\n * Optional prop to change the font size of the component. The Text component uses responsive font sizes.\n * Different variants map to specific HTML elements by default.\n * @default TextVariant.BodyMd\n */\n variant?: TextVariant;\n /**\n * The text content or elements to be rendered within the component.\n */\n children: React.ReactNode;\n /**\n * Optional prop for additional CSS classes to be applied to the Text component.\n */\n className?: string;\n /**\n * Optional prop to control the font weight of the text.\n * - Normal: 400\n * - Medium: 500\n * - Bold: 700\n */\n fontWeight?: FontWeight;\n /**\n * Optional prop to control the font style of the text.\n * Options: Normal, Italic\n */\n fontStyle?: FontStyle;\n /**\n * Optional prop to apply text transformation to the content.\n * Options: Uppercase, Lowercase, Capitalize, Normal\n */\n textTransform?: TextTransform;\n /**\n * Optional prop to control the text alignment within its container.\n * Options: Left, Center, Right, Justify\n */\n textAlign?: TextAlign;\n /**\n * Optional prop to determine how text should wrap when it reaches the edge of its container.\n * Options: BreakWord, Anywhere, Normal\n */\n overflowWrap?: OverflowWrap;\n /**\n * Optional prop that when true, adds an ellipsis (...) when text overflows its container.\n * @default false\n */\n ellipsis?: boolean;\n /**\n * Optional prop that changes the root HTML element of the Text component.\n * Uses semantic HTML tags like h1, p, span, etc.\n */\n as?: ValidTag;\n /**\n * Optional prop that sets the color of the text using predefined theme colors.\n * @default TextColor.TextDefault\n */\n color?: TextColor;\n};\nexport enum TextVariant {\n // Display Sizes\n DisplayLg = 'display-lg',\n DisplayMd = 'display-md',\n\n // Heading Sizes\n HeadingLg = 'heading-lg',\n HeadingMd = 'heading-md',\n HeadingSm = 'heading-sm',\n\n // Font Sizes\n BodyLg = 'body-lg',\n BodyMd = 'body-md',\n BodySm = 'body-sm',\n BodyXs = 'body-xs',\n}\n\nexport enum TextColor {\n /** For default neutral text. */\n TextDefault = 'text-default',\n /** For softer contrast neutral text */\n TextAlternative = 'text-alternative',\n /** For the softest contrast neutral text (not accessible) */\n TextMuted = 'text-muted',\n /** For elements used on top of overlay/alternative. Used for text, icon or border */\n OverlayInverse = 'text-overlay-inverse',\n /** For interactive, active, and selected semantics. Used for text, background, icon or border */\n PrimaryDefault = 'text-primary-default',\n /** For elements used on top of primary/default. Used for text, icon or border */\n PrimaryInverse = 'text-primary-inverse',\n /** For the critical alert semantic elements. Used for text, background, icon or border */\n ErrorDefault = 'text-error-default',\n /** For the stronger contrast error semantic elements. */\n ErrorAlternative = 'text-error-alternative',\n /** For elements used on top of error/default. Used for text, icon or border */\n ErrorInverse = 'text-error-inverse',\n /** For the positive semantic elements. Used for text, background, icon or border */\n SuccessDefault = 'text-success-default',\n /** For elements used on top of success/default. Used for text, icon or border */\n SuccessInverse = 'text-success-inverse',\n /** For the caution alert semantic elements. Used for text, background, icon or border */\n WarningDefault = 'text-warning-default',\n /** For elements used on top of warning/default. Used for text, icon or border */\n WarningInverse = 'text-warning-inverse',\n /** For informational read-only elements. Used for text, background, icon or border */\n InfoDefault = 'text-info-default',\n /** For elements used on top of info/default. Used for text, icon or border */\n InfoInverse = 'text-info-inverse',\n /** Inherit the color of the parent element */\n Inherit = 'text-inherit',\n /** Make the text color transparent */\n Transparent = 'text-transparent',\n}\n\nexport enum TextAlign {\n Left = 'text-left',\n Center = 'text-center',\n Right = 'text-right',\n Justify = 'text-justify',\n}\n\nexport type ValidTag =\n | 'dd'\n | 'div'\n | 'dt'\n | 'em'\n | 'h1'\n | 'h2'\n | 'h3'\n | 'h4'\n | 'h5'\n | 'h6'\n | 'li'\n | 'p'\n | 'span'\n | 'strong'\n | 'ul'\n | 'label'\n | 'input'\n | 'header'\n | 'a'\n | 'button';\n\nexport enum FontWeight {\n /**\n * Weight - 700\n */\n Bold = 'font-bold',\n /**\n * Weight - 500\n */\n Medium = 'font-medium',\n /**\n * Weight - 400\n */\n Normal = 'font-normal',\n}\n\nexport enum OverflowWrap {\n BreakWord = 'break-words',\n Anywhere = 'break-all',\n Normal = 'break-normal',\n}\n\nexport enum FontStyle {\n Italic = 'italic',\n Normal = 'not-italic',\n}\n\nexport enum TextTransform {\n Uppercase = 'uppercase',\n Lowercase = 'lowercase',\n Capitalize = 'capitalize',\n Normal = 'normal-case',\n}\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.OverflowWrap = exports.TextTransform = exports.FontStyle = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.Text = void 0;
|
|
4
|
+
var Text_1 = require("./Text.cjs");
|
|
5
|
+
Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
|
|
6
|
+
var Text_types_1 = require("./Text.types.cjs");
|
|
7
|
+
Object.defineProperty(exports, "TextVariant", { enumerable: true, get: function () { return Text_types_1.TextVariant; } });
|
|
8
|
+
Object.defineProperty(exports, "TextColor", { enumerable: true, get: function () { return Text_types_1.TextColor; } });
|
|
9
|
+
Object.defineProperty(exports, "TextAlign", { enumerable: true, get: function () { return Text_types_1.TextAlign; } });
|
|
10
|
+
Object.defineProperty(exports, "FontWeight", { enumerable: true, get: function () { return Text_types_1.FontWeight; } });
|
|
11
|
+
Object.defineProperty(exports, "FontStyle", { enumerable: true, get: function () { return Text_types_1.FontStyle; } });
|
|
12
|
+
Object.defineProperty(exports, "TextTransform", { enumerable: true, get: function () { return Text_types_1.TextTransform; } });
|
|
13
|
+
Object.defineProperty(exports, "OverflowWrap", { enumerable: true, get: function () { return Text_types_1.OverflowWrap; } });
|
|
14
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":";;;AAAA,mCAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,+CAQsB;AAPpB,yGAAA,WAAW,OAAA;AACX,uGAAA,SAAS,OAAA;AACT,uGAAA,SAAS,OAAA;AACT,wGAAA,UAAU,OAAA;AACV,uGAAA,SAAS,OAAA;AACT,2GAAA,aAAa,OAAA;AACb,0GAAA,YAAY,OAAA","sourcesContent":["export { Text } from './Text';\nexport {\n TextVariant,\n TextColor,\n TextAlign,\n FontWeight,\n FontStyle,\n TextTransform,\n OverflowWrap,\n} from './Text.types';\nexport type { TextProps } from './Text.types';\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,GACb,yBAAqB;AACtB,YAAY,EAAE,SAAS,EAAE,yBAAqB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,GACb,yBAAqB;AACtB,YAAY,EAAE,SAAS,EAAE,yBAAqB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACb,yBAAqB","sourcesContent":["export { Text } from './Text';\nexport {\n TextVariant,\n TextColor,\n TextAlign,\n FontWeight,\n FontStyle,\n TextTransform,\n OverflowWrap,\n} from './Text.types';\nexport type { TextProps } from './Text.types';\n"]}
|
package/dist/index.cjs
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
2
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
|
|
4
|
-
var Button_1 = require("./Button.cjs");
|
|
5
|
-
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
|
|
6
|
-
var Text_1 = require("./Text.cjs");
|
|
7
|
-
Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
|
|
17
|
+
__exportStar(require("./components/index.cjs"), exports);
|
|
8
18
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,yDAA6B","sourcesContent":["export * from './components';\n"]}
|
package/dist/index.d.cts
CHANGED
package/dist/index.d.cts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,uCAA6B"}
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,uCAA6B"}
|
package/dist/index.mjs
CHANGED
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,uCAA6B","sourcesContent":["export * from './components';\n"]}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.twMerge = void 0;
|
|
4
|
+
const tailwind_merge_1 = require("tailwind-merge");
|
|
5
|
+
const variantClassGroups = [
|
|
6
|
+
's-display-md',
|
|
7
|
+
's-heading-lg',
|
|
8
|
+
's-heading-md',
|
|
9
|
+
's-heading-sm',
|
|
10
|
+
's-body-lg',
|
|
11
|
+
's-body-md',
|
|
12
|
+
's-body-sm',
|
|
13
|
+
's-body-xs',
|
|
14
|
+
'l-display-md',
|
|
15
|
+
'l-heading-lg',
|
|
16
|
+
'l-heading-md',
|
|
17
|
+
'l-heading-sm',
|
|
18
|
+
'l-body-lg',
|
|
19
|
+
'l-body-md',
|
|
20
|
+
'l-body-sm',
|
|
21
|
+
'l-body-xs',
|
|
22
|
+
];
|
|
23
|
+
/**
|
|
24
|
+
* Custom Tailwind Merge configuration to handle our design system's typography classes.
|
|
25
|
+
* This extends the default Tailwind Merge behavior to properly handle conflicts between:
|
|
26
|
+
* 1. Custom text color classes (text-default, text-alternative, text-muted)
|
|
27
|
+
* 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)
|
|
28
|
+
* 3. Standard and custom font weight classes
|
|
29
|
+
*
|
|
30
|
+
* Without this configuration, Tailwind Merge wouldn't know these classes are meant
|
|
31
|
+
* to override each other, potentially leading to multiple conflicting classes
|
|
32
|
+
* being applied simultaneously.
|
|
33
|
+
*/
|
|
34
|
+
exports.twMerge = (0, tailwind_merge_1.extendTailwindMerge)({
|
|
35
|
+
extend: {
|
|
36
|
+
classGroups: {
|
|
37
|
+
'text-color': ['text-default', 'text-alternative', 'text-muted'],
|
|
38
|
+
'font-size': [
|
|
39
|
+
{
|
|
40
|
+
text: variantClassGroups,
|
|
41
|
+
},
|
|
42
|
+
],
|
|
43
|
+
'font-weight': [
|
|
44
|
+
// Standard Tailwind font weights
|
|
45
|
+
'font-thin',
|
|
46
|
+
'font-extralight',
|
|
47
|
+
'font-light',
|
|
48
|
+
'font-normal',
|
|
49
|
+
'font-medium',
|
|
50
|
+
'font-semibold',
|
|
51
|
+
'font-bold',
|
|
52
|
+
'font-extrabold',
|
|
53
|
+
'font-black',
|
|
54
|
+
// Custom typography classes
|
|
55
|
+
{
|
|
56
|
+
font: variantClassGroups,
|
|
57
|
+
},
|
|
58
|
+
],
|
|
59
|
+
},
|
|
60
|
+
conflictingClassGroups: {
|
|
61
|
+
'text-color': ['text-color'],
|
|
62
|
+
'font-size': ['font-size'],
|
|
63
|
+
'font-weight': ['font-weight'],
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
});
|
|
67
|
+
//# sourceMappingURL=tw-merge.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tw-merge.cjs","sourceRoot":"","sources":["../../src/utils/tw-merge.ts"],"names":[],"mappings":";;;AAAA,mDAAqD;AAErD,MAAM,kBAAkB,GAAG;IACzB,cAAc;IACd,cAAc;IACd,cAAc;IACd,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,cAAc;IACd,cAAc;IACd,cAAc;IACd,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACZ,CAAC;AAEF;;;;;;;;;;GAUG;AACU,QAAA,OAAO,GAAG,IAAA,oCAAmB,EAAC;IACzC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,YAAY,EAAE,CAAC,cAAc,EAAE,kBAAkB,EAAE,YAAY,CAAC;YAChE,WAAW,EAAE;gBACX;oBACE,IAAI,EAAE,kBAAkB;iBACzB;aACF;YACD,aAAa,EAAE;gBACb,iCAAiC;gBACjC,WAAW;gBACX,iBAAiB;gBACjB,YAAY;gBACZ,aAAa;gBACb,aAAa;gBACb,eAAe;gBACf,WAAW;gBACX,gBAAgB;gBAChB,YAAY;gBACZ,4BAA4B;gBAC5B;oBACE,IAAI,EAAE,kBAAkB;iBACzB;aACF;SACF;QACD,sBAAsB,EAAE;YACtB,YAAY,EAAE,CAAC,YAAY,CAAC;YAC5B,WAAW,EAAE,CAAC,WAAW,CAAC;YAC1B,aAAa,EAAE,CAAC,aAAa,CAAC;SAC/B;KACF;CACF,CAAC,CAAC","sourcesContent":["import { extendTailwindMerge } from 'tailwind-merge';\n\nconst variantClassGroups = [\n 's-display-md',\n 's-heading-lg',\n 's-heading-md',\n 's-heading-sm',\n 's-body-lg',\n 's-body-md',\n 's-body-sm',\n 's-body-xs',\n 'l-display-md',\n 'l-heading-lg',\n 'l-heading-md',\n 'l-heading-sm',\n 'l-body-lg',\n 'l-body-md',\n 'l-body-sm',\n 'l-body-xs',\n];\n\n/**\n * Custom Tailwind Merge configuration to handle our design system's typography classes.\n * This extends the default Tailwind Merge behavior to properly handle conflicts between:\n * 1. Custom text color classes (text-default, text-alternative, text-muted)\n * 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)\n * 3. Standard and custom font weight classes\n *\n * Without this configuration, Tailwind Merge wouldn't know these classes are meant\n * to override each other, potentially leading to multiple conflicting classes\n * being applied simultaneously.\n */\nexport const twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n 'text-color': ['text-default', 'text-alternative', 'text-muted'],\n 'font-size': [\n {\n text: variantClassGroups,\n },\n ],\n 'font-weight': [\n // Standard Tailwind font weights\n 'font-thin',\n 'font-extralight',\n 'font-light',\n 'font-normal',\n 'font-medium',\n 'font-semibold',\n 'font-bold',\n 'font-extrabold',\n 'font-black',\n // Custom typography classes\n {\n font: variantClassGroups,\n },\n ],\n },\n conflictingClassGroups: {\n 'text-color': ['text-color'],\n 'font-size': ['font-size'],\n 'font-weight': ['font-weight'],\n },\n },\n});\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom Tailwind Merge configuration to handle our design system's typography classes.
|
|
3
|
+
* This extends the default Tailwind Merge behavior to properly handle conflicts between:
|
|
4
|
+
* 1. Custom text color classes (text-default, text-alternative, text-muted)
|
|
5
|
+
* 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)
|
|
6
|
+
* 3. Standard and custom font weight classes
|
|
7
|
+
*
|
|
8
|
+
* Without this configuration, Tailwind Merge wouldn't know these classes are meant
|
|
9
|
+
* to override each other, potentially leading to multiple conflicting classes
|
|
10
|
+
* being applied simultaneously.
|
|
11
|
+
*/
|
|
12
|
+
export declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
|
|
13
|
+
//# sourceMappingURL=tw-merge.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tw-merge.d.cts","sourceRoot":"","sources":["../../src/utils/tw-merge.ts"],"names":[],"mappings":"AAqBA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO,sEAgClB,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom Tailwind Merge configuration to handle our design system's typography classes.
|
|
3
|
+
* This extends the default Tailwind Merge behavior to properly handle conflicts between:
|
|
4
|
+
* 1. Custom text color classes (text-default, text-alternative, text-muted)
|
|
5
|
+
* 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)
|
|
6
|
+
* 3. Standard and custom font weight classes
|
|
7
|
+
*
|
|
8
|
+
* Without this configuration, Tailwind Merge wouldn't know these classes are meant
|
|
9
|
+
* to override each other, potentially leading to multiple conflicting classes
|
|
10
|
+
* being applied simultaneously.
|
|
11
|
+
*/
|
|
12
|
+
export declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
|
|
13
|
+
//# sourceMappingURL=tw-merge.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tw-merge.d.mts","sourceRoot":"","sources":["../../src/utils/tw-merge.ts"],"names":[],"mappings":"AAqBA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO,sEAgClB,CAAC"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
2
|
+
const variantClassGroups = [
|
|
3
|
+
's-display-md',
|
|
4
|
+
's-heading-lg',
|
|
5
|
+
's-heading-md',
|
|
6
|
+
's-heading-sm',
|
|
7
|
+
's-body-lg',
|
|
8
|
+
's-body-md',
|
|
9
|
+
's-body-sm',
|
|
10
|
+
's-body-xs',
|
|
11
|
+
'l-display-md',
|
|
12
|
+
'l-heading-lg',
|
|
13
|
+
'l-heading-md',
|
|
14
|
+
'l-heading-sm',
|
|
15
|
+
'l-body-lg',
|
|
16
|
+
'l-body-md',
|
|
17
|
+
'l-body-sm',
|
|
18
|
+
'l-body-xs',
|
|
19
|
+
];
|
|
20
|
+
/**
|
|
21
|
+
* Custom Tailwind Merge configuration to handle our design system's typography classes.
|
|
22
|
+
* This extends the default Tailwind Merge behavior to properly handle conflicts between:
|
|
23
|
+
* 1. Custom text color classes (text-default, text-alternative, text-muted)
|
|
24
|
+
* 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)
|
|
25
|
+
* 3. Standard and custom font weight classes
|
|
26
|
+
*
|
|
27
|
+
* Without this configuration, Tailwind Merge wouldn't know these classes are meant
|
|
28
|
+
* to override each other, potentially leading to multiple conflicting classes
|
|
29
|
+
* being applied simultaneously.
|
|
30
|
+
*/
|
|
31
|
+
export const twMerge = extendTailwindMerge({
|
|
32
|
+
extend: {
|
|
33
|
+
classGroups: {
|
|
34
|
+
'text-color': ['text-default', 'text-alternative', 'text-muted'],
|
|
35
|
+
'font-size': [
|
|
36
|
+
{
|
|
37
|
+
text: variantClassGroups,
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
'font-weight': [
|
|
41
|
+
// Standard Tailwind font weights
|
|
42
|
+
'font-thin',
|
|
43
|
+
'font-extralight',
|
|
44
|
+
'font-light',
|
|
45
|
+
'font-normal',
|
|
46
|
+
'font-medium',
|
|
47
|
+
'font-semibold',
|
|
48
|
+
'font-bold',
|
|
49
|
+
'font-extrabold',
|
|
50
|
+
'font-black',
|
|
51
|
+
// Custom typography classes
|
|
52
|
+
{
|
|
53
|
+
font: variantClassGroups,
|
|
54
|
+
},
|
|
55
|
+
],
|
|
56
|
+
},
|
|
57
|
+
conflictingClassGroups: {
|
|
58
|
+
'text-color': ['text-color'],
|
|
59
|
+
'font-size': ['font-size'],
|
|
60
|
+
'font-weight': ['font-weight'],
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
});
|
|
64
|
+
//# sourceMappingURL=tw-merge.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tw-merge.mjs","sourceRoot":"","sources":["../../src/utils/tw-merge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uBAAuB;AAErD,MAAM,kBAAkB,GAAG;IACzB,cAAc;IACd,cAAc;IACd,cAAc;IACd,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,cAAc;IACd,cAAc;IACd,cAAc;IACd,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACZ,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC;IACzC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,YAAY,EAAE,CAAC,cAAc,EAAE,kBAAkB,EAAE,YAAY,CAAC;YAChE,WAAW,EAAE;gBACX;oBACE,IAAI,EAAE,kBAAkB;iBACzB;aACF;YACD,aAAa,EAAE;gBACb,iCAAiC;gBACjC,WAAW;gBACX,iBAAiB;gBACjB,YAAY;gBACZ,aAAa;gBACb,aAAa;gBACb,eAAe;gBACf,WAAW;gBACX,gBAAgB;gBAChB,YAAY;gBACZ,4BAA4B;gBAC5B;oBACE,IAAI,EAAE,kBAAkB;iBACzB;aACF;SACF;QACD,sBAAsB,EAAE;YACtB,YAAY,EAAE,CAAC,YAAY,CAAC;YAC5B,WAAW,EAAE,CAAC,WAAW,CAAC;YAC1B,aAAa,EAAE,CAAC,aAAa,CAAC;SAC/B;KACF;CACF,CAAC,CAAC","sourcesContent":["import { extendTailwindMerge } from 'tailwind-merge';\n\nconst variantClassGroups = [\n 's-display-md',\n 's-heading-lg',\n 's-heading-md',\n 's-heading-sm',\n 's-body-lg',\n 's-body-md',\n 's-body-sm',\n 's-body-xs',\n 'l-display-md',\n 'l-heading-lg',\n 'l-heading-md',\n 'l-heading-sm',\n 'l-body-lg',\n 'l-body-md',\n 'l-body-sm',\n 'l-body-xs',\n];\n\n/**\n * Custom Tailwind Merge configuration to handle our design system's typography classes.\n * This extends the default Tailwind Merge behavior to properly handle conflicts between:\n * 1. Custom text color classes (text-default, text-alternative, text-muted)\n * 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)\n * 3. Standard and custom font weight classes\n *\n * Without this configuration, Tailwind Merge wouldn't know these classes are meant\n * to override each other, potentially leading to multiple conflicting classes\n * being applied simultaneously.\n */\nexport const twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n 'text-color': ['text-default', 'text-alternative', 'text-muted'],\n 'font-size': [\n {\n text: variantClassGroups,\n },\n ],\n 'font-weight': [\n // Standard Tailwind font weights\n 'font-thin',\n 'font-extralight',\n 'font-light',\n 'font-normal',\n 'font-medium',\n 'font-semibold',\n 'font-bold',\n 'font-extrabold',\n 'font-black',\n // Custom typography classes\n {\n font: variantClassGroups,\n },\n ],\n },\n conflictingClassGroups: {\n 'text-color': ['text-color'],\n 'font-size': ['font-size'],\n 'font-weight': ['font-weight'],\n },\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask-previews/design-system-react",
|
|
3
|
-
"version": "0.0.0-preview.
|
|
3
|
+
"version": "0.0.0-preview.f4da8f1",
|
|
4
4
|
"description": "Design system react ui components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
],
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references",
|
|
39
|
-
"build:docs": "typedoc",
|
|
40
39
|
"changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-react",
|
|
41
40
|
"changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-react",
|
|
42
41
|
"publish:preview": "yarn npm publish --tag preview",
|
|
@@ -46,8 +45,11 @@
|
|
|
46
45
|
"test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
|
|
47
46
|
"test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
|
|
48
47
|
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"tailwind-merge": "^2.0.0"
|
|
50
|
+
},
|
|
49
51
|
"devDependencies": {
|
|
50
|
-
"@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.
|
|
52
|
+
"@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.f4da8f1",
|
|
51
53
|
"@metamask/auto-changelog": "^3.4.4",
|
|
52
54
|
"@storybook/react": "^8.3.5",
|
|
53
55
|
"@storybook/test": "^8.3.5",
|
|
@@ -57,14 +59,13 @@
|
|
|
57
59
|
"@types/react": "^18.2.0",
|
|
58
60
|
"@types/react-dom": "^18.2.0",
|
|
59
61
|
"deepmerge": "^4.2.2",
|
|
60
|
-
"jest": "^
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"typedoc-plugin-missing-exports": "^2.0.0",
|
|
62
|
+
"jest": "^29.7.0",
|
|
63
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
64
|
+
"ts-jest": "^29.2.5",
|
|
64
65
|
"typescript": "~5.2.2"
|
|
65
66
|
},
|
|
66
67
|
"peerDependencies": {
|
|
67
|
-
"@metamask/design-tokens": "^4.
|
|
68
|
+
"@metamask/design-tokens": "^4.1.0",
|
|
68
69
|
"react": "^16.0.0",
|
|
69
70
|
"react-dom": "^16.0.0",
|
|
70
71
|
"tailwindcss": "^3.0.0"
|
package/dist/Button.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.cjs","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CAC7D,0CACE,SAAS,EAAC,+DAA+D,KACrE,KAAK,IAER,QAAQ,CACF,CACV,CAAC;AAPW,QAAA,MAAM,UAOjB","sourcesContent":["import React from 'react';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Button contents */\n children: React.ReactNode;\n}\n\nexport const Button = ({ children, ...props }: ButtonProps) => (\n <button\n className=\"px-4 h-8 rounded-full bg-primary-default text-primary-inverse\"\n {...props}\n >\n {children}\n </button>\n);\n"]}
|
package/dist/Button.d.cts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.cts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBAOzD,CAAC"}
|
package/dist/Button.d.mts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.mts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBAOzD,CAAC"}
|
package/dist/Button.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAQ1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CAC7D,gCACE,SAAS,EAAC,+DAA+D,KACrE,KAAK,IAER,QAAQ,CACF,CACV,CAAC","sourcesContent":["import React from 'react';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Button contents */\n children: React.ReactNode;\n}\n\nexport const Button = ({ children, ...props }: ButtonProps) => (\n <button\n className=\"px-4 h-8 rounded-full bg-primary-default text-primary-inverse\"\n {...props}\n >\n {children}\n </button>\n);\n"]}
|