Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,11 @@
import * as React from 'react';
export declare type FluentIconsProps<TBaseAttributes extends React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement> = React.SVGAttributes<SVGElement>, TRefType extends HTMLElement | SVGSVGElement = SVGSVGElement> = TBaseAttributes & React.RefAttributes<TRefType> & {
primaryFill?: string;
className?: string;
title?: string;
/**
* Whether to render the filled version of the icon.
* NOTE: This prop is only applicable when using bundled icons created with `bundleIcon`.
*/
filled?: boolean;
};

View File

@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

View File

@@ -0,0 +1,7 @@
import type { FluentIcon } from './createFluentIcon';
/**
*
* Combine the Regular and Filled versions of icons
* Could be used to toggle between them on hover.
*/
export declare const bundleIcon: (FilledIcon: FluentIcon, RegularIcon: FluentIcon) => FluentIcon;

View File

@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.bundleIcon = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@griffel/react");
const constants_1 = require("./constants");
const bundleIcon_styles_1 = require("./bundleIcon.styles");
/**
*
* Combine the Regular and Filled versions of icons
* Could be used to toggle between them on hover.
*/
const bundleIcon = (FilledIcon, RegularIcon) => {
const Component = (props) => {
const { className, filled, ...rest } = props;
const styles = bundleIcon_styles_1.useBundledIconStyles();
return (React.createElement(React.Fragment, null,
React.createElement(FilledIcon, Object.assign({}, rest, { className: react_1.mergeClasses(styles.root, filled && styles.visible, constants_1.iconFilledClassName, className) })),
React.createElement(RegularIcon, Object.assign({}, rest, { className: react_1.mergeClasses(styles.root, !filled && styles.visible, constants_1.iconRegularClassName, className) }))));
};
Component.displayName = 'CompoundIcon';
return Component;
};
exports.bundleIcon = bundleIcon;

View File

@@ -0,0 +1 @@
export declare const useBundledIconStyles: () => Record<"visible" | "root", string>;

View File

@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useBundledIconStyles = void 0;
const react_1 = require("@griffel/react");
exports.useBundledIconStyles = react_1.__styles({
root: {
mc9l5x: "fjseox"
},
visible: {
mc9l5x: "f1w7gpdv"
}
}, {
d: [".fjseox{display:none;}", ".f1w7gpdv{display:inline;}"]
});

View File

@@ -0,0 +1,8 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBundledIconStyles = void 0;
const react_1 = require("@griffel/react");
exports.useBundledIconStyles = react_1.makeStyles({
root: { display: 'none' },
visible: { display: 'inline' },
});

View File

@@ -0,0 +1,6 @@
export declare const iconClassName = "fui-Icon";
export declare const iconFilledClassName = "fui-Icon-filled";
export declare const iconRegularClassName = "fui-Icon-regular";
export declare const iconLightClassName = "fui-Icon-light";
export declare const iconColorClassName = "fui-Icon-color";
export declare const fontIconClassName = "fui-Icon-font";

View File

@@ -0,0 +1,9 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.fontIconClassName = exports.iconColorClassName = exports.iconLightClassName = exports.iconRegularClassName = exports.iconFilledClassName = exports.iconClassName = void 0;
exports.iconClassName = 'fui-Icon';
exports.iconFilledClassName = 'fui-Icon-filled';
exports.iconRegularClassName = 'fui-Icon-regular';
exports.iconLightClassName = 'fui-Icon-light';
exports.iconColorClassName = 'fui-Icon-color';
exports.fontIconClassName = 'fui-Icon-font';

View File

@@ -0,0 +1,8 @@
import * as React from 'react';
import { FluentIconsProps } from './FluentIconsProps.types';
export declare type FluentIcon = React.FC<FluentIconsProps>;
export declare type CreateFluentIconOptions = {
flipInRtl?: boolean;
color?: boolean;
};
export declare const createFluentIcon: (displayName: string, width: string, pathsOrSvg: string[] | string, options?: CreateFluentIconOptions | undefined) => FluentIcon;

