@fluentui/react-icons-file-type 0.0.1

package/lib/common/fileTypeIconResolver.js

@@ -0,0 +1,83 @@
+import { getFileTypeIconExtensionMap } from './fileTypeIconMap.generated';
+import { TYPE_TO_ICON_NAME } from './fileIconTypes.generated';
+import { DEFAULT_BASE_URL, DEFAULT_ICON_SIZE } from './constants';
+const GENERIC_FILE = 'genericfile';
+/**
+ * Resolves the icon base name (e.g. `docx`) for the given file `extension` or
+ * {@link FileIconType}. Extension takes precedence over type; unknown or absent
+ * inputs fall back to the generic file icon.
+ */
+export function getFileTypeIconNameFromExtensionOrType(extension, type) {
+    if (extension) {
+        // Strip periods, force lowercase.
+        extension = extension.replace('.', '').toLowerCase();
+        return getFileTypeIconExtensionMap()[extension] || GENERIC_FILE;
+    }
+    else if (type) {
+        return TYPE_TO_ICON_NAME[type] || GENERIC_FILE;
+    }
+    return GENERIC_FILE;
+}
+/**
+ * Enumerates the published pixel-density variants for a given `size`/`imageFileType`, ordered
+ * from lowest (`1x`) to highest. These feed an `<img srcset>` so the browser — not our JS —
+ * picks the right asset for the device pixel ratio. This keeps the markup deterministic across
+ * server and client (no hydration mismatch / no post-mount density swap), and lets the browser
+ * re-evaluate when a window moves to a display with a different DPI.
+ *
+ * The list honors the gaps in the published assets:
+ * - SVGs scale losslessly, so only the `1.5x` band has a dedicated asset (and size 20 has none).
+ * - PNGs publish a distinct asset per density bucket (`1.5x`/`2x`/`3x`/`4x`), except size 20 which
+ *   has no `1.5x` asset.
+ */
+function getFileTypeIconDensityVariants(size, imageFileType) {
+    // 1x is always available.
+    const variants = [{ descriptor: '1x', suffix: '' }];
+    if (imageFileType === 'svg') {
+        // SVGs scale, so the only extra asset is the 1.5x pixel-snapping band (absent at size 20).
+        if (size !== 20) {
+            variants.push({ descriptor: '1.5x', suffix: '_1.5x' });
+        }
+        return variants;
+    }
+    // PNGs need a distinct asset per density bucket (size 20 is missing the 1.5x asset).
+    if (size !== 20) {
+        variants.push({ descriptor: '1.5x', suffix: '_1.5x' });
+    }
+    variants.push({ descriptor: '2x', suffix: '_2x' }, { descriptor: '3x', suffix: '_3x' }, { descriptor: '4x', suffix: '_4x' });
+    return variants;
+}
+/**
+ * Resolves the CDN-relative standard-density (1x) source URL for a file type icon.
+ *
+ * This is the deterministic, SSR-safe fallback used for the `<img src>` attribute. For
+ * device-pixel-ratio-aware selection, pair it with {@link getFileTypeIconSrcSet} on `srcset`.
+ *
+ * @param options - the file type icon options (extension/type, size, imageFileType)
+ * @param baseUrl - the base url to resolve the asset against. Defaults to the Fluent CDN.
+ * @returns the fully-qualified icon url.
+ */
+export function getFileTypeIconSrc(options, baseUrl = DEFAULT_BASE_URL) {
+    const { extension, size = DEFAULT_ICON_SIZE, type, imageFileType = 'svg' } = options;
+    const baseIconName = getFileTypeIconNameFromExtensionOrType(extension, type); // eg: docx
+    return `${baseUrl}${size}/${baseIconName}.${imageFileType}`;
+}
+/**
+ * Resolves the CDN-relative `srcset` for a file type icon: a comma-separated list of every
+ * published density variant with its `1x`/`1.5x`/… descriptor.
+ *
+ * Letting the browser pick the density (instead of reading `devicePixelRatio` in JS) keeps the
+ * rendered markup identical on the server and the client, avoiding hydration mismatches and the
+ * flicker/redundant-fetch of a post-mount density swap.
+ *
+ * @param options - the file type icon options (extension/type, size, imageFileType)
+ * @param baseUrl - the base url to resolve the assets against. Defaults to the Fluent CDN.
+ * @returns the `srcset` value, e.g. `…/24/docx.png 1x, …/24_1.5x/docx.png 1.5x, …`.
+ */
+export function getFileTypeIconSrcSet(options, baseUrl = DEFAULT_BASE_URL) {
+    const { extension, size = DEFAULT_ICON_SIZE, type, imageFileType = 'svg' } = options;
+    const baseIconName = getFileTypeIconNameFromExtensionOrType(extension, type); // eg: docx
+    return getFileTypeIconDensityVariants(size, imageFileType)
+        .map(({ descriptor, suffix }) => `${baseUrl}${size}${suffix}/${baseIconName}.${imageFileType} ${descriptor}`)
+        .join(', ');
+}

