@fluentui/react-card 9.0.0-beta.2 → 9.0.0-beta.22

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js

@@ -3,23 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCardPreviewStyles = void 0;
+exports.useCardPreviewStyles_unstable = exports.cardPreviewClassNames = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 /**
- * Styles for the root slot
+ * Static CSS class names used internally for the component slots.
  */
 
 
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+exports.cardPreviewClassNames = {
+  root: 'fui-CardPreview',
+  logo: 'fui-CardPreview__logo'
+};
+
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "qhf8xq": "f10pi13n",
-    "B6of3ja": "f1hu3pq6",
-    "t21cq0": ["f8nhgx1", "f16yxz7i"],
-    "jrapky": "f19f4twv",
-    "Frg6f3": ["f16yxz7i", "f8nhgx1"],
-    "Bb0eobv": "floiv14",
-    "m1g0b5": "f1r7p6p5"
+    "pnb5jt": "f1rzl30s",
+    "Elg2ur": "f1chxnfo",
+    "B184ckt": "f17xb19f"
   },
   "logo": {
     "qhf8xq": "f1euv43f",
@@ -29,23 +31,23 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "Bqenvij": "f1d2rq10"
   }
 }, {
-  "d": [".f10pi13n{position:relative;}", ".f1hu3pq6{margin-top:0;}", ".f8nhgx1{margin-right:-12px;}", ".f16yxz7i{margin-left:-12px;}", ".f19f4twv{margin-bottom:0;}", ".floiv14>*{display:block;}", ".f1r7p6p5>*{width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
+  "d": [".f10pi13n{position:relative;}", ".f1rzl30s>:not(.fui-CardPreview__logo){display:block;}", ".f1chxnfo>:not(.fui-CardPreview__logo){height:100%;}", ".f17xb19f>:not(.fui-CardPreview__logo){width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
 });
 /**
- * Apply styling to the CardPreview slots based on the state
+ * Apply styling to the CardPreview slots based on the state.
  */
 
 
-var useCardPreviewStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses('fluentui-react-card-preview', styles.root, state.root.className);
+const useCardPreviewStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.cardPreviewClassNames.root, styles.root, state.root.className);
 
   if (state.logo) {
-    state.logo.className = react_make_styles_1.mergeClasses(styles.logo, state.logo.className);
+    state.logo.className = react_1.mergeClasses(exports.cardPreviewClassNames.logo, styles.logo, state.logo.className);
   }
 
   return state;
 };
 
-exports.useCardPreviewStyles = useCardPreviewStyles;
+exports.useCardPreviewStyles_unstable = useCardPreviewStyles_unstable;
 //# sourceMappingURL=useCardPreviewStyles.js.map

package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACI,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAAwB;AAC1D,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,6BAAb,EAA4C,MAAM,CAAC,IAAnD,EAAyD,KAAK,CAAC,IAAN,CAAW,SAApE,CAAvB;;AAEA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,IAApB,EAA0B,KAAK,CAAC,IAAN,CAAW,SAArC,CAAvB;AACD;;AAED,SAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
+{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,IAAI,EAAE;AAF+D,CAA1D;;AAKb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAoBA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;;EAEA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;EACD;;EAED,OAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n  root: 'fui-CardPreview',\n  logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n\n    [`> :not(.${cardPreviewClassNames.logo})`]: {\n      display: 'block',\n      height: '100%',\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(cardPreviewClassNames.root, styles.root, state.root.className);\n\n  if (state.logo) {\n    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -3,14 +3,149 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useCardPreview_unstable = exports.useCardPreviewStyles_unstable = exports.renderCardPreview_unstable = exports.cardPreviewClassNames = exports.CardPreview = exports.useCardHeader_unstable = exports.useCardHeaderStyles_unstable = exports.renderCardHeader_unstable = exports.cardHeaderCSSVars = exports.cardHeaderClassNames = exports.CardHeader = exports.useCardFooter_unstable = exports.useCardFooterStyles_unstable = exports.renderCardFooter_unstable = exports.cardFooterClassNames = exports.CardFooter = exports.useCard_unstable = exports.useCardStyles_unstable = exports.renderCard_unstable = exports.cardCSSVars = exports.cardClassNames = exports.Card = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+var Card_1 = /*#__PURE__*/require("./Card");
 
-tslib_1.__exportStar(require("./Card"), exports);
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return Card_1.Card;
+  }
+});
+Object.defineProperty(exports, "cardClassNames", {
+  enumerable: true,
+  get: function () {
+    return Card_1.cardClassNames;
+  }
+});
+Object.defineProperty(exports, "cardCSSVars", {
+  enumerable: true,
+  get: function () {
+    return Card_1.cardCSSVars;
+  }
+});
+Object.defineProperty(exports, "renderCard_unstable", {
+  enumerable: true,
+  get: function () {
+    return Card_1.renderCard_unstable;
+  }
+});
+Object.defineProperty(exports, "useCardStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return Card_1.useCardStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useCard_unstable", {
+  enumerable: true,
+  get: function () {
+    return Card_1.useCard_unstable;
+  }
+});
 
