@fluentui/react-icons-file-type 0.0.1

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

@@ -0,0 +1,7 @@
+/**
+ * Returns the `extension`->`icon name` lookup table, decoding the packed
+ * string on first use and caching the result for subsequent calls.
+ */
+export declare function getFileTypeIconExtensionMap(): Readonly<{
+    [extension: string]: string;
+}>;

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

@@ -0,0 +1,32 @@
+"use strict";
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileTypeIconExtensionMap = void 0;
+// AUTO-GENERATED by scripts/generateFileTypeIconMap.js from src/common/fileTypeIconMap.json.
+// Do not edit this file manually. Run `npm run generate` to regenerate it.
+/**
+ * Minimal packed `icon name`->`extensions` table.
+ *
+ * Format: `icon:ext,ext;icon:ext`. Decoded lazily into an
+ * `extension -> icon name` lookup by {@link getFileTypeIconExtensionMap}.
+ */
+const PACKED_FILE_TYPE_ICON_MAP = 'accdb:accdb,mdb;agentwork:work;aipage:page;archive:7z,ace,arc,arj,dmg,gz,iso,lzh,pkg,rar,sit,tgz,tar,z;audio:aif,aiff,aac,alac,amr,ape,au,awb,dct,dss,dvf,flac,gsm,m4a,m4p,mid,mmf,mp3,oga,ra,rm,wav,wma,wv;calendar:ical,icalendar,ics,ifb,vcs;classifier:classifier;clipchamp:clipchamp;cliptemplate:cliptemplate;code:abap,ada,adp,ahk,as,as3,asc,ascx,asm,asp,awk,bash,bash_login,bash_logout,bash_profile,bashrc,bat,bib,bsh,build,builder,c,cbl,c++,capfile,cc,cfc,cfm,cfml,cl,clj,cls,cmake,cmd,coffee,config,cpp,cpt,cpy,cs,cshtml,cson,csproj,css,ctp,cxx,d,ddl,di,disco,dml,dtd,dtml,el,emakefile,erb,erl,f,f90,f95,fs,fsi,fsscript,fsx,gemfile,gemspec,gitconfig,go,groovy,gvy,h,h++,haml,handlebars,hbs,hcp,hh,hpp,hrl,hs,htc,hxx,idl,iim,inc,inf,ini,inl,ipp,irbrc,jade,jav,java,js,json,jsp,jsproj,jsx,l,less,lhs,lisp,log,lst,ltx,lua,m,mak,make,manifest,master,ml,mli,mll,mly,mm,mud,nfo,opml,osascript,p,pas,patch,php,php2,php3,php4,php5,phtml,pl,pm,pod,pp,profile,ps1,ps1xml,psd1,psm1,pss,pt,py,pyw,r,rake,rb,rbx,rc,rdf,re,reg,rest,resw,resx,rhtml,rjs,rprofile,rpy,rss,rst,ruby,rxml,s,sass,scala,scm,sconscript,sconstruct,script,scss,sgml,sh,shtml,sml,svn-base,swift,sql,sty,tcl,tex,textile,tld,tli,tmpl,tpl,vb,vi,vim,vmg,webpart,wsp,wsdl,xhtml,xoml,xsd,xslt,yaml,yaws,yml,zsh;contact:vcf;copilot:copilot;csv:csv;designer:design;docx:doc,docm,docx,docb;dotx:dot,dotm,dotx;email:eml,msg,oft,ost,pst;exe:application,appref-ms,apk,app,appx,exe,ipa,msi,xap;font:ttf,otf,woff;html:htm,html,mht,mhtml;inkcanvas:canvas;ipynb:nnb,ipynb;link:lnk,link,url,website,webloc;loop:fluid,loop,note;mctemplate:mctemplate;mcworld:mcworld;md:md,markdn,markdown,mdown,mkdn;model:3ds,3mf,blend,cool,dae,df,dwfx,dwg,dxf,fbx,glb,gltf,holo,layer,layout,max,mtl,obj,off,ply,skp,stp,stl,t,thl,x;mpp:mpp;mpt:mpt;officescript:osts;one:one,onepart;onepage:onepage;onetoc:ms-one-stub,onetoc,onetoc2,onepkg;pdf:pdf;photo:arw,bmp,cr2,crw,dic,dicm,dcm,dcm30,dcr,dds,dib,dng,erf,gif,heic,heif,ico,jfi,jfif,jif,jpe,jpeg,jpg,jxr,kdc,mrw,nef,orf,pct,pict,png,pns,psb,psd,raw,tga,tif,tiff,wdp;potx:pot,potm,potx;powerbi:pbids,pbix;ppsx:pps,ppsm,ppsx;pptx:ppt,pptm,pptx,sldx,sldm;presentation:odp,gslides,key;pub:pub;rtf:epub,gdoc,odt,rtf,wri,pages;spo:aspx;spreadsheet:odc,ods,gsheet,numbers,tsv;sysfile:bak,bin,cab,cache,cat,cer,class,dat,db,dbg,dl_,dll,ithmb,jar,kb,ldt,lrprev,pkpass,ppa,ppam,pdb,rom,thm,thmx,vsl,xla,xlam,xlb,xll;txt:dif,diff,readme,out,plist,properties,text,txt;vector:ai,ait,cvs,dgn,gdraw,pd,emf,eps,fig,ind,indd,indl,indt,indb,ps,svg,svgz,wmf,oxps,xps,xd,sketch;video:3g2,3gp,3gp2,3gpp,asf,avi,dvr-ms,flv,m1v,m4v,mkv,mod,mov,mm4p,mp2,mp2v,mp4,mp4v,mpa,mpe,mpeg,mpg,mpv,mpv2,mts,ogg,qt,swf,ts,vob,webm,wlmp,wm,wmv,wmx;vsdx:vdx,vsd,vsdm,vsdx,vsw,vdw;vssx:vss,vssm,vssx;vstx:vst,vstm,vstx,vsx;whiteboard:whiteboard,wbtx;xlsx:xlc,xls,xlsb,xlsm,xlsx,xlw;xltx:xlt,xltm,xltx;xml:xaml,xml,xsl;xsn:xsn;zip:zip';
+let _extensionToIconName;
+/**
+ * Returns the `extension`->`icon name` lookup table, decoding the packed
+ * string on first use and caching the result for subsequent calls.
+ */
+function getFileTypeIconExtensionMap() {
+    if (!_extensionToIconName) {
+        _extensionToIconName = {};
+        for (const group of PACKED_FILE_TYPE_ICON_MAP.split(';')) {
+            const [iconName, extensions] = group.split(':');
+            for (const extension of extensions.split(',')) {
+                _extensionToIconName[extension] = iconName;
+            }
+        }
+    }
+    return _extensionToIconName;
+}
+exports.getFileTypeIconExtensionMap = getFileTypeIconExtensionMap;

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

