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,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CarouselSlider", {
enumerable: true,
get: function() {
return CarouselSlider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCarouselSlider = require("./useCarouselSlider");
const _renderCarouselSlider = require("./renderCarouselSlider");
const _useCarouselSliderStylesstyles = require("./useCarouselSliderStyles.styles");
const _CarouselSliderContext = require("./CarouselSliderContext");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CarouselSlider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCarouselSlider.useCarouselSlider_unstable)(props, ref);
(0, _useCarouselSliderStylesstyles.useCarouselSliderStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselSliderStyles_unstable')(state);
const context = (0, _CarouselSliderContext.useCarouselSliderContextValues_unstable)(state);
return (0, _renderCarouselSlider.renderCarouselSlider_unstable)(state, context);
});
CarouselSlider.displayName = 'CarouselSlider';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useCarouselSlider_unstable } from './useCarouselSlider';\nimport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nimport { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\nimport type { CarouselSliderProps } from './CarouselSlider.types';\nimport { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselSlider component - The viewport window that CarouselCards are contained within.\n */\nexport const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {\n const state = useCarouselSlider_unstable(props, ref);\n\n useCarouselSliderStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);\n\n const context = useCarouselSliderContextValues_unstable(state);\n return renderCarouselSlider_unstable(state, context);\n});\n\nCarouselSlider.displayName = 'CarouselSlider';\n"],"names":["React","useCarouselSlider_unstable","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselSlider","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCAGY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;uCAE5B,0BAA0B;qCACtC,kCAAkC;AAKvE,MAAMM,iBAAAA,WAAAA,GAA2DN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQT,6CAAAA,EAA2BO,OAAOC;QAEhDN,+DAAAA,EAAiCO;QACjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,MAAMC,cAAUP,8DAAAA,EAAwCM;IACxD,WAAOR,mDAAAA,EAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering CarouselSlider
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n /**\n * The root viewport/window of the carousel\n */\n root: Slot<'div'>;\n};\n\n/**\n * CarouselSlider Props\n */\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n /**\n * cardFocus sets the carousel slider as a focus group,\n * enabling left/right navigation of elements.\n *\n * This will also be passed into CarouselCards via context and set the appropriate focus attributes\n *\n * Defaults: false\n */\n cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WAAmG"}

View File