View File

@@ -0,0 +1,36 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createFluentIcon = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@griffel/react");
const useIconState_1 = require("./useIconState");
const createFluentIcon_styles_1 = require("./createFluentIcon.styles");
const constants_1 = require("./constants");
const createFluentIcon = (displayName, width, pathsOrSvg, options) => {
const viewBoxWidth = width === '1em' ? '20' : width;
const Icon = React.forwardRef((props, ref) => {
const styles = createFluentIcon_styles_1.useRootStyles();
const iconState = useIconState_1.useIconState(props, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl }); // HTML attributes/props for things like accessibility can be passed in, and will be expanded on the svg object at the start of the object
const state = {
...iconState,
className: react_1.mergeClasses(constants_1.iconClassName, iconState.className, styles.root),
ref,
width,
height: width,
viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`,
xmlns: 'http://www.w3.org/2000/svg',
};
if (typeof pathsOrSvg === 'string') {
// Color icon: render raw SVG children
return React.createElement('svg', { ...state, dangerouslySetInnerHTML: { __html: pathsOrSvg } });
}
else {
// Non-color icon: render paths as before
return React.createElement('svg', state, ...pathsOrSvg.map((d) => React.createElement('path', { d, fill: state.fill })));
}
});
Icon.displayName = displayName;
return Icon;
};
exports.createFluentIcon = createFluentIcon;

View File

@@ -0,0 +1 @@
export declare const useRootStyles: () => Record<"root", string>;

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useRootStyles = void 0;
const react_1 = require("@griffel/react");
exports.useRootStyles = react_1.__styles({
root: {
B8gzw0y: "f1dd5bof"
}
}, {
m: [["@media (forced-colors: active){.f1dd5bof{forced-color-adjust:auto;}}", {
m: "(forced-colors: active)"
}]]
});

View File

@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useRootStyles = void 0;
const react_1 = require("@griffel/react");
exports.useRootStyles = react_1.makeStyles({
root: {
// This style is required because browsers automatically have SVGs set to
// forced-color-adjust: preserve-parent-color, which will not override
// internally-defined colors in our SVG icons in high contrast mode.
'@media (forced-colors: active)': {
forcedColorAdjust: 'auto',
},
},
});

View File

@@ -0,0 +1,21 @@
import * as React from 'react';
import type { FluentIconsProps } from './FluentIconsProps.types';
export declare type FluentIcon = React.FC<FluentIconsProps>;
declare type CreateFluentIconOptions = {
flipInRtl?: boolean;
color?: boolean;
};
/**
* Creates a React component for a Fluent icon that references an SVG symbol from a sprite.
*
* @access private
* @alpha
*
* @param iconId - The SVG symbol id in the sprite sheet.
* @param size - The icon size (for example, `"1em"` or a numeric string).
* @param spritePath - Optional path/URL to the SVG sprite file. If omitted, an in-document symbol reference is used.
* @param options - Optional creation settings (for example RTL flipping and color behavior).
* @returns A Fluent icon React component.
*/
export declare const createFluentIcon: (iconId: string, size: string, spritePath?: string | undefined, options?: CreateFluentIconOptions | undefined) => FluentIcon;
export {};

View File

@@ -0,0 +1,44 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createFluentIcon = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@griffel/react");
const useIconState_1 = require("./useIconState");
const createFluentIcon_styles_1 = require("./createFluentIcon.styles");
const constants_1 = require("./constants");
/**
* Creates a React component for a Fluent icon that references an SVG symbol from a sprite.
*
* @access private
* @alpha
*
* @param iconId - The SVG symbol id in the sprite sheet.
* @param size - The icon size (for example, `"1em"` or a numeric string).
* @param spritePath - Optional path/URL to the SVG sprite file. If omitted, an in-document symbol reference is used.
* @param options - Optional creation settings (for example RTL flipping and color behavior).
* @returns A Fluent icon React component.
*/
const createFluentIcon = (iconId, size, spritePath, options) => {
const viewBoxWidth = size === '1em' ? '20' : size;
const Icon = React.forwardRef((props, ref) => {
const styles = createFluentIcon_styles_1.useRootStyles();
const iconState = useIconState_1.useIconState(props, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl }); // HTML attributes/props for things like accessibility can be passed in, and will be expanded on the svg object at the start of the object
const state = {
...iconState,
className: react_1.mergeClasses(constants_1.iconClassName, iconState.className, styles.root),
ref,
width: size,
height: size,
viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`,
xmlns: 'http://www.w3.org/2000/svg',
};
const href = spritePath ? `${spritePath}#${iconId}` : `#${iconId}`;
return React.createElement('svg', state, React.createElement('use', {
href,
}));
});
Icon.displayName = iconId;
return Icon;
};
exports.createFluentIcon = createFluentIcon;

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,205 @@
{
"AccessibilityCheckmark32Light": 57344,
"Add32Light": 57345,
"Alert32Light": 57346,
"AppFolder32Light": 57347,
"AppGeneric32Light": 57348,
"Archive32Light": 57349,
"ArchiveSettings32Light": 57350,
"ArrowClockwise32Light": 57351,
"ArrowDown32Light": 57352,
"ArrowDownload32Light": 57353,
"ArrowForward32Light": 57354,
"ArrowHookDownLeft32Light": 57355,
"ArrowHookDownRight32Light": 57356,
"ArrowHookUpLeft32Light": 57357,
"ArrowHookUpRight32Light": 57358,
"ArrowRedo32Light": 57359,
"ArrowReply32Light": 57360,
"ArrowReplyAll32Light": 57361,
"ArrowUndo32Light": 57362,
"Attach32Light": 57363,
"AutoFit32Light": 57364,
"AutoFitWidth32Light": 57365,
"Autocorrect32Light": 57366,
"BookContacts32Light": 57367,
"BreakoutRoom32Light": 57368,
"Broom32Light": 57369,
"Calendar3Day32Light": 57370,
"CalendarCheckmark32Light": 57371,
"CalendarClock32Light": 57372,
"CalendarDataBar32Light": 57373,
"CalendarDay32Light": 57374,
"CalendarEdit32Light": 57375,
"CalendarEmpty32Light": 57376,
"CalendarLtr32Light": 57377,
"CalendarMonth32Light": 57378,
"CalendarMultiple32Light": 57379,
"CalendarPattern32Light": 57380,
"CalendarReply32Light": 57381,
"CalendarSparkle32Light": 57382,
"CalendarTodo32Light": 57383,
"CalendarWorkWeek32Light": 57384,
"Chat32Light": 57385,
"Checkmark32Light": 57386,
"CheckmarkCircle32Light": 57387,
"Classification32Light": 57388,
"ClipboardPaste32Light": 57389,
"Clock32Light": 57390,
"ClockAlarm32Light": 57391,
"Color32Light": 57392,
"ColorFill32Light": 57393,
"ColorFillAccent32Light": 57394,
"Comment32Light": 57395,
"CommentAdd32Light": 57396,
"Compose32Light": 57397,
"Copy32Light": 57398,
"Crop32Light": 57399,
"Cursor32Light": 57400,
"Cut32Light": 57401,
"Delete32Light": 57402,
"Dismiss32Light": 57403,
"DismissCircle32Light": 57404,
"DismissSquare32Light": 57405,
"Document24Light": 57406,
"Document28Light": 57407,
"Document32Light": 57408,
"Document48Light": 57409,
"DocumentHeader32Light": 57410,
"DocumentHeaderFooter32Light": 57411,
"DocumentLightning32Light": 57412,
"DocumentSignature32Light": 57413,
"DocumentSparkle24Light": 57414,
"DocumentSparkle28Light": 57415,
"DocumentSparkle32Light": 57416,
"DocumentSparkle48Light": 57417,
"DoorArrowRight32Light": 57418,
"Edit32Light": 57419,
"Emoji32Light": 57420,
"Eye32Light": 57421,
"EyeOff32Light": 57422,
"Filter32Light": 57423,
"Flag32Light": 57424,
"FlagOff32Light": 57425,
"Flash32Light": 57426,
"FolderArrowRight32Light": 57427,
"FolderMail32Light": 57428,
"Globe32Light": 57429,
"HandDraw32Light": 57430,
"History32Light": 57431,
"ImageAdd32Light": 57432,
"ImageAltText32Light": 57433,
"ImageCopy32Light": 57434,
"ImageReflection32Light": 57435,
"ImageShadow32Light": 57436,
"ImmersiveReader32Light": 57437,
"Important32Light": 57438,
"Lasso32Light": 57439,
"LayoutColumnTwo32Light": 57440,
"LayoutColumnTwoFocusLeft32Light": 57441,
"LayoutColumnTwoFocusRight32Light": 57442,
"LayoutRowTwo32Light": 57443,
"LayoutRowTwoFocusTop32Light": 57444,
"LayoutRowTwoFocusTopSettings32Light": 57445,
"LayoutRowTwoSettings32Light": 57446,
"Lightbulb32Light": 57447,
"Link32Light": 57448,
"LockClosed32Light": 57449,
"LockOpen32Light": 57450,
"Mail32Light": 57451,
"MailAlert32Light": 57452,
"MailArrowClockwise32Light": 57453,
"MailArrowDoubleBack32Light": 57454,
"MailCopy32Light": 57455,
"MailEdit32Light": 57456,
"MailList32Light": 57457,
"MailMultiple32Light": 57458,
"MailRead32Light": 57459,
"MailReadMultiple32Light": 57460,
"MailRewind32Light": 57461,
"MailSettings32Light": 57462,
"MailTemplate32Light": 57463,
"MailUnread32Light": 57464,
"MailWarning32Light": 57465,
"Mention32Light": 57466,
"Mic32Light": 57467,
"Molecule32Light": 57468,
"Note32Light": 57469,
"Options32Light": 57470,
"PaintBrush32Light": 57471,
"PanelLeftDefault32Light": 57472,
"PanelLeftFocusRight32Light": 57473,
"PenSparkle32Light": 57474,
"People32Light": 57475,
"PeopleAdd32Light": 57476,
"PeopleCheckmark32Light": 57477,
"PeopleCommunity32Light": 57478,
"PeopleEdit32Light": 57479,
"PeopleList32Light": 57480,
"PeopleLock32Light": 57481,
"PeopleSettings32Light": 57482,
"PeopleSync32Light": 57483,
"Person32Light": 57484,
"PersonAdd32Light": 57485,
"PersonAvailable32Light": 57486,
"PersonFeedback32Light": 57487,
"PersonMail32Light": 57488,
"PersonProhibited32Light": 57489,
"PersonSuport32Light": 57490,
"Phone32Light": 57491,
"PictureInPicture32Light": 57492,
"Pin32Light": 57493,
"PinOff32Light": 57494,
"Poll32Light": 57495,
"Presenter32Light": 57496,
"Print32Light": 57497,
"Question32Light": 57498,
"ReadAloud32Light": 57499,
"RectangleLandscape32Light": 57500,
"RotateLeft32Light": 57501,
"Save32Light": 57502,
"Search32Light": 57503,
"SearchSparkle32Light": 57504,
"SendClock32Light": 57505,
"Settings32Light": 57506,
"Share32Light": 57507,
"ShieldError32Light": 57508,
"Signature32Light": 57509,
"SpeakerMute32Light": 57510,
"SquareArrowForward32Light": 57511,
"Stamp32Light": 57512,
"StarAdd32Light": 57513,
"StarArrowRight32Light": 57514,
"Sticker32Light": 57515,
"TabAdd32Light": 57516,
"Table32Light": 57517,
"TableAltText32Light": 57518,
"TableCellsMerge32Light": 57519,
"TableCellsSplit32Light": 57520,
"TableDismiss32Light": 57521,
"TableMoveAbove32Light": 57522,
"TableMoveBelow32Light": 57523,
"TableMoveLeft32Light": 57524,
"TableMoveRight32Light": 57525,
"TableSettings32Light": 57526,
"TableSimple32Light": 57527,
"Tag32Light": 57528,
"Text32Light": 57529,
"TextClearFormatting32Light": 57530,
"TextCollapse32Light": 57531,
"TextDensity32Light": 57532,
"TextEditStyle32Light": 57533,
"TextExpand32Light": 57534,
"TextboxAlignTopLeft32Light": 57535,
"Toolbox32Light": 57536,
"Translate32Light": 57537,
"Video32Light": 57538,
"VideoClip32Light": 57539,
"Vip32Light": 57540,
"WeatherMoon32Light": 57541,
"WeatherSunny32Light": 57542,
"Window32Light": 57543,
"WrenchScrewdriver32Light": 57544,
"ZoomIn32Light": 57545,
"ZoomOut32Light": 57546
}

