feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/NavSubItemGroup.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavSubItemGroup_unstable } from './useNavSubItemGroup';
+import { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';
+import { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';
+/**
+ * NavSubItemGroup component - a group of sub-items within a navigation structure.
+ */ export const NavSubItemGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavSubItemGroup_unstable(props, ref);
+    useNavSubItemGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);
+    return renderNavSubItemGroup_unstable(state);
+});
+NavSubItemGroup.displayName = 'NavSubItemGroup';

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/NavSubItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nimport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nimport { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';\nimport type { NavSubItemGroupProps } from './NavSubItemGroup.types';\n\n/**\n * NavSubItemGroup component - a group of sub-items within a navigation structure.\n */\nexport const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps> = React.forwardRef((props, ref) => {\n  const state = useNavSubItemGroup_unstable(props, ref);\n\n  useNavSubItemGroupStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);\n\n  return renderNavSubItemGroup_unstable(state);\n});\n\nNavSubItemGroup.displayName = 'NavSubItemGroup';\n"],"names":["React","useCustomStyleHook_unstable","useNavSubItemGroup_unstable","renderNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","NavSubItemGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAClCR,4BAA4B,qCAAqCQ;IAEjE,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/NavSubItemGroup.types.js

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering NavSubItemGroup
+ */ export { };

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/NavSubItemGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavDensity } from '../Nav/Nav.types';\n\n/**\n * Context value for NavSubItemGroup\n */\nexport type NavSubItemGroupCollapseMotionParams = {\n  /**\n   * The number of items in the NavSubItemGroup\n   */\n  items?: number;\n\n  /**\n   * The density of the NavItem\n   */\n  density?: NavDensity;\n};\n\nexport type NavSubItemGroupSlots = {\n  /**\n   * The root element\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Collapse motion slot\n   */\n  collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;\n};\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n  /**\n   * Internal open state, provided by context.\n   */\n  open: boolean;\n};\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAKE"}

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/index.js

@@ -0,0 +1,4 @@
+export { NavSubItemGroup } from './NavSubItemGroup';
+export { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';
+export { useNavSubItemGroup_unstable } from './useNavSubItemGroup';
+export { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/index.ts"],"sourcesContent":["export { NavSubItemGroup } from './NavSubItemGroup';\nexport type { NavSubItemGroupSlots, NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nexport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nexport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nexport { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';\n"],"names":["NavSubItemGroup","renderNavSubItemGroup_unstable","useNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","navSubItemGroupClassNames"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,iCAAiC,EAAEC,yBAAyB,QAAQ,oCAAoC"}

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/renderNavSubItemGroup.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 NavSubItemGroup
+ */ export const renderNavSubItemGroup_unstable = (state)=>{
+    assertSlots(state);
+    return state.collapseMotion ? /*#__PURE__*/ _jsx(state.collapseMotion, {
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    }) : /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/renderNavSubItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.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 { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState): JSXElement => {\n  assertSlots<NavSubItemGroupSlots>(state);\n\n  return state.collapseMotion ? (\n    <state.collapseMotion>\n      <state.root />\n    </state.collapseMotion>\n  ) : (\n    <state.root />\n  );\n};\n"],"names":["assertSlots","renderNavSubItemGroup_unstable","state","collapseMotion","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAElC,OAAOA,MAAMC,cAAc,iBACzB,KAACD,MAAMC,cAAc;kBACnB,cAAA,KAACD,MAAME,IAAI;uBAGb,KAACF,MAAME,IAAI;AAEf,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/useNavSubItemGroup.js

@@ -0,0 +1,37 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { presenceMotionSlot } from '@fluentui/react-motion';
+import { Collapse } from '@fluentui/react-motion-components-preview';
+import { useNavCategoryContext_unstable } from '../NavCategoryContext';
+/**
+ * Create the state required to render NavSubItemGroup.
+ *
+ * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,
+ * before being passed to renderNavSubItemGroup_unstable.
+ *
+ * @param props - props from this instance of NavSubItemGroup
+ * @param ref - reference to root HTMLDivElement of NavSubItemGroup
+ */ export const useNavSubItemGroup_unstable = (props, ref)=>{
+    const { open } = useNavCategoryContext_unstable();
+    return {
+        open,
+        components: {
+            root: 'div',
+            collapseMotion: Collapse
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ...props,
+            ref
+        }), {
+            elementType: 'div'
+        }),
+        collapseMotion: presenceMotionSlot(props.collapseMotion, {
+            elementType: Collapse,
+            defaultProps: {
+                visible: open,
+                unmountOnExit: true
+            }
+        })
+    };
+};

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/useNavSubItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\n\nimport type { NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n  props: NavSubItemGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n  const { open } = useNavCategoryContext_unstable();\n\n  return {\n    open,\n    components: {\n      root: 'div',\n      collapseMotion: Collapse,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ...props,\n        ref,\n      }),\n      { elementType: 'div' },\n    ),\n\n    collapseMotion: presenceMotionSlot(props.collapseMotion, {\n      elementType: Collapse,\n      defaultProps: {\n        visible: open,\n        unmountOnExit: true,\n      },\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","presenceMotionSlot","Collapse","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,QAAQ,QAAQ,4CAA4C;AAGrE,SAASC,8BAA8B,QAAQ,wBAAwB;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,OAAO;QACLI;QACAC,YAAY;YACVC,MAAM;YACNC,gBAAgBR;QAClB;QAEAO,MAAMT,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,gBAAgBT,mBAAmBI,MAAMK,cAAc,EAAE;YACvDE,aAAaV;YACbW,cAAc;gBACZC,SAASP;gBACTQ,eAAe;YACjB;QACF;IACF;AACF,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+export const navSubItemGroupClassNames = {
+  root: 'fui-NavSubItemGroup'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bnnss6s: "fi64zpg",
+    Bz10aip: "f1yj8dow",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp"
+  }
+}, {
+  d: [".fi64zpg{flex-shrink:0;}", ".f1yj8dow{transform:translateZ(0);}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the NavSubItemGroup slots based on the state
+ */
+export const useNavSubItemGroupStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bnnss6s","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n    root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        flexShrink: 0,\n        transform: 'translateZ(0)',\n        overflow: 'hidden'\n    }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGd,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EACtG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js

@@ -0,0 +1,22 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const navSubItemGroupClassNames = {
+    root: 'fui-NavSubItemGroup'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        flexShrink: 0,
+        transform: 'translateZ(0)',
+        overflow: 'hidden'
+    }
+});
+/**
+ * Apply styling to the NavSubItemGroup slots based on the state
+ */ export const useNavSubItemGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n  root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    flexShrink: 0,\n    transform: 'translateZ(0)',\n    overflow: 'hidden',\n  },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","flexShrink","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,YAAY;QACZC,WAAW;QACXC,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASN;IAEfK,MAAMN,IAAI,CAACQ,SAAS,GAAGV,aAAaC,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}