package/lib/common/useFileTypeIcon.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { FileTypeIconOptions } from './fileTypeIconResolver';
+export interface FileTypeIconProps extends FileTypeIconOptions, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'width' | 'height'> {
+}
+/**
+ * Data attribute set on the rendered `<img>`. It is the styling hook targeted by the
+ * opt-in `@fluentui/react-icons-file-type/headless/styles.css` (or by a consumer's own
+ * CSS). The attribute is inert until such CSS is loaded, so it is harmless for the default
+ * (Griffel-styled) entry point.
+ */
+export declare const fileTypeIconDataAttribute = "data-fui-filetype-icon";
+/**
+ * The resolved `<img>` props produced by {@link useFileTypeIcon} and consumed by
+ * {@link renderFileTypeIcon}. Following the Fluent v9 pattern, the state is a plain,
+ * mutable bag of slot props so a style hook (e.g. `useFileTypeIconStyles`) can layer
+ * additional classes on top before rendering.
+ */
+export interface FileTypeIconState extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    'data-fui-filetype-icon': '';
+}
+/**
+ * State hook: resolves {@link FileTypeIconProps} into the {@link FileTypeIconState} `<img>`
+ * props. This is the shared core used by both the headless and the Griffel-styled
+ * `FileTypeIcon` components — the latter runs a style hook over the returned state before
+ * rendering.
+ *
+ * The asset host is resolved from the nearest `FileTypeIconsProvider`, falling back to the
+ * Fluent CDN default when no provider is present.
+ */
+export declare function useFileTypeIcon(props: FileTypeIconProps): FileTypeIconState;
+/**
+ * Render hook: turns a resolved {@link FileTypeIconState} into the `<img>` element. Returns
+ * `null` when there is no resolvable `src`.
+ */
+export declare function renderFileTypeIcon(state: FileTypeIconState): React.ReactElement | null;