Binary file not shown.

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,10 @@
import * as React from 'react';
import { FluentIconsProps } from '../FluentIconsProps.types';
import { FontFile } from './createFluentFontIcon.shared';
export declare type CreateFluentFontIconOptions = {
flipInRtl?: boolean;
};
export declare type FluentFontIcon = React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & {
codepoint: string;
};
export declare function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number, options?: CreateFluentFontIconOptions): FluentFontIcon;

View File

@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createFluentFontIcon = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@griffel/react");
const useIconState_1 = require("../useIconState");
const constants_1 = require("../constants");
const createFluentFontIcon_styles_1 = require("./createFluentFontIcon.styles");
function createFluentFontIcon(displayName, codepoint, font, fontSize, options) {
const Component = (props) => {
createFluentFontIcon_styles_1.useStaticStyles();
const styles = createFluentFontIcon_styles_1.useRootStyles();
const className = react_1.mergeClasses(styles.root, styles[font], constants_1.fontIconClassName, props.className);
const state = useIconState_1.useIconState({ ...props, className }, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl });
// We want to keep the same API surface as the SVG icons, so translate `primaryFill` to `color`
if (props.primaryFill && props.primaryFill.toLowerCase() !== 'currentcolor') {
state.style = {
...state.style,
color: props.primaryFill,
};
}
if (fontSize) {
state.style = {
...state.style,
fontSize,
};
}
return React.createElement("i", Object.assign({}, state), codepoint);
};
Component.displayName = displayName;
Component.codepoint = codepoint;
return Component;
}
exports.createFluentFontIcon = createFluentFontIcon;

