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,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TeachingPopoverCarouselNav", {
enumerable: true,
get: function() {
return TeachingPopoverCarouselNav;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTeachingPopoverCarouselNav = require("./useTeachingPopoverCarouselNav");
const _renderTeachingPopoverCarouselNav = require("./renderTeachingPopoverCarouselNav");
const _useTeachingPopoverCarouselNavStylesstyles = require("./useTeachingPopoverCarouselNavStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const TeachingPopoverCarouselNav = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTeachingPopoverCarouselNav.useTeachingPopoverCarouselNav_unstable)(props, ref);
(0, _useTeachingPopoverCarouselNavStylesstyles.useTeachingPopoverCarouselNavStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverCarouselNavStyles_unstable')(state);
return (0, _renderTeachingPopoverCarouselNav.renderTeachingPopoverCarouselNav_unstable)(state);
});
TeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';\nimport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nimport { useTeachingPopoverCarouselNavStyles_unstable } from './useTeachingPopoverCarouselNavStyles.styles';\nimport type { TeachingPopoverCarouselNavProps } from './TeachingPopoverCarouselNav.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselNav, using the `useTeachingPopoverCarouselNav_unstable` and `useTeachingPopoverCarouselNavStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselNav provides an index-based pagination list to jump to any page within the carousel.\n */\nexport const TeachingPopoverCarouselNav: ForwardRefComponent<TeachingPopoverCarouselNavProps> = React.forwardRef(\n (props, ref) => {\n const state = useTeachingPopoverCarouselNav_unstable(props, ref);\n\n useTeachingPopoverCarouselNavStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTeachingPopoverCarouselNavStyles_unstable')(state);\n\n return renderTeachingPopoverCarouselNav_unstable(state);\n },\n);\n\nTeachingPopoverCarouselNav.displayName = 'TeachingPopoverCarouselNav';\n"],"names":["React","useTeachingPopoverCarouselNav_unstable","renderTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNavStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselNav","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+CACwB,kCAAkC;kDAC/B,qCAAqC;2DAClC,+CAA+C;qCAGhE,kCAAkC;AAQvE,MAAMK,6BAAAA,WAAAA,GAAmFL,OAAMM,UAAU,CAC9G,CAACC,OAAOC;IACN,MAAMC,YAAQR,qEAAAA,EAAuCM,OAAOC;QAE5DL,uFAAAA,EAA6CM;QAE7CL,gDAAAA,EAA4B,gDAAgDK;IAE5E,WAAOP,2EAAAA,EAA0CO;AACnD,GACA;AAEFJ,2BAA2BK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/TeachingPopoverCarouselNav.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverCarouselNavSlots = {\n /**\n * The element wrapping the carousel pagination. By default this is a div,\n * it may contain icons or text depending on TeachingPopoverCarouselNavStyle\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (value: string) => React.ReactNode;\n\nexport type TeachingPopoverCarouselNavState = ComponentState<TeachingPopoverCarouselNavSlots> & {\n values: string[];\n\n renderNavButton: NavButtonRenderFunction;\n};\n\nexport type TeachingPopoverCarouselNavProps = Omit<\n ComponentProps<Partial<TeachingPopoverCarouselNavSlots>>,\n 'children'\n> & {\n children: NavButtonRenderFunction;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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, {
TeachingPopoverCarouselNav: function() {
return _TeachingPopoverCarouselNav.TeachingPopoverCarouselNav;
},
renderTeachingPopoverCarouselNav_unstable: function() {
return _renderTeachingPopoverCarouselNav.renderTeachingPopoverCarouselNav_unstable;
},
teachingPopoverCarouselNavClassNames: function() {
return _useTeachingPopoverCarouselNavStylesstyles.teachingPopoverCarouselNavClassNames;
},
useTeachingPopoverCarouselNavStyles_unstable: function() {
return _useTeachingPopoverCarouselNavStylesstyles.useTeachingPopoverCarouselNavStyles_unstable;
},
useTeachingPopoverCarouselNav_unstable: function() {
return _useTeachingPopoverCarouselNav.useTeachingPopoverCarouselNav_unstable;
}
});
const _TeachingPopoverCarouselNav = require("./TeachingPopoverCarouselNav");
const _renderTeachingPopoverCarouselNav = require("./renderTeachingPopoverCarouselNav");
const _useTeachingPopoverCarouselNav = require("./useTeachingPopoverCarouselNav");
const _useTeachingPopoverCarouselNavStylesstyles = require("./useTeachingPopoverCarouselNavStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselNav } from './TeachingPopoverCarouselNav';\nexport type {\n NavButtonRenderFunction,\n TeachingPopoverCarouselNavProps,\n TeachingPopoverCarouselNavSlots,\n TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nexport { renderTeachingPopoverCarouselNav_unstable } from './renderTeachingPopoverCarouselNav';\nexport { useTeachingPopoverCarouselNav_unstable } from './useTeachingPopoverCarouselNav';\nexport {\n teachingPopoverCarouselNavClassNames,\n useTeachingPopoverCarouselNavStyles_unstable,\n} from './useTeachingPopoverCarouselNavStyles.styles';\n"],"names":["TeachingPopoverCarouselNav","renderTeachingPopoverCarouselNav_unstable","useTeachingPopoverCarouselNav_unstable","teachingPopoverCarouselNavClassNames","useTeachingPopoverCarouselNavStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sDAA0B;;;eAO1BC,2EAAyC;;;eAGhDE,+EAAoC;;;eACpCC,uFAA4C;;;eAHrCF,qEAAsC;;;4CARJ,+BAA+B;kDAOhB,qCAAqC;+CACxC,kCAAkC;2DAIlF,+CAA+C"}

View File

@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTeachingPopoverCarouselNav_unstable", {
enumerable: true,
get: function() {
return renderTeachingPopoverCarouselNav_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _valueIdContext = require("./valueIdContext");
const renderTeachingPopoverCarouselNav_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
const { values, renderNavButton } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: values.map((value)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_valueIdContext.ValueIdContextProvider, {
value: value,
children: renderNavButton(value)
}, value))
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/renderTeachingPopoverCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverCarouselNavState } from './TeachingPopoverCarouselNav.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TeachingPopoverCarouselNavSlots } from './TeachingPopoverCarouselNav.types';\nimport { ValueIdContextProvider } from './valueIdContext';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselNav\n */\nexport const renderTeachingPopoverCarouselNav_unstable = (state: TeachingPopoverCarouselNavState): JSXElement => {\n assertSlots<TeachingPopoverCarouselNavSlots>(state);\n\n const { values, renderNavButton } = state;\n\n return (\n <state.root>\n {values.map(value => (\n <ValueIdContextProvider value={value} key={value}>\n {renderNavButton(value)}\n </ValueIdContextProvider>\n ))}\n </state.root>\n );\n};\n"],"names":["assertSlots","ValueIdContextProvider","renderTeachingPopoverCarouselNav_unstable","state","values","renderNavButton","root","map","value"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;gCAGjB,mBAAmB;AAKnD,kDAAkD,CAACC;QACxDH,2BAAAA,EAA6CG;IAE7C,MAAM,EAAEC,MAAM,EAAEC,eAAe,EAAE,GAAGF;IAEpC,OAAA,WAAA,OACE,eAAA,EAACA,MAAMG,IAAI,EAAA;kBACRF,OAAOG,GAAG,CAACC,CAAAA,QAAAA,WAAAA,OACV,eAAA,EAACP,sCAAAA,EAAAA;gBAAuBO,OAAOA;0BAC5BH,gBAAgBG;eADwBA;;AAMnD,EAAE"}

View File

@@ -0,0 +1,43 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopoverCarouselNav_unstable", {
enumerable: true,
get: function() {
return useTeachingPopoverCarouselNav_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCarouselValues = require("../TeachingPopoverCarousel/Carousel/useCarouselValues");
const useTeachingPopoverCarouselNav_unstable = (props, ref)=>{
const focusableGroupAttr = (0, _reacttabster.useArrowNavigationGroup)({
circular: false,
axis: 'horizontal',
memorizeCurrent: false,
// eslint-disable-next-line @typescript-eslint/naming-convention
unstable_hasDefault: true
});
const values = (0, _useCarouselValues.useCarouselValues_unstable)((snapshot)=>snapshot);
return {
values,
renderNavButton: props.children,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role: 'tablist',
tabIndex: 0,
...props,
...focusableGroupAttr,
children: null
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type {\n TeachingPopoverCarouselNavProps,\n TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nimport { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverCarouselNav properties\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselNav\n */\nexport const useTeachingPopoverCarouselNav_unstable = (\n props: TeachingPopoverCarouselNavProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselNavState => {\n const focusableGroupAttr = useArrowNavigationGroup({\n circular: false,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n const values = useCarouselValues_unstable(snapshot => snapshot);\n\n return {\n values,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n tabIndex: 0,\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","React","useCarouselValues_unstable","useTeachingPopoverCarouselNav_unstable","props","ref","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","values","snapshot","renderNavButton","children","components","root","always","role","tabIndex","elementType"],"mappings":"AAAA;;;;;+BAiBaK;;;;;;;8BAf2B,0BAA0B;gCACnB,4BAA4B;iEACpD,QAAQ;mCAMY,wDAAwD;AAO5F,+CAA+C,CACpDC,OACAC;IAEA,MAAMC,yBAAqBR,qCAAAA,EAAwB;QACjDS,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IACA,MAAMC,aAAST,6CAAAA,EAA2BU,CAAAA,WAAYA;IAEtD,OAAO;QACLD;QACAE,iBAAiBT,MAAMU,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMhB,oBAAAA,CAAKiB,MAAM,KACflB,wCAAAA,EAAyB,OAAO;YAC9BM;YACAa,MAAM;YACNC,UAAU;YACV,GAAGf,KAAK;YACR,GAAGE,kBAAkB;YACrBQ,UAAU;QACZ,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,81 @@
'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, {
teachingPopoverCarouselNavClassNames: function() {
return teachingPopoverCarouselNavClassNames;
},
useTeachingPopoverCarouselNavStyles_unstable: function() {
return useTeachingPopoverCarouselNavStyles_unstable;
}
});
const _react = require("@griffel/react");
const teachingPopoverCarouselNavClassNames = {
root: 'fui-TeachingPopoverCarouselNav'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1063pyq",
i8kkvl: "f1ufnopg",
Bt984gj: "f122n59",
Brf1p80: "f4d9j23",
Bfpq7zp: 0,
g9k6zt: 0,
Bn4voq9: 0,
giviqs: "f89hs3r",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w",
B8q5s1w: "f8hki3x",
Bci5o5g: [
"f1d2448m",
"ffh67wi"
],
n8qw10: "f1bjia2o",
Bdrgwmp: [
"ffh67wi",
"f1d2448m"
]
}
}, {
d: [
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
".f122n59{align-items:center;}",
".f4d9j23{justify-content:center;}",
[
".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
{
p: -1
}
],
[
".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}"
]
});
const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTeachingPopoverCarouselNavStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverCarouselNavClassNames = {\n root: 'fui-TeachingPopoverCarouselNav'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n columnGap: tokens.spacingHorizontalXS,\n alignItems: 'center',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n })\n }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","teachingPopoverCarouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Bt984gj","Brf1p80","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","d","p","useTeachingPopoverCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,oCAAoC;;;gDAiBiD;;;;uBApB7C,gBAAgB;AAG9D,6CAA6C;IAChDC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAajB,CAAC;AAC8C,MAAMC,gDAAgDC,KAAK,IAAG;IAC1G,aAAa;IACb,MAAMC,MAAM,GAAGvB,SAAS,CAAC,CAAC;IAC1BsB,KAAK,CAACvB,IAAI,CAACyB,SAAS,OAAG9B,mBAAY,EAACI,oCAAoC,CAACC,IAAI,EAAEwB,MAAM,CAACxB,IAAI,EAAEuB,KAAK,CAACvB,IAAI,CAACyB,SAAS,CAAC;IACjH,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,45 @@
'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, {
teachingPopoverCarouselNavClassNames: function() {
return teachingPopoverCarouselNavClassNames;
},
useTeachingPopoverCarouselNavStyles_unstable: function() {
return useTeachingPopoverCarouselNavStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const teachingPopoverCarouselNavClassNames = {
root: 'fui-TeachingPopoverCarouselNav'
};
const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
flexDirection: 'row',
columnGap: _reacttheme.tokens.spacingHorizontalXS,
alignItems: 'center',
justifyContent: 'center',
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
..._react.shorthands.borderColor('transparent')
})
}
});
const useTeachingPopoverCarouselNavStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/useTeachingPopoverCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type {\n TeachingPopoverCarouselNavSlots,\n TeachingPopoverCarouselNavState,\n} from './TeachingPopoverCarouselNav.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const teachingPopoverCarouselNavClassNames: SlotClassNames<TeachingPopoverCarouselNavSlots> = {\n root: 'fui-TeachingPopoverCarouselNav',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n columnGap: tokens.spacingHorizontalXS,\n alignItems: 'center',\n justifyContent: 'center',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent'),\n }),\n },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselNavStyles_unstable = (\n state: TeachingPopoverCarouselNavState,\n): TeachingPopoverCarouselNavState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(teachingPopoverCarouselNavClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","teachingPopoverCarouselNavClassNames","root","useStyles","display","flexDirection","columnGap","spacingHorizontalXS","alignItems","justifyContent","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","useTeachingPopoverCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAWaK,oCAAAA;;;gDAoBAe;;;;uBA7BwC,iBAAiB;8BAMtB,0BAA0B;4BACnD,wBAAwB;AAExC,6CAA8F;IACnGd,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,WAAWN,kBAAAA,CAAOO,mBAAmB;QACrCC,YAAY;QACZC,gBAAgB;QAChB,OAAGV,6CAAAA,EAAgC;YACjCW,SAAS,GAAGV,kBAAAA,CAAOW,gBAAgB,CAAC,OAAO,EAAEX,kBAAAA,CAAOY,iBAAiB,EAAE;YACvEC,cAAcb,kBAAAA,CAAOc,kBAAkB;YACvC,GAAGhB,iBAAAA,CAAWiB,WAAW,CAAC,cAAc;QAC1C,EAAE;IACJ;AACF;AAGO,MAAMC,+CAA+C,CAC1DC;IAEA;IAEA,MAAMC,SAASf;IAEfc,MAAMf,IAAI,CAACiB,SAAS,OAAGtB,mBAAAA,EAAaI,qCAAqCC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IAEhH,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,31 @@
'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, {
ValueIdContextProvider: function() {
return ValueIdContextProvider;
},
useValueIdContext: function() {
return useValueIdContext;
},
valueIdContextDefaultValue: function() {
return valueIdContextDefaultValue;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const valueIdContext = /*#__PURE__*/ _react.createContext(undefined);
const valueIdContextDefaultValue = '';
const useValueIdContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(valueIdContext)) !== null && _React_useContext !== void 0 ? _React_useContext : valueIdContextDefaultValue;
};
const ValueIdContextProvider = valueIdContext.Provider;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverCarouselNav/valueIdContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst valueIdContext = React.createContext<string | undefined>(undefined);\n\nexport const valueIdContextDefaultValue = '';\n\nexport const useValueIdContext = (): string => React.useContext(valueIdContext) ?? valueIdContextDefaultValue;\n\nexport const ValueIdContextProvider = valueIdContext.Provider;\n"],"names":["React","valueIdContext","createContext","undefined","valueIdContextDefaultValue","useValueIdContext","useContext","ValueIdContextProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;0BAUaO;;;qBAFAF;;;8BAFAD;;;;;iEAJU,QAAQ;AAE/B,MAAMH,+BAAiBD,OAAME,aAAa,CAAqBC;AAExD,MAAMC,6BAA6B,GAAG;AAEtC,MAAMC,oBAAoB;QAAcL;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,eAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAoCI;EAA2B;AAEvG,MAAMG,yBAAyBN,eAAeO,QAAQ,CAAC"}