package/lib/common/useFileTypeIcon.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { getFileTypeIconSrc, getFileTypeIconSrcSet } from './fileTypeIconResolver';
+import { useFileTypeIconsContext } from './FileTypeIconsContext';
+import { DEFAULT_ICON_SIZE } from './constants';
+/**
+ * Data attribute set on the rendered `<img>`. It is the styling hook targeted by the
+ * opt-in `@fluentui/react-icons-file-type/headless/styles.css` (or by a consumer's own
+ * CSS). The attribute is inert until such CSS is loaded, so it is harmless for the default
+ * (Griffel-styled) entry point.
+ */
+export const fileTypeIconDataAttribute = 'data-fui-filetype-icon';
+/**
+ * Resolves the accessibility attributes for the rendered `<img>`.
+ *
+ * The icon is considered *labelled* when it has an accessible name — a non-empty `alt`
+ * (or `extension` fallback), an `aria-label`, an `aria-labelledby`, or the native `title`
+ * tooltip. Otherwise it is treated as purely decorative.
+ *
+ * Notes:
+ * - `role` is intentionally omitted. A native `<img>` already exposes the implicit `img`
+ *   role when it has an accessible name, so setting `role="img"` would be redundant.
+ * - We do NOT mirror the `title` -> `aria-label` mapping used for SVG icons (see
+ *   `useIconState` in `@fluentui/react-icons`). That mapping is an SVG-specific workaround
+ *   because SVG `<title>` is a child element, not an attribute. On a native `<img>`, `title`
+ *   is a real HTML attribute that both renders a tooltip and participates in the accessible
+ *   name computation (priority: `aria-labelledby` > `aria-label` > `alt` > `title`).
+ * - When labelled by `aria-*` or `title`, we omit `alt` entirely rather than emit `alt=""`.
+ *   An empty `alt` forces the decorative (`presentation`) role and suppresses those name
+ *   sources, which would hide the icon from assistive technologies.
+ * - For truly decorative icons we emit `alt=""` (the spec-defined decorative opt-out) and
+ *   additionally set `aria-hidden` as a defensive guard against browser auto-labelling
+ *   heuristics (e.g. generated image descriptions) that could otherwise surface the image
+ *   to assistive technologies.
+ */
+function getImageA11yProps(props) {
+    var _a;
+    const resolvedAlt = (_a = props.alt) !== null && _a !== void 0 ? _a : props.extension;
+    // Labelled by alt/extension -> use it as the accessible name.
+    if (resolvedAlt) {
+        return { alt: resolvedAlt };
+    }
+    // Labelled by aria-* or the native title tooltip -> keep the icon in the a11y tree and
+    // omit alt so those sources can supply the accessible name (alt="" would force a
+    // decorative role and suppress them).
+    if (props['aria-label'] || props['aria-labelledby'] || props.title) {
+        return {};
+    }
+    // Truly decorative -> spec-defined opt-out plus defensive guard against auto-labelling.
+    return { alt: '', 'aria-hidden': true };
+}
+/**
+ * State hook: resolves {@link FileTypeIconProps} into the {@link FileTypeIconState} `<img>`
+ * props. This is the shared core used by both the headless and the Griffel-styled
+ * `FileTypeIcon` components — the latter runs a style hook over the returned state before
+ * rendering.
+ *
+ * The asset host is resolved from the nearest `FileTypeIconsProvider`, falling back to the
+ * Fluent CDN default when no provider is present.
+ */
+export function useFileTypeIcon(props) {
+    const { extension, type, size = DEFAULT_ICON_SIZE, imageFileType, className, ...imgProps } = props;
+    const { baseUrl } = useFileTypeIconsContext();
+    const iconOptions = { extension, type, size, imageFileType };
+    // `src` is the deterministic 1x fallback; `srcset` lets the browser pick the right density for
+    // the device pixel ratio. Resolving density in the browser (rather than from `devicePixelRatio`
+    // in JS) keeps server and client markup identical — no hydration mismatch, no post-mount swap.
+    const src = getFileTypeIconSrc(iconOptions, baseUrl);
+    const srcSet = getFileTypeIconSrcSet(iconOptions, baseUrl);
+    const a11yProps = getImageA11yProps(props);
+    return {
+        ...imgProps,
+        ...a11yProps,
+        src,
+        srcSet,
+        width: size,
+        height: size,
+        className,
+        [fileTypeIconDataAttribute]: '',
+    };
+}
+/**
+ * Render hook: turns a resolved {@link FileTypeIconState} into the `<img>` element. Returns
+ * `null` when there is no resolvable `src`.
+ */
+export function renderFileTypeIcon(state) {
+    if (!state.src) {
+        return null;
+    }
+    return React.createElement("img", { ...state });
+}

package/lib/headless/FileTypeIcon.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { FileTypeIconProps } from '../common/useFileTypeIcon';
+export type { FileTypeIconProps, FileTypeIconState } from '../common/useFileTypeIcon';
+export { fileTypeIconDataAttribute, useFileTypeIcon, renderFileTypeIcon } from '../common/useFileTypeIcon';
+/**
+ * Headless (Griffel-free) file type icon. Renders an `<img>` sourced from CDN-hosted assets
+ * and tagged with the `fileTypeIconDataAttribute` styling hook, but ships **no** styling
+ * runtime — bring your own styles via `@fluentui/react-icons-file-type/headless/styles.css`, a
+ * `className`, or your own CSS targeting `[data-fui-filetype-icon]`.
+ *
+ * It composes the shared {@link useFileTypeIcon} (state) and {@link renderFileTypeIcon} (render)
+ * hooks; the default Griffel-styled entry point reuses the same hooks with an extra style hook.
+ *
+ * The asset host is resolved from the nearest `FileTypeIconsProvider`, falling back to the
+ * Fluent CDN default when no provider is present.
+ *
+ * Prefer the default `@fluentui/react-icons-file-type` entry point unless you specifically
+ * want to avoid the Griffel runtime.
+ */
+export declare const FileTypeIcon: React.FC<FileTypeIconProps>;

