@fluentui/react-card 9.0.0-beta.1 → 9.0.0-beta.10

package/dist/react-card.d.ts

@@ -1,262 +1,186 @@
-import type { ComponentPropsCompat } from '@fluentui/react-utilities';
-import type { ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import type { ShorthandPropsCompat } from '@fluentui/react-utilities';
+import type { Slot } from '@fluentui/react-utilities';
 
 /**
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
+ * A card provides scaffolding for hosting actions and content for a single topic.
  */
 export declare const Card: ForwardRefComponent<CardProps>;
 
-/**
- * Names of CardProps that have a default value in useCard
- */
-export declare type CardDefaultedProps = never;
+export declare const cardClassName = "fui-Card";
+
+export declare type CardCommons = {
+    appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
+};
 
 /**
  * Component to render Button actions in a Card component.
  */
 export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
 
-/**
- * Names of CardFooterProps that have a default value in useCardFooter
- */
-export declare type CardFooterDefaultedProps = never;
+export declare const cardFooterClassName = "fui-CardFooter";
 
 /**
- * CardFooter Props
+ * CardFooter props
  */
-export declare interface CardFooterProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
-    /**
-     * Actions slot
-     */
-    action?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
-}
+export declare type CardFooterProps = ComponentProps<CardFooterSlots>;
 
-/**
- * Names of the shorthand properties in CardFooterProps
- */
-export declare type CardFooterShorthandProps = 'action';
-
-/**
- * Array of all shorthand properties listed in CardFooterShorthandProps
- */
-export declare const cardFooterShorthandProps: CardFooterShorthandProps[];
+export declare type CardFooterSlots = {
+    root: Slot<'div'>;
+    action?: Slot<'div'>;
+};
 
 /**
  * State used in rendering CardFooter
  */
-export declare interface CardFooterState extends ComponentStateCompat<CardFooterProps, CardFooterShorthandProps, CardFooterDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React_2.Ref<HTMLElement>;
-}
+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>;
 
-/**
- * Names of CardHeaderProps that have a default value in useCardHeader
- */
-export declare type CardHeaderDefaultedProps = never;
-
-/**
- * CardHeader Props
- */
-export declare interface CardHeaderProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
-    /**
-     * Image slot
-     */
-    image: ShorthandPropsCompat<React_2.ImgHTMLAttributes<HTMLImageElement>>;
-    /**
-     * Content slot, wrapper of the header and description slots
-     */
-    content?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
-    /**
-     * Header title slot
-     */
-    header: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
-    /**
-     * Description slot
-     */
-    description: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
-    /**
-     * Actions slot
-     */
-    action?: ShorthandPropsCompat<React_2.HTMLAttributes<HTMLElement>>;
-}
+export declare const cardHeaderClassName = "fui-CardHeader";
 
 /**
- * Names of the shorthand properties in CardHeaderProps
+ * CardHeader props
  */
-export declare type CardHeaderShorthandProps = 'image' | 'content' | 'header' | 'description' | 'action';
+export declare type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 
-/**
- * Array of all shorthand properties listed in CardHeaderShorthandProps
- */
-export declare const cardHeaderShorthandPropsCompat: CardHeaderShorthandProps[];
+export declare type CardHeaderSlots = {
+    root: Slot<'div'>;
+    image: Slot<'div'>;
+    content?: Slot<'div'>;
+    header: Slot<'span'>;
+    description: Slot<'span'>;
+    action?: Slot<'div'>;
+};
 
 /**
  * State used in rendering CardHeader
  */
-export declare interface CardHeaderState extends ComponentStateCompat<CardHeaderProps, CardHeaderShorthandProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React_2.Ref<HTMLElement>;
-}
+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>;
 
-/**
- * Names of CardPreviewProps that have a default value in useCardPreview
- */
-export declare type CardPreviewDefaultedProps = never;
+export declare const cardPreviewClassName = "fui-CardPreview";
 
 /**
- * CardPreview Props
+ * CardPreview props
  */
-export declare interface CardPreviewProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
-    /**
-     * Image slot
-     */
-    logo?: ShorthandPropsCompat<React_2.ImgHTMLAttributes<HTMLImageElement>>;
-}
+export declare type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 
-/**
- * Names of the shorthand properties in CardPreviewProps
- */
-export declare type CardPreviewShorthandProps = 'logo';
-
-/**
- * Array of all shorthand properties listed in CardPreviewShorthandProps
- */
-export declare const cardPreviewShorthandPropsCompat: CardPreviewShorthandProps[];
+export declare type CardPreviewSlots = {
+    root: Slot<'div'>;
+    logo?: Slot<'div'>;
+};
 
 /**
  * State used in rendering CardPreview
  */
-export declare interface CardPreviewState extends ComponentStateCompat<CardPreviewProps, CardPreviewShorthandProps, CardPreviewDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React_2.Ref<HTMLElement>;
-}
+export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
 
 /**
  * Card Props
  */