@@ -0,0 +1,59 @@
+import type { FileIconType, FileIconTypeInput } from './FileIconType';
+import type { FileTypeIconSize, ImageFileType } from './constants';
+/**
+ * The icon-identifying options shared by the `FileTypeIcon` component and the
+ * standalone resolvers: which icon (by `extension` or `type`), at what `size`,
+ * and in which image format.
+ */
+export interface FileTypeIconOptions {
+    /**
+     * The file extension, such as `pptx`, for which an icon is needed. For file type icons
+     * that are not associated with a file extension, such as `folder`, use the `type` property.
+     */
+    extension?: string;
+    /**
+     * The type of file type icon needed. Use this for icons that are not associated with a
+     * file extension, such as `folder`.
+     */
+    type?: FileIconTypeInput;
+    /**
+     * The size of the icon in pixels.
+     * @default 16
+     */
+    size?: FileTypeIconSize;
+    /**
+     * The image format to use.
+     * @default 'svg'
+     */
+    imageFileType?: ImageFileType;
+}
+/**
+ * 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 declare function getFileTypeIconNameFromExtensionOrType(extension: string | undefined, type: FileIconType | undefined): string;
+/**
+ * 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 declare function getFileTypeIconSrc(options: FileTypeIconOptions, baseUrl?: string): string;
+/**
+ * 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 declare function getFileTypeIconSrcSet(options: FileTypeIconOptions, baseUrl?: string): string;

package/lib-cjs/common/fileTypeIconResolver.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFileTypeIconSrcSet = exports.getFileTypeIconSrc = exports.getFileTypeIconNameFromExtensionOrType = void 0;
+const fileTypeIconMap_generated_1 = require("./fileTypeIconMap.generated");
+const fileIconTypes_generated_1 = require("./fileIconTypes.generated");
+const constants_1 = require("./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.
+ */
+function getFileTypeIconNameFromExtensionOrType(extension, type) {
+    if (extension) {
+        // Strip periods, force lowercase.
+        extension = extension.replace('.', '').toLowerCase();
+        return (0, fileTypeIconMap_generated_1.getFileTypeIconExtensionMap)()[extension] || GENERIC_FILE;
+    }
+    else if (type) {
+        return fileIconTypes_generated_1.TYPE_TO_ICON_NAME[type] || GENERIC_FILE;
+    }
+    return GENERIC_FILE;
+}
+exports.getFileTypeIconNameFromExtensionOrType = getFileTypeIconNameFromExtensionOrType;
+/**
+ * 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.
+ */
+function getFileTypeIconSrc(options, baseUrl = constants_1.DEFAULT_BASE_URL) {
+    const { extension, size = constants_1.DEFAULT_ICON_SIZE, type, imageFileType = 'svg' } = options;
+    const baseIconName = getFileTypeIconNameFromExtensionOrType(extension, type); // eg: docx
+    return `${baseUrl}${size}/${baseIconName}.${imageFileType}`;
+}
+exports.getFileTypeIconSrc = getFileTypeIconSrc;
+/**
+ * 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, …`.
+ */
+function getFileTypeIconSrcSet(options, baseUrl = constants_1.DEFAULT_BASE_URL) {
+    const { extension, size = constants_1.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(', ');
+}
+exports.getFileTypeIconSrcSet = getFileTypeIconSrcSet;

package/lib-cjs/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-cjs/common/useFileTypeIcon.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderFileTypeIcon = exports.useFileTypeIcon = exports.fileTypeIconDataAttribute = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const fileTypeIconResolver_1 = require("./fileTypeIconResolver");
+const FileTypeIconsContext_1 = require("./FileTypeIconsContext");
+const constants_1 = require("./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.
+ */
+exports.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.
+ */
+function useFileTypeIcon(props) {
+    const { extension, type, size = constants_1.DEFAULT_ICON_SIZE, imageFileType, className, ...imgProps } = props;
+    const { baseUrl } = (0, FileTypeIconsContext_1.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 = (0, fileTypeIconResolver_1.getFileTypeIconSrc)(iconOptions, baseUrl);
+    const srcSet = (0, fileTypeIconResolver_1.getFileTypeIconSrcSet)(iconOptions, baseUrl);
+    const a11yProps = getImageA11yProps(props);
+    return {
+        ...imgProps,
+        ...a11yProps,
+        src,
+        srcSet,
+        width: size,
+        height: size,
+        className,
+        [exports.fileTypeIconDataAttribute]: '',
+    };
+}
+exports.useFileTypeIcon = useFileTypeIcon;
+/**
+ * Render hook: turns a resolved {@link FileTypeIconState} into the `<img>` element. Returns
+ * `null` when there is no resolvable `src`.
+ */
+function renderFileTypeIcon(state) {
+    if (!state.src) {
+        return null;
+    }
+    return React.createElement("img", { ...state });
+}
+exports.renderFileTypeIcon = renderFileTypeIcon;

package/lib-cjs/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-cjs/headless/FileTypeIcon.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileTypeIcon = exports.renderFileTypeIcon = exports.useFileTypeIcon = exports.fileTypeIconDataAttribute = void 0;
+const useFileTypeIcon_1 = require("../common/useFileTypeIcon");
+var useFileTypeIcon_2 = require("../common/useFileTypeIcon");
+Object.defineProperty(exports, "fileTypeIconDataAttribute", { enumerable: true, get: function () { return useFileTypeIcon_2.fileTypeIconDataAttribute; } });
+Object.defineProperty(exports, "useFileTypeIcon", { enumerable: true, get: function () { return useFileTypeIcon_2.useFileTypeIcon; } });
+Object.defineProperty(exports, "renderFileTypeIcon", { enumerable: true, get: function () { return useFileTypeIcon_2.renderFileTypeIcon; } });
+/**
+ * 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.
+ */
+const FileTypeIcon = (props) => {
+    const state = (0, useFileTypeIcon_1.useFileTypeIcon)(props);
+    return (0, useFileTypeIcon_1.renderFileTypeIcon)(state);
+};
+exports.FileTypeIcon = FileTypeIcon;

package/lib-cjs/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-cjs/headless/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_SIZES = exports.DEFAULT_ICON_SIZE = exports.FLUENT_CDN_BASE_URL = exports.DEFAULT_BASE_URL = exports.FileIconType = exports.useFileTypeIconsContext = exports.FileTypeIconsProvider = exports.fileTypeIconDataAttribute = exports.FileTypeIcon = void 0;
+// 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`.
+var FileTypeIcon_1 = require("./FileTypeIcon");
+Object.defineProperty(exports, "FileTypeIcon", { enumerable: true, get: function () { return FileTypeIcon_1.FileTypeIcon; } });
+Object.defineProperty(exports, "fileTypeIconDataAttribute", { enumerable: true, get: function () { return FileTypeIcon_1.fileTypeIconDataAttribute; } });
+var FileTypeIconsContext_1 = require("../common/FileTypeIconsContext");
+Object.defineProperty(exports, "FileTypeIconsProvider", { enumerable: true, get: function () { return FileTypeIconsContext_1.FileTypeIconsProvider; } });
+Object.defineProperty(exports, "useFileTypeIconsContext", { enumerable: true, get: function () { return FileTypeIconsContext_1.useFileTypeIconsContext; } });
+var FileIconType_1 = require("../common/FileIconType");
+Object.defineProperty(exports, "FileIconType", { enumerable: true, get: function () { return FileIconType_1.FileIconType; } });
+var constants_1 = require("../common/constants");
+Object.defineProperty(exports, "DEFAULT_BASE_URL", { enumerable: true, get: function () { return constants_1.DEFAULT_BASE_URL; } });
+Object.defineProperty(exports, "FLUENT_CDN_BASE_URL", { enumerable: true, get: function () { return constants_1.FLUENT_CDN_BASE_URL; } });
+Object.defineProperty(exports, "DEFAULT_ICON_SIZE", { enumerable: true, get: function () { return constants_1.DEFAULT_ICON_SIZE; } });
+Object.defineProperty(exports, "ICON_SIZES", { enumerable: true, get: function () { return constants_1.ICON_SIZES; } });

package/lib-cjs/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-cjs/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-cjs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_SIZES = exports.DEFAULT_ICON_SIZE = exports.FLUENT_CDN_BASE_URL = exports.DEFAULT_BASE_URL = exports.FileIconType = exports.useFileTypeIconsContext = exports.FileTypeIconsProvider = exports.FileTypeIcon = void 0;
+var FileTypeIcon_1 = require("./FileTypeIcon");
+Object.defineProperty(exports, "FileTypeIcon", { enumerable: true, get: function () { return FileTypeIcon_1.FileTypeIcon; } });
+var FileTypeIconsContext_1 = require("./common/FileTypeIconsContext");
+Object.defineProperty(exports, "FileTypeIconsProvider", { enumerable: true, get: function () { return FileTypeIconsContext_1.FileTypeIconsProvider; } });
+Object.defineProperty(exports, "useFileTypeIconsContext", { enumerable: true, get: function () { return FileTypeIconsContext_1.useFileTypeIconsContext; } });
+var FileIconType_1 = require("./common/FileIconType");
+Object.defineProperty(exports, "FileIconType", { enumerable: true, get: function () { return FileIconType_1.FileIconType; } });
+var constants_1 = require("./common/constants");
+Object.defineProperty(exports, "DEFAULT_BASE_URL", { enumerable: true, get: function () { return constants_1.DEFAULT_BASE_URL; } });
+Object.defineProperty(exports, "FLUENT_CDN_BASE_URL", { enumerable: true, get: function () { return constants_1.FLUENT_CDN_BASE_URL; } });
+Object.defineProperty(exports, "DEFAULT_ICON_SIZE", { enumerable: true, get: function () { return constants_1.DEFAULT_ICON_SIZE; } });
+Object.defineProperty(exports, "ICON_SIZES", { enumerable: true, get: function () { return constants_1.ICON_SIZES; } });

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@fluentui/react-icons-file-type",
+  "version": "0.0.1",
+  "description": "Fluent UI React (v9-compatible) file type icon components rendered from CDN-hosted assets.",
+  "main": "lib-cjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "sideEffects": [
+    "**/headless/styles.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/microsoft/fluentui-system-icons.git",
+    "directory": "packages/react-icons-file-type"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/microsoft/fluentui-system-icons/issues"
+  },
+  "homepage": "https://github.com/microsoft/fluentui-system-icons/tree/main/packages/react-icons-file-type#readme",
+  "scripts": {
+    "clean": "git clean -fXd lib/ lib-cjs/",
+    "generate": "node scripts/generateFileTypeIconMap.js && node scripts/generateFileIconTypes.js",
+    "prebuild": "npm run clean && npm run generate",
+    "build": "node scripts/build.js",
+    "bundle-size": "monosize measure",
+    "lint": "eslint src",
+    "pretest": "npm run generate",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@griffel/react": "^1.6.1",
+    "tslib": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0 <20.0.0",
+    "react": ">=16.8.0 <20.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@griffel/eslint-plugin": "^2.0.2",
+    "eslint": "8.57.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "typescript": "5.0.4",
+    "typescript-eslint": "7.18.0"
+  },
+  "files": [
+    "lib/",
+    "lib-cjs/"
+  ],
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib-cjs/index.js"
+    },
+    "./headless": {
+      "types": "./lib/headless/index.d.ts",
+      "import": "./lib/headless/index.js",
+      "require": "./lib-cjs/headless/index.js"
+    },
+    "./headless/styles.css": "./lib/headless/styles.css",
+    "./package.json": "./package.json"
+  }
+}