package/lib/headless/FileTypeIcon.js

@@ -0,0 +1,21 @@
+import { useFileTypeIcon, renderFileTypeIcon } from '../common/useFileTypeIcon';
+export { fileTypeIconDataAttribute, useFileTypeIcon, renderFileTypeIcon } from '../common/useFileTypeIcon';
+/**
+ * Headless (Griffel-free) file type icon. Renders an `<img>` sourced from CDN-hosted assets
+ * and tagged with the `fileTypeIconDataAttribute` styling hook, but ships **no** styling
+ * runtime — bring your own styles via `@fluentui/react-icons-file-type/headless/styles.css`, a
+ * `className`, or your own CSS targeting `[data-fui-filetype-icon]`.
+ *
+ * It composes the shared {@link useFileTypeIcon} (state) and {@link renderFileTypeIcon} (render)
+ * hooks; the default Griffel-styled entry point reuses the same hooks with an extra style hook.
+ *
+ * The asset host is resolved from the nearest `FileTypeIconsProvider`, falling back to the
+ * Fluent CDN default when no provider is present.
+ *
+ * Prefer the default `@fluentui/react-icons-file-type` entry point unless you specifically
+ * want to avoid the Griffel runtime.
+ */
+export const FileTypeIcon = (props) => {
+    const state = useFileTypeIcon(props);
+    return renderFileTypeIcon(state);
+};

package/lib/headless/index.d.ts

@@ -0,0 +1,8 @@
+export { FileTypeIcon, fileTypeIconDataAttribute } from './FileTypeIcon';
+export type { FileTypeIconProps } from './FileTypeIcon';
+export { FileTypeIconsProvider, useFileTypeIconsContext } from '../common/FileTypeIconsContext';
+export type { FileTypeIconsContextValue, FileTypeIconsProviderProps } from '../common/FileTypeIconsContext';
+export { FileIconType } from '../common/FileIconType';
+export type { FileIconTypeInput } from '../common/FileIconType';
+export { DEFAULT_BASE_URL, FLUENT_CDN_BASE_URL, DEFAULT_ICON_SIZE, ICON_SIZES } from '../common/constants';
+export type { FileTypeIconSize, ImageFileType } from '../common/constants';

package/lib/headless/index.js

@@ -0,0 +1,8 @@
+// Headless (Griffel-free) entry point for `@fluentui/react-icons-file-type/headless`.
+// Re-exports the styling-runtime-free `FileTypeIcon` plus the shared, framework-agnostic
+// pieces (provider, context, `FileIconType`, constants) so this subpath is fully usable
+// without pulling in `@griffel/react`.
+export { FileTypeIcon, fileTypeIconDataAttribute } from './FileTypeIcon';
+export { FileTypeIconsProvider, useFileTypeIconsContext } from '../common/FileTypeIconsContext';
+export { FileIconType } from '../common/FileIconType';
+export { DEFAULT_BASE_URL, FLUENT_CDN_BASE_URL, DEFAULT_ICON_SIZE, ICON_SIZES } from '../common/constants';

package/lib/headless/styles.css

