@a-type/ui 6.0.67 → 6.0.69
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/typography/typography.d.ts +3 -1
- package/dist/components/typography/typography.js +3 -1
- package/dist/components/typography/typography.js.map +1 -1
- package/dist/components/typography/typography.module.css +15 -2
- package/package.json +1 -1
- package/src/components/typography/typography.module.css +15 -2
- package/src/components/typography/typography.tsx +6 -0
|
@@ -12,8 +12,10 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
|
|
|
12
12
|
truncate?: boolean;
|
|
13
13
|
dim?: boolean;
|
|
14
14
|
color?: 'neutral' | 'main' | 'attention' | 'success';
|
|
15
|
+
wrap?: boolean;
|
|
16
|
+
align?: 'start' | 'center' | 'end';
|
|
15
17
|
}
|
|
16
|
-
export declare function Text({ emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, color, normal, uppercase, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
18
|
+
export declare function Text({ emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, color, normal, uppercase, wrap, align, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
17
19
|
export declare const Heading: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
20
|
export declare const HeroText: import("react").FunctionComponent<TypographyProps>;
|
|
19
21
|
export declare const P: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -16,7 +16,7 @@ import { withClassName } from '../../hooks/withClassName.js';
|
|
|
16
16
|
import { withProps } from '../../hooks/withProps.js';
|
|
17
17
|
import cls from './typography.module.css';
|
|
18
18
|
export function Text(_a) {
|
|
19
|
-
var { emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, color, normal, uppercase } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className", "bold", "thin", "truncate", "dim", "color", "normal", "uppercase"]);
|
|
19
|
+
var { emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, color, normal, uppercase, wrap, align } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className", "bold", "thin", "truncate", "dim", "color", "normal", "uppercase", "wrap", "align"]);
|
|
20
20
|
return useRender({
|
|
21
21
|
render,
|
|
22
22
|
defaultTagName: 'span',
|
|
@@ -33,6 +33,8 @@ export function Text(_a) {
|
|
|
33
33
|
color: color ? color : undefined,
|
|
34
34
|
normal: normal ? true : undefined,
|
|
35
35
|
uppercase: uppercase ? true : undefined,
|
|
36
|
+
wrap,
|
|
37
|
+
align,
|
|
36
38
|
},
|
|
37
39
|
});
|
|
38
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,GAAG,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"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"}
|
|
@@ -46,8 +46,11 @@
|
|
|
46
46
|
white-space: nowrap;
|
|
47
47
|
max-width: 100%;
|
|
48
48
|
}
|
|
49
|
-
&[data-wrap] {
|
|
50
|
-
|
|
49
|
+
&[data-wrap='true'] {
|
|
50
|
+
white-space: wrap;
|
|
51
|
+
}
|
|
52
|
+
&[data-wrap='false'] {
|
|
53
|
+
white-space: nowrap;
|
|
51
54
|
}
|
|
52
55
|
&[data-dim],
|
|
53
56
|
:where([data-dim='true']) & {
|
|
@@ -66,6 +69,16 @@
|
|
|
66
69
|
&[data-color='success'] {
|
|
67
70
|
@apply --mx-fg(var(--m-color-palette-success-heavy));
|
|
68
71
|
}
|
|
72
|
+
|
|
73
|
+
&[data-align='start'] {
|
|
74
|
+
text-align: start;
|
|
75
|
+
}
|
|
76
|
+
&[data-align='center'] {
|
|
77
|
+
text-align: center;
|
|
78
|
+
}
|
|
79
|
+
&[data-align='end'] {
|
|
80
|
+
text-align: end;
|
|
81
|
+
}
|
|
69
82
|
}
|
|
70
83
|
|
|
71
84
|
@layer components {
|
package/package.json
CHANGED
|
@@ -46,8 +46,11 @@
|
|
|
46
46
|
white-space: nowrap;
|
|
47
47
|
max-width: 100%;
|
|
48
48
|
}
|
|
49
|
-
&[data-wrap] {
|
|
50
|
-
|
|
49
|
+
&[data-wrap='true'] {
|
|
50
|
+
white-space: wrap;
|
|
51
|
+
}
|
|
52
|
+
&[data-wrap='false'] {
|
|
53
|
+
white-space: nowrap;
|
|
51
54
|
}
|
|
52
55
|
&[data-dim],
|
|
53
56
|
:where([data-dim='true']) & {
|
|
@@ -66,6 +69,16 @@
|
|
|
66
69
|
&[data-color='success'] {
|
|
67
70
|
@apply --mx-fg(var(--m-color-palette-success-heavy));
|
|
68
71
|
}
|
|
72
|
+
|
|
73
|
+
&[data-align='start'] {
|
|
74
|
+
text-align: start;
|
|
75
|
+
}
|
|
76
|
+
&[data-align='center'] {
|
|
77
|
+
text-align: center;
|
|
78
|
+
}
|
|
79
|
+
&[data-align='end'] {
|
|
80
|
+
text-align: end;
|
|
81
|
+
}
|
|
69
82
|
}
|
|
70
83
|
|
|
71
84
|
@layer components {
|
|
@@ -17,6 +17,8 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
|
|
|
17
17
|
truncate?: boolean;
|
|
18
18
|
dim?: boolean;
|
|
19
19
|
color?: 'neutral' | 'main' | 'attention' | 'success';
|
|
20
|
+
wrap?: boolean;
|
|
21
|
+
align?: 'start' | 'center' | 'end';
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
export function Text({
|
|
@@ -33,6 +35,8 @@ export function Text({
|
|
|
33
35
|
color,
|
|
34
36
|
normal,
|
|
35
37
|
uppercase,
|
|
38
|
+
wrap,
|
|
39
|
+
align,
|
|
36
40
|
...rest
|
|
37
41
|
}: TypographyProps) {
|
|
38
42
|
return useRender({
|
|
@@ -54,6 +58,8 @@ export function Text({
|
|
|
54
58
|
color: color ? color : undefined,
|
|
55
59
|
normal: normal ? true : undefined,
|
|
56
60
|
uppercase: uppercase ? true : undefined,
|
|
61
|
+
wrap,
|
|
62
|
+
align,
|
|
57
63
|
},
|
|
58
64
|
});
|
|
59
65
|
}
|