-tslib_1.__exportStar(require("./CardFooter"), exports);
+var CardFooter_1 = /*#__PURE__*/require("./CardFooter");
 
-tslib_1.__exportStar(require("./CardHeader"), exports);
+Object.defineProperty(exports, "CardFooter", {
+  enumerable: true,
+  get: function () {
+    return CardFooter_1.CardFooter;
+  }
+});
+Object.defineProperty(exports, "cardFooterClassNames", {
+  enumerable: true,
+  get: function () {
+    return CardFooter_1.cardFooterClassNames;
+  }
+});
+Object.defineProperty(exports, "renderCardFooter_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardFooter_1.renderCardFooter_unstable;
+  }
+});
+Object.defineProperty(exports, "useCardFooterStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardFooter_1.useCardFooterStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useCardFooter_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardFooter_1.useCardFooter_unstable;
+  }
+});
+
+var CardHeader_1 = /*#__PURE__*/require("./CardHeader");
 
-tslib_1.__exportStar(require("./CardPreview"), exports);
+Object.defineProperty(exports, "CardHeader", {
+  enumerable: true,
+  get: function () {
+    return CardHeader_1.CardHeader;
+  }
+});
+Object.defineProperty(exports, "cardHeaderClassNames", {
+  enumerable: true,
+  get: function () {
+    return CardHeader_1.cardHeaderClassNames;
+  }
+});
+Object.defineProperty(exports, "cardHeaderCSSVars", {
+  enumerable: true,
+  get: function () {
+    return CardHeader_1.cardHeaderCSSVars;
+  }
+});
+Object.defineProperty(exports, "renderCardHeader_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardHeader_1.renderCardHeader_unstable;
+  }
+});
+Object.defineProperty(exports, "useCardHeaderStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardHeader_1.useCardHeaderStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useCardHeader_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardHeader_1.useCardHeader_unstable;
+  }
+});
+
+var CardPreview_1 = /*#__PURE__*/require("./CardPreview");
+
+Object.defineProperty(exports, "CardPreview", {
+  enumerable: true,
+  get: function () {
+    return CardPreview_1.CardPreview;
+  }
+});
+Object.defineProperty(exports, "cardPreviewClassNames", {
+  enumerable: true,
+  get: function () {
+    return CardPreview_1.cardPreviewClassNames;
+  }
+});
+Object.defineProperty(exports, "renderCardPreview_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardPreview_1.renderCardPreview_unstable;
+  }
+});
+Object.defineProperty(exports, "useCardPreviewStyles_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardPreview_1.useCardPreviewStyles_unstable;
+  }
+});
+Object.defineProperty(exports, "useCardPreview_unstable", {
+  enumerable: true,
+  get: function () {
+    return CardPreview_1.useCardPreview_unstable;
+  }
+});
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/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,eAAA,CAAA,EAAA,OAAA","sourceRoot":""}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["export {\n  Card,\n  cardClassNames,\n  cardCSSVars,\n  renderCard_unstable,\n  useCardStyles_unstable,\n  useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n  CardFooter,\n  cardFooterClassNames,\n  renderCardFooter_unstable,\n  useCardFooterStyles_unstable,\n  useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n  CardHeader,\n  cardHeaderClassNames,\n  cardHeaderCSSVars,\n  renderCardHeader_unstable,\n  useCardHeaderStyles_unstable,\n  useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n  CardPreview,\n  cardPreviewClassNames,\n  renderCardPreview_unstable,\n  useCardPreviewStyles_unstable,\n  useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fluentui/react-card",
-  "version": "9.0.0-beta.2",
+  "version": "9.0.0-beta.22",
   "private": false,
   "description": "Card container components for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -17,38 +17,30 @@
     "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component",
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-card/src && yarn docs",
-    "storybook": "start-storybook -s assets"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-card/src && yarn docs",
+    "storybook": "node ../../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-beta.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-beta.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-beta.1",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.11",
     "@fluentui/scripts": "^1.0.0",
-    "@fluentui/react-text": "9.0.0-beta.1",
-    "@fluentui/react-button": "9.0.0-beta.2",
-    "@types/enzyme": "3.10.3",
-    "@types/enzyme-adapter-react-16": "1.0.3",
-    "@types/react": "16.9.42",
-    "@types/react-dom": "16.9.10",
-    "@types/react-test-renderer": "^16.0.0",
-    "enzyme": "~3.10.0",
-    "enzyme-adapter-react-16": "^1.15.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-test-renderer": "^16.3.0"
+    "@fluentui/react-text": "^9.0.2",
+    "@fluentui/react-button": "^9.0.2"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-beta.1",
-    "@fluentui/react-utilities": "9.0.0-beta.1",
-    "@fluentui/react-tabster": "9.0.0-beta.2",
+    "@griffel/react": "^1.2.0",
+    "@fluentui/react-utilities": "^9.0.1-0",
+    "@fluentui/react-tabster": "^9.0.2",
+    "@fluentui/react-theme": "^9.0.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -58,11 +50,17 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
       "minor",
       "patch"
     ]
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    }
   }
 }