@@ -0,0 +1,13 @@
+/*
+ * Opt-in static styles for the headless `FileTypeIcon` from
+ * `@fluentui/react-icons-file-type/headless`. Import this file once in your app to reproduce
+ * the default (Griffel) box behavior without the CSS-in-JS runtime:
+ *
+ *   import '@fluentui/react-icons-file-type/headless/styles.css';
+ *
+ * Or skip it and target `[data-fui-filetype-icon]` (or a `className`) with your own CSS.
+ */
+[data-fui-filetype-icon] {
+  display: inline-block;
+  object-fit: contain;
+}

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+export { FileTypeIcon } from './FileTypeIcon';
+export type { FileTypeIconProps } from './FileTypeIcon';
+export { FileTypeIconsProvider, useFileTypeIconsContext } from './common/FileTypeIconsContext';
+export type { FileTypeIconsContextValue, FileTypeIconsProviderProps } from './common/FileTypeIconsContext';
+export { FileIconType } from './common/FileIconType';
+export type { FileIconTypeInput } from './common/FileIconType';
+export { DEFAULT_BASE_URL, FLUENT_CDN_BASE_URL, DEFAULT_ICON_SIZE, ICON_SIZES } from './common/constants';
+export type { FileTypeIconSize, ImageFileType } from './common/constants';

package/lib/index.js

@@ -0,0 +1,4 @@
+export { FileTypeIcon } from './FileTypeIcon';
+export { FileTypeIconsProvider, useFileTypeIconsContext } from './common/FileTypeIconsContext';
+export { FileIconType } from './common/FileIconType';
+export { DEFAULT_BASE_URL, FLUENT_CDN_BASE_URL, DEFAULT_ICON_SIZE, ICON_SIZES } from './common/constants';

package/lib-cjs/FileTypeIcon.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { FileTypeIconProps } from './common/useFileTypeIcon';
+export type { FileTypeIconProps } from './common/useFileTypeIcon';
+/**
+ * Renders a file type icon as an `<img>` sourced from CDN-hosted assets, styled with Griffel
+ * (zero setup required). This is the default entry point.
+ *
+ * It composes the same state ({@link useFileTypeIcon}) and render ({@link renderFileTypeIcon})
+ * hooks as the headless `FileTypeIcon`, inserting a Griffel style hook in between to layer the
+ * static styles. To avoid the Griffel runtime, import from the `/headless` subpath and provide
+ * your own styles (see `headless/styles.css`).
+ *
+ * The asset host is resolved from the nearest `FileTypeIconsProvider`, falling back to the
+ * Fluent CDN default when no provider is present.
+ */
+export declare const FileTypeIcon: React.FC<FileTypeIconProps>;

package/lib-cjs/FileTypeIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileTypeIcon = void 0;
+const useFileTypeIcon_1 = require("./common/useFileTypeIcon");
+const FileTypeIcon_styles_1 = require("./FileTypeIcon.styles");
+/**
+ * Renders a file type icon as an `<img>` sourced from CDN-hosted assets, styled with Griffel
+ * (zero setup required). This is the default entry point.
+ *
+ * It composes the same state ({@link useFileTypeIcon}) and render ({@link renderFileTypeIcon})
+ * hooks as the headless `FileTypeIcon`, inserting a Griffel style hook in between to layer the
+ * static styles. To avoid the Griffel runtime, import from the `/headless` subpath and provide
+ * your own styles (see `headless/styles.css`).
+ *
+ * The asset host is resolved from the nearest `FileTypeIconsProvider`, falling back to the
+ * Fluent CDN default when no provider is present.
+ */
+const FileTypeIcon = (props) => {
+    const state = (0, useFileTypeIcon_1.useFileTypeIcon)(props);
+    (0, FileTypeIcon_styles_1.useFileTypeIconStyles)(state);
+    return (0, useFileTypeIcon_1.renderFileTypeIcon)(state);
+};
+exports.FileTypeIcon = FileTypeIcon;

package/lib-cjs/FileTypeIcon.styles.d.ts

@@ -0,0 +1,7 @@
+import type { FileTypeIconState } from './common/useFileTypeIcon';
+/**
+ * Style hook: layers the Griffel `root` class onto a resolved {@link FileTypeIconState},
+ * merging ahead of any consumer-provided `className`. Mutates and returns the same state,
+ * following the Fluent v9 style-hook convention.
+ */
+export declare function useFileTypeIconStyles(state: FileTypeIconState): FileTypeIconState;