View File

@@ -0,0 +1,6 @@
export declare const enum FontFile {
Filled = 0,
Regular = 1,
Resizable = 2,
Light = 3
}

View File

@@ -0,0 +1,2 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

View File

@@ -0,0 +1,3 @@
import { FontFile } from './createFluentFontIcon.shared';
export declare const useStaticStyles: () => void;
export declare const useRootStyles: () => Record<"root" | FontFile, string>;

View File

@@ -0,0 +1,62 @@
"use strict";
import _asset10 from "./FluentSystemIcons-Resizable.ttf";
import _asset1 from "./FluentSystemIcons-Resizable.woff";
import _asset0 from "./FluentSystemIcons-Resizable.woff2";
import _asset9 from "./FluentSystemIcons-Light.ttf";
import _asset8 from "./FluentSystemIcons-Light.woff";
import _asset7 from "./FluentSystemIcons-Light.woff2";
import _asset6 from "./FluentSystemIcons-Regular.ttf";
import _asset5 from "./FluentSystemIcons-Regular.woff";
import _asset4 from "./FluentSystemIcons-Regular.woff2";
import _asset3 from "./FluentSystemIcons-Filled.ttf";
import _asset2 from "./FluentSystemIcons-Filled.woff";
import _asset from "./FluentSystemIcons-Filled.woff2";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useRootStyles = exports.useStaticStyles = void 0;
const tslib_1 = require("tslib");
const react_1 = require("@griffel/react");
const FluentSystemIcons_Filled_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.ttf"));
const FluentSystemIcons_Filled_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.woff"));
const FluentSystemIcons_Filled_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.woff2"));
const FluentSystemIcons_Regular_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.ttf"));
const FluentSystemIcons_Regular_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.woff"));
const FluentSystemIcons_Regular_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.woff2"));
const FluentSystemIcons_Light_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Light.ttf"));
const FluentSystemIcons_Light_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Light.woff"));
const FluentSystemIcons_Light_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Light.woff2"));
const FluentSystemIcons_Resizable_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.ttf"));
const FluentSystemIcons_Resizable_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.woff"));
const FluentSystemIcons_Resizable_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.woff2"));
const FONT_FAMILY_MAP = {
[0 /* Filled */]: 'FluentSystemIconsFilled',
[1 /* Regular */]: 'FluentSystemIconsRegular',
[2 /* Resizable */]: 'FluentSystemIcons'
};
exports.useStaticStyles = react_1.__staticStyles({
d: [`@font-face{font-family:FluentSystemIconsFilled;font-display:"block";src:url(${_asset}) format("woff2"),url(${_asset2}) format("woff"),url(${_asset3}) format("truetype");}`, `@font-face{font-family:FluentSystemIconsRegular;font-display:"block";src:url(${_asset4}) format("woff2"),url(${_asset5}) format("woff"),url(${_asset6}) format("truetype");}`, `@font-face{font-family:undefined;src:url(${_asset7}) format("woff2"),url(${_asset8}) format("woff"),url(${_asset9}) format("truetype");}`, `@font-face{font-family:FluentSystemIcons;font-display:"block";src:url(${_asset0}) format("woff2"),url(${_asset1}) format("woff"),url(${_asset10}) format("truetype");}`]
});
exports.useRootStyles = react_1.__styles({
"0": {
Bahqtrf: "f9dzkbp"
},
"1": {
Bahqtrf: "f1krtbx5"
},
"2": {
Bahqtrf: "f1sxfq9t"
},
"3": {
Bahqtrf: "fgtzeza"
},
root: {
mc9l5x: "f14t3ns0",
B80ckks: "fmd4ok8",
Bg96gwp: "fne0op0",
sj55zd: "f303qgw"
}
}, {
d: [".f9dzkbp{font-family:FluentSystemIconsFilled;}", ".f1krtbx5{font-family:FluentSystemIconsRegular;}", ".f1sxfq9t{font-family:FluentSystemIcons;}", ".fgtzeza{font-family:FluentSystemIconsLight;}", ".f14t3ns0{display:inline-block;}", ".fmd4ok8{font-style:normal;}", ".fne0op0{line-height:1em;}", ".f303qgw{color:currentColor;}"]
});