package/dist/react-card.d.ts

@@ -1,188 +0,0 @@
-import type { ComponentProps } from '@fluentui/react-utilities';
-import type { ComponentState } from '@fluentui/react-utilities';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
-
-/**
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
- */
-export declare const Card: ForwardRefComponent<CardProps>;
-
-export declare type CardCommons = {};
-
-/**
- * Component to render Button actions in a Card component.
- */
-export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
-
-/**
- * CardFooter props
- */
-export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
-
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-export declare const cardFooterShorthandProps: Array<keyof CardFooterSlots>;
-
-export declare type CardFooterSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-    action?: IntrinsicShorthandProps<'div'>;
-};
-
-/**
- * State used in rendering CardFooter
- */
-export declare type CardFooterState = ComponentState<CardFooterSlots>;
-
-/**
- * Component to render an image, text and an action in a Card component.
- */
-export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
-
-/**
- * CardHeader props
- */
-export declare type CardHeaderProps = ComponentProps<CardHeaderSlots>;
-
-export declare const cardHeaderShorthandProps: Array<keyof CardHeaderSlots>;
-
-export declare type CardHeaderSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-    image: IntrinsicShorthandProps<'div'>;
-    content?: IntrinsicShorthandProps<'div'>;
-    header: IntrinsicShorthandProps<'span'>;
-    description: IntrinsicShorthandProps<'span'>;
-    action?: IntrinsicShorthandProps<'div'>;
-};
-
-/**
- * State used in rendering CardHeader
- */
-export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
-
-/**
- * Component to render image previews of documents or articles in a Card component.
- */
-export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
-
-/**
- * CardPreview props
- */
-export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
-
-/**
- * Array of all shorthand properties listed in CardPreviewShorthandProps
- */
-export declare const cardPreviewShorthandProps: Array<keyof CardPreviewSlots>;
-
-export declare type CardPreviewSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-    logo?: IntrinsicShorthandProps<'div'>;
-};
-
-/**
- * State used in rendering CardPreview
- */
-export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
-
-/**
- * Card Props
- */
-export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
-
-export declare type CardSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-};
-
-/**
- * State used in rendering Card
- */
-export declare type CardState = ComponentState<CardSlots> & CardCommons;
-
-/**
- * Render the final JSX of Card
- */
-export declare const renderCard: (state: CardState) => JSX.Element;
-
-/**
- * Render the final JSX of CardFooter
- */
-export declare const renderCardFooter: (state: CardFooterState) => JSX.Element;
-
-/**
- * Render the final JSX of CardHeader
- */
-export declare const renderCardHeader: (state: CardHeaderState) => JSX.Element;
-
-/**
- * Render the final JSX of CardPreview
- */
-export declare const renderCardPreview: (state: CardPreviewState) => JSX.Element;
-
-/**
- * Create the state required to render Card.
- *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
- *
- * @param props - props from this instance of Card
- * @param ref - reference to root HTMLElement of Card
- */
-export declare const useCard: (props: CardProps, ref: React_2.Ref<HTMLElement>) => CardState;
-
-/**
- * Create the state required to render CardFooter.
- *
- * The returned state can be modified with hooks such as useCardFooterStyles,
- * before being passed to renderCardFooter.
- *
- * @param props - props from this instance of CardFooter
- * @param ref - reference to root HTMLElement of CardFooter
- */
-export declare const useCardFooter: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>) => CardFooterState;
-
-/**
- * Apply styling to the CardFooter slots based on the state
- */
-export declare const useCardFooterStyles: (state: CardFooterState) => CardFooterState;
-
-/**
- * Create the state required to render CardHeader.
- *
- * The returned state can be modified with hooks such as useCardHeaderStyles,
- * before being passed to renderCardHeader.
- *
- * @param props - props from this instance of CardHeader
- * @param ref - reference to root HTMLElement of CardHeader
- */
-export declare const useCardHeader: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>) => CardHeaderState;
-
-/**
- * Apply styling to the CardHeader slots based on the state
- */
-export declare const useCardHeaderStyles: (state: CardHeaderState) => CardHeaderState;
-
-/**
- * Create the state required to render CardPreview.
- *
- * The returned state can be modified with hooks such as useCardPreviewStyles,
- * before being passed to renderCardPreview.
- *
- * @param props - props from this instance of CardPreview
- * @param ref - reference to root HTMLElement of CardPreview
- */
-export declare const useCardPreview: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>) => CardPreviewState;
-
-/**
- * Apply styling to the CardPreview slots based on the state
- */
-export declare const useCardPreviewStyles: (state: CardPreviewState) => CardPreviewState;
-
-/**
- * Apply styling to the Card slots based on the state
- */
-export declare const useCardStyles: (state: CardState) => CardState;
-
-export { }

