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,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Label: function() {
return _index.Label;
},
labelClassNames: function() {
return _index.labelClassNames;
},
renderLabel_unstable: function() {
return _index.renderLabel_unstable;
},
useLabelBase_unstable: function() {
return _index.useLabelBase_unstable;
},
useLabelStyles_unstable: function() {
return _index.useLabelStyles_unstable;
},
useLabel_unstable: function() {
return _index.useLabel_unstable;
}
});
const _index = require("./components/Label/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Label.ts"],"sourcesContent":["export type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './components/Label/index';\nexport {\n Label,\n labelClassNames,\n renderLabel_unstable,\n useLabelStyles_unstable,\n useLabel_unstable,\n useLabelBase_unstable,\n} from './components/Label/index';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable","useLabelBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,2BAA2B"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Label", {
enumerable: true,
get: function() {
return Label;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useLabel = require("./useLabel");
const _renderLabel = require("./renderLabel");
const _useLabelStylesstyles = require("./useLabelStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Label = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useLabel.useLabel_unstable)(props, ref);
(0, _useLabelStylesstyles.useLabelStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useLabelStyles_unstable')(state);
return (0, _renderLabel.renderLabel_unstable)(state);
});
Label.displayName = 'Label';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Label/Label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useLabel_unstable } from './useLabel';\nimport { renderLabel_unstable } from './renderLabel';\nimport { useLabelStyles_unstable } from './useLabelStyles.styles';\nimport type { LabelProps } from './Label.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A label component provides a title or name to a component.\n */\nexport const Label: ForwardRefComponent<LabelProps> = React.forwardRef((props, ref) => {\n const state = useLabel_unstable(props, ref);\n\n useLabelStyles_unstable(state);\n\n useCustomStyleHook_unstable('useLabelStyles_unstable')(state);\n\n return renderLabel_unstable(state);\n});\n\nLabel.displayName = 'Label';\n"],"names":["React","useLabel_unstable","renderLabel_unstable","useLabelStyles_unstable","useCustomStyleHook_unstable","Label","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;0BACG,aAAa;6BACV,gBAAgB;sCACb,0BAA0B;qCAGtB,kCAAkC;AAKvE,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQR,2BAAAA,EAAkBM,OAAOC;QAEvCL,6CAAAA,EAAwBM;QAExBL,gDAAAA,EAA4B,2BAA2BK;IAEvD,WAAOP,iCAAAA,EAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* Label state without design-specific state (size, weight).
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Label/Label.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & {\n /**\n * Renders the label as disabled\n * @default false\n */\n disabled?: boolean;\n\n /**\n * Displays an indicator that the label is for a required field. The required prop can be set to true to display\n * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.\n * @default false\n */\n required?: boolean | Slot<'span'>;\n\n /**\n * A label supports different sizes.\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * A label supports regular and semibold fontweight.\n * @default regular\n */\n weight?: 'regular' | 'semibold';\n};\n\nexport type LabelSlots = {\n root: Slot<'label'>;\n required?: Slot<'span'>;\n};\n\n/**\n * State used in rendering Label\n */\nexport type LabelState = ComponentState<LabelSlots> & Required<Pick<LabelProps, 'disabled' | 'size' | 'weight'>>;\n\n/**\n * Label props without design-specific props (size, weight).\n * Use this when building a label that is unstyled or uses a custom design system.\n */\nexport type LabelBaseProps = Omit<LabelProps, 'size' | 'weight'>;\n\n/**\n * Label state without design-specific state (size, weight).\n */\nexport type LabelBaseState = Omit<LabelState, 'size' | 'weight'>;\n"],"names":[],"mappings":"AAgDA;;CAEC,GACD,WAAiE"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Label: function() {
return _Label.Label;
},
labelClassNames: function() {
return _useLabelStylesstyles.labelClassNames;
},
renderLabel_unstable: function() {
return _renderLabel.renderLabel_unstable;
},
useLabelBase_unstable: function() {
return _useLabel.useLabelBase_unstable;
},
useLabelStyles_unstable: function() {
return _useLabelStylesstyles.useLabelStyles_unstable;
},
useLabel_unstable: function() {
return _useLabel.useLabel_unstable;
}
});
const _Label = require("./Label");
const _renderLabel = require("./renderLabel");
const _useLabel = require("./useLabel");
const _useLabelStylesstyles = require("./useLabelStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Label/index.ts"],"sourcesContent":["export { Label } from './Label';\nexport type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './Label.types';\nexport { renderLabel_unstable } from './renderLabel';\nexport { useLabel_unstable, useLabelBase_unstable } from './useLabel';\nexport { labelClassNames, useLabelStyles_unstable } from './useLabelStyles.styles';\n"],"names":["Label","renderLabel_unstable","useLabel_unstable","useLabelBase_unstable","labelClassNames","useLabelStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAILI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAHJ,UAAU;6BAEK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}

View File

@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderLabel_unstable", {
enumerable: true,
get: function() {
return renderLabel_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderLabel_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.root.children,
state.required && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.required, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Label/renderLabel.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { LabelBaseState, LabelSlots } from './Label.types';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel_unstable = (state: LabelBaseState): JSXElement => {\n assertSlots<LabelSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.required && <state.required />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderLabel_unstable","state","root","children","required"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;;;AAGxC,EAAE"}

View File

@@ -0,0 +1,53 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
useLabelBase_unstable: function() {
return useLabelBase_unstable;
},
useLabel_unstable: function() {
return useLabel_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useLabel_unstable = (props, ref)=>{
const { weight = 'regular', size = 'medium', ...baseProps } = props;
const state = useLabelBase_unstable(baseProps, ref);
return {
weight,
size,
...state
};
};
const useLabelBase_unstable = (props, ref)=>{
const { disabled = false, required = false, ...rest } = props;
return {
disabled,
required: _reactutilities.slot.optional(required === true ? '*' : required || undefined, {
defaultProps: {
'aria-hidden': 'true'
},
elementType: 'span'
}),
components: {
root: 'label',
required: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('label', {
ref: ref,
...rest
}), {
elementType: 'label'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Label/useLabel.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { LabelBaseProps, LabelBaseState, LabelProps, LabelState } from './Label.types';\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles_unstable,\n * before being passed to renderLabel_unstable.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>): LabelState => {\n const { weight = 'regular', size = 'medium', ...baseProps } = props;\n const state = useLabelBase_unstable(baseProps, ref as React.Ref<HTMLLabelElement>);\n\n return {\n weight,\n size,\n ...state,\n };\n};\n\n/**\n * Create the base state required to render Label, without design-specific props (size, weight).\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n */\nexport const useLabelBase_unstable = (props: LabelBaseProps, ref: React.Ref<HTMLLabelElement>): LabelBaseState => {\n const { disabled = false, required = false, ...rest } = props;\n return {\n disabled,\n required: slot.optional(required === true ? '*' : required || undefined, {\n defaultProps: { 'aria-hidden': 'true' },\n elementType: 'span',\n }),\n components: { root: 'label', required: 'span' },\n root: slot.always(\n getIntrinsicElementProps('label', {\n ref: ref as React.Ref<HTMLLabelElement>,\n ...rest,\n }),\n { elementType: 'label' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useLabel_unstable","props","ref","weight","size","baseProps","state","useLabelBase_unstable","disabled","required","rest","optional","undefined","defaultProps","elementType","components","root","always"],"mappings":"AAAA;;;;;;;;;;;;yBAgCaU;eAAAA;;qBAjBAP;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,MAAMA,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,SAAS,SAAS,EAAEC,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9D,MAAMK,QAAQC,sBAAsBF,WAAWH;IAE/C,OAAO;QACLC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AAQK,8BAA8B,CAACL,OAAuBC;IAC3D,MAAM,EAAEM,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGC,MAAM,GAAGT;IACxD,OAAO;QACLO;QACAC,UAAUV,oBAAAA,CAAKY,QAAQ,CAACF,aAAa,OAAO,MAAMA,YAAYG,WAAW;YACvEC,cAAc;gBAAE,eAAe;YAAO;YACtCC,aAAa;QACf;QACAC,YAAY;YAAEC,MAAM;YAASP,UAAU;QAAO;QAC9CO,MAAMjB,oBAAAA,CAAKkB,MAAM,KACfnB,wCAAAA,EAAyB,SAAS;YAChCI,KAAKA;YACL,GAAGQ,IAAI;QACT,IACA;YAAEI,aAAa;QAAQ;IAE3B;AACF,EAAE"}

View File

@@ -0,0 +1,92 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
labelClassNames: function() {
return labelClassNames;
},
useLabelStyles_unstable: function() {
return useLabelStyles_unstable;
}
});
const _react = require("@griffel/react");
const labelClassNames = {
root: 'fui-Label',
required: 'fui-Label__required'
};
/**
* Styles for the label
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bahqtrf: "fk6fouc",
sj55zd: "f19n0e5"
},
disabled: {
sj55zd: "f1s2aq7o",
B7iucu3: "f1cyfu5x"
},
required: {
sj55zd: "f1whyuy6",
uwmqm3: [
"fruq291",
"f7x41pl"
]
},
small: {
Be2twd7: "fy9rknc",
Bg96gwp: "fwrc4pm"
},
medium: {
Be2twd7: "fkhj508",
Bg96gwp: "f1i3iumi"
},
large: {
Be2twd7: "fod5ikn",
Bg96gwp: "faaz57k",
Bhrd7zp: "fl43uef"
},
semibold: {
Bhrd7zp: "fl43uef"
}
}, {
d: [
".fk6fouc{font-family:var(--fontFamilyBase);}",
".f19n0e5{color:var(--colorNeutralForeground1);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".f1whyuy6{color:var(--colorPaletteRedForeground3);}",
".fruq291{padding-left:var(--spacingHorizontalXS);}",
".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}"
],
m: [
[
"@media (forced-colors: active){.f1cyfu5x{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useLabelStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
if (state.required) {
state.required.className = (0, _react.mergeClasses)(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useLabelStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const labelClassNames = {\n root: 'fui-Label',\n required: 'fui-Label__required'\n};\n/**\n * Styles for the label\n */ const useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText'\n }\n },\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS\n },\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200\n },\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300\n },\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold\n },\n semibold: {\n fontWeight: tokens.fontWeightSemibold\n }\n});\n/**\n * Apply styling to the Label slots based on the state\n */ export const useLabelStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);\n if (state.required) {\n state.required.className = mergeClasses(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","labelClassNames","root","required","useStyles","Bahqtrf","sj55zd","disabled","B7iucu3","uwmqm3","small","Be2twd7","Bg96gwp","medium","large","Bhrd7zp","semibold","d","m","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,eAAe;;;2BAwCY;eAAvBkB;;;uBA1CwB,gBAAgB;AAElD,wBAAwB;IAC3BjB,IAAI,EAAE,WAAW;IACjBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,MAAA,EAAA;QAAAE,OAAA,EAAA;IAAA;IAAAL,QAAA,EAAA;QAAAG,MAAA,EAAA;QAAAG,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,KAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA+BrB,CAAC;AAGS,iCAAiCE,KAAK,IAAG;IAChD,aAAa;IACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1BgB,KAAK,CAAClB,IAAI,CAACoB,SAAS,OAAGvB,mBAAY,EAACE,eAAe,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEc,MAAM,CAACD,KAAK,CAACG,IAAI,CAAC,EAAEH,KAAK,CAACI,MAAM,KAAK,UAAU,IAAIH,MAAM,CAACL,QAAQ,EAAEI,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;IACnM,IAAIF,KAAK,CAACjB,QAAQ,EAAE;QAChBiB,KAAK,CAACjB,QAAQ,CAACmB,SAAS,OAAGvB,mBAAY,EAACE,eAAe,CAACE,QAAQ,EAAEkB,MAAM,CAAClB,QAAQ,EAAEiB,KAAK,CAACb,QAAQ,IAAIc,MAAM,CAACd,QAAQ,EAAEa,KAAK,CAACjB,QAAQ,CAACmB,SAAS,CAAC;IACnJ;IACA,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,68 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
labelClassNames: function() {
return labelClassNames;
},
useLabelStyles_unstable: function() {
return useLabelStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const labelClassNames = {
root: 'fui-Label',
required: 'fui-Label__required'
};
/**
* Styles for the label
*/ const useStyles = (0, _react.makeStyles)({
root: {
fontFamily: _reacttheme.tokens.fontFamilyBase,
color: _reacttheme.tokens.colorNeutralForeground1
},
disabled: {
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
'@media (forced-colors: active)': {
color: 'GrayText'
}
},
required: {
color: _reacttheme.tokens.colorPaletteRedForeground3,
paddingLeft: _reacttheme.tokens.spacingHorizontalXS
},
small: {
fontSize: _reacttheme.tokens.fontSizeBase200,
lineHeight: _reacttheme.tokens.lineHeightBase200
},
medium: {
fontSize: _reacttheme.tokens.fontSizeBase300,
lineHeight: _reacttheme.tokens.lineHeightBase300
},
large: {
fontSize: _reacttheme.tokens.fontSizeBase400,
lineHeight: _reacttheme.tokens.lineHeightBase400,
fontWeight: _reacttheme.tokens.fontWeightSemibold
},
semibold: {
fontWeight: _reacttheme.tokens.fontWeightSemibold
}
});
const useLabelStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(labelClassNames.root, styles.root, state.disabled && styles.disabled, styles[state.size], state.weight === 'semibold' && styles.semibold, state.root.className);
if (state.required) {
state.required.className = (0, _react.mergeClasses)(labelClassNames.required, styles.required, state.disabled && styles.disabled, state.required.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Label/useLabelStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LabelSlots, LabelState } from './Label.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const labelClassNames: SlotClassNames<LabelSlots> = {\n root: 'fui-Label',\n required: 'fui-Label__required',\n};\n\n/**\n * Styles for the label\n */\nconst useStyles = makeStyles({\n root: {\n fontFamily: tokens.fontFamilyBase,\n color: tokens.colorNeutralForeground1,\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n required: {\n color: tokens.colorPaletteRedForeground3,\n paddingLeft: tokens.spacingHorizontalXS,\n },\n\n small: {\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n },\n\n medium: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n large: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n fontWeight: tokens.fontWeightSemibold,\n },\n\n semibold: {\n fontWeight: tokens.fontWeightSemibold,\n },\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles_unstable = (state: LabelState): LabelState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n labelClassNames.root,\n styles.root,\n state.disabled && styles.disabled,\n styles[state.size],\n state.weight === 'semibold' && styles.semibold,\n state.root.className,\n );\n\n if (state.required) {\n state.required.className = mergeClasses(\n labelClassNames.required,\n styles.required,\n state.disabled && styles.disabled,\n state.required.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","labelClassNames","root","required","useStyles","fontFamily","fontFamilyBase","color","colorNeutralForeground1","disabled","colorNeutralForegroundDisabled","colorPaletteRedForeground3","paddingLeft","spacingHorizontalXS","small","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","medium","fontSizeBase300","lineHeightBase300","large","fontSizeBase400","lineHeightBase400","fontWeight","fontWeightSemibold","semibold","useLabelStyles_unstable","state","styles","className","size","weight"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,eAAAA;;;IAkDA2B,uBAAAA;;;;uBAvD4B,iBAAiB;4BACnC,wBAAwB;AAIxC,wBAAoD;IACzD1B,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BI,MAAM;QACJG,YAAYL,kBAAAA,CAAOM,cAAc;QACjCC,OAAOP,kBAAAA,CAAOQ,uBAAuB;IACvC;IAEAC,UAAU;QACRF,OAAOP,kBAAAA,CAAOU,8BAA8B;QAC5C,kCAAkC;YAChCH,OAAO;QACT;IACF;IAEAJ,UAAU;QACRI,OAAOP,kBAAAA,CAAOW,0BAA0B;QACxCC,aAAaZ,kBAAAA,CAAOa,mBAAmB;IACzC;IAEAC,OAAO;QACLC,UAAUf,kBAAAA,CAAOgB,eAAe;QAChCC,YAAYjB,kBAAAA,CAAOkB,iBAAiB;IACtC;IAEAC,QAAQ;QACNJ,UAAUf,kBAAAA,CAAOoB,eAAe;QAChCH,YAAYjB,kBAAAA,CAAOqB,iBAAiB;IACtC;IAEAC,OAAO;QACLP,UAAUf,kBAAAA,CAAOuB,eAAe;QAChCN,YAAYjB,kBAAAA,CAAOwB,iBAAiB;QACpCC,YAAYzB,kBAAAA,CAAO0B,kBAAkB;IACvC;IAEAC,UAAU;QACRF,YAAYzB,kBAAAA,CAAO0B,kBAAkB;IACvC;AACF;AAKO,gCAAgC,CAACG;IACtC;IAEA,MAAMC,SAAS1B;IACfyB,MAAM3B,IAAI,CAAC6B,SAAS,GAAGhC,uBAAAA,EACrBE,gBAAgBC,IAAI,EACpB4B,OAAO5B,IAAI,EACX2B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCqB,MAAM,CAACD,MAAMG,IAAI,CAAC,EAClBH,MAAMI,MAAM,KAAK,cAAcH,OAAOH,QAAQ,EAC9CE,MAAM3B,IAAI,CAAC6B,SAAS;IAGtB,IAAIF,MAAM1B,QAAQ,EAAE;QAClB0B,MAAM1B,QAAQ,CAAC4B,SAAS,OAAGhC,mBAAAA,EACzBE,gBAAgBE,QAAQ,EACxB2B,OAAO3B,QAAQ,EACf0B,MAAMpB,QAAQ,IAAIqB,OAAOrB,QAAQ,EACjCoB,MAAM1B,QAAQ,CAAC4B,SAAS;IAE5B;IAEA,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Label: function() {
return _Label.Label;
},
labelClassNames: function() {
return _Label.labelClassNames;
},
renderLabel_unstable: function() {
return _Label.renderLabel_unstable;
},
useLabelBase_unstable: function() {
return _Label.useLabelBase_unstable;
},
useLabelStyles_unstable: function() {
return _Label.useLabelStyles_unstable;
},
useLabel_unstable: function() {
return _Label.useLabel_unstable;
}
});
const _Label = require("./Label");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Label,\n labelClassNames,\n renderLabel_unstable,\n useLabelStyles_unstable,\n useLabel_unstable,\n useLabelBase_unstable,\n} from './Label';\nexport type { LabelBaseProps, LabelBaseState, LabelProps, LabelSlots, LabelState } from './Label';\n"],"names":["Label","labelClassNames","renderLabel_unstable","useLabelStyles_unstable","useLabel_unstable","useLabelBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,UAAU"}