@fluentui/react-image 9.3.15 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-image
 
-This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Mar 2026 08:10:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.4.0)
+
+Thu, 26 Mar 2026 08:10:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.3.15..@fluentui/react-image_v9.4.0)
+
+### Minor changes
+
+- feat: add base hooks for Image ([PR #35808](https://github.com/microsoft/fluentui/pull/35808) by dmytrokirpa@microsoft.com)
+
 ## [9.3.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-image_v9.3.15)
 
-Wed, 25 Feb 2026 13:28:23 GMT 
+Wed, 25 Feb 2026 13:32:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-image_v9.3.14..@fluentui/react-image_v9.3.15)
 
 ### Patches

package/dist/index.d.ts

@@ -12,6 +12,17 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 declare const Image_2: ForwardRefComponent<ImageProps>;
 export { Image_2 as Image }
 
+/**
+ * Image props without design-specific props (shape, shadow, bordered, fit).
+ * Use this when building a base image that is unstyled or uses a custom design system.
+ */
+export declare type ImageBaseProps = ComponentProps<ImageSlots>;
+
+/**
+ * Image state without design-specific state (shape, shadow, bordered, fit).
+ */
+export declare type ImageBaseState = ComponentState<ImageSlots>;
+
 export declare const imageClassNames: SlotClassNames<ImageSlots>;
 
 export declare type ImageProps = ComponentProps<ImageSlots> & {
@@ -57,13 +68,22 @@ export declare type ImageState = ComponentState<ImageSlots> & Required<Pick<Imag
  * Define the render function.
  * Given the state of an image, renders it.
  */
-export declare const renderImage_unstable: (state: ImageState) => JSXElement;
+export declare const renderImage_unstable: (state: ImageBaseState) => JSXElement;
 
 /**
  * Given user props, returns state and render function for an Image.
  */
 export declare const useImage_unstable: (props: ImageProps, ref: React_2.Ref<HTMLImageElement>) => ImageState;
 
+/**
+ * Base hook for Image component, which manages state related to slot structure.
+ * This hook excludes design props (shape, shadow, bordered, fit).
+ *
+ * @param props - User provided props to the Image component.
+ * @param ref - User provided ref to be passed to the Image component.
+ */
+export declare const useImageBase_unstable: (props: ImageBaseProps, ref: React_2.Ref<HTMLImageElement>) => ImageBaseState;
+
 export declare const useImageStyles_unstable: (state: ImageState) => ImageState;
 
 export { }

package/lib/Image.js

@@ -1 +1 @@
-export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './components/Image/index';
+export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable, useImageBase_unstable } from './components/Image/index';

package/lib/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState } from './components/Image/index';\nexport {\n  Image,\n  imageClassNames,\n  renderImage_unstable,\n  useImageStyles_unstable,\n  useImage_unstable,\n} from './components/Image/index';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './components/Image/index';\nexport {\n  Image,\n  imageClassNames,\n  renderImage_unstable,\n  useImageStyles_unstable,\n  useImage_unstable,\n  useImageBase_unstable,\n} from './components/Image/index';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}

package/lib/components/Image/Image.types.js

@@ -1 +1,3 @@
-export { };
+/**
+ * Image state without design-specific state (shape, shadow, bordered, fit).
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image/Image.types.ts"],"sourcesContent":["import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n  root: Slot<'img'>;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & {\n  /**\n   * An image can take up the width of its container.\n   *\n   * @default false\n   */\n  block?: boolean;\n\n  /**\n   * An image can appear with a rectangular border.\n   *\n   * @default false\n   */\n  bordered?: boolean;\n\n  /**\n   * An image can set how it should be resized to fit its container.\n   *\n   * @default 'default'\n   */\n  fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';\n\n  /**\n   * An image can appear elevated with shadow.\n   *\n   * @default false\n   */\n  shadow?: boolean;\n\n  /**\n   * An image can appear square, circular, or rounded.\n   *\n   * @default 'square'\n   */\n  shape?: 'square' | 'circular' | 'rounded';\n};\n\nexport type ImageState = ComponentState<ImageSlots> &\n  Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n"],"names":[],"mappings":"AA2CA,WACgF"}
+{"version":3,"sources":["../src/components/Image/Image.types.ts"],"sourcesContent":["import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n  root: Slot<'img'>;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & {\n  /**\n   * An image can take up the width of its container.\n   *\n   * @default false\n   */\n  block?: boolean;\n\n  /**\n   * An image can appear with a rectangular border.\n   *\n   * @default false\n   */\n  bordered?: boolean;\n\n  /**\n   * An image can set how it should be resized to fit its container.\n   *\n   * @default 'default'\n   */\n  fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';\n\n  /**\n   * An image can appear elevated with shadow.\n   *\n   * @default false\n   */\n  shadow?: boolean;\n\n  /**\n   * An image can appear square, circular, or rounded.\n   *\n   * @default 'square'\n   */\n  shape?: 'square' | 'circular' | 'rounded';\n};\n\n/**\n * Image props without design-specific props (shape, shadow, bordered, fit).\n * Use this when building a base image that is unstyled or uses a custom design system.\n */\nexport type ImageBaseProps = ComponentProps<ImageSlots>;\n\nexport type ImageState = ComponentState<ImageSlots> &\n  Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n\n/**\n * Image state without design-specific state (shape, shadow, bordered, fit).\n */\nexport type ImageBaseState = ComponentState<ImageSlots>;\n"],"names":[],"mappings":"AAoDA;;CAEC,GACD,WAAwD"}

package/lib/components/Image/index.js

@@ -1,4 +1,4 @@
 export { Image } from './Image';
 export { renderImage_unstable } from './renderImage';
-export { useImage_unstable } from './useImage';
+export { useImage_unstable, useImageBase_unstable } from './useImage';
 export { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image/index.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","imageClassNames","useImageStyles_unstable"],"mappings":"AACA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Image/index.ts"],"sourcesContent":["export type { ImageBaseProps, ImageBaseState, ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable, useImageBase_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","useImageBase_unstable","imageClassNames","useImageStyles_unstable"],"mappings":"AACA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

package/lib/components/Image/renderImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState): JSXElement => {\n  assertSlots<ImageSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageBaseState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageBaseState): JSXElement => {\n  assertSlots<ImageSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;;CAGC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/Image/useImage.js

@@ -1,15 +1,28 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Given user props, returns state and render function for an Image.
  */ export const useImage_unstable = (props, ref)=>{
-    const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;
-    const state = {
+    const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;
+    const state = useImageBase_unstable(imageProps, ref);
+    return {
         bordered,
-        fit,
         block,
-        shape,
+        fit,
         shadow,
+        shape,
+        ...state
+    };
+};
+/**
+ * Base hook for Image component, which manages state related to slot structure.
+ * This hook excludes design props (shape, shadow, bordered, fit).
+ *
+ * @param props - User provided props to the Image component.
+ * @param ref - User provided ref to be passed to the Image component.
+ */ export const useImageBase_unstable = (props, ref)=>{
+    return {
         components: {
             root: 'img'
         },
@@ -20,5 +33,4 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
             elementType: 'img'
         })
     };
-    return state;
 };

package/lib/components/Image/useImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image/useImage.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n  const state: ImageState = {\n    bordered,\n    fit,\n    block,\n    shape,\n    shadow,\n    components: {\n      root: 'img',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('img', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'img' },\n    ),\n  };\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,MAAM,SAAS,EAAEC,QAAQ,KAAK,EAAEC,QAAQ,QAAQ,EAAEC,SAAS,KAAK,EAAE,GAAGN;IAE/F,MAAMO,QAAoB;QACxBL;QACAC;QACAC;QACAC;QACAC;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMX,KAAKY,MAAM,CACfb,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;IAEzB;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Image/useImage.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;\n  const state = useImageBase_unstable(imageProps, ref);\n\n  return {\n    bordered,\n    block,\n    fit,\n    shadow,\n    shape,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Image component, which manages state related to slot structure.\n * This hook excludes design props (shape, shadow, bordered, fit).\n *\n * @param props - User provided props to the Image component.\n * @param ref - User provided ref to be passed to the Image component.\n */\nexport const useImageBase_unstable = (props: ImageBaseProps, ref: React.Ref<HTMLImageElement>): ImageBaseState => {\n  return {\n    components: {\n      root: 'img',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('img', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'img' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","block","fit","shadow","shape","imageProps","state","useImageBase_unstable","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAEC,MAAM,SAAS,EAAEC,SAAS,KAAK,EAAEC,QAAQ,QAAQ,EAAE,GAAGC,YAAY,GAAGP;IAC9G,MAAMQ,QAAQC,sBAAsBF,YAAYN;IAEhD,OAAO;QACLC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACT,OAAuBC;IAC3D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,KAAKc,MAAM,CACff,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib/index.js

@@ -1 +1 @@
-export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';
+export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable, useImageBase_unstable } from './Image';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Image,\n  imageClassNames,\n  renderImage_unstable,\n  useImageStyles_unstable,\n  useImage_unstable,\n  useImageBase_unstable,\n} from './Image';\nexport type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,UAAU"}

package/lib-commonjs/Image.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderImage_unstable: function() {
         return _index.renderImage_unstable;
     },
+    useImageBase_unstable: function() {
+        return _index.useImageBase_unstable;
+    },
     useImageStyles_unstable: function() {
         return _index.useImageStyles_unstable;
     },

package/lib-commonjs/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState } from './components/Image/index';\nexport {\n  Image,\n  imageClassNames,\n  renderImage_unstable,\n  useImageStyles_unstable,\n  useImage_unstable,\n} from './components/Image/index';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eACpBC,8BAAuB;;;eACvBC,wBAAiB;;;uBACZ,2BAA2B"}
+{"version":3,"sources":["../src/Image.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './components/Image/index';\nexport {\n  Image,\n  imageClassNames,\n  renderImage_unstable,\n  useImageStyles_unstable,\n  useImage_unstable,\n  useImageBase_unstable,\n} from './components/Image/index';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,2BAA2B"}

package/lib-commonjs/components/Image/Image.types.js

@@ -1,4 +1,6 @@
-"use strict";
+/**
+ * Image state without design-specific state (shape, shadow, bordered, fit).
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

package/lib-commonjs/components/Image/Image.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image/Image.types.ts"],"sourcesContent":["import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n  root: Slot<'img'>;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & {\n  /**\n   * An image can take up the width of its container.\n   *\n   * @default false\n   */\n  block?: boolean;\n\n  /**\n   * An image can appear with a rectangular border.\n   *\n   * @default false\n   */\n  bordered?: boolean;\n\n  /**\n   * An image can set how it should be resized to fit its container.\n   *\n   * @default 'default'\n   */\n  fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';\n\n  /**\n   * An image can appear elevated with shadow.\n   *\n   * @default false\n   */\n  shadow?: boolean;\n\n  /**\n   * An image can appear square, circular, or rounded.\n   *\n   * @default 'square'\n   */\n  shape?: 'square' | 'circular' | 'rounded';\n};\n\nexport type ImageState = ComponentState<ImageSlots> &\n  Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/Image/Image.types.ts"],"sourcesContent":["import type { ComponentState, ComponentProps, Slot } from '@fluentui/react-utilities';\n\nexport type ImageSlots = {\n  root: Slot<'img'>;\n};\n\nexport type ImageProps = ComponentProps<ImageSlots> & {\n  /**\n   * An image can take up the width of its container.\n   *\n   * @default false\n   */\n  block?: boolean;\n\n  /**\n   * An image can appear with a rectangular border.\n   *\n   * @default false\n   */\n  bordered?: boolean;\n\n  /**\n   * An image can set how it should be resized to fit its container.\n   *\n   * @default 'default'\n   */\n  fit?: 'none' | 'center' | 'contain' | 'cover' | 'default';\n\n  /**\n   * An image can appear elevated with shadow.\n   *\n   * @default false\n   */\n  shadow?: boolean;\n\n  /**\n   * An image can appear square, circular, or rounded.\n   *\n   * @default 'square'\n   */\n  shape?: 'square' | 'circular' | 'rounded';\n};\n\n/**\n * Image props without design-specific props (shape, shadow, bordered, fit).\n * Use this when building a base image that is unstyled or uses a custom design system.\n */\nexport type ImageBaseProps = ComponentProps<ImageSlots>;\n\nexport type ImageState = ComponentState<ImageSlots> &\n  Required<Pick<ImageProps, 'block' | 'bordered' | 'fit' | 'shadow' | 'shape'>>;\n\n/**\n * Image state without design-specific state (shape, shadow, bordered, fit).\n */\nexport type ImageBaseState = ComponentState<ImageSlots>;\n"],"names":[],"mappings":"AAoDA;;CAEC,GACD,WAAwD"}

package/lib-commonjs/components/Image/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderImage_unstable: function() {
         return _renderImage.renderImage_unstable;
     },
+    useImageBase_unstable: function() {
+        return _useImage.useImageBase_unstable;
+    },
     useImageStyles_unstable: function() {
         return _useImageStylesstyles.useImageStyles_unstable;
     },

package/lib-commonjs/components/Image/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image/index.ts"],"sourcesContent":["export type { ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","imageClassNames","useImageStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,YAAK;;;eAGLG,qCAAe;;;eAFfF,iCAAoB;;;eAEHG,6CAAuB;;;eADxCF,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACnB,aAAa;sCACU,0BAA0B"}
+{"version":3,"sources":["../src/components/Image/index.ts"],"sourcesContent":["export type { ImageBaseProps, ImageBaseState, ImageProps, ImageSlots, ImageState } from './Image.types';\nexport { Image } from './Image';\nexport { renderImage_unstable } from './renderImage';\nexport { useImage_unstable, useImageBase_unstable } from './useImage';\nexport { imageClassNames, useImageStyles_unstable } from './useImageStyles.styles';\n"],"names":["Image","renderImage_unstable","useImage_unstable","useImageBase_unstable","imageClassNames","useImageStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,YAAK;;;eAGLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}

package/lib-commonjs/components/Image/renderImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageState): JSXElement => {\n  assertSlots<ImageSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAQjD,MAAMC,uBAAuB,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}
+{"version":3,"sources":["../src/components/Image/renderImage.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ImageSlots, ImageBaseState } from './Image.types';\n\n/**\n * Define the render function.\n * Given the state of an image, renders it.\n */\nexport const renderImage_unstable = (state: ImageBaseState): JSXElement => {\n  assertSlots<ImageSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImage_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAQjD,MAAMC,uBAAuB,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

package/lib-commonjs/components/Image/useImage.js

@@ -1,10 +1,19 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useImage_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useImageBase_unstable: function() {
+        return useImageBase_unstable;
+    },
+    useImage_unstable: function() {
         return useImage_unstable;
     }
 });
@@ -12,13 +21,19 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const useImage_unstable = (props, ref)=>{
-    const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;
-    const state = {
+    const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;
+    const state = useImageBase_unstable(imageProps, ref);
+    return {
         bordered,
-        fit,
         block,
-        shape,
+        fit,
         shadow,
+        shape,
+        ...state
+    };
+};
+const useImageBase_unstable = (props, ref)=>{
+    return {
         components: {
             root: 'img'
         },
@@ -29,5 +44,4 @@ const useImage_unstable = (props, ref)=>{
             elementType: 'img'
         })
     };
-    return state;
 };

package/lib-commonjs/components/Image/useImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Image/useImage.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered = false, fit = 'default', block = false, shape = 'square', shadow = false } = props;\n\n  const state: ImageState = {\n    bordered,\n    fit,\n    block,\n    shape,\n    shadow,\n    components: {\n      root: 'img',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('img', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'img' },\n    ),\n  };\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","fit","block","shape","shadow","state","components","root","always","elementType"],"mappings":";;;;+BAOaG;;;;;;;iEAPU,QAAQ;gCACgB,4BAA4B;AAMpE,0BAA0B,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,MAAM,SAAS,EAAEC,QAAQ,KAAK,EAAEC,QAAQ,QAAQ,EAAEC,SAAS,KAAK,EAAE,GAAGN;IAE/F,MAAMO,QAAoB;QACxBL;QACAC;QACAC;QACAC;QACAC;QACAE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMX,oBAAAA,CAAKY,MAAM,KACfb,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;IAEzB;IAEA,OAAOJ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Image/useImage.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ImageBaseProps, ImageBaseState, ImageProps, ImageState } from './Image.types';\n\n/**\n * Given user props, returns state and render function for an Image.\n */\nexport const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageElement>): ImageState => {\n  const { bordered = false, block = false, fit = 'default', shadow = false, shape = 'square', ...imageProps } = props;\n  const state = useImageBase_unstable(imageProps, ref);\n\n  return {\n    bordered,\n    block,\n    fit,\n    shadow,\n    shape,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Image component, which manages state related to slot structure.\n * This hook excludes design props (shape, shadow, bordered, fit).\n *\n * @param props - User provided props to the Image component.\n * @param ref - User provided ref to be passed to the Image component.\n */\nexport const useImageBase_unstable = (props: ImageBaseProps, ref: React.Ref<HTMLImageElement>): ImageBaseState => {\n  return {\n    components: {\n      root: 'img',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('img', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'img' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useImage_unstable","props","ref","bordered","block","fit","shadow","shape","imageProps","state","useImageBase_unstable","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;;;;;IA8Baa,qBAAAA;;;qBArBAV;;;;;iEAPU,QAAQ;gCACgB,4BAA4B;AAMpE,MAAMA,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,WAAW,KAAK,EAAEC,QAAQ,KAAK,EAAEC,MAAM,SAAS,EAAEC,SAAS,KAAK,EAAEC,QAAQ,QAAQ,EAAE,GAAGC,YAAY,GAAGP;IAC9G,MAAMQ,QAAQC,sBAAsBF,YAAYN;IAEhD,OAAO;QACLC;QACAC;QACAC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACR,OAAuBC;IAC3D,OAAO;QACLS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMb,oBAAAA,CAAKc,MAAM,KACff,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;IAEzB;AACF,EAAE"}

package/lib-commonjs/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderImage_unstable: function() {
         return _Image.renderImage_unstable;
     },
+    useImageBase_unstable: function() {
+        return _Image.useImageBase_unstable;
+    },
     useImageStyles_unstable: function() {
         return _Image.useImageStyles_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Image, imageClassNames, renderImage_unstable, useImageStyles_unstable, useImage_unstable } from './Image';\nexport type { ImageProps, ImageSlots, ImageState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAAEC,sBAAe;;;eAAEC,2BAAoB;;;eAAEC,8BAAuB;;;eAAEC,wBAAiB;;;uBAAQ,UAAU"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Image,\n  imageClassNames,\n  renderImage_unstable,\n  useImageStyles_unstable,\n  useImage_unstable,\n  useImageBase_unstable,\n} from './Image';\nexport type { ImageProps, ImageSlots, ImageState, ImageBaseProps, ImageBaseState } from './Image';\n"],"names":["Image","imageClassNames","renderImage_unstable","useImageStyles_unstable","useImage_unstable","useImageBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-image",
-  "version": "9.3.15",
+  "version": "9.4.0",
   "description": "Fluent UI React Image component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",