View File

@@ -0,0 +1,73 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useRootStyles = exports.useStaticStyles = void 0;
const tslib_1 = require("tslib");
const react_1 = require("@griffel/react");
const FluentSystemIcons_Filled_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.ttf"));
const FluentSystemIcons_Filled_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.woff"));
const FluentSystemIcons_Filled_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Filled.woff2"));
const FluentSystemIcons_Regular_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.ttf"));
const FluentSystemIcons_Regular_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.woff"));
const FluentSystemIcons_Regular_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Regular.woff2"));
const FluentSystemIcons_Light_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Light.ttf"));
const FluentSystemIcons_Light_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Light.woff"));
const FluentSystemIcons_Light_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Light.woff2"));
const FluentSystemIcons_Resizable_ttf_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.ttf"));
const FluentSystemIcons_Resizable_woff_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.woff"));
const FluentSystemIcons_Resizable_woff2_1 = tslib_1.__importDefault(require("./FluentSystemIcons-Resizable.woff2"));
const FONT_FAMILY_MAP = {
[0 /* Filled */]: 'FluentSystemIconsFilled',
[1 /* Regular */]: 'FluentSystemIconsRegular',
[2 /* Resizable */]: 'FluentSystemIcons',
};
exports.useStaticStyles = react_1.makeStaticStyles(`
@font-face {
font-family: ${FONT_FAMILY_MAP[0 /* Filled */]};
font-display: "block";
src: url(${JSON.stringify(FluentSystemIcons_Filled_woff2_1.default)}) format("woff2"),
url(${JSON.stringify(FluentSystemIcons_Filled_woff_1.default)}) format("woff"),
url(${JSON.stringify(FluentSystemIcons_Filled_ttf_1.default)}) format("truetype");
}
@font-face {
font-family: ${FONT_FAMILY_MAP[1 /* Regular */]};
font-display: "block";
src: url(${JSON.stringify(FluentSystemIcons_Regular_woff2_1.default)}) format("woff2"),
url(${JSON.stringify(FluentSystemIcons_Regular_woff_1.default)}) format("woff"),
url(${JSON.stringify(FluentSystemIcons_Regular_ttf_1.default)}) format("truetype");
}
@font-face {
font-family: ${FONT_FAMILY_MAP[3 /* Light */]};
src: url(${JSON.stringify(FluentSystemIcons_Light_woff2_1.default)}) format("woff2"),
url(${JSON.stringify(FluentSystemIcons_Light_woff_1.default)}) format("woff"),
url(${JSON.stringify(FluentSystemIcons_Light_ttf_1.default)}) format("truetype");
}
@font-face {
font-family: ${FONT_FAMILY_MAP[2 /* Resizable */]};
font-display: "block";
src: url(${JSON.stringify(FluentSystemIcons_Resizable_woff2_1.default)}) format("woff2"),
url(${JSON.stringify(FluentSystemIcons_Resizable_woff_1.default)}) format("woff"),
url(${JSON.stringify(FluentSystemIcons_Resizable_ttf_1.default)}) format("truetype");
}
`);
exports.useRootStyles = react_1.makeStyles({
root: {
display: 'inline-block',
fontStyle: 'normal',
lineHeight: '1em',
color: 'currentColor',
},
[0 /* Filled */]: {
fontFamily: 'FluentSystemIconsFilled',
},
[1 /* Regular */]: {
fontFamily: 'FluentSystemIconsRegular',
},
[2 /* Resizable */]: {
fontFamily: 'FluentSystemIcons',
},
[3 /* Light */]: {
fontFamily: 'FluentSystemIconsLight',
},
});