package/lib/Card.d.ts

@@ -1 +0,0 @@
-export * from './components/Card/index';

package/lib/CardFooter.d.ts

@@ -1 +0,0 @@
-export * from './components/CardFooter/index';

package/lib/CardHeader.d.ts

@@ -1 +0,0 @@
-export * from './components/CardHeader/index';

package/lib/CardPreview.d.ts

@@ -1 +0,0 @@
-export * from './components/CardPreview/index';

package/lib/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import type { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;

package/lib/common/isConformant.js

@@ -1,11 +0,0 @@
-import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
-import makeStylesTests from '@fluentui/react-conformance-make-styles';
-export function isConformant(testInfo) {
-  var defaultOptions = {
-    asPropHandlesRef: true,
-    componentPath: module.parent.filename.replace('.test', ''),
-    extraTests: makeStylesTests
-  };
-  baseIsConformant(defaultOptions, testInfo);
-}
-//# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE;AAH+C,GAA7D;AAMA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

package/lib/components/Card/Card.d.ts

@@ -1,6 +0,0 @@
-import type { CardProps } from './Card.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
- */
-export declare const Card: ForwardRefComponent<CardProps>;

package/lib/components/Card/Card.types.d.ts

@@ -1,13 +0,0 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
-export declare type CardSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-};
-export declare type CardCommons = {};
-/**
- * Card Props
- */
-export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
-/**
- * State used in rendering Card
- */
-export declare type CardState = ComponentState<CardSlots> & CardCommons;

package/lib/components/Card/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Card';
-export * from './Card.types';
-export * from './renderCard';
-export * from './useCard';
-export * from './useCardStyles';

package/lib/components/Card/renderCard.d.ts

@@ -1,5 +0,0 @@
-import type { CardState } from './Card.types';
-/**
- * Render the final JSX of Card
- */
-export declare const renderCard: (state: CardState) => JSX.Element;

package/lib/components/Card/useCard.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { CardProps, CardState } from './Card.types';
-/**
- * Create the state required to render Card.
- *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
- *
- * @param props - props from this instance of Card
- * @param ref - reference to root HTMLElement of Card
- */
-export declare const useCard: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;

package/lib/components/Card/useCardStyles.d.ts

@@ -1,5 +0,0 @@
-import type { CardState } from './Card.types';
-/**
- * Apply styling to the Card slots based on the state
- */
-export declare const useCardStyles: (state: CardState) => CardState;

package/lib/components/CardFooter/CardFooter.d.ts

@@ -1,6 +0,0 @@
-import type { CardFooterProps } from './CardFooter.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * Component to render Button actions in a Card component.
- */
-export declare const CardFooter: ForwardRefComponent<CardFooterProps>;

package/lib/components/CardFooter/CardFooter.types.d.ts

@@ -1,13 +0,0 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
-export declare type CardFooterSlots = {
-    root: IntrinsicShorthandProps<'div'>;
-    action?: IntrinsicShorthandProps<'div'>;
-};
-/**
- * CardFooter props
- */
-export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
-/**
- * State used in rendering CardFooter
- */
-export declare type CardFooterState = ComponentState<CardFooterSlots>;

package/lib/components/CardFooter/index.d.ts

@@ -1,5 +0,0 @@
-export * from './CardFooter';
-export * from './CardFooter.types';
-export * from './renderCardFooter';
-export * from './useCardFooter';
-export * from './useCardFooterStyles';

package/lib/components/CardFooter/renderCardFooter.d.ts

@@ -1,5 +0,0 @@
-import type { CardFooterState } from './CardFooter.types';
-/**
- * Render the final JSX of CardFooter
- */
-export declare const renderCardFooter: (state: CardFooterState) => JSX.Element;