-export declare interface CardProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
-}
+export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
 
-/**
- * Names of the shorthand properties in CardProps
- */
-export declare type CardShorthandProps = never;
+export declare type CardSlots = {
+    root: Slot<'div'>;
+};
 
 /**
  * State used in rendering Card
  */
-export declare interface CardState extends CardProps, ComponentStateCompat<CardProps, CardShorthandProps, CardDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React_2.Ref<HTMLElement>;
-}
+export declare type CardState = ComponentState<CardSlots> & CardCommons;
 
 /**
  * Render the final JSX of Card
  */
-export declare const renderCard: (state: CardState) => JSX.Element;
+export declare const renderCard_unstable: (state: CardState) => JSX.Element;
 
 /**
  * Render the final JSX of CardFooter
  */
-export declare const renderCardFooter: (state: CardFooterState) => JSX.Element;
+export declare const renderCardFooter_unstable: (state: CardFooterState) => JSX.Element;
 
 /**
  * Render the final JSX of CardHeader
  */
-export declare const renderCardHeader: (state: CardHeaderState) => JSX.Element;
+export declare const renderCardHeader_unstable: (state: CardHeaderState) => JSX.Element;
 
 /**
  * Render the final JSX of CardPreview
  */
-export declare const renderCardPreview: (state: CardPreviewState) => JSX.Element;
+export declare const renderCardPreview_unstable: (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.
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCard: (props: CardProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CardProps | undefined) => CardState;
+export declare const useCard_unstable: (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.
+ * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+ * before being passed to renderCardFooter_unstable.
  *
  * @param props - props from this instance of CardFooter
  * @param ref - reference to root HTMLElement of CardFooter
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCardFooter: (props: CardFooterProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CardFooterProps | undefined) => CardFooterState;
+export declare const useCardFooter_unstable: (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;
+export declare const useCardFooterStyles_unstable: (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.
+ * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
+ * before being passed to renderCardHeader_unstable.
  *
  * @param props - props from this instance of CardHeader
  * @param ref - reference to root HTMLElement of CardHeader
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCardHeader: (props: CardHeaderProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CardHeaderProps | undefined) => CardHeaderState;
+export declare const useCardHeader_unstable: (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;
+export declare const useCardHeaderStyles_unstable: (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.
+ * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,
+ * before being passed to renderCardPreview_unstable.
  *
  * @param props - props from this instance of CardPreview
  * @param ref - reference to root HTMLElement of CardPreview
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCardPreview: (props: CardPreviewProps, ref: React_2.Ref<HTMLElement>, defaultProps?: CardPreviewProps | undefined) => CardPreviewState;
+export declare const useCardPreview_unstable: (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;
+export declare const useCardPreviewStyles_unstable: (state: CardPreviewState) => CardPreviewState;
 
 /**
  * Apply styling to the Card slots based on the state
  */
-export declare const useCardStyles: (state: CardState) => CardState;
+export declare const useCardStyles_unstable: (state: CardState) => CardState;
 
 export { }

package/lib/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"../src/","sources":["Card.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './components/Card/index';\n"]}

package/lib/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.js","sourceRoot":"","sources":["../src/CardFooter.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"CardFooter.js","sourceRoot":"../src/","sources":["CardFooter.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/CardFooter/index';\n"]}

package/lib/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../src/CardHeader.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}
+{"version":3,"file":"CardHeader.js","sourceRoot":"../src/","sources":["CardHeader.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/CardHeader/index';\n"]}

package/lib/CardPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardPreview.js","sourceRoot":"","sources":["../src/CardPreview.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"CardPreview.js","sourceRoot":"../src/","sources":["CardPreview.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/CardPreview/index';\n"]}

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

@@ -1,6 +1,6 @@
 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.
+ * A card provides scaffolding for hosting actions and content for a single topic.
  */
 export declare const Card: ForwardRefComponent<CardProps>;

package/lib/components/Card/Card.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useCard } from './useCard';
-import { renderCard } from './renderCard';
-import { useCardStyles } from './useCardStyles';
+import { useCard_unstable } from './useCard';
+import { renderCard_unstable } from './renderCard';
+import { useCardStyles_unstable } from './useCardStyles';
 /**
- * Component to provide scaffolding for hosting actions and content for a single topic within a card sized object.
+ * A card provides scaffolding for hosting actions and content for a single topic.
  */
 
-export var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCard(props, ref);
-  useCardStyles(state);
-  return renderCard(state);
+export const Card = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCard_unstable(props, ref);
+  useCardStyles_unstable(state);
+  return renderCard_unstable(state);
 });
 Card.displayName = 'Card';
 //# sourceMappingURL=Card.js.map