@@ -0,0 +1,47 @@
'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, {
CarouselSliderContextProvider: function() {
return CarouselSliderContextProvider;
},
carouselSliderContextDefaultValue: function() {
return carouselSliderContextDefaultValue;
},
useCarouselSliderContext: function() {
return useCarouselSliderContext;
},
useCarouselSliderContextValues_unstable: function() {
return useCarouselSliderContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const carouselSliderContext = /*#__PURE__*/ _react.createContext(undefined);
const carouselSliderContextDefaultValue = {
cardFocus: false
};
const useCarouselSliderContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(carouselSliderContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselSliderContextDefaultValue;
};
const CarouselSliderContextProvider = carouselSliderContext.Provider;
function useCarouselSliderContextValues_unstable(state) {
const { cardFocus } = state;
const carouselSlider = _react.useMemo(()=>({
cardFocus
}), [
cardFocus
]);
return {
carouselSlider
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue | undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n cardFocus: false,\n};\n\nexport const useCarouselSliderContext = (): CarouselSliderContextValue =>\n React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/**\n * Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n const { cardFocus } = state;\n const carouselSlider = React.useMemo(\n () => ({\n cardFocus,\n }),\n [cardFocus],\n );\n\n return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"mappings":"AAAA;;;;;;;;;;;;IAcaQ,6BAAAA;;;qCAPAJ;;;4BAIAE;;;2CAYGI;;;;;iEArBO,QAAQ;AAG/B,MAAMT,sCAAwBD,OAAME,aAAa,CAAyCC;AAEnF,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEK,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,OAAMO,UAAU,CAACN,sBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA2CI;EAAkC;AAExE,sCAAsCH,sBAAsBQ,QAAQ,CAAC;AASrE,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,OAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;SACF,CAAA,EACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}

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, {
CarouselSlider: function() {
return _CarouselSlider.CarouselSlider;
},
carouselSliderClassNames: function() {
return _useCarouselSliderStylesstyles.carouselSliderClassNames;
},
renderCarouselSlider_unstable: function() {
return _renderCarouselSlider.renderCarouselSlider_unstable;
},
useCarouselSliderStyles_unstable: function() {
return _useCarouselSliderStylesstyles.useCarouselSliderStyles_unstable;
},
useCarouselSlider_unstable: function() {
return _useCarouselSlider.useCarouselSlider_unstable;
}
});
const _CarouselSlider = require("./CarouselSlider");
const _renderCarouselSlider = require("./renderCarouselSlider");
const _useCarouselSlider = require("./useCarouselSlider");
const _useCarouselSliderStylesstyles = require("./useCarouselSliderStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselSlider/index.ts"],"sourcesContent":["export { CarouselSlider } from './CarouselSlider';\nexport type {\n CarouselSliderContextValue,\n CarouselSliderProps,\n CarouselSliderSlots,\n CarouselSliderState,\n} from './CarouselSlider.types';\nexport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nexport { useCarouselSlider_unstable } from './useCarouselSlider';\nexport { carouselSliderClassNames, useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\n"],"names":["CarouselSlider","renderCarouselSlider_unstable","useCarouselSlider_unstable","carouselSliderClassNames","useCarouselSliderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eASdG,uDAAwB;;;eAFxBF,mDAA6B;;;eAEHG,+DAAgC;;;eAD1DF,6CAA0B;;;gCARJ,mBAAmB;sCAOJ,yBAAyB;mCAC5B,sBAAsB;+CACU,mCAAmC"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCarouselSlider_unstable", {
enumerable: true,
get: function() {
return renderCarouselSlider_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _CarouselSliderContext = require("./CarouselSliderContext");
const renderCarouselSlider_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselSliderContext.CarouselSliderContextProvider, {
value: contextValues.carouselSlider,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselSlider/renderCarouselSlider.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 { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';\nimport { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselSlider\n */\nexport const renderCarouselSlider_unstable = (\n state: CarouselSliderState,\n contextValues: CarouselSliderContextValues,\n): JSXElement => {\n assertSlots<CarouselSliderSlots>(state);\n\n return (\n <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n <state.root />\n </CarouselSliderContextProvider>\n );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselSlider_unstable","state","contextValues","value","carouselSlider","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;uCAGmB,0BAA0B;AAK9F,sCAAsC,CAC3CC,OACAC;QAEAJ,2BAAAA,EAAiCG;IAEjC,OAAA,WAAA,OACE,eAAA,EAACF,oDAAAA,EAAAA;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

View File

@@ -0,0 +1,42 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselSlider_unstable", {
enumerable: true,
get: function() {
return useCarouselSlider_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacttabster = require("@fluentui/react-tabster");
const _CarouselContext = require("../CarouselContext");
const useCarouselSlider_unstable = (props, ref)=>{
const { cardFocus = false } = props;
const circular = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.circular);
const focusableGroupAttr = (0, _reacttabster.useArrowNavigationGroup)({
circular,
axis: 'horizontal',
memorizeCurrent: false,
// eslint-disable-next-line @typescript-eslint/naming-convention
unstable_hasDefault: true
});
const focusProps = cardFocus ? focusableGroupAttr : {};
return {
cardFocus,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role: 'group',
...props,
...focusProps
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["'use client';\n\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselSlider.\n *\n * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n *\n * @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n props: CarouselSliderProps,\n ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n const { cardFocus = false } = props;\n const circular = useCarouselContext(ctx => ctx.circular);\n const focusableGroupAttr = useArrowNavigationGroup({\n circular,\n axis: 'horizontal',\n memorizeCurrent: false,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n unstable_hasDefault: true,\n });\n\n const focusProps = cardFocus ? focusableGroupAttr : {};\n\n return {\n cardFocus,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'group',\n ...props,\n ...focusProps,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselContext_unstable","useCarouselContext","useCarouselSlider_unstable","props","ref","cardFocus","circular","ctx","focusableGroupAttr","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAkBaM;;;;;;;gCAhBkC,4BAA4B;iEACpD,QAAQ;8BAGS,0BAA0B;iCACA,qBAAqB;AAWhF,mCAAmC,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,eAAWL,4CAAAA,EAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,yBAAqBT,qCAAAA,EAAwB;QACjDO;QACAG,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYG,qBAAqB,CAAC;IAErD,OAAO;QACLH;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,oBAAAA,CAAKkB,MAAM,CACfnB,4CAAAA,EAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,55 @@
'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, {
carouselSliderClassNames: function() {
return carouselSliderClassNames;
},
useCarouselSliderStyles_unstable: function() {
return useCarouselSliderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _CarouselContext = require("../CarouselContext");
const carouselSliderClassNames = {
root: 'fui-CarouselSlider'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Eiaeu8: "f1115ve7"
},
elevated: {
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f1vkj2z1"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1115ve7{overflow-anchor:none;}",
[
".f1vkj2z1{gap:var(--spacingHorizontalXXL);}",
{
p: -1
}
]
]
});
const useCarouselSliderStyles_unstable = (state)=>{
'use no memo';
const appearance = (0, _CarouselContext.useCarouselContext_unstable)((context)=>context.appearance);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(carouselSliderClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nexport const carouselSliderClassNames = {\n root: 'fui-CarouselSlider'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n overflowAnchor: 'none'\n },\n elevated: {\n gap: tokens.spacingHorizontalXXL\n }\n});\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */ export const useCarouselSliderStyles_unstable = (state)=>{\n 'use no memo';\n const appearance = useCarouselContext((context)=>context.appearance);\n const styles = useStyles();\n state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselSliderClassNames","root","useStyles","mc9l5x","Eiaeu8","elevated","i8kkvl","Belr9w4","rmohyg","d","p","useCarouselSliderStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,wBAAwB;;;oCAgBY;;;;uBAnBR,gBAAgB;iCAES,oBAAoB;AAC/E,iCAAiC;IACpCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,MAAMC,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,UAAU,OAAGd,4CAAkB,GAAEe,OAAO,GAAGA,OAAO,CAACD,UAAU,CAAC;IACpE,MAAME,MAAM,GAAGb,SAAS,CAAC,CAAC;IAC1BU,KAAK,CAACX,IAAI,CAACe,SAAS,OAAGpB,mBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEY,UAAU,KAAK,UAAU,IAAIE,MAAM,CAACV,QAAQ,EAAEO,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;IACnJ,OAAOJ,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,43 @@
'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, {
carouselSliderClassNames: function() {
return carouselSliderClassNames;
},
useCarouselSliderStyles_unstable: function() {
return useCarouselSliderStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _CarouselContext = require("../CarouselContext");
const carouselSliderClassNames = {
root: 'fui-CarouselSlider'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
overflowAnchor: 'none'
},
elevated: {
gap: _reacttheme.tokens.spacingHorizontalXXL
}
});
const useCarouselSliderStyles_unstable = (state)=>{
'use no memo';
const appearance = (0, _CarouselContext.useCarouselContext_unstable)((context)=>context.appearance);
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(carouselSliderClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\nimport type { CarouselSliderSlots, CarouselSliderState } from './CarouselSlider.types';\n\nexport const carouselSliderClassNames: SlotClassNames<CarouselSliderSlots> = {\n root: 'fui-CarouselSlider',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n overflowAnchor: 'none',\n },\n elevated: {\n gap: tokens.spacingHorizontalXXL,\n },\n});\n\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */\nexport const useCarouselSliderStyles_unstable = (state: CarouselSliderState): CarouselSliderState => {\n 'use no memo';\n\n const appearance = useCarouselContext(context => context.appearance);\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n carouselSliderClassNames.root,\n styles.root,\n appearance === 'elevated' && styles.elevated,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselSliderClassNames","root","useStyles","display","overflowAnchor","elevated","gap","spacingHorizontalXXL","useCarouselSliderStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaK,wBAAAA;;;oCAoBAQ;eAAAA;;;uBA3B4B,iBAAiB;4BAEnC,wBAAwB;iCACmB,qBAAqB;AAIhF,iCAAsE;IAC3EP,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,qBAAAA,EAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,gBAAgB;IAClB;IACAC,UAAU;QACRC,KAAKT,kBAAAA,CAAOU,oBAAoB;IAClC;AACF;AAKO,yCAAyC,CAACE;IAC/C;IAEA,MAAMC,iBAAaX,4CAAAA,EAAmBY,CAAAA,UAAWA,QAAQD,UAAU;IACnE,MAAME,SAASV;IAEfO,MAAMR,IAAI,CAACY,SAAS,OAAGjB,mBAAAA,EACrBI,yBAAyBC,IAAI,EAC7BW,OAAOX,IAAI,EACXS,eAAe,cAAcE,OAAOP,QAAQ,EAC5CI,MAAMR,IAAI,CAACY,SAAS;IAGtB,OAAOJ;AACT,EAAE"}