feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/BreadcrumbItem.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useBreadcrumbItem_unstable } from './useBreadcrumbItem';
+import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';
+import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.
+ * It can be used as a non-interactive item.
+ */ export const BreadcrumbItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useBreadcrumbItem_unstable(props, ref);
+    useBreadcrumbItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useBreadcrumbItemStyles_unstable')(state);
+    return renderBreadcrumbItem_unstable(state);
+});
+BreadcrumbItem.displayName = 'BreadcrumbItem';

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/BreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbItem/BreadcrumbItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBreadcrumbItem_unstable } from './useBreadcrumbItem';\nimport { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';\nimport { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';\nimport type { BreadcrumbItemProps } from './BreadcrumbItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.\n * It can be used as a non-interactive item.\n */\nexport const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps> = React.forwardRef((props, ref) => {\n  const state = useBreadcrumbItem_unstable(props, ref);\n\n  useBreadcrumbItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useBreadcrumbItemStyles_unstable')(state);\n\n  return renderBreadcrumbItem_unstable(state);\n});\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n"],"names":["React","useBreadcrumbItem_unstable","renderBreadcrumbItem_unstable","useBreadcrumbItemStyles_unstable","useCustomStyleHook_unstable","BreadcrumbItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/BreadcrumbItem.types.js

@@ -0,0 +1,3 @@
+/**
+ * BreadcrumbItem base state (excludes size, which is a design prop injected from context)
+ */ export { };

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/BreadcrumbItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbItem/BreadcrumbItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbProps } from '../Breadcrumb';\n\nexport type BreadcrumbItemSlots = {\n  root: Slot<'li'>;\n};\n\n/**\n * BreadcrumbItem Props\n */\nexport type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & Pick<BreadcrumbProps, 'size'>;\n\n/**\n * State used in rendering BreadcrumbItem\n */\nexport type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size'>>;\n\n/**\n * BreadcrumbItem base props (same as BreadcrumbItemProps since size is passed through context, not as a design prop)\n */\nexport type BreadcrumbItemBaseProps = Omit<BreadcrumbItemProps, 'size'>;\n\n/**\n * BreadcrumbItem base state (excludes size, which is a design prop injected from context)\n */\nexport type BreadcrumbItemBaseState = Omit<BreadcrumbItemState, 'size'>;\n"],"names":[],"mappings":"AAsBA;;CAEC,GACD,WAAwE"}

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/index.js

@@ -0,0 +1,4 @@
+export { BreadcrumbItem } from './BreadcrumbItem';
+export { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';
+export { useBreadcrumbItem_unstable, useBreadcrumbItemBase_unstable } from './useBreadcrumbItem';
+export { breadcrumbItemClassNames, useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbItem/index.ts"],"sourcesContent":["export { BreadcrumbItem } from './BreadcrumbItem';\nexport type {\n  BreadcrumbItemBaseProps,\n  BreadcrumbItemBaseState,\n  BreadcrumbItemProps,\n  BreadcrumbItemSlots,\n  BreadcrumbItemState,\n} from './BreadcrumbItem.types';\nexport { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';\nexport { useBreadcrumbItem_unstable, useBreadcrumbItemBase_unstable } from './useBreadcrumbItem';\nexport { breadcrumbItemClassNames, useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';\n"],"names":["BreadcrumbItem","renderBreadcrumbItem_unstable","useBreadcrumbItem_unstable","useBreadcrumbItemBase_unstable","breadcrumbItemClassNames","useBreadcrumbItemStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,EAAEC,8BAA8B,QAAQ,sBAAsB;AACjG,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/renderBreadcrumbItem.js

@@ -0,0 +1,10 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of BreadcrumbItem
+ */ export const renderBreadcrumbItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: state.root.children
+    });
+};

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/renderBreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbItem/renderBreadcrumbItem.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 { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.types';\n\n/**\n * Render the final JSX of BreadcrumbItem\n */\nexport const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState): JSXElement => {\n  assertSlots<BreadcrumbItemSlots>(state);\n\n  return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderBreadcrumbItem_unstable","state","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBAAO,KAACA,MAAMC,IAAI;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/useBreadcrumbItem.js

@@ -0,0 +1,39 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
+/**
+ * Create the state required to render BreadcrumbItem.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbItemStyles_unstable,
+ * before being passed to renderBreadcrumbItem_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbItem
+ * @param ref - reference to root HTMLElement of BreadcrumbItem
+ */ export const useBreadcrumbItem_unstable = (props, ref)=>{
+    const { size } = useBreadcrumbContext_unstable();
+    const state = useBreadcrumbItemBase_unstable(props, ref);
+    return {
+        ...state,
+        size
+    };
+};
+/**
+ * Base hook for BreadcrumbItem component, which manages state related to slots structure
+ * without design props. Note: size is provided via BreadcrumbContext in the full hook.
+ *
+ * @param props - props from this instance of BreadcrumbItem
+ * @param ref - reference to root HTMLElement of BreadcrumbItem
+ */ export const useBreadcrumbItemBase_unstable = (props, ref)=>{
+    return {
+        components: {
+            root: 'li'
+        },
+        root: slot.always(getIntrinsicElementProps('li', {
+            ref,
+            ...props
+        }), {
+            elementType: 'li'
+        })
+    };
+};

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/useBreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbItem/useBreadcrumbItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n  BreadcrumbItemBaseProps,\n  BreadcrumbItemBaseState,\n  BreadcrumbItemProps,\n  BreadcrumbItemState,\n} from './BreadcrumbItem.types';\nimport { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';\n\n/**\n * Create the state required to render BreadcrumbItem.\n *\n * The returned state can be modified with hooks such as useBreadcrumbItemStyles_unstable,\n * before being passed to renderBreadcrumbItem_unstable.\n *\n * @param props - props from this instance of BreadcrumbItem\n * @param ref - reference to root HTMLElement of BreadcrumbItem\n */\nexport const useBreadcrumbItem_unstable = (\n  props: BreadcrumbItemProps,\n  ref: React.Ref<HTMLLIElement>,\n): BreadcrumbItemState => {\n  const { size } = useBreadcrumbContext_unstable();\n  const state = useBreadcrumbItemBase_unstable(props, ref);\n\n  return {\n    ...state,\n    size,\n  };\n};\n\n/**\n * Base hook for BreadcrumbItem component, which manages state related to slots structure\n * without design props. Note: size is provided via BreadcrumbContext in the full hook.\n *\n * @param props - props from this instance of BreadcrumbItem\n * @param ref - reference to root HTMLElement of BreadcrumbItem\n */\nexport const useBreadcrumbItemBase_unstable = (\n  props: BreadcrumbItemBaseProps,\n  ref: React.Ref<HTMLLIElement>,\n): BreadcrumbItemBaseState => {\n  return {\n    components: { root: 'li' },\n    root: slot.always(\n      getIntrinsicElementProps('li', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'li' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBreadcrumbContext_unstable","useBreadcrumbItem_unstable","props","ref","size","state","useBreadcrumbItemBase_unstable","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAO3E,SAASC,6BAA6B,QAAQ,kCAAkC;AAEhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IACjB,MAAMK,QAAQC,+BAA+BJ,OAAOC;IAEpD,OAAO;QACL,GAAGE,KAAK;QACRD;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAME,iCAAiC,CAC5CJ,OACAC;IAEA,OAAO;QACLI,YAAY;YAAEC,MAAM;QAAK;QACzBA,MAAMT,KAAKU,MAAM,CACfX,yBAAyB,MAAM;YAC7BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAK;IAExB;AACF,EAAE"}

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.js

@@ -0,0 +1,18 @@
+'use client';
+
+import { __resetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const breadcrumbItemClassNames = {
+  root: 'fui-BreadcrumbItem'
+};
+const useBreadcrumbItemResetStyles = /*#__PURE__*/__resetStyles("r1tl60rs", null, [".r1tl60rs{display:flex;align-items:center;color:var(--colorNeutralForeground2);box-sizing:border-box;text-wrap:nowrap;}"]);
+/**
+ * Apply styling to the BreadcrumbItem slots based on the state
+ */
+export const useBreadcrumbItemStyles_unstable = state => {
+  'use no memo';
+
+  const resetStyles = useBreadcrumbItemResetStyles();
+  state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","tokens","breadcrumbItemClassNames","root","useBreadcrumbItemResetStyles","useBreadcrumbItemStyles_unstable","state","resetStyles","className"],"sources":["useBreadcrumbItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const breadcrumbItemClassNames = {\n    root: 'fui-BreadcrumbItem'\n};\nconst useBreadcrumbItemResetStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground2,\n    boxSizing: 'border-box',\n    textWrap: 'nowrap'\n});\n/**\n * Apply styling to the BreadcrumbItem slots based on the state\n */ export const useBreadcrumbItemStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useBreadcrumbItemResetStyles();\n    state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,4BAA4B,gBAAGL,aAAA,8IAMpC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,WAAW,GAAGH,4BAA4B,CAAC,CAAC;EAClDE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,wBAAwB,CAACC,IAAI,EAAEI,WAAW,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.raw.js

@@ -0,0 +1,21 @@
+'use client';
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const breadcrumbItemClassNames = {
+    root: 'fui-BreadcrumbItem'
+};
+const useBreadcrumbItemResetStyles = makeResetStyles({
+    display: 'flex',
+    alignItems: 'center',
+    color: tokens.colorNeutralForeground2,
+    boxSizing: 'border-box',
+    textWrap: 'nowrap'
+});
+/**
+ * Apply styling to the BreadcrumbItem slots based on the state
+ */ export const useBreadcrumbItemStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useBreadcrumbItemResetStyles();
+    state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-breadcrumb/lib/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots> = {\n  root: 'fui-BreadcrumbItem',\n};\n\nconst useBreadcrumbItemResetStyles = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  color: tokens.colorNeutralForeground2,\n  boxSizing: 'border-box',\n  textWrap: 'nowrap',\n});\n\n/**\n * Apply styling to the BreadcrumbItem slots based on the state\n */\nexport const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): BreadcrumbItemState => {\n  'use no memo';\n\n  const resetStyles = useBreadcrumbItemResetStyles();\n\n  state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","breadcrumbItemClassNames","root","useBreadcrumbItemResetStyles","display","alignItems","color","colorNeutralForeground2","boxSizing","textWrap","useBreadcrumbItemStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,+BAA+BL,gBAAgB;IACnDM,SAAS;IACTC,YAAY;IACZC,OAAON,OAAOO,uBAAuB;IACrCC,WAAW;IACXC,UAAU;AACZ;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,cAAcT;IAEpBQ,MAAMT,IAAI,CAACW,SAAS,GAAGd,aAAaE,yBAAyBC,IAAI,EAAEU,aAAaD,MAAMT,IAAI,CAACW,SAAS;IAEpG,OAAOF;AACT,EAAE"}