@fluentui/react-card 0.0.0-nightly-20220302-0405.1

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 (208) hide show
  1. package/CHANGELOG.json +1477 -0
  2. package/CHANGELOG.md +463 -0
  3. package/LICENSE +15 -0
  4. package/README.md +13 -0
  5. package/Spec.md +523 -0
  6. package/assets/Card.png +0 -0
  7. package/assets/CardHeader.png +0 -0
  8. package/assets/CardPreview.png +0 -0
  9. package/assets/ai_deck_template.png +0 -0
  10. package/assets/avatar_elvia.svg +9 -0
  11. package/assets/avatar_mauricio.svg +9 -0
  12. package/assets/context-interaction-keyboard.png +0 -0
  13. package/assets/context-interaction-mouse.png +0 -0
  14. package/assets/context-narrator.png +0 -0
  15. package/assets/disabled-narrator.png +0 -0
  16. package/assets/disabled.png +0 -0
  17. package/assets/doc_template.png +0 -0
  18. package/assets/interactive-interaction-keyboard.png +0 -0
  19. package/assets/interactive-interaction-mouse.png +0 -0
  20. package/assets/interactive-narrator.png +0 -0
  21. package/assets/non-interactive-interaction-keyboard.png +0 -0
  22. package/assets/non-interactive-interaction-mouse.png +0 -0
  23. package/assets/non-interactive-narrator.png +0 -0
  24. package/assets/non-interactive-selectable-interaction-keyboard.png +0 -0
  25. package/assets/non-interactive-selectable-interaction-mouse.png +0 -0
  26. package/assets/powerpoint_logo.svg +9 -0
  27. package/assets/sales_template.png +0 -0
  28. package/assets/selectable-interaction-keyboard.png +0 -0
  29. package/assets/selectable-interaction-mouse.png +0 -0
  30. package/assets/selectable-narrator.png +0 -0
  31. package/assets/word_logo.svg +9 -0
  32. package/dist/react-card.d.ts +186 -0
  33. package/lib/Card.d.ts +1 -0
  34. package/lib/Card.js +2 -0
  35. package/lib/Card.js.map +1 -0
  36. package/lib/CardFooter.d.ts +1 -0
  37. package/lib/CardFooter.js +2 -0
  38. package/lib/CardFooter.js.map +1 -0
  39. package/lib/CardHeader.d.ts +1 -0
  40. package/lib/CardHeader.js +2 -0
  41. package/lib/CardHeader.js.map +1 -0
  42. package/lib/CardPreview.d.ts +1 -0
  43. package/lib/CardPreview.js +2 -0
  44. package/lib/CardPreview.js.map +1 -0
  45. package/lib/components/Card/Card.d.ts +6 -0
  46. package/lib/components/Card/Card.js +15 -0
  47. package/lib/components/Card/Card.js.map +1 -0
  48. package/lib/components/Card/Card.types.d.ts +15 -0
  49. package/lib/components/Card/Card.types.js +2 -0
  50. package/lib/components/Card/Card.types.js.map +1 -0
  51. package/lib/components/Card/index.d.ts +5 -0
  52. package/lib/components/Card/index.js +6 -0
  53. package/lib/components/Card/index.js.map +1 -0
  54. package/lib/components/Card/renderCard.d.ts +5 -0
  55. package/lib/components/Card/renderCard.js +15 -0
  56. package/lib/components/Card/renderCard.js.map +1 -0
  57. package/lib/components/Card/useCard.d.ts +12 -0
  58. package/lib/components/Card/useCard.js +33 -0
  59. package/lib/components/Card/useCard.js.map +1 -0
  60. package/lib/components/Card/useCardStyles.d.ts +6 -0
  61. package/lib/components/Card/useCardStyles.js +150 -0
  62. package/lib/components/Card/useCardStyles.js.map +1 -0
  63. package/lib/components/CardFooter/CardFooter.d.ts +6 -0
  64. package/lib/components/CardFooter/CardFooter.js +15 -0
  65. package/lib/components/CardFooter/CardFooter.js.map +1 -0
  66. package/lib/components/CardFooter/CardFooter.types.d.ts +13 -0
  67. package/lib/components/CardFooter/CardFooter.types.js +2 -0
  68. package/lib/components/CardFooter/CardFooter.types.js.map +1 -0
  69. package/lib/components/CardFooter/index.d.ts +5 -0
  70. package/lib/components/CardFooter/index.js +6 -0
  71. package/lib/components/CardFooter/index.js.map +1 -0
  72. package/lib/components/CardFooter/renderCardFooter.d.ts +5 -0
  73. package/lib/components/CardFooter/renderCardFooter.js +16 -0
  74. package/lib/components/CardFooter/renderCardFooter.js.map +1 -0
  75. package/lib/components/CardFooter/useCardFooter.d.ts +12 -0
  76. package/lib/components/CardFooter/useCardFooter.js +28 -0
  77. package/lib/components/CardFooter/useCardFooter.js.map +1 -0
  78. package/lib/components/CardFooter/useCardFooterStyles.d.ts +6 -0
  79. package/lib/components/CardFooter/useCardFooterStyles.js +35 -0
  80. package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -0
  81. package/lib/components/CardHeader/CardHeader.d.ts +6 -0
  82. package/lib/components/CardHeader/CardHeader.js +15 -0
  83. package/lib/components/CardHeader/CardHeader.js.map +1 -0
  84. package/lib/components/CardHeader/CardHeader.types.d.ts +17 -0
  85. package/lib/components/CardHeader/CardHeader.types.js +2 -0
  86. package/lib/components/CardHeader/CardHeader.types.js.map +1 -0
  87. package/lib/components/CardHeader/index.d.ts +5 -0
  88. package/lib/components/CardHeader/index.js +6 -0
  89. package/lib/components/CardHeader/index.js.map +1 -0
  90. package/lib/components/CardHeader/renderCardHeader.d.ts +5 -0
  91. package/lib/components/CardHeader/renderCardHeader.js +20 -0
  92. package/lib/components/CardHeader/renderCardHeader.js.map +1 -0
  93. package/lib/components/CardHeader/useCardHeader.d.ts +12 -0
  94. package/lib/components/CardHeader/useCardHeader.js +47 -0
  95. package/lib/components/CardHeader/useCardHeader.js.map +1 -0
  96. package/lib/components/CardHeader/useCardHeaderStyles.d.ts +6 -0
  97. package/lib/components/CardHeader/useCardHeaderStyles.js +57 -0
  98. package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -0
  99. package/lib/components/CardPreview/CardPreview.d.ts +6 -0
  100. package/lib/components/CardPreview/CardPreview.js +15 -0
  101. package/lib/components/CardPreview/CardPreview.js.map +1 -0
  102. package/lib/components/CardPreview/CardPreview.types.d.ts +13 -0
  103. package/lib/components/CardPreview/CardPreview.types.js +2 -0
  104. package/lib/components/CardPreview/CardPreview.types.js.map +1 -0
  105. package/lib/components/CardPreview/index.d.ts +5 -0
  106. package/lib/components/CardPreview/index.js +6 -0
  107. package/lib/components/CardPreview/index.js.map +1 -0
  108. package/lib/components/CardPreview/renderCardPreview.d.ts +5 -0
  109. package/lib/components/CardPreview/renderCardPreview.js +16 -0
  110. package/lib/components/CardPreview/renderCardPreview.js.map +1 -0
  111. package/lib/components/CardPreview/useCardPreview.d.ts +12 -0
  112. package/lib/components/CardPreview/useCardPreview.js +28 -0
  113. package/lib/components/CardPreview/useCardPreview.js.map +1 -0
  114. package/lib/components/CardPreview/useCardPreviewStyles.d.ts +6 -0
  115. package/lib/components/CardPreview/useCardPreviewStyles.js +38 -0
  116. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -0
  117. package/lib/index.d.ts +4 -0
  118. package/lib/index.js +5 -0
  119. package/lib/index.js.map +1 -0
  120. package/lib/tsdoc-metadata.json +11 -0
  121. package/lib-commonjs/Card.d.ts +1 -0
  122. package/lib-commonjs/Card.js +10 -0
  123. package/lib-commonjs/Card.js.map +1 -0
  124. package/lib-commonjs/CardFooter.d.ts +1 -0
  125. package/lib-commonjs/CardFooter.js +10 -0
  126. package/lib-commonjs/CardFooter.js.map +1 -0
  127. package/lib-commonjs/CardHeader.d.ts +1 -0
  128. package/lib-commonjs/CardHeader.js +10 -0
  129. package/lib-commonjs/CardHeader.js.map +1 -0
  130. package/lib-commonjs/CardPreview.d.ts +1 -0
  131. package/lib-commonjs/CardPreview.js +10 -0
  132. package/lib-commonjs/CardPreview.js.map +1 -0
  133. package/lib-commonjs/components/Card/Card.d.ts +6 -0
  134. package/lib-commonjs/components/Card/Card.js +26 -0
  135. package/lib-commonjs/components/Card/Card.js.map +1 -0
  136. package/lib-commonjs/components/Card/Card.types.d.ts +15 -0
  137. package/lib-commonjs/components/Card/Card.types.js +6 -0
  138. package/lib-commonjs/components/Card/Card.types.js.map +1 -0
  139. package/lib-commonjs/components/Card/index.d.ts +5 -0
  140. package/lib-commonjs/components/Card/index.js +18 -0
  141. package/lib-commonjs/components/Card/index.js.map +1 -0
  142. package/lib-commonjs/components/Card/renderCard.d.ts +5 -0
  143. package/lib-commonjs/components/Card/renderCard.js +26 -0
  144. package/lib-commonjs/components/Card/renderCard.js.map +1 -0
  145. package/lib-commonjs/components/Card/useCard.d.ts +12 -0
  146. package/lib-commonjs/components/Card/useCard.js +44 -0
  147. package/lib-commonjs/components/Card/useCard.js.map +1 -0
  148. package/lib-commonjs/components/Card/useCardStyles.d.ts +6 -0
  149. package/lib-commonjs/components/Card/useCardStyles.js +162 -0
  150. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -0
  151. package/lib-commonjs/components/CardFooter/CardFooter.d.ts +6 -0
  152. package/lib-commonjs/components/CardFooter/CardFooter.js +26 -0
  153. package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -0
  154. package/lib-commonjs/components/CardFooter/CardFooter.types.d.ts +13 -0
  155. package/lib-commonjs/components/CardFooter/CardFooter.types.js +6 -0
  156. package/lib-commonjs/components/CardFooter/CardFooter.types.js.map +1 -0
  157. package/lib-commonjs/components/CardFooter/index.d.ts +5 -0
  158. package/lib-commonjs/components/CardFooter/index.js +18 -0
  159. package/lib-commonjs/components/CardFooter/index.js.map +1 -0
  160. package/lib-commonjs/components/CardFooter/renderCardFooter.d.ts +5 -0
  161. package/lib-commonjs/components/CardFooter/renderCardFooter.js +27 -0
  162. package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -0
  163. package/lib-commonjs/components/CardFooter/useCardFooter.d.ts +12 -0
  164. package/lib-commonjs/components/CardFooter/useCardFooter.js +38 -0
  165. package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -0
  166. package/lib-commonjs/components/CardFooter/useCardFooterStyles.d.ts +6 -0
  167. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +45 -0
  168. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -0
  169. package/lib-commonjs/components/CardHeader/CardHeader.d.ts +6 -0
  170. package/lib-commonjs/components/CardHeader/CardHeader.js +26 -0
  171. package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -0
  172. package/lib-commonjs/components/CardHeader/CardHeader.types.d.ts +17 -0
  173. package/lib-commonjs/components/CardHeader/CardHeader.types.js +6 -0
  174. package/lib-commonjs/components/CardHeader/CardHeader.types.js.map +1 -0
  175. package/lib-commonjs/components/CardHeader/index.d.ts +5 -0
  176. package/lib-commonjs/components/CardHeader/index.js +18 -0
  177. package/lib-commonjs/components/CardHeader/index.js.map +1 -0
  178. package/lib-commonjs/components/CardHeader/renderCardHeader.d.ts +5 -0
  179. package/lib-commonjs/components/CardHeader/renderCardHeader.js +31 -0
  180. package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -0
  181. package/lib-commonjs/components/CardHeader/useCardHeader.d.ts +12 -0
  182. package/lib-commonjs/components/CardHeader/useCardHeader.js +58 -0
  183. package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -0
  184. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.d.ts +6 -0
  185. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +67 -0
  186. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -0
  187. package/lib-commonjs/components/CardPreview/CardPreview.d.ts +6 -0
  188. package/lib-commonjs/components/CardPreview/CardPreview.js +26 -0
  189. package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -0
  190. package/lib-commonjs/components/CardPreview/CardPreview.types.d.ts +13 -0
  191. package/lib-commonjs/components/CardPreview/CardPreview.types.js +6 -0
  192. package/lib-commonjs/components/CardPreview/CardPreview.types.js.map +1 -0
  193. package/lib-commonjs/components/CardPreview/index.d.ts +5 -0
  194. package/lib-commonjs/components/CardPreview/index.js +18 -0
  195. package/lib-commonjs/components/CardPreview/index.js.map +1 -0
  196. package/lib-commonjs/components/CardPreview/renderCardPreview.d.ts +5 -0
  197. package/lib-commonjs/components/CardPreview/renderCardPreview.js +27 -0
  198. package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -0
  199. package/lib-commonjs/components/CardPreview/useCardPreview.d.ts +12 -0
  200. package/lib-commonjs/components/CardPreview/useCardPreview.js +38 -0
  201. package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -0
  202. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.d.ts +6 -0
  203. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +48 -0
  204. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -0
  205. package/lib-commonjs/index.d.ts +4 -0
  206. package/lib-commonjs/index.js +16 -0
  207. package/lib-commonjs/index.js.map +1 -0
  208. package/package.json +67 -0
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/CardPreview/useCardPreview.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;AAChH,QAAM;AAAE,IAAA;AAAF,MAAW,KAAjB;AACA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KADP;AAML,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,SAAG;AAF8B,KAAR,CANtB;AAUL,IAAA,IAAI,EAAE,gBAAgB,CAAC,IAAD;AAVjB,GAAP;AAYD,CAdM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n logo: resolveShorthand(logo),\n };\n};\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,6 @@
1
+ import type { CardPreviewState } from './CardPreview.types';
2
+ export declare const cardPreviewClassName = "fui-CardPreview";
3
+ /**
4
+ * Apply styling to the CardPreview slots based on the state
5
+ */
6
+ export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
@@ -0,0 +1,38 @@
1
+ import { __styles, mergeClasses } from '@griffel/react';
2
+ export const cardPreviewClassName = 'fui-CardPreview';
3
+ /**
4
+ * Styles for the root slot
5
+ */
6
+
7
+ const useStyles = /*#__PURE__*/__styles({
8
+ "root": {
9
+ "qhf8xq": "f10pi13n",
10
+ "Bb0eobv": "floiv14",
11
+ "m1g0b5": "f1r7p6p5"
12
+ },
13
+ "logo": {
14
+ "qhf8xq": "f1euv43f",
15
+ "B5kzvoi": "f1gcvs1y",
16
+ "oyh7mz": ["f1t6tvco", "ffrfxm3"],
17
+ "a9b677": "f1szoe96",
18
+ "Bqenvij": "f1d2rq10"
19
+ }
20
+ }, {
21
+ "d": [".f10pi13n{position:relative;}", ".floiv14>*{display:block;}", ".f1r7p6p5>*{width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
22
+ });
23
+ /**
24
+ * Apply styling to the CardPreview slots based on the state
25
+ */
26
+
27
+
28
+ export const useCardPreviewStyles_unstable = state => {
29
+ const styles = useStyles();
30
+ state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);
31
+
32
+ if (state.logo) {
33
+ state.logo.className = mergeClasses(styles.logo, state.logo.className);
34
+ }
35
+
36
+ return state;
37
+ };
38
+ //# sourceMappingURL=useCardPreviewStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAmBA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,MAAM,CAAC,IAAR,EAAc,KAAK,CAAC,IAAN,CAAW,SAAzB,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CATM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewState } from './CardPreview.types';\n\nexport const cardPreviewClassName = 'fui-CardPreview';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n '> *': {\n display: 'block',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export * from './Card';
2
+ export * from './CardFooter';
3
+ export * from './CardHeader';
4
+ export * from './CardPreview';
package/lib/index.js ADDED
@@ -0,0 +1,5 @@
1
+ export * from './Card';
2
+ export * from './CardFooter';
3
+ export * from './CardHeader';
4
+ export * from './CardPreview';
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC","sourcesContent":["export * from './Card';\nexport * from './CardFooter';\nexport * from './CardHeader';\nexport * from './CardPreview';\n"]}
@@ -0,0 +1,11 @@
1
+ // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
+ // It should be published with your NPM package. It should not be tracked by Git.
3
+ {
4
+ "tsdocVersion": "0.12",
5
+ "toolPackages": [
6
+ {
7
+ "packageName": "@microsoft/api-extractor",
8
+ "packageVersion": "7.18.1"
9
+ }
10
+ ]
11
+ }
@@ -0,0 +1 @@
1
+ export * from './components/Card/index';
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
+
9
+ tslib_1.__exportStar(require("./components/Card/index"), exports);
10
+ //# sourceMappingURL=Card.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["Card.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,yBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Card/index';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1 @@
1
+ export * from './components/CardFooter/index';
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
+
9
+ tslib_1.__exportStar(require("./components/CardFooter/index"), exports);
10
+ //# sourceMappingURL=CardFooter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["CardFooter.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CardFooter/index';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1 @@
1
+ export * from './components/CardHeader/index';
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
+
9
+ tslib_1.__exportStar(require("./components/CardHeader/index"), exports);
10
+ //# sourceMappingURL=CardHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["CardHeader.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CardHeader/index';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1 @@
1
+ export * from './components/CardPreview/index';
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
+
9
+ tslib_1.__exportStar(require("./components/CardPreview/index"), exports);
10
+ //# sourceMappingURL=CardPreview.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["CardPreview.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/CardPreview/index';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,6 @@
1
+ import type { CardProps } from './Card.types';
2
+ import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
+ /**
4
+ * A card provides scaffolding for hosting actions and content for a single topic.
5
+ */
6
+ export declare const Card: ForwardRefComponent<CardProps>;
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Card = void 0;
7
+
8
+ const React = /*#__PURE__*/require("react");
9
+
10
+ const useCard_1 = /*#__PURE__*/require("./useCard");
11
+
12
+ const renderCard_1 = /*#__PURE__*/require("./renderCard");
13
+
14
+ const useCardStyles_1 = /*#__PURE__*/require("./useCardStyles");
15
+ /**
16
+ * A card provides scaffolding for hosting actions and content for a single topic.
17
+ */
18
+
19
+
20
+ exports.Card = /*#__PURE__*/React.forwardRef((props, ref) => {
21
+ const state = useCard_1.useCard_unstable(props, ref);
22
+ useCardStyles_1.useCardStyles_unstable(state);
23
+ return renderCard_1.renderCard_unstable(state);
24
+ });
25
+ exports.Card.displayName = 'Card';
26
+ //# sourceMappingURL=Card.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/Card/Card.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,IAAA,gBAAuC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,SAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB,GAAxB,CAAd;AAEA,EAAA,eAAA,CAAA,sBAAA,CAAuB,KAAvB;AACA,SAAO,YAAA,CAAA,mBAAA,CAAoB,KAApB,CAAP;AACD,CALmD,CAAvC;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useCard_unstable } from './useCard';\nimport { renderCard_unstable } from './renderCard';\nimport { useCardStyles_unstable } from './useCardStyles';\nimport type { CardProps } from './Card.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A card provides scaffolding for hosting actions and content for a single topic.\n */\nexport const Card: ForwardRefComponent<CardProps> = React.forwardRef((props, ref) => {\n const state = useCard_unstable(props, ref);\n\n useCardStyles_unstable(state);\n return renderCard_unstable(state);\n});\n\nCard.displayName = 'Card';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,15 @@
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
+ export declare type CardSlots = {
3
+ root: Slot<'div'>;
4
+ };
5
+ export declare type CardCommons = {
6
+ appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
7
+ };
8
+ /**
9
+ * Card Props
10
+ */
11
+ export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
12
+ /**
13
+ * State used in rendering Card
14
+ */
15
+ export declare type CardState = ComponentState<CardSlots> & CardCommons;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=Card.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
@@ -0,0 +1,5 @@
1
+ export * from './Card';
2
+ export * from './Card.types';
3
+ export * from './renderCard';
4
+ export * from './useCard';
5
+ export * from './useCardStyles';
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
8
+
9
+ tslib_1.__exportStar(require("./Card"), exports);
10
+
11
+ tslib_1.__exportStar(require("./Card.types"), exports);
12
+
13
+ tslib_1.__exportStar(require("./renderCard"), exports);
14
+
15
+ tslib_1.__exportStar(require("./useCard"), exports);
16
+
17
+ tslib_1.__exportStar(require("./useCardStyles"), exports);
18
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/Card/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,5 @@
1
+ import type { CardState } from './Card.types';
2
+ /**
3
+ * Render the final JSX of Card
4
+ */
5
+ export declare const renderCard_unstable: (state: CardState) => JSX.Element;
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.renderCard_unstable = void 0;
7
+
8
+ const React = /*#__PURE__*/require("react");
9
+
10
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
+ /**
12
+ * Render the final JSX of Card
13
+ */
14
+
15
+
16
+ const renderCard_unstable = state => {
17
+ const {
18
+ slots,
19
+ slotProps
20
+ } = react_utilities_1.getSlots(state);
21
+ return React.createElement(slots.root, { ...slotProps.root
22
+ });
23
+ };
24
+
25
+ exports.renderCard_unstable = renderCard_unstable;
26
+ //# sourceMappingURL=renderCard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/Card/renderCard.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAoB,KAApB,CAA7B;AAEA,SAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Render the final JSX of Card\n */\nexport const renderCard_unstable = (state: CardState) => {\n const { slots, slotProps } = getSlots<CardSlots>(state);\n\n return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,12 @@
1
+ import * as React from 'react';
2
+ import type { CardProps, CardState } from './Card.types';
3
+ /**
4
+ * Create the state required to render Card.
5
+ *
6
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
7
+ * before being passed to renderCard_unstable.
8
+ *
9
+ * @param props - props from this instance of Card
10
+ * @param ref - reference to root HTMLElement of Card
11
+ */
12
+ export declare const useCard_unstable: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useCard_unstable = void 0;
7
+
8
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
+
10
+ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
11
+ /**
12
+ * Create the state required to render Card.
13
+ *
14
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
15
+ * before being passed to renderCard_unstable.
16
+ *
17
+ * @param props - props from this instance of Card
18
+ * @param ref - reference to root HTMLElement of Card
19
+ */
20
+
21
+
22
+ const useCard_unstable = (props, ref) => {
23
+ const groupperAttrs = react_tabster_1.useFocusableGroup({
24
+ tabBehavior: 'limitedTrapFocus'
25
+ });
26
+ const {
27
+ appearance = 'filled'
28
+ } = props;
29
+ return {
30
+ appearance,
31
+ components: {
32
+ root: 'div'
33
+ },
34
+ root: react_utilities_1.getNativeElementProps(props.as || 'div', {
35
+ ref,
36
+ role: 'group',
37
+ ...groupperAttrs,
38
+ ...props
39
+ })
40
+ };
41
+ };
42
+
43
+ exports.useCard_unstable = useCard_unstable;
44
+ //# sourceMappingURL=useCard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;AACtC,IAAA,WAAW,EAAE;AADyB,GAAlB,CAAtB;AAIA,QAAM;AAAE,IAAA,UAAU,GAAG;AAAf,MAA4B,KAAlC;AACA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAAzC;AAJD,GAAP;AAWD,CAjBM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const groupperAttrs = useFocusableGroup({\n tabBehavior: 'limitedTrapFocus',\n });\n\n const { appearance = 'filled' } = props;\n return {\n appearance,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...groupperAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,6 @@
1
+ import type { CardState } from './Card.types';
2
+ export declare const cardClassName = "fui-Card";
3
+ /**
4
+ * Apply styling to the Card slots based on the state
5
+ */
6
+ export declare const useCardStyles_unstable: (state: CardState) => CardState;
@@ -0,0 +1,162 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useCardStyles_unstable = exports.cardClassName = void 0;
7
+
8
+ const react_1 = /*#__PURE__*/require("@griffel/react");
9
+
10
+ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
11
+
12
+ const index_1 = /*#__PURE__*/require("../CardPreview/index");
13
+
14
+ exports.cardClassName = 'fui-Card';
15
+ /**
16
+ * Styles for the root slot
17
+ */
18
+
19
+ const useStyles = /*#__PURE__*/react_1.__styles({
20
+ "root": {
21
+ "mc9l5x": "ftgm304",
22
+ "B68tc82": "f1p9o1ba",
23
+ "Bmxbyg5": "f1sil6mw",
24
+ "sj55zd": "f19n0e5",
25
+ "icvyot": "fzkkow9",
26
+ "vrafjx": ["fcdblym", "fjik90z"],
27
+ "oivjwe": "fg706s2",
28
+ "wvpqe5": ["fjik90z", "fcdblym"],
29
+ "B4j52fo": "f192inf7",
30
+ "Bekrc4i": ["f5tn483", "f1ojsxk5"],
31
+ "Bn0qgzm": "f1vxd6vx",
32
+ "ibv6hh": ["f1ojsxk5", "f5tn483"],
33
+ "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
34
+ "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
35
+ "B7oj6ja": ["f1jar5jt", "fyu767a"],
36
+ "Btl43ni": ["fyu767a", "f1jar5jt"],
37
+ "Ecqjvq": "f70or3y",
38
+ "B39syqp": ["f1s27jks", "f1x7x6se"],
39
+ "m3o775": "f1q2lvbs",
40
+ "I0kkcn": ["f1x7x6se", "f1s27jks"]
41
+ },
42
+ "filledInteractive": {
43
+ "Bceei9c": "f1k6fduh",
44
+ "De3pzq": "fxugw4r",
45
+ "g2u3we": "fghlq4f",
46
+ "h3c5rm": ["f1gn591s", "fjscplz"],
47
+ "B9xav0g": "fb073pr",
48
+ "zhjwy3": ["fjscplz", "f1gn591s"],
49
+ "E5pizo": "f1whvlc6",
50
+ "Jwef8y": "f1knas48",
51
+ "Bgoe8wy": "fpa59ij",
52
+ "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
53
+ "oetu4i": "fz67qlh",
54
+ "gg5e9n": ["f1l1ogpg", "f1rhln42"],
55
+ "Bvxd0ez": "f1m145df",
56
+ "ecr2s2": "fb40n2d",
57
+ "B6oc9vd": "f7cshhm",
58
+ "ak43y8": ["f1bzyac8", "f131p3c2"],
59
+ "wmxk5l": "f1bazisv",
60
+ "B50zh58": ["f131p3c2", "f1bzyac8"]
61
+ },
62
+ "filled": {
63
+ "De3pzq": "fxugw4r",
64
+ "g2u3we": "fghlq4f",
65
+ "h3c5rm": ["f1gn591s", "fjscplz"],
66
+ "B9xav0g": "fb073pr",
67
+ "zhjwy3": ["fjscplz", "f1gn591s"],
68
+ "E5pizo": "f1whvlc6"
69
+ },
70
+ "filledAlternativeInteractive": {
71
+ "Bceei9c": "f1k6fduh",
72
+ "De3pzq": "f1dmdbja",
73
+ "g2u3we": "fghlq4f",
74
+ "h3c5rm": ["f1gn591s", "fjscplz"],
75
+ "B9xav0g": "fb073pr",
76
+ "zhjwy3": ["fjscplz", "f1gn591s"],
77
+ "E5pizo": "f1whvlc6",
78
+ "Jwef8y": "f1uvynv3",
79
+ "Bgoe8wy": "fpa59ij",
80
+ "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
81
+ "oetu4i": "fz67qlh",
82
+ "gg5e9n": ["f1l1ogpg", "f1rhln42"],
83
+ "Bvxd0ez": "f1m145df",
84
+ "ecr2s2": "f1yhgkbh",
85
+ "B6oc9vd": "f7cshhm",
86
+ "ak43y8": ["f1bzyac8", "f131p3c2"],
87
+ "wmxk5l": "f1bazisv",
88
+ "B50zh58": ["f131p3c2", "f1bzyac8"]
89
+ },
90
+ "filledAlternative": {
91
+ "De3pzq": "f1dmdbja",
92
+ "g2u3we": "fghlq4f",
93
+ "h3c5rm": ["f1gn591s", "fjscplz"],
94
+ "B9xav0g": "fb073pr",
95
+ "zhjwy3": ["fjscplz", "f1gn591s"],
96
+ "E5pizo": "f1whvlc6"
97
+ },
98
+ "outlineInteractive": {
99
+ "Bceei9c": "f1k6fduh",
100
+ "De3pzq": "f1c21dwh",
101
+ "g2u3we": "fj3muxo",
102
+ "h3c5rm": ["f1akhkt", "f1lxtadh"],
103
+ "B9xav0g": "f1aperda",
104
+ "zhjwy3": ["f1lxtadh", "f1akhkt"],
105
+ "E5pizo": "f1couhl3",
106
+ "Jwef8y": "fjxutwb",
107
+ "Bgoe8wy": "fvcxoqz",
108
+ "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
109
+ "oetu4i": "f1xlaoq0",
110
+ "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
111
+ "ecr2s2": "fophhak",
112
+ "B6oc9vd": "fvs00aa",
113
+ "ak43y8": ["f1assf6x", "f4ruux4"],
114
+ "wmxk5l": "fumykes",
115
+ "B50zh58": ["f4ruux4", "f1assf6x"]
116
+ },
117
+ "outline": {
118
+ "De3pzq": "f1c21dwh",
119
+ "g2u3we": "fj3muxo",
120
+ "h3c5rm": ["f1akhkt", "f1lxtadh"],
121
+ "B9xav0g": "f1aperda",
122
+ "zhjwy3": ["f1lxtadh", "f1akhkt"],
123
+ "E5pizo": "f1couhl3"
124
+ },
125
+ "subtleInteractive": {
126
+ "Bceei9c": "f1k6fduh",
127
+ "De3pzq": "fhovq9v",
128
+ "g2u3we": "fghlq4f",
129
+ "h3c5rm": ["f1gn591s", "fjscplz"],
130
+ "B9xav0g": "fb073pr",
131
+ "zhjwy3": ["fjscplz", "f1gn591s"],
132
+ "E5pizo": "f1couhl3",
133
+ "Jwef8y": "f1t94bn6",
134
+ "ecr2s2": "f1wfn5kd"
135
+ },
136
+ "subtle": {
137
+ "De3pzq": "fhovq9v",
138
+ "g2u3we": "fghlq4f",
139
+ "h3c5rm": ["f1gn591s", "fjscplz"],
140
+ "B9xav0g": "fb073pr",
141
+ "zhjwy3": ["fjscplz", "f1gn591s"],
142
+ "E5pizo": "f1couhl3"
143
+ }
144
+ }, {
145
+ "d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1couhl3{box-shadow:none;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
146
+ "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
147
+ "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f7cshhm:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1bzyac8:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f131p3c2:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1bazisv:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
148
+ });
149
+ /**
150
+ * Apply styling to the Card slots based on the state
151
+ */
152
+
153
+
154
+ const useCardStyles_unstable = state => {
155
+ const styles = useStyles();
156
+ const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
157
+ state.root.className = react_1.mergeClasses(exports.cardClassName, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
158
+ return state;
159
+ };
160
+
161
+ exports.useCardStyles_unstable = useCardStyles_unstable;
162
+ //# sourceMappingURL=useCardStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AAGa,OAAA,CAAA,aAAA,GAAgB,UAAhB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAgC;AACpE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;AASA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,aADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MAHnB,EAIrB,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAJ/B,EAKrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OALpB,EAMrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MANnB,EAOrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAPlC,EAQrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BAR9C,EASrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBATnC,EAUrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAVlC,EAWrB,KAAK,CAAC,IAAN,CAAW,SAXU,CAAvB;AAcA,SAAO,KAAP;AACD,CA3BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassName } from '../CardPreview/index';\nimport type { CardState } from './Card.types';\n\nexport const cardClassName = 'fui-Card';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'block',\n ...shorthands.overflow('hidden'),\n\n color: tokens.colorNeutralForeground1,\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n // Size: medium\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n [`> *:not(.${cardPreviewClassName})`]: {\n // Size: medium\n ...shorthands.margin('12px'),\n },\n },\n\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: tokens.shadow4,\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n boxShadow: 'none',\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n boxShadow: 'none',\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassName,\n styles.root,\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,6 @@
1
+ import type { CardFooterProps } from './CardFooter.types';
2
+ import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
+ /**
4
+ * Component to render Button actions in a Card component.
5
+ */
6
+ export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.CardFooter = void 0;
7
+
8
+ const React = /*#__PURE__*/require("react");
9
+
10
+ const useCardFooter_1 = /*#__PURE__*/require("./useCardFooter");
11
+
12
+ const renderCardFooter_1 = /*#__PURE__*/require("./renderCardFooter");
13
+
14
+ const useCardFooterStyles_1 = /*#__PURE__*/require("./useCardFooterStyles");
15
+ /**
16
+ * Component to render Button actions in a Card component.
17
+ */
18
+
19
+
20
+ exports.CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
21
+ const state = useCardFooter_1.useCardFooter_unstable(props, ref);
22
+ useCardFooterStyles_1.useCardFooterStyles_unstable(state);
23
+ return renderCardFooter_1.renderCardFooter_unstable(state);
24
+ });
25
+ exports.CardFooter.displayName = 'CardFooter';
26
+ //# sourceMappingURL=CardFooter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["components/CardFooter/CardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;AAEA,EAAA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;AACA,SAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n const state = useCardFooter_unstable(props, ref);\n\n useCardFooterStyles_unstable(state);\n return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"sourceRoot":"../src/"}
@@ -0,0 +1,13 @@
1
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
+ export declare type CardFooterSlots = {
3
+ root: Slot<'div'>;
4
+ action?: Slot<'div'>;
5
+ };
6
+ /**
7
+ * CardFooter props
8
+ */
9
+ export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
10
+ /**
11
+ * State used in rendering CardFooter
12
+ */
13
+ export declare type CardFooterState = ComponentState<CardFooterSlots>;
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=CardFooter.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}