package/lib-cjs/FileTypeIcon.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileTypeIconStyles = void 0;
+const react_1 = require("@griffel/react");
+/**
+ * Static styles for the `FileTypeIcon` image. `object-fit: contain` keeps non-square assets
+ * from being stretched within the square `width`/`height` box (both applied inline by the
+ * state hook from the `size` prop). `object-fit` only affects replaced elements, so these
+ * styles must live on the `<img>` itself, not on a wrapper.
+ */
+const useStyles = (0, react_1.makeStyles)({
+    root: {
+        display: 'inline-block',
+        objectFit: 'contain',
+    },
+});
+/**
+ * Style hook: layers the Griffel `root` class onto a resolved {@link FileTypeIconState},
+ * merging ahead of any consumer-provided `className`. Mutates and returns the same state,
+ * following the Fluent v9 style-hook convention.
+ */
+function useFileTypeIconStyles(state) {
+    const styles = useStyles();
+    state.className = (0, react_1.mergeClasses)(styles.root, state.className);
+    return state;
+}
+exports.useFileTypeIconStyles = useFileTypeIconStyles;

package/lib-cjs/common/FileIconType.d.ts

@@ -0,0 +1,2 @@
+export { FileIconType } from './fileIconTypes.generated';
+export type { FileIconTypeInput } from './fileIconTypes.generated';

package/lib-cjs/common/FileIconType.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileIconType = void 0;
+// Public, stable module path for the file type icon enum. The actual definitions are
+// generated from `fileIconTypes.json` into `fileIconTypes.generated.ts` (run `npm run
+// generate`); this barrel re-exports the public surface so consumers and internal code
+// import from a hand-written path rather than the generated artifact.
+var fileIconTypes_generated_1 = require("./fileIconTypes.generated");
+Object.defineProperty(exports, "FileIconType", { enumerable: true, get: function () { return fileIconTypes_generated_1.FileIconType; } });

