@fluentui/react-text 9.0.0-rc.5 → 9.0.0-rc.8

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.
Files changed (133) hide show
  1. package/CHANGELOG.json +128 -1
  2. package/CHANGELOG.md +87 -51
  3. package/dist/{react-text.d.ts → index.d.ts} +51 -0
  4. package/{lib → dist}/tsdoc-metadata.json +0 -0
  5. package/lib/components/Body/Body.js +12 -5
  6. package/lib/components/Body/Body.js.map +1 -1
  7. package/lib/components/Caption/Caption.js +12 -5
  8. package/lib/components/Caption/Caption.js.map +1 -1
  9. package/lib/components/Display/Display.js +12 -5
  10. package/lib/components/Display/Display.js.map +1 -1
  11. package/lib/components/Headline/Headline.js +12 -5
  12. package/lib/components/Headline/Headline.js.map +1 -1
  13. package/lib/components/LargeTitle/LargeTitle.js +12 -5
  14. package/lib/components/LargeTitle/LargeTitle.js.map +1 -1
  15. package/lib/components/Subheadline/Subheadline.js +12 -5
  16. package/lib/components/Subheadline/Subheadline.js.map +1 -1
  17. package/lib/components/Text/useTextStyles.js +8 -1
  18. package/lib/components/Text/useTextStyles.js.map +1 -1
  19. package/lib/components/Title1/Title1.js +12 -5
  20. package/lib/components/Title1/Title1.js.map +1 -1
  21. package/lib/components/Title2/Title2.js +12 -5
  22. package/lib/components/Title2/Title2.js.map +1 -1
  23. package/lib/components/Title3/Title3.js +12 -5
  24. package/lib/components/Title3/Title3.js.map +1 -1
  25. package/lib/index.js +11 -10
  26. package/lib/index.js.map +1 -1
  27. package/lib-commonjs/components/Body/Body.js +21 -5
  28. package/lib-commonjs/components/Body/Body.js.map +1 -1
  29. package/lib-commonjs/components/Caption/Caption.js +21 -5
  30. package/lib-commonjs/components/Caption/Caption.js.map +1 -1
  31. package/lib-commonjs/components/Display/Display.js +21 -5
  32. package/lib-commonjs/components/Display/Display.js.map +1 -1
  33. package/lib-commonjs/components/Headline/Headline.js +21 -5
  34. package/lib-commonjs/components/Headline/Headline.js.map +1 -1
  35. package/lib-commonjs/components/LargeTitle/LargeTitle.js +21 -5
  36. package/lib-commonjs/components/LargeTitle/LargeTitle.js.map +1 -1
  37. package/lib-commonjs/components/Subheadline/Subheadline.js +21 -5
  38. package/lib-commonjs/components/Subheadline/Subheadline.js.map +1 -1
  39. package/lib-commonjs/components/Text/useTextStyles.js +9 -2
  40. package/lib-commonjs/components/Text/useTextStyles.js.map +1 -1
  41. package/lib-commonjs/components/Title1/Title1.js +21 -5
  42. package/lib-commonjs/components/Title1/Title1.js.map +1 -1
  43. package/lib-commonjs/components/Title2/Title2.js +21 -5
  44. package/lib-commonjs/components/Title2/Title2.js.map +1 -1
  45. package/lib-commonjs/components/Title3/Title3.js +21 -5
  46. package/lib-commonjs/components/Title3/Title3.js.map +1 -1
  47. package/lib-commonjs/index.js +219 -11
  48. package/lib-commonjs/index.js.map +1 -1
  49. package/package.json +9 -19
  50. package/lib/Body.d.ts +0 -1
  51. package/lib/Caption.d.ts +0 -1
  52. package/lib/Display.d.ts +0 -1
  53. package/lib/Headline.d.ts +0 -1
  54. package/lib/LargeTitle.d.ts +0 -1
  55. package/lib/Subheadline.d.ts +0 -1
  56. package/lib/Text.d.ts +0 -1
  57. package/lib/Title1.d.ts +0 -1
  58. package/lib/Title2.d.ts +0 -1
  59. package/lib/Title3.d.ts +0 -1
  60. package/lib/components/Body/Body.d.ts +0 -7
  61. package/lib/components/Body/index.d.ts +0 -1
  62. package/lib/components/Caption/Caption.d.ts +0 -7
  63. package/lib/components/Caption/index.d.ts +0 -1
  64. package/lib/components/Display/Display.d.ts +0 -7
  65. package/lib/components/Display/index.d.ts +0 -1
  66. package/lib/components/Headline/Headline.d.ts +0 -7
  67. package/lib/components/Headline/index.d.ts +0 -1
  68. package/lib/components/LargeTitle/LargeTitle.d.ts +0 -7
  69. package/lib/components/LargeTitle/index.d.ts +0 -1
  70. package/lib/components/Subheadline/Subheadline.d.ts +0 -7
  71. package/lib/components/Subheadline/index.d.ts +0 -1
  72. package/lib/components/Text/Text.d.ts +0 -6
  73. package/lib/components/Text/Text.types.d.ts +0 -78
  74. package/lib/components/Text/index.d.ts +0 -5
  75. package/lib/components/Text/renderText.d.ts +0 -5
  76. package/lib/components/Text/useText.d.ts +0 -12
  77. package/lib/components/Text/useTextStyles.d.ts +0 -6
  78. package/lib/components/Title1/Title1.d.ts +0 -7
  79. package/lib/components/Title1/index.d.ts +0 -1
  80. package/lib/components/Title2/Title2.d.ts +0 -7
  81. package/lib/components/Title2/index.d.ts +0 -1
  82. package/lib/components/Title3/Title3.d.ts +0 -7
  83. package/lib/components/Title3/index.d.ts +0 -1
  84. package/lib/components/wrapper.d.ts +0 -8
  85. package/lib/index.d.ts +0 -10
  86. package/lib/typographyStyles/index.d.ts +0 -2
  87. package/lib/typographyStyles/index.js +0 -3
  88. package/lib/typographyStyles/index.js.map +0 -1
  89. package/lib/typographyStyles/typographyStyles.d.ts +0 -13
  90. package/lib/typographyStyles/typographyStyles.js +0 -60
  91. package/lib/typographyStyles/typographyStyles.js.map +0 -1
  92. package/lib-commonjs/Body.d.ts +0 -1
  93. package/lib-commonjs/Caption.d.ts +0 -1
  94. package/lib-commonjs/Display.d.ts +0 -1
  95. package/lib-commonjs/Headline.d.ts +0 -1
  96. package/lib-commonjs/LargeTitle.d.ts +0 -1
  97. package/lib-commonjs/Subheadline.d.ts +0 -1
  98. package/lib-commonjs/Text.d.ts +0 -1
  99. package/lib-commonjs/Title1.d.ts +0 -1
  100. package/lib-commonjs/Title2.d.ts +0 -1
  101. package/lib-commonjs/Title3.d.ts +0 -1
  102. package/lib-commonjs/components/Body/Body.d.ts +0 -7
  103. package/lib-commonjs/components/Body/index.d.ts +0 -1
  104. package/lib-commonjs/components/Caption/Caption.d.ts +0 -7
  105. package/lib-commonjs/components/Caption/index.d.ts +0 -1
  106. package/lib-commonjs/components/Display/Display.d.ts +0 -7
  107. package/lib-commonjs/components/Display/index.d.ts +0 -1
  108. package/lib-commonjs/components/Headline/Headline.d.ts +0 -7
  109. package/lib-commonjs/components/Headline/index.d.ts +0 -1
  110. package/lib-commonjs/components/LargeTitle/LargeTitle.d.ts +0 -7
  111. package/lib-commonjs/components/LargeTitle/index.d.ts +0 -1
  112. package/lib-commonjs/components/Subheadline/Subheadline.d.ts +0 -7
  113. package/lib-commonjs/components/Subheadline/index.d.ts +0 -1
  114. package/lib-commonjs/components/Text/Text.d.ts +0 -6
  115. package/lib-commonjs/components/Text/Text.types.d.ts +0 -78
  116. package/lib-commonjs/components/Text/index.d.ts +0 -5
  117. package/lib-commonjs/components/Text/renderText.d.ts +0 -5
  118. package/lib-commonjs/components/Text/useText.d.ts +0 -12
  119. package/lib-commonjs/components/Text/useTextStyles.d.ts +0 -6
  120. package/lib-commonjs/components/Title1/Title1.d.ts +0 -7
  121. package/lib-commonjs/components/Title1/index.d.ts +0 -1
  122. package/lib-commonjs/components/Title2/Title2.d.ts +0 -7
  123. package/lib-commonjs/components/Title2/index.d.ts +0 -1
  124. package/lib-commonjs/components/Title3/Title3.d.ts +0 -7
  125. package/lib-commonjs/components/Title3/index.d.ts +0 -1
  126. package/lib-commonjs/components/wrapper.d.ts +0 -8
  127. package/lib-commonjs/index.d.ts +0 -10
  128. package/lib-commonjs/typographyStyles/index.d.ts +0 -2
  129. package/lib-commonjs/typographyStyles/index.js +0 -11
  130. package/lib-commonjs/typographyStyles/index.js.map +0 -1
  131. package/lib-commonjs/typographyStyles/typographyStyles.d.ts +0 -13
  132. package/lib-commonjs/typographyStyles/typographyStyles.js +0 -68
  133. package/lib-commonjs/typographyStyles/typographyStyles.js.map +0 -1
