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, "CarouselNav", {
enumerable: true,
get: function() {
return CarouselNav;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _CarouselNavContext = require("./CarouselNavContext");
const _renderCarouselNav = require("./renderCarouselNav");
const _useCarouselNav = require("./useCarouselNav");
const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const CarouselNav = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCarouselNav.useCarouselNav_unstable)(props, ref);
const contextValues = (0, _CarouselNavContext.useCarouselNavContextValues_unstable)(state);
(0, _useCarouselNavStylesstyles.useCarouselNavStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselNavStyles_unstable')(state);
return (0, _renderCarouselNav.renderCarouselNav_unstable)(state, contextValues);
});
CarouselNav.displayName = 'CarouselNav';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/CarouselNav.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselNavProps } from './CarouselNav.types';\nimport { useCarouselNavContextValues_unstable } from './CarouselNavContext';\nimport { renderCarouselNav_unstable } from './renderCarouselNav';\nimport { useCarouselNav_unstable } from './useCarouselNav';\nimport { useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Used to jump to a card based on index, using arrow navigation via Tabster.\n *\n * The children of this component will be wrapped in a context to\n * provide the appropriate value based on their index position.\n */\nexport const CarouselNav: ForwardRefComponent<CarouselNavProps> = React.forwardRef((props, ref) => {\n const state = useCarouselNav_unstable(props, ref);\n const contextValues = useCarouselNavContextValues_unstable(state);\n\n useCarouselNavStyles_unstable(state);\n useCustomStyleHook_unstable('useCarouselNavStyles_unstable')(state);\n\n return renderCarouselNav_unstable(state, contextValues);\n});\n\nCarouselNav.displayName = 'CarouselNav';\n"],"names":["React","useCarouselNavContextValues_unstable","renderCarouselNav_unstable","useCarouselNav_unstable","useCarouselNavStyles_unstable","useCustomStyleHook_unstable","CarouselNav","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;oCAGsB,uBAAuB;mCACjC,sBAAsB;gCACzB,mBAAmB;4CACb,gCAAgC;qCAClC,kCAAkC;AAQvE,MAAMM,cAAAA,WAAAA,GAAqDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQP,uCAAAA,EAAwBK,OAAOC;IAC7C,MAAME,oBAAgBV,wDAAAA,EAAqCS;QAE3DN,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOR,6CAAAA,EAA2BQ,OAAOC;AAC3C,GAAG;AAEHL,YAAYM,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/CarouselNav/CarouselNav.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type CarouselNavSlots = {\n /**\n * The element wrapping the carousel pagination. By default, this is a div.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type NavButtonRenderFunction = (index: number) => React.ReactNode;\n\nexport type CarouselNavState = ComponentState<CarouselNavSlots> & {\n /**\n * Enables an alternate brand style when set to 'brand'\n */\n appearance?: 'brand';\n\n /**\n * The function that will render nav items based on total slides and their index.\n */\n renderNavButton: NavButtonRenderFunction;\n\n /**\n * The total number of slides available.\n * Users may override if using the component without a Carousel wrapper or implementing custom functionality.\n */\n totalSlides: number;\n};\n\nexport type CarouselNavProps = Omit<ComponentProps<Partial<CarouselNavSlots>>, 'children'> & {\n children: NavButtonRenderFunction;\n} & Partial<Pick<CarouselNavState, 'appearance' | 'totalSlides'>>;\n\nexport type CarouselNavContextValue = Pick<CarouselNavState, 'appearance'>;\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}

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, {
CarouselNavContextProvider: function() {
return CarouselNavContextProvider;
},
carouselNavContextDefaultValue: function() {
return carouselNavContextDefaultValue;
},
useCarouselNavContext: function() {
return useCarouselNavContext;
},
useCarouselNavContextValues_unstable: function() {
return useCarouselNavContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const carouselNavContext = /*#__PURE__*/ _react.createContext(undefined);
const carouselNavContextDefaultValue = {
appearance: undefined
};
const useCarouselNavContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(carouselNavContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavContextDefaultValue;
};
const CarouselNavContextProvider = carouselNavContext.Provider;
function useCarouselNavContextValues_unstable(state) {
const { appearance } = state;
const carouselNav = _react.useMemo(()=>({
appearance
}), [
appearance
]);
return {
carouselNav
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/CarouselNavContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { CarouselNavContextValue, CarouselNavState } from './CarouselNav.types';\n\nconst carouselNavContext = React.createContext<CarouselNavContextValue | undefined>(undefined);\n\nexport const carouselNavContextDefaultValue: CarouselNavContextValue = {\n appearance: undefined,\n};\n\nexport const useCarouselNavContext = (): CarouselNavContextValue =>\n React.useContext(carouselNavContext) ?? carouselNavContextDefaultValue;\n\nexport const CarouselNavContextProvider = carouselNavContext.Provider;\n\n/**\n * Context shared between CarouselNav and its children components\n */\nexport type CarouselNavContextValues = {\n carouselNav: CarouselNavContextValue;\n};\n\nexport function useCarouselNavContextValues_unstable(state: CarouselNavState): CarouselNavContextValues {\n const { appearance } = state;\n const carouselNav = React.useMemo(() => ({ appearance }), [appearance]);\n\n return { carouselNav };\n}\n"],"names":["React","carouselNavContext","createContext","undefined","carouselNavContextDefaultValue","appearance","useCarouselNavContext","useContext","CarouselNavContextProvider","Provider","useCarouselNavContextValues_unstable","state","carouselNav","useMemo"],"mappings":"AAAA;;;;;;;;;;;;IAcaQ,0BAAAA;;;kCAPAJ;;;yBAIAE;;;wCAYGI;;;;;iEArBO,QAAQ;AAG/B,MAAMT,mCAAqBD,OAAME,aAAa,CAAsCC;AAE7E,MAAMC,iCAA0D;IACrEC,YAAYF;AACd,EAAE;AAEK,MAAMG,wBAAwB;QACnCN;WAAAA,CAAAA,oBAAAA,OAAMO,UAAU,CAACN,mBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAwCI;EAA+B;AAElE,mCAAmCH,mBAAmBQ,QAAQ,CAAC;AAS/D,SAASC,qCAAqCC,KAAuB;IAC1E,MAAM,EAAEN,UAAU,EAAE,GAAGM;IACvB,MAAMC,cAAcZ,OAAMa,OAAO,CAAC,IAAO,CAAA;YAAER;SAAW,CAAA,EAAI;QAACA;KAAW;IAEtE,OAAO;QAAEO;IAAY;AACvB"}

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, {
CarouselNavIndexContextProvider: function() {
return CarouselNavIndexContextProvider;
},
carouselNavIndexContextDefaultValue: function() {
return carouselNavIndexContextDefaultValue;
},
useCarouselNavIndexContext: function() {
return useCarouselNavIndexContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const carouselNavIndexContext = /*#__PURE__*/ _react.createContext(undefined);
const carouselNavIndexContextDefaultValue = 0;
const useCarouselNavIndexContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(carouselNavIndexContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselNavIndexContextDefaultValue;
};
const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/CarouselNavIndexContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst carouselNavIndexContext = React.createContext<number | undefined>(undefined);\n\nexport const carouselNavIndexContextDefaultValue: number = 0;\n\nexport const useCarouselNavIndexContext = (): number =>\n React.useContext(carouselNavIndexContext) ?? carouselNavIndexContextDefaultValue;\n\nexport const CarouselNavIndexContextProvider = carouselNavIndexContext.Provider;\n"],"names":["React","carouselNavIndexContext","createContext","undefined","carouselNavIndexContextDefaultValue","useCarouselNavIndexContext","useContext","CarouselNavIndexContextProvider","Provider"],"mappings":"AAAA;;;;;;;;;;;;mCAWaO;;;uCALAH;;;8BAEAC;;;;;iEANU,QAAQ;AAE/B,MAAMJ,wCAA0BD,OAAME,aAAa,CAAqBC;AAEjE,MAAMC,sCAA8C,EAAE;AAEtD,MAAMC,6BAA6B;QACxCL;WAAAA,CAAAA,oBAAAA,OAAMM,UAAU,CAACL,wBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAA6CI;EAAoC;AAE5E,MAAMG,kCAAkCN,wBAAwBO,QAAQ,CAAC"}

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, {
CarouselNav: function() {
return _CarouselNav.CarouselNav;
},
carouselNavClassNames: function() {
return _useCarouselNavStylesstyles.carouselNavClassNames;
},
renderCarouselNav_unstable: function() {
return _renderCarouselNav.renderCarouselNav_unstable;
},
useCarouselNavStyles_unstable: function() {
return _useCarouselNavStylesstyles.useCarouselNavStyles_unstable;
},
useCarouselNav_unstable: function() {
return _useCarouselNav.useCarouselNav_unstable;
}
});
const _CarouselNav = require("./CarouselNav");
const _renderCarouselNav = require("./renderCarouselNav");
const _useCarouselNav = require("./useCarouselNav");
const _useCarouselNavStylesstyles = require("./useCarouselNavStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/index.ts"],"sourcesContent":["export { CarouselNav } from './CarouselNav';\nexport type {\n CarouselNavContextValue,\n CarouselNavProps,\n CarouselNavSlots,\n CarouselNavState,\n NavButtonRenderFunction,\n} from './CarouselNav.types';\nexport { renderCarouselNav_unstable } from './renderCarouselNav';\nexport { useCarouselNav_unstable } from './useCarouselNav';\nexport { carouselNavClassNames, useCarouselNavStyles_unstable } from './useCarouselNavStyles.styles';\n"],"names":["CarouselNav","renderCarouselNav_unstable","useCarouselNav_unstable","carouselNavClassNames","useCarouselNavStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BATJ,gBAAgB;mCAQD,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCarouselNav_unstable", {
enumerable: true,
get: function() {
return renderCarouselNav_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _CarouselNavContext = require("./CarouselNavContext");
const _CarouselNavIndexContext = require("./CarouselNavIndexContext");
const renderCarouselNav_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
const { totalSlides, renderNavButton } = state;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselNavContext.CarouselNavContextProvider, {
value: contextValues.carouselNav,
children: new Array(totalSlides).fill(null).map((_, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_CarouselNavIndexContext.CarouselNavIndexContextProvider, {
value: index,
children: renderNavButton(index)
}, index))
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/renderCarouselNav.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CarouselNavState, CarouselNavSlots } from './CarouselNav.types';\nimport { CarouselNavContextProvider, type CarouselNavContextValues } from './CarouselNavContext';\nimport { CarouselNavIndexContextProvider } from './CarouselNavIndexContext';\n\n/**\n * Render the final JSX of CarouselNav\n */\nexport const renderCarouselNav_unstable = (\n state: CarouselNavState,\n contextValues: CarouselNavContextValues,\n): JSXElement => {\n assertSlots<CarouselNavSlots>(state);\n\n const { totalSlides, renderNavButton } = state;\n\n return (\n <state.root>\n <CarouselNavContextProvider value={contextValues.carouselNav}>\n {new Array(totalSlides).fill(null).map((_, index) => (\n <CarouselNavIndexContextProvider key={index} value={index}>\n {renderNavButton(index)}\n </CarouselNavIndexContextProvider>\n ))}\n </CarouselNavContextProvider>\n </state.root>\n );\n};\n"],"names":["assertSlots","CarouselNavContextProvider","CarouselNavIndexContextProvider","renderCarouselNav_unstable","state","contextValues","totalSlides","renderNavButton","root","value","carouselNav","Array","fill","map","_","index"],"mappings":";;;;+BAaaG;;;;;;4BAZb,gDAAiD;gCAErB,4BAA4B;oCAIkB,uBAAuB;yCACjD,4BAA4B;AAKrE,mCAAmC,CACxCC,OACAC;QAEAL,2BAAAA,EAA8BI;IAE9B,MAAM,EAAEE,WAAW,EAAEC,eAAe,EAAE,GAAGH;IAEzC,OAAA,WAAA,OACE,eAAA,EAACA,MAAMI,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACP,8CAAAA,EAAAA;YAA2BQ,OAAOJ,cAAcK,WAAW;sBACzD,IAAIC,MAAML,aAAaM,IAAI,CAAC,MAAMC,GAAG,CAAC,CAACC,GAAGC,QAAAA,WAAAA,OACzC,eAAA,EAACb,wDAAAA,EAAAA;oBAA4CO,OAAOM;8BACjDR,gBAAgBQ;mBADmBA;;;AAOhD,EAAE"}

View File

@@ -0,0 +1,57 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCarouselNav_unstable", {
enumerable: true,
get: function() {
return useCarouselNav_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 _CarouselContext = require("../CarouselContext");
const useCarouselNav_unstable = (props, ref)=>{
const { appearance } = props;
const focusableGroupAttr = (0, _reacttabster.useArrowNavigationGroup)({
circular: false,
axis: 'horizontal',
memorizeCurrent: false,
// eslint-disable-next-line @typescript-eslint/naming-convention
unstable_hasDefault: true
});
// Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context
const [totalSlides, setTotalSlides] = (0, _reactutilities.useControllableState)({
state: props.totalSlides,
initialState: 0
});
const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
return subscribeForValues((data)=>{
setTotalSlides(data.navItemsCount);
});
}, [
subscribeForValues,
setTotalSlides
]);
return {
totalSlides,
appearance,
renderNavButton: props.children,
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role: 'tablist',
...props,
...focusableGroupAttr,
children: null
}), {
elementType: 'div'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/useCarouselNav.ts"],"sourcesContent":["'use client';\n\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, slot, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nimport type { CarouselNavProps, CarouselNavState } from './CarouselNav.types';\nimport { useControllableState } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render CarouselNav.\n *\n * The returned state can be modified with hooks such as useCarouselNavStyles_unstable,\n * before being passed to renderCarouselNav_unstable.\n *\n * @param props - props from this instance of CarouselNav\n * @param ref - reference to root HTMLDivElement of CarouselNav\n */\nexport const useCarouselNav_unstable = (props: CarouselNavProps, ref: React.Ref<HTMLDivElement>): CarouselNavState => {\n const { appearance } = props;\n\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\n // Users can choose controlled or uncontrolled, if uncontrolled, the default is initialized by carousel context\n const [totalSlides, setTotalSlides] = useControllableState({\n state: props.totalSlides,\n initialState: 0,\n });\n\n const subscribeForValues = useCarouselContext(ctx => ctx.subscribeForValues);\n\n useIsomorphicLayoutEffect(() => {\n return subscribeForValues(data => {\n setTotalSlides(data.navItemsCount);\n });\n }, [subscribeForValues, setTotalSlides]);\n\n return {\n totalSlides,\n appearance,\n renderNavButton: props.children,\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'tablist',\n ...props,\n ...focusableGroupAttr,\n children: null,\n }),\n { elementType: 'div' },\n ),\n };\n};\n"],"names":["useArrowNavigationGroup","getIntrinsicElementProps","slot","useIsomorphicLayoutEffect","React","useCarouselContext_unstable","useCarouselContext","useControllableState","useCarouselNav_unstable","props","ref","appearance","focusableGroupAttr","circular","axis","memorizeCurrent","unstable_hasDefault","totalSlides","setTotalSlides","state","initialState","subscribeForValues","ctx","data","navItemsCount","renderNavButton","children","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAmBaQ;;;;;;;8BAjB2B,0BAA0B;gCACQ,4BAA4B;iEAC/E,QAAQ;iCAEmC,qBAAqB;AAahF,gCAAgC,CAACC,OAAyBC;IAC/D,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAEvB,MAAMG,yBAAqBZ,qCAAAA,EAAwB;QACjDa,UAAU;QACVC,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,+GAA+G;IAC/G,MAAM,CAACC,aAAaC,eAAe,OAAGX,oCAAAA,EAAqB;QACzDY,OAAOV,MAAMQ,WAAW;QACxBG,cAAc;IAChB;IAEA,MAAMC,yBAAqBf,4CAAAA,EAAmBgB,CAAAA,MAAOA,IAAID,kBAAkB;IAE3ElB,6CAAAA,EAA0B;QACxB,OAAOkB,mBAAmBE,CAAAA;YACxBL,eAAeK,KAAKC,aAAa;QACnC;IACF,GAAG;QAACH;QAAoBH;KAAe;IAEvC,OAAO;QACLD;QACAN;QACAc,iBAAiBhB,MAAMiB,QAAQ;QAC/BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM1B,oBAAAA,CAAK2B,MAAM,KACf5B,wCAAAA,EAAyB,OAAO;YAC9BS;YACAoB,MAAM;YACN,GAAGrB,KAAK;YACR,GAAGG,kBAAkB;YACrBc,UAAU;QACZ,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

View File

@@ -0,0 +1,107 @@
'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, {
carouselNavClassNames: function() {
return carouselNavClassNames;
},
useCarouselNavStyles_unstable: function() {
return useCarouselNavStyles_unstable;
}
});
const _react = require("@griffel/react");
const carouselNavClassNames = {
root: 'fui-CarouselNav'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1063pyq",
Bt984gj: "f122n59",
Brf1p80: "f4d9j23",
Bkecrkj: "fc5wo7j",
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"
],
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1kijzfu",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "fkb7v5e",
De3pzq: "fkfdr9r"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
".f122n59{align-items:center;}",
".f4d9j23{justify-content:center;}",
".fc5wo7j{pointer-events:all;}",
[
".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;}",
[
".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
{
p: -1
}
],
[
".fkb7v5e{margin:auto var(--spacingHorizontalS);}",
{
p: -1
}
],
".fkfdr9r{background-color:var(--colorNeutralBackgroundAlpha);}"
]
});
const useCarouselNavStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(carouselNavClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useCarouselNavStyles.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 carouselNavClassNames = {\n root: 'fui-CarouselNav'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent')\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha\n }\n});\n/**\n * Apply styling to the CarouselNav slots based on the state\n */ export const useCarouselNavStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","mc9l5x","Beiy3e4","Bt984gj","Brf1p80","Bkecrkj","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","De3pzq","d","p","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAwBjBkC,6BAA6B;;;;uBA3BO,gBAAgB;AAG9D,8BAA8B;IACjCjC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,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;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;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;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAgBrB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;IAC1BiC,KAAK,CAAClC,IAAI,CAACoC,SAAS,OAAGzC,mBAAY,EAACI,qBAAqB,CAACC,IAAI,EAAEmC,MAAM,CAACnC,IAAI,EAAEkC,KAAK,CAAClC,IAAI,CAACoC,SAAS,CAAC;IAClG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,50 @@
'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, {
carouselNavClassNames: function() {
return carouselNavClassNames;
},
useCarouselNavStyles_unstable: function() {
return useCarouselNavStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const carouselNavClassNames = {
root: 'fui-CarouselNav'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
pointerEvents: 'all',
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium,
..._react.shorthands.borderColor('transparent')
}),
borderRadius: _reacttheme.tokens.borderRadiusXLarge,
margin: `auto ${_reacttheme.tokens.spacingHorizontalS}`,
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundAlpha
}
});
const useCarouselNavStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(carouselNavClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/CarouselNav/useCarouselNavStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { CarouselNavSlots, CarouselNavState } from './CarouselNav.types';\n\nexport const carouselNavClassNames: SlotClassNames<CarouselNavSlots> = {\n root: 'fui-CarouselNav',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n pointerEvents: 'all',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n ...shorthands.borderColor('transparent'),\n }),\n borderRadius: tokens.borderRadiusXLarge,\n margin: `auto ${tokens.spacingHorizontalS}`,\n backgroundColor: tokens.colorNeutralBackgroundAlpha,\n },\n});\n\n/**\n * Apply styling to the CarouselNav slots based on the state\n */\nexport const useCarouselNavStyles_unstable = (state: CarouselNavState): CarouselNavState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(carouselNavClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","carouselNavClassNames","root","useStyles","display","flexDirection","alignItems","justifyContent","pointerEvents","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","borderColor","borderRadiusXLarge","margin","spacingHorizontalS","backgroundColor","colorNeutralBackgroundAlpha","useCarouselNavStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaK,qBAAAA;;;iCA4BAmB;;;;uBAnCwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAKxC,8BAAgE;IACrElB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,YAAY;QACZC,gBAAgB;QAChBC,eAAe;QACf,OAAGT,6CAAAA,EAAgC;YACjCU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;YACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;YACvC,GAAGf,iBAAAA,CAAWgB,WAAW,CAAC,cAAc;QAC1C,EAAE;QACFF,cAAcZ,kBAAAA,CAAOe,kBAAkB;QACvCC,QAAQ,CAAC,KAAK,EAAEhB,kBAAAA,CAAOiB,kBAAkB,EAAE;QAC3CC,iBAAiBlB,kBAAAA,CAAOmB,2BAA2B;IACrD;AACF;AAKO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASnB;IACfkB,MAAMnB,IAAI,CAACqB,SAAS,OAAG1B,mBAAAA,EAAaI,sBAAsBC,IAAI,EAAEoB,OAAOpB,IAAI,EAAEmB,MAAMnB,IAAI,CAACqB,SAAS;IAEjG,OAAOF;AACT,EAAE"}