View File

@@ -0,0 +1,5 @@
import { FluentIconsProps } from './FluentIconsProps.types';
export declare type UseIconStateOptions = {
flipInRtl?: boolean;
};
export declare const useIconState: <TBaseAttributes extends import("react").HTMLAttributes<HTMLElement> | import("react").SVGAttributes<SVGElement> = import("react").SVGAttributes<SVGElement>, TRefType extends HTMLElement | SVGSVGElement = SVGSVGElement>(props: FluentIconsProps<TBaseAttributes, TRefType>, options?: UseIconStateOptions | undefined) => Pick<FluentIconsProps<TBaseAttributes, TRefType>, "title" | "filled" | "ref" | "key" | "className" | Exclude<keyof TBaseAttributes, "primaryFill">>;

View File

@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useIconState = void 0;
const contexts_1 = require("../contexts");
const react_1 = require("@griffel/react");
const useIconStyles_styles_1 = require("./useIconStyles.styles");
const useIconState = (props, options) => {
const {
// remove unwanted props to be set on the svg/html element
// eslint-disable-next-line @typescript-eslint/no-unused-vars
filled, title, primaryFill = 'currentColor', ...rest } = props;
const state = {
...rest,
fill: primaryFill,
};
const styles = useIconStyles_styles_1.useStyles();
const iconContext = contexts_1.useIconContext();
state.className = react_1.mergeClasses(styles.root, (options === null || options === void 0 ? void 0 : options.flipInRtl) && (iconContext === null || iconContext === void 0 ? void 0 : iconContext.textDirection) === 'rtl' && styles.rtl, state.className);
if (title) {
state['aria-label'] = title;
}
if (!state['aria-label'] && !state['aria-labelledby']) {
state['aria-hidden'] = true;
}
else {
state['role'] = 'img';
}
return state;
};
exports.useIconState = useIconState;