package/lib/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,OAAT,QAAwB,WAAxB;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AAIA;;AAEG;;AACH,OAAO,IAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAC9E,MAAM,KAAK,GAAG,OAAO,CAAC,KAAD,EAAQ,GAAR,CAArB;AAEA,EAAA,aAAa,CAAC,KAAD,CAAb;AACA,SAAO,UAAU,CAAC,KAAD,CAAjB;AACD,CALmD,CAA7C;AAOP,IAAI,CAAC,WAAL,GAAmB,MAAnB","sourceRoot":""}
+{"version":3,"sources":["components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,WAAjC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAIA;;AAEG;;AACH,OAAO,MAAM,IAAI,gBAAmC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AAClF,QAAM,KAAK,GAAG,gBAAgB,CAAC,KAAD,EAAQ,GAAR,CAA9B;AAEA,EAAA,sBAAsB,CAAC,KAAD,CAAtB;AACA,SAAO,mBAAmB,CAAC,KAAD,CAA1B;AACD,CALmD,CAA7C;AAOP,IAAI,CAAC,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/"}

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

@@ -1,24 +1,15 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type CardSlots = {
+    root: Slot<'div'>;
+};
+export declare type CardCommons = {
+    appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
+};
 /**
  * Card Props
  */
-export interface CardProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
-}
-/**
- * Names of the shorthand properties in CardProps
- */
-export declare type CardShorthandProps = never;
-/**
- * Names of CardProps that have a default value in useCard
- */
-export declare type CardDefaultedProps = never;
+export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
 /**
  * State used in rendering Card
  */
-export interface CardState extends CardProps, ComponentStateCompat<CardProps, CardShorthandProps, CardDefaultedProps> {
-    /**
-     * Ref to the root element
-     */
-    ref: React.Ref<HTMLElement>;
-}
+export declare type CardState = ComponentState<CardSlots> & CardCommons;

package/lib/components/Card/Card.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.types.js","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n  root: Slot<'div'>;\n};\n\nexport type CardCommons = {\n  appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & CardCommons;\n"]}

package/lib/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './Card';\nexport * from './Card.types';\nexport * from './renderCard';\nexport * from './useCard';\nexport * from './useCardStyles';\n"]}

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

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

package/lib/components/Card/renderCard.js

@@ -1,15 +1,15 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Card
  */
 
-export var renderCard = function (state) {
-  var _a = getSlotsCompat(state),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.children);
+export const renderCard_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  });
 };
 //# sourceMappingURL=renderCard.js.map

package/lib/components/Card/renderCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/renderCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,UAAU,GAAG,UAAC,KAAD,EAAiB;AACnC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EAAiC,KAAK,CAAC,QAAvC,CAAP;AACD,CAJM","sourceRoot":""}
+{"version":3,"sources":["components/Card/renderCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAqB;AACtD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAY,KAAZ,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","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/"}

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

@@ -3,11 +3,10 @@ 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.
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useCard: (props: CardProps, ref: React.Ref<HTMLElement>, defaultProps?: CardProps | undefined) => CardState;
+export declare const useCard_unstable: (props: CardProps, ref: React.Ref<HTMLElement>) => CardState;

package/lib/components/Card/useCard.js

@@ -1,21 +1,33 @@
-import { makeMergeProps } from '@fluentui/react-utilities';
-var mergeProps = /*#__PURE__*/makeMergeProps();
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import { useFocusableGroup } from '@fluentui/react-tabster';
 /**
  * Create the state required to render Card.
  *
- * The returned state can be modified with hooks such as useCardStyles,
- * before being passed to renderCard.
+ * The returned state can be modified with hooks such as useCardStyles_unstable,
+ * before being passed to renderCard_unstable.
  *
  * @param props - props from this instance of Card
  * @param ref - reference to root HTMLElement of Card
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-export var useCard = function (props, ref, defaultProps) {
-  var state = mergeProps({
-    ref: ref,
-    role: 'group'
-  }, defaultProps, props);
-  return state;
+export const useCard_unstable = (props, ref) => {
+  const groupperAttrs = useFocusableGroup({
+    tabBehavior: 'limitedTrapFocus'
+  });
+  const {
+    appearance = 'filled'
+  } = props;
+  return {
+    appearance,
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps(props.as || 'div', {
+      ref,
+      role: 'group',
+      ...groupperAttrs,
+      ...props
+    })
+  };
 };
 //# sourceMappingURL=useCard.js.map

package/lib/components/Card/useCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,2BAA/B;AAGA,IAAM,UAAU,gBAAG,cAAc,EAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,OAAO,GAAG,UAAC,KAAD,EAAmB,GAAnB,EAAgD,YAAhD,EAAwE;AAC7F,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,IAAI,EAAE;AAFR,GADsB,EAKtB,YALsB,EAMtB,KANsB,CAAxB;AASA,SAAO,KAAP;AACD,CAXM","sourceRoot":""}
+{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE;AADyB,GAAD,CAAvC;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,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,aAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAJtB,GAAP;AAWD,CAjBM","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/"}

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

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