@@ -1 +0,0 @@
1
- export * from './Title3';
@@ -1,8 +0,0 @@
1
- import * as React from 'react';
2
- import type { TextProps } from '../Text';
3
- export declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
4
- export declare function createWrapper(options: {
5
- className: string;
6
- displayName: string;
7
- useStyles: () => Record<'root', string>;
8
- }): React.FunctionComponent<TextWrapperProps>;
package/lib/index.d.ts DELETED
@@ -1,10 +0,0 @@
1
- export * from './Text';
2
- export * from './Display';
3
- export * from './LargeTitle';
4
- export * from './Title1';
5
- export * from './Title2';
6
- export * from './Title3';
7
- export * from './Headline';
8
- export * from './Subheadline';
9
- export * from './Body';
10
- export * from './Caption';
@@ -1,2 +0,0 @@
1
- import * as typographyStyles from './typographyStyles';
2
- export { typographyStyles };
@@ -1,3 +0,0 @@
1
- import * as typographyStyles from './typographyStyles';
2
- export { typographyStyles };
3
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["typographyStyles/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import * as typographyStyles from './typographyStyles';\nexport { typographyStyles };\n"]}
@@ -1,13 +0,0 @@
1
- import type { GriffelStyle } from '@griffel/react';
2
- /**
3
- * Make-styles rules for the typography variants
4
- */
5
- export declare const caption: GriffelStyle;
6
- export declare const body: GriffelStyle;
7
- export declare const subheadline: GriffelStyle;
8
- export declare const headline: GriffelStyle;
9
- export declare const title3: GriffelStyle;
10
- export declare const title2: GriffelStyle;
11
- export declare const title1: GriffelStyle;
12
- export declare const largeTitle: GriffelStyle;
13
- export declare const display: GriffelStyle;
@@ -1,60 +0,0 @@
1
- import { tokens } from '@fluentui/react-theme';
2
- /**
3
- * Make-styles rules for the typography variants
4
- */
5
-
6
- export const caption = {
7
- fontFamily: tokens.fontFamilyBase,
8
- fontSize: tokens.fontSizeBase200,
9
- lineHeight: tokens.lineHeightBase200,
10
- fontWeight: tokens.fontWeightRegular
11
- };
12
- export const body = {
13
- fontFamily: tokens.fontFamilyBase,
14
- fontSize: tokens.fontSizeBase300,
15
- lineHeight: tokens.lineHeightBase300,
16
- fontWeight: tokens.fontWeightRegular
17
- };
18
- export const subheadline = {
19
- fontFamily: tokens.fontFamilyBase,
20
- fontSize: tokens.fontSizeBase400,
21
- lineHeight: tokens.lineHeightBase400,
22
- fontWeight: tokens.fontWeightSemibold
23
- };
24
- export const headline = {
25
- fontFamily: tokens.fontFamilyBase,
26
- fontSize: tokens.fontSizeBase500,
27
- lineHeight: tokens.lineHeightBase500,
28
- fontWeight: tokens.fontWeightSemibold
29
- };
30
- export const title3 = {
31
- fontFamily: tokens.fontFamilyBase,
32
- fontSize: tokens.fontSizeBase600,
33
- lineHeight: tokens.lineHeightBase600,
34
- fontWeight: tokens.fontWeightSemibold
35
- };
36
- export const title2 = {
37
- fontFamily: tokens.fontFamilyBase,
38
- fontSize: tokens.fontSizeHero700,
39
- lineHeight: tokens.lineHeightHero700,
40
- fontWeight: tokens.fontWeightSemibold
41
- };
42
- export const title1 = {
43
- fontFamily: tokens.fontFamilyBase,
44
- fontSize: tokens.fontSizeHero800,
45
- lineHeight: tokens.lineHeightHero800,
46
- fontWeight: tokens.fontWeightSemibold
47
- };
48
- export const largeTitle = {
49
- fontFamily: tokens.fontFamilyBase,
50
- fontSize: tokens.fontSizeHero900,
51
- lineHeight: tokens.lineHeightHero900,
52
- fontWeight: tokens.fontWeightSemibold
53
- };
54
- export const display = {
55
- fontFamily: tokens.fontFamilyBase,
56
- fontSize: tokens.fontSizeHero1000,
57
- lineHeight: tokens.lineHeightHero1000,
58
- fontWeight: tokens.fontWeightSemibold
59
- };
60
- //# sourceMappingURL=typographyStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["typographyStyles/typographyStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAGA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAAiB;AACnC,EAAA,UAAU,EAAE,MAAM,CAAC,cADgB;AAEnC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFkB;AAGnC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHgB;AAInC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJgB,CAA9B;AAMP,OAAO,MAAM,IAAI,GAAiB;AAChC,EAAA,UAAU,EAAE,MAAM,CAAC,cADa;AAEhC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFe;AAGhC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHa;AAIhC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJa,CAA3B;AAMP,OAAO,MAAM,WAAW,GAAiB;AACvC,EAAA,UAAU,EAAE,MAAM,CAAC,cADoB;AAEvC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFsB;AAGvC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHoB;AAIvC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJoB,CAAlC;AAMP,OAAO,MAAM,QAAQ,GAAiB;AACpC,EAAA,UAAU,EAAE,MAAM,CAAC,cADiB;AAEpC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFmB;AAGpC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHiB;AAIpC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJiB,CAA/B;AAMP,OAAO,MAAM,MAAM,GAAiB;AAClC,EAAA,UAAU,EAAE,MAAM,CAAC,cADe;AAElC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFiB;AAGlC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHe;AAIlC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJe,CAA7B;AAMP,OAAO,MAAM,MAAM,GAAiB;AAClC,EAAA,UAAU,EAAE,MAAM,CAAC,cADe;AAElC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFiB;AAGlC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHe;AAIlC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJe,CAA7B;AAMP,OAAO,MAAM,MAAM,GAAiB;AAClC,EAAA,UAAU,EAAE,MAAM,CAAC,cADe;AAElC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFiB;AAGlC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHe;AAIlC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJe,CAA7B;AAMP,OAAO,MAAM,UAAU,GAAiB;AACtC,EAAA,UAAU,EAAE,MAAM,CAAC,cADmB;AAEtC,EAAA,QAAQ,EAAE,MAAM,CAAC,eAFqB;AAGtC,EAAA,UAAU,EAAE,MAAM,CAAC,iBAHmB;AAItC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJmB,CAAjC;AAMP,OAAO,MAAM,OAAO,GAAiB;AACnC,EAAA,UAAU,EAAE,MAAM,CAAC,cADgB;AAEnC,EAAA,QAAQ,EAAE,MAAM,CAAC,gBAFkB;AAGnC,EAAA,UAAU,EAAE,MAAM,CAAC,kBAHgB;AAInC,EAAA,UAAU,EAAE,MAAM,CAAC;AAJgB,CAA9B","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Make-styles rules for the typography variants\n */\nexport const caption: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n fontWeight: tokens.fontWeightRegular,\n};\nexport const body: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n fontWeight: tokens.fontWeightRegular,\n};\nexport const subheadline: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const headline: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const title3: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase600,\n lineHeight: tokens.lineHeightBase600,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const title2: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeHero700,\n lineHeight: tokens.lineHeightHero700,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const title1: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeHero800,\n lineHeight: tokens.lineHeightHero800,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const largeTitle: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeHero900,\n lineHeight: tokens.lineHeightHero900,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const display: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeHero1000,\n lineHeight: tokens.lineHeightHero1000,\n fontWeight: tokens.fontWeightSemibold,\n};\n"],"sourceRoot":"../src/"}
@@ -1 +0,0 @@
1
- export * from './components/Body/index';
@@ -1 +0,0 @@
1
- export * from './components/Caption/index';
@@ -1 +0,0 @@
1
- export * from './components/Display/index';
@@ -1 +0,0 @@
1
- export * from './components/Headline/index';
@@ -1 +0,0 @@
1
- export * from './components/LargeTitle/index';
@@ -1 +0,0 @@
1
- export * from './components/Subheadline/index';
@@ -1 +0,0 @@
1
- export * from './components/Text/index';
@@ -1 +0,0 @@
1
- export * from './components/Title1/index';
@@ -1 +0,0 @@
1
- export * from './components/Title2/index';
@@ -1 +0,0 @@
1
- export * from './components/Title3/index';
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const bodyClassName = "fui-Body";
4
- /**
5
- * Text wrapper component for the Body typography variant
6
- */
7
- export declare const Body: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './Body';
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const captionClassName = "fui-Caption";
4
- /**
5
- * Text wrapper component for the Caption typography variant
6
- */
7
- export declare const Caption: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './Caption';
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const displayClassName = "fui-Display";
4
- /**
5
- * Text wrapper component for the Display typography variant
6
- */
7
- export declare const Display: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './Display';
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const headlineClassName = "fui-Headline";
4
- /**
5
- * Text wrapper component for the Headline typography variant
6
- */
7
- export declare const Headline: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './Headline';
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const largeTitleClassName = "fui-LargeTitle";
4
- /**
5
- * Text wrapper component for the Large Title typography variant
6
- */
7
- export declare const LargeTitle: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './LargeTitle';
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const subheadlineClassName = "fui-Subheadline";
4
- /**
5
- * Text wrapper component for the Subheadline typography variant
6
- */
7
- export declare const Subheadline: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './Subheadline';
@@ -1,6 +0,0 @@
1
- import type { TextProps } from './Text.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * Typography and styling abstraction component used to ensure consistency of text.
5
- */
6
- export declare const Text: ForwardRefComponent<TextProps>;
@@ -1,78 +0,0 @@
1
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
- /**
3
- * Text slots
4
- */
5
- export declare type TextSlots = {
6
- root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
7
- };
8
- declare type TextCommons = {
9
- /**
10
- * Wraps the text content on white spaces.
11
- *
12
- * @defaultValue true
13
- */
14
- wrap: boolean;
15
- /**
16
- * Truncate overflowing text for block displays.
17
- *
18
- * @defaultValue false
19
- */
20
- truncate: boolean;
21
- /**
22
- * Applies a block display for the content.
23
- *
24
- * @defaultValue false
25
- */
26
- block: boolean;
27
- /**
28
- * Applies the italic font style to the content.
29
- *
30
- * @defaultValue false
31
- */
32
- italic: boolean;
33
- /**
34
- * Applies the underline text decoration to the content.
35
- *
36
- * @defaultValue false
37
- */
38
- underline: boolean;
39
- /**
40
- * Applies the strikethrough text decoration to the content.
41
- *
42
- * @defaultValue false
43
- */
44
- strikethrough: boolean;
45
- /**
46
- * Applies font size and line height based on the theme tokens.
47
- *
48
- * @defaultValue 300
49
- */
50
- size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
51
- /**
52
- * Applies the font family to the content.
53
- *
54
- * @defaultValue base
55
- */
56
- font: 'base' | 'monospace' | 'numeric';
57
- /**
58
- * Applies font weight to the content.
59
- *
60
- * @defaultValue regular
61
- */
62
- weight: 'regular' | 'medium' | 'semibold';
63
- /**
64
- * Aligns text based on the parent container.
65
- *
66
- * @defaultValue start
67
- */
68
- align: 'start' | 'center' | 'end' | 'justify';
69
- };
70
- /**
71
- * Text Props
72
- */
73
- export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;
74
- /**
75
- * State used in rendering Text
76
- */
77
- export declare type TextState = ComponentState<TextSlots> & TextCommons;
78
- export {};
@@ -1,5 +0,0 @@
1
- export * from './Text';
2
- export * from './Text.types';
3
- export * from './renderText';
4
- export * from './useText';
5
- export * from './useTextStyles';
@@ -1,5 +0,0 @@
1
- import type { TextState } from './Text.types';
2
- /**
3
- * Render the final JSX of Text
4
- */
5
- export declare const renderText_unstable: (state: TextState) => JSX.Element;
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { TextProps, TextState } from './Text.types';
3
- /**
4
- * Create the state required to render Text.
5
- *
6
- * The returned state can be modified with hooks such as useTextStyles_unstable,
7
- * before being passed to renderText_unstable.
8
- *
9
- * @param props - props from this instance of Text
10
- * @param ref - reference to root HTMLElement of Text
11
- */
12
- export declare const useText_unstable: (props: TextProps, ref: React.Ref<HTMLElement>) => TextState;
@@ -1,6 +0,0 @@
1
- import type { TextState } from './Text.types';
2
- export declare const textClassName = "fui-Text";
3
- /**
4
- * Apply styling to the Text slots based on the state
5
- */
6
- export declare const useTextStyles_unstable: (state: TextState) => TextState;
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const title1ClassName = "fui-Title1";
4
- /**
5
- * Text wrapper component for the Title 1 typography variant
6
- */
7
- export declare const Title1: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './Title1';
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const title2ClassName = "fui-Title2";
4
- /**
5
- * Text wrapper component for the Title 2 typography variant
6
- */
7
- export declare const Title2: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './Title2';
@@ -1,7 +0,0 @@
1
- import type { FunctionComponent } from 'react';
2
- import { TextWrapperProps } from '../wrapper';
3
- export declare const title3ClassName = "fui-Title3";
4
- /**
5
- * Text wrapper component for the Title 3 typography variant
6
- */
7
- export declare const Title3: FunctionComponent<TextWrapperProps>;
@@ -1 +0,0 @@
1
- export * from './Title3';
@@ -1,8 +0,0 @@
1
- import * as React from 'react';
2
- import type { TextProps } from '../Text';
3
- export declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
4
- export declare function createWrapper(options: {
5
- className: string;
6
- displayName: string;
7
- useStyles: () => Record<'root', string>;
8
- }): React.FunctionComponent<TextWrapperProps>;
@@ -1,10 +0,0 @@
1
- export * from './Text';
2
- export * from './Display';
3
- export * from './LargeTitle';
4
- export * from './Title1';
5
- export * from './Title2';
6
- export * from './Title3';
7
- export * from './Headline';
8
- export * from './Subheadline';
9
- export * from './Body';
10
- export * from './Caption';
@@ -1,2 +0,0 @@
1
- import * as typographyStyles from './typographyStyles';
2
- export { typographyStyles };
@@ -1,11 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.typographyStyles = void 0;
7
-
8
- const typographyStyles = /*#__PURE__*/require("./typographyStyles");
9
-
10
- exports.typographyStyles = typographyStyles;
11
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["typographyStyles/index.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,gBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACS,OAAA,CAAA,gBAAA,GAAA,gBAAA","sourcesContent":["import * as typographyStyles from './typographyStyles';\nexport { typographyStyles };\n"],"sourceRoot":"../src/"}
@@ -1,13 +0,0 @@
1
- import type { GriffelStyle } from '@griffel/react';
2
- /**
3
- * Make-styles rules for the typography variants
4
- */
5
- export declare const caption: GriffelStyle;
6
- export declare const body: GriffelStyle;
7
- export declare const subheadline: GriffelStyle;
8
- export declare const headline: GriffelStyle;
9
- export declare const title3: GriffelStyle;
10
- export declare const title2: GriffelStyle;
11
- export declare const title1: GriffelStyle;
12
- export declare const largeTitle: GriffelStyle;
13
- export declare const display: GriffelStyle;
@@ -1,68 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.display = exports.largeTitle = exports.title1 = exports.title2 = exports.title3 = exports.headline = exports.subheadline = exports.body = exports.caption = void 0;
7
-
8
- const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
9
- /**
10
- * Make-styles rules for the typography variants
11
- */
12
-
13
-
14
- exports.caption = {
15
- fontFamily: react_theme_1.tokens.fontFamilyBase,
16
- fontSize: react_theme_1.tokens.fontSizeBase200,
17
- lineHeight: react_theme_1.tokens.lineHeightBase200,
18
- fontWeight: react_theme_1.tokens.fontWeightRegular
19
- };
20
- exports.body = {
21
- fontFamily: react_theme_1.tokens.fontFamilyBase,
22
- fontSize: react_theme_1.tokens.fontSizeBase300,
23
- lineHeight: react_theme_1.tokens.lineHeightBase300,
24
- fontWeight: react_theme_1.tokens.fontWeightRegular
25
- };
26
- exports.subheadline = {
27
- fontFamily: react_theme_1.tokens.fontFamilyBase,
28
- fontSize: react_theme_1.tokens.fontSizeBase400,
29
- lineHeight: react_theme_1.tokens.lineHeightBase400,
30
- fontWeight: react_theme_1.tokens.fontWeightSemibold
31
- };
32
- exports.headline = {
33
- fontFamily: react_theme_1.tokens.fontFamilyBase,
34
- fontSize: react_theme_1.tokens.fontSizeBase500,
35
- lineHeight: react_theme_1.tokens.lineHeightBase500,
36
- fontWeight: react_theme_1.tokens.fontWeightSemibold
37
- };
38
- exports.title3 = {
39
- fontFamily: react_theme_1.tokens.fontFamilyBase,
40
- fontSize: react_theme_1.tokens.fontSizeBase600,
41
- lineHeight: react_theme_1.tokens.lineHeightBase600,
42
- fontWeight: react_theme_1.tokens.fontWeightSemibold
43
- };
44
- exports.title2 = {
45
- fontFamily: react_theme_1.tokens.fontFamilyBase,
46
- fontSize: react_theme_1.tokens.fontSizeHero700,
47
- lineHeight: react_theme_1.tokens.lineHeightHero700,
48
- fontWeight: react_theme_1.tokens.fontWeightSemibold
49
- };
50
- exports.title1 = {
51
- fontFamily: react_theme_1.tokens.fontFamilyBase,
52
- fontSize: react_theme_1.tokens.fontSizeHero800,
53
- lineHeight: react_theme_1.tokens.lineHeightHero800,
54
- fontWeight: react_theme_1.tokens.fontWeightSemibold
55
- };
56
- exports.largeTitle = {
57
- fontFamily: react_theme_1.tokens.fontFamilyBase,
58
- fontSize: react_theme_1.tokens.fontSizeHero900,
59
- lineHeight: react_theme_1.tokens.lineHeightHero900,
60
- fontWeight: react_theme_1.tokens.fontWeightSemibold
61
- };
62
- exports.display = {
63
- fontFamily: react_theme_1.tokens.fontFamilyBase,
64
- fontSize: react_theme_1.tokens.fontSizeHero1000,
65
- lineHeight: react_theme_1.tokens.lineHeightHero1000,
66
- fontWeight: react_theme_1.tokens.fontWeightSemibold
67
- };
68
- //# sourceMappingURL=typographyStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["typographyStyles/typographyStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Make-styles rules for the typography variants\n */\nexport const caption: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n fontWeight: tokens.fontWeightRegular,\n};\nexport const body: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n fontWeight: tokens.fontWeightRegular,\n};\nexport const subheadline: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const headline: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const title3: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase600,\n lineHeight: tokens.lineHeightBase600,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const title2: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeHero700,\n lineHeight: tokens.lineHeightHero700,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const title1: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeHero800,\n lineHeight: tokens.lineHeightHero800,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const largeTitle: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeHero900,\n lineHeight: tokens.lineHeightHero900,\n fontWeight: tokens.fontWeightSemibold,\n};\nexport const display: GriffelStyle = {\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeHero1000,\n lineHeight: tokens.lineHeightHero1000,\n fontWeight: tokens.fontWeightSemibold,\n};\n"],"sourceRoot":"../src/"}