View File

@@ -0,0 +1 @@
export declare const useStyles: () => Record<"rtl" | "root", string>;

View File

@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useStyles = void 0;
const react_1 = require("@griffel/react");
exports.useStyles = react_1.__styles({
root: {
mc9l5x: "f1w7gpdv",
Bg96gwp: "fez10in"
},
rtl: {
Bz10aip: "f13rod7r"
}
}, {
d: [".f1w7gpdv{display:inline;}", ".fez10in{line-height:0;}", ".f13rod7r{transform:scaleX(-1);}"]
});

View File

@@ -0,0 +1,13 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useStyles = void 0;
const react_1 = require("@griffel/react");
exports.useStyles = react_1.makeStyles({
root: {
display: 'inline',
lineHeight: 0,
},
rtl: {
transform: 'scaleX(-1)',
},
});

View File

@@ -0,0 +1,29 @@
import * as React from 'react';
import type { FluentIconsProps } from './FluentIconsProps.types';
import type { CreateFluentIconOptions } from './createFluentIcon';
/**
*
* Wraps custom Svg Component with Fluent Icon behaviour
*
* @example
* ```tsx
const CustomSvg = (iconProps: FluentIconsProps) =>
React.createElement(
'svg',
{
width: '20',
height: '20',
viewBox: '0 0 20 20',
xmlns: 'http://www.w3.org/2000/svg',
...iconProps
},
React.createElement('path', {
fill: 'currentColor',
d: 'M10 2l6 16H4l6-16z'
})
);
const CustomIcon = wrapIcon(CustomSvg, 'CustomIcon');
```
*/
export declare const wrapIcon: (Icon: (iconProps: FluentIconsProps) => React.ReactElement, displayName?: string | undefined, options?: CreateFluentIconOptions | undefined) => React.FC<FluentIconsProps<React.SVGAttributes<SVGElement>, SVGSVGElement>>;

View File

@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.wrapIcon = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const useIconState_1 = require("./useIconState");
/**
*
* Wraps custom Svg Component with Fluent Icon behaviour
*
* @example
* ```tsx
const CustomSvg = (iconProps: FluentIconsProps) =>
React.createElement(
'svg',
{
width: '20',
height: '20',
viewBox: '0 0 20 20',
xmlns: 'http://www.w3.org/2000/svg',
...iconProps
},
React.createElement('path', {
fill: 'currentColor',
d: 'M10 2l6 16H4l6-16z'
})
);
const CustomIcon = wrapIcon(CustomSvg, 'CustomIcon');
```
*/
const wrapIcon = (Icon, displayName, options) => {
const WrappedIcon = React.forwardRef((props, ref) => {
const state = {
...useIconState_1.useIconState(props, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl }),
ref,
};
return React.createElement(Icon, Object.assign({}, state));
});
WrappedIcon.displayName = displayName;
return WrappedIcon;
};
exports.wrapIcon = wrapIcon;