package/lib-cjs/common/FileTypeIconsContext.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export interface FileTypeIconsContextValue {
+    /**
+     * Base URL used to resolve file type icon assets for all descendant `FileTypeIcon`
+     * components. Defaults to the Fluent CDN so no configuration is required to get started.
+     * Provide your own asset host to serve the icons from a different (e.g. same-origin) location.
+     */
+    baseUrl: string;
+}
+export interface FileTypeIconsProviderProps {
+    /**
+     * Base URL used to resolve file type icon assets.
+     * @default the Fluent CDN base url
+     */
+    baseUrl?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Provides the `baseUrl` used by descendant `FileTypeIcon` components to resolve
+ * their CDN-hosted assets. Omitting `baseUrl` falls back to the Fluent CDN, mirroring
+ * the zero-configuration ergonomics of the legacy `initializeFileTypeIcons` default
+ * without hardcoding the CDN inside the icon component itself.
+ */
+export declare const FileTypeIconsProvider: React.FC<FileTypeIconsProviderProps>;
+/**
+ * Returns the current `FileTypeIcons` context value. When no provider is present, the
+ * default Fluent CDN `baseUrl` is returned so icons render without explicit setup.
+ */
+export declare const useFileTypeIconsContext: () => FileTypeIconsContextValue;

package/lib-cjs/common/FileTypeIconsContext.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFileTypeIconsContext = exports.FileTypeIconsProvider = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const constants_1 = require("./constants");
+const FileTypeIconsContext = React.createContext(undefined);
+/**
+ * Provides the `baseUrl` used by descendant `FileTypeIcon` components to resolve
+ * their CDN-hosted assets. Omitting `baseUrl` falls back to the Fluent CDN, mirroring
+ * the zero-configuration ergonomics of the legacy `initializeFileTypeIcons` default
+ * without hardcoding the CDN inside the icon component itself.
+ */
+const FileTypeIconsProvider = (props) => {
+    const { baseUrl = constants_1.DEFAULT_BASE_URL, children } = props;
+    const value = React.useMemo(() => ({ baseUrl }), [baseUrl]);
+    return React.createElement(FileTypeIconsContext.Provider, { value: value }, children);
+};
+exports.FileTypeIconsProvider = FileTypeIconsProvider;
+/**
+ * Returns the current `FileTypeIcons` context value. When no provider is present, the
+ * default Fluent CDN `baseUrl` is returned so icons render without explicit setup.
+ */
+const useFileTypeIconsContext = () => {
+    const context = React.useContext(FileTypeIconsContext);
+    return context !== null && context !== void 0 ? context : { baseUrl: constants_1.DEFAULT_BASE_URL };
+};
+exports.useFileTypeIconsContext = useFileTypeIconsContext;

package/lib-cjs/common/constants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Base URL of the Microsoft Fluent CDN that hosts the file type icon assets.
+ *
+ * NOTE: this value is intentionally version-stamped by the CDN. It is provided as a
+ * sensible, overridable default so consumers do not need to configure a CDN to get
+ * started. To use your own asset host, supply a `baseUrl` to `FileTypeIconsProvider`
+ * (or to the individual helper functions / the `baseUrl` prop on `FileTypeIcon`).
+ */
+export declare const FLUENT_CDN_BASE_URL = "https://res.cdn.office.net/files/fabric-cdn-prod_20260623.001";
+/**
+ * Default base URL used to resolve file type icon assets when no `baseUrl` is provided.
+ * Points at the `item-types` asset folder on the Fluent CDN.
+ */
+export declare const DEFAULT_BASE_URL: string;
+/** The set of pixel sizes for which file type icon assets are published. */
+export declare const ICON_SIZES: readonly [16, 20, 24, 32, 40, 48, 64, 96];
+/** The default icon size in pixels. */
+export declare const DEFAULT_ICON_SIZE: FileTypeIconSize;
+/** Supported file type icon pixel sizes. */
+export type FileTypeIconSize = (typeof ICON_SIZES)[number];
+/** Supported image file formats for file type icon assets. */
+export type ImageFileType = 'svg' | 'png';

package/lib-cjs/common/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_ICON_SIZE = exports.ICON_SIZES = exports.DEFAULT_BASE_URL = exports.FLUENT_CDN_BASE_URL = void 0;
+/**
+ * Base URL of the Microsoft Fluent CDN that hosts the file type icon assets.
+ *
+ * NOTE: this value is intentionally version-stamped by the CDN. It is provided as a
+ * sensible, overridable default so consumers do not need to configure a CDN to get
+ * started. To use your own asset host, supply a `baseUrl` to `FileTypeIconsProvider`
+ * (or to the individual helper functions / the `baseUrl` prop on `FileTypeIcon`).
+ */
+exports.FLUENT_CDN_BASE_URL = 'https://res.cdn.office.net/files/fabric-cdn-prod_20260623.001';
+/**
+ * Default base URL used to resolve file type icon assets when no `baseUrl` is provided.
+ * Points at the `item-types` asset folder on the Fluent CDN.
+ */
+exports.DEFAULT_BASE_URL = `${exports.FLUENT_CDN_BASE_URL}/assets/item-types/`;
+/** The set of pixel sizes for which file type icon assets are published. */
+exports.ICON_SIZES = [16, 20, 24, 32, 40, 48, 64, 96];
+/** The default icon size in pixels. */
+exports.DEFAULT_ICON_SIZE = 16;

package/lib-cjs/common/fileIconTypes.generated.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Enumerates special file type icons that do not map to any file extensions.
+ * For example, the 'pptx' icon maps to the extensions 'ppt', 'pptm', 'pptx',
+ * but the 'folder' icon does not map to any extensions and should be obtained
+ * via this enum.
+ *
+ * Implemented as a `const` object (rather than a TypeScript `enum`) so it does not
+ * emit a runtime reverse-mapping. The merged `FileIconType` type below lets it be
+ * used as both a value (`FileIconType.folder`) and a type (`type: FileIconType`),
+ * preserving the ergonomics of the previous `enum`. Values start at 1 so they evaluate
+ * as truthy.
+ */
+export declare const FileIconType: {
+    readonly docset: 1;
+    readonly folder: 2;
+    readonly genericFile: 3;
+    readonly listItem: 4;
+    readonly sharedFolder: 5;
+    readonly multiple: 6;
+    readonly stream: 7;
+    readonly news: 8;
+    readonly desktopFolder: 9;
+    readonly documentsFolder: 10;
+    readonly picturesFolder: 11;
+    readonly linkedFolder: 12;
+    readonly list: 13;
+    readonly form: 14;
+    readonly sway: 15;
+    readonly playlist: 16;
+    readonly loopworkspace: 17;
+    readonly planner: 18;
+    readonly todoItem: 19;
+    readonly portfolio: 20;
+    readonly album: 21;
+    readonly listForm: 22;
+    readonly campaign: 23;
+    readonly shortcutsdefaultfolder: 24;
+    readonly pbiApp: 25;
+    readonly pbiDashboard: 26;
+    readonly pbiPaginatedReport: 27;
+    readonly pbiScorecard: 28;
+    readonly pbiSemanticModel: 29;
+    readonly pbiReport: 30;
+};
+export type FileIconType = (typeof FileIconType)[keyof typeof FileIconType];
+/**
+ * Numeric input form of {@link FileIconType}, accepted by the `type` prop / option.
+ * Structurally identical to `FileIconType` (`1 | 2 | … | N`); kept as a named alias
+ * for API stability and call-site readability.
+ */
+export type FileIconTypeInput = FileIconType;
+/**
+ * Icon base name for each numeric {@link FileIconType} value, positionally indexed by
+ * that value (index 0 is unused since values start at 1). Empty entries fall back to the
+ * generic file icon at runtime.
+ */
+export declare const TYPE_TO_ICON_NAME: ReadonlyArray<string>;

package/lib-cjs/common/fileIconTypes.generated.js

@@ -0,0 +1,89 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TYPE_TO_ICON_NAME = exports.FileIconType = void 0;
+// AUTO-GENERATED by scripts/generateFileIconTypes.js from src/common/fileIconTypes.json.
+// Do not edit this file manually. Run `npm run generate` to regenerate it.
+/**
+ * Enumerates special file type icons that do not map to any file extensions.
+ * For example, the 'pptx' icon maps to the extensions 'ppt', 'pptm', 'pptx',
+ * but the 'folder' icon does not map to any extensions and should be obtained
+ * via this enum.
+ *
+ * Implemented as a `const` object (rather than a TypeScript `enum`) so it does not
+ * emit a runtime reverse-mapping. The merged `FileIconType` type below lets it be
+ * used as both a value (`FileIconType.folder`) and a type (`type: FileIconType`),
+ * preserving the ergonomics of the previous `enum`. Values start at 1 so they evaluate
+ * as truthy.
+ */
+exports.FileIconType = {
+    docset: 1,
+    folder: 2,
+    genericFile: 3,
+    listItem: 4,
+    sharedFolder: 5,
+    multiple: 6,
+    stream: 7,
+    news: 8,
+    desktopFolder: 9,
+    documentsFolder: 10,
+    picturesFolder: 11,
+    linkedFolder: 12,
+    list: 13,
+    form: 14,
+    sway: 15,
+    playlist: 16,
+    loopworkspace: 17,
+    planner: 18,
+    todoItem: 19,
+    portfolio: 20,
+    album: 21,
+    listForm: 22,
+    campaign: 23,
+    shortcutsdefaultfolder: 24,
+    pbiApp: 25,
+    pbiDashboard: 26,
+    pbiPaginatedReport: 27,
+    pbiScorecard: 28,
+    pbiSemanticModel: 29,
+    pbiReport: 30,
+};
+/**
+ * Icon base name for each numeric {@link FileIconType} value, positionally indexed by
+ * that value (index 0 is unused since values start at 1). Empty entries fall back to the
+ * generic file icon at runtime.
+ */
+exports.TYPE_TO_ICON_NAME = [
+    '',
+    'docset',
+    'folder',
+    '',
+    'listitem',
+    'sharedfolder',
+    'multiple',
+    'video',
+    'sponews',
+    'desktopfolder',
+    'documentsfolder',
+    'picturesfolder',
+    'linkedfolder',
+    'splist',
+    'form',
+    'sway',
+    'playlist',
+    'loopworkspace',
+    'planner',
+    'todoitem',
+    'portfolio',
+    'album',
+    'listform',
+    'spocampaign',
+    'companyfolder',
+    'pbiapp',
+    'pbidashboard',
+    'pbipagereport',
+    'pbiscorecard',
+    'pbisemmodel',
+    'powerbi', // 30 pbiReport
+];