feat(react-headless-components-preview): add Image component (#36099)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: dmytrokirpa

change/@fluentui-react-headless-components-preview-27f331ba-e271-4731-845d-43a41cce9698.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add Image component",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js

@@ -9,6 +9,7 @@ import * as Dialog from '@fluentui/react-headless-components-preview/dialog';
 import * as Divider from '@fluentui/react-headless-components-preview/divider';
 import * as Drawer from '@fluentui/react-headless-components-preview/drawer';
 import * as Field from '@fluentui/react-headless-components-preview/field';
+import * as Image from '@fluentui/react-headless-components-preview/image';
 import * as Input from '@fluentui/react-headless-components-preview/input';
 import * as Link from '@fluentui/react-headless-components-preview/link';
 import * as MessageBar from '@fluentui/react-headless-components-preview/message-bar';
@@ -43,6 +44,7 @@ console.log({
   Divider,
   Drawer,
   Field,
+  Image,
   Input,
   Link,
   MessageBar,

packages/react-components/react-headless-components-preview/library/etc/image.api.md

@@ -0,0 +1,30 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { ImageBaseProps as ImageProps } from '@fluentui/react-image';
+import { ImageSlots } from '@fluentui/react-image';
+import { ImageBaseState as ImageState } from '@fluentui/react-image';
+import { renderImage_unstable as renderImage } from '@fluentui/react-image';
+import { useImageBase_unstable as useImage } from '@fluentui/react-image';
+
+// @public
+const Image_2: ForwardRefComponent<ImageProps>;
+export { Image_2 as Image }
+
+export { ImageProps }
+
+export { ImageSlots }
+
+export { ImageState }
+
+export { renderImage }
+
+export { useImage }
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/package.json

@@ -135,6 +135,12 @@
       "import": "./lib/field.js",
       "require": "./lib-commonjs/field.js"
     },
+    "./image": {
+      "types": "./dist/image.d.ts",
+      "node": "./lib-commonjs/image.js",
+      "import": "./lib/image.js",
+      "require": "./lib-commonjs/image.js"
+    },
     "./input": {
       "types": "./dist/input.d.ts",
       "node": "./lib-commonjs/input.js",

packages/react-components/react-headless-components-preview/library/src/components/Image/Image.test.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { Image } from './Image';
+
+describe('Image', () => {
+  isConformant({
+    Component: Image,
+    displayName: 'Image',
+  });
+
+  it('renders an image element with the correct attributes', () => {
+    const props = {
+      alt: 'Default Image',
+      src: 'https://fabricweb.azureedge.net/fabric-website/assets/images/wireframe/image.png',
+    };
+
+    const { getByRole } = render(<Image alt={props.alt} src={props.src} />);
+
+    const img = getByRole('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('alt', props.alt);
+    expect(img).toHaveAttribute('src', props.src);
+  });
+});

packages/react-components/react-headless-components-preview/library/src/components/Image/Image.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useImage } from './useImage';
+import { renderImage } from './renderImage';
+import type { ImageProps } from './Image.types';
+
+/**
+ * Image component - represents an image, which can be used to display a picture, icon, or other visual content.
+ */
+export const Image: ForwardRefComponent<ImageProps> = React.forwardRef((props, ref) => {
+  const state = useImage(props, ref);
+
+  return renderImage(state);
+});
+
+Image.displayName = 'Image';

packages/react-components/react-headless-components-preview/library/src/components/Image/Image.types.ts

@@ -0,0 +1 @@
+export type { ImageSlots, ImageBaseProps as ImageProps, ImageBaseState as ImageState } from '@fluentui/react-image';

packages/react-components/react-headless-components-preview/library/src/components/Image/index.ts

@@ -0,0 +1,4 @@
+export { Image } from './Image';
+export type { ImageSlots, ImageProps, ImageState } from './Image.types';
+export { renderImage } from './renderImage';
+export { useImage } from './useImage';

packages/react-components/react-headless-components-preview/library/src/components/Image/renderImage.tsx

@@ -0,0 +1 @@
+export { renderImage_unstable as renderImage } from '@fluentui/react-image';

packages/react-components/react-headless-components-preview/library/src/components/Image/useImage.ts

@@ -0,0 +1 @@
+export { useImageBase_unstable as useImage } from '@fluentui/react-image';