feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-badge/lib/components/CounterBadge/CounterBadge.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCounterBadge_unstable } from './useCounterBadge';
+import { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { renderBadge_unstable } from '../Badge/index';
+/**
+ * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
+ */ export const CounterBadge = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCounterBadge_unstable(props, ref);
+    useCounterBadgeStyles_unstable(state);
+    useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);
+    return renderBadge_unstable(state);
+});
+CounterBadge.displayName = 'CounterBadge';

node_modules/@fluentui/react-badge/lib/components/CounterBadge/CounterBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCounterBadge_unstable } from './useCounterBadge';\nimport { useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../Badge/index';\nimport type { CounterBadgeProps } from './CounterBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.\n */\nexport const CounterBadge: ForwardRefComponent<CounterBadgeProps> = React.forwardRef((props, ref) => {\n  const state = useCounterBadge_unstable(props, ref);\n\n  useCounterBadgeStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useCounterBadgeStyles_unstable')(state);\n\n  return renderBadge_unstable(state);\n});\n\nCounterBadge.displayName = 'CounterBadge';\n"],"names":["React","useCounterBadge_unstable","useCounterBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","CounterBadge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,iBAAiB;AAItD;;CAEC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CN,+BAA+BO;IAE/BN,4BAA4B,kCAAkCM;IAE9D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

node_modules/@fluentui/react-badge/lib/components/CounterBadge/CounterBadge.types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-badge/lib/components/CounterBadge/CounterBadge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/CounterBadge.types.ts"],"sourcesContent":["import type { BadgeProps, BadgeState } from '../Badge/index';\n\nexport type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {\n  /**\n   * A Badge can have different appearances that emphasize certain parts of it:\n   *  - filled: The default appearance if one is not specified.\n   *    The badge background is filled with color with a contrasting foreground text to match.\n   *  - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.\n   * @default filled\n   */\n  appearance?: 'filled' | 'ghost';\n\n  /**\n   * Semantic colors for a counter badge\n   * @default brand\n   */\n  color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;\n\n  /**\n   * Value displayed by the Badge\n   * @default 0\n   */\n  count?: number;\n\n  /**\n   * If a dot should be displayed without the count\n   * @default false\n   */\n  dot?: boolean;\n\n  /**\n   * Max number to be displayed\n   * @default 99\n   */\n  overflowCount?: number;\n\n  /**\n   * A Badge can be circular or rounded\n   * @default circular\n   */\n  shape?: 'circular' | 'rounded';\n\n  /**\n   * If the badge should be shown when count is 0\n   * @default false\n   */\n  showZero?: boolean;\n};\n\nexport type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> &\n  Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;\n\nexport type CounterBadgeBaseProps = Omit<CounterBadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;\n\nexport type CounterBadgeBaseState = Omit<CounterBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":"AAsDA,WAAuG"}

node_modules/@fluentui/react-badge/lib/components/CounterBadge/index.js

@@ -0,0 +1,3 @@
+export { CounterBadge } from './CounterBadge';
+export { useCounterBadge_unstable, useCounterBadgeBase_unstable } from './useCounterBadge';
+export { counterBadgeClassNames, useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';

node_modules/@fluentui/react-badge/lib/components/CounterBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/index.ts"],"sourcesContent":["export { CounterBadge } from './CounterBadge';\nexport type {\n  CounterBadgeBaseProps,\n  CounterBadgeBaseState,\n  CounterBadgeProps,\n  CounterBadgeState,\n} from './CounterBadge.types';\nexport { useCounterBadge_unstable, useCounterBadgeBase_unstable } from './useCounterBadge';\nexport { counterBadgeClassNames, useCounterBadgeStyles_unstable } from './useCounterBadgeStyles.styles';\n"],"names":["CounterBadge","useCounterBadge_unstable","useCounterBadgeBase_unstable","counterBadgeClassNames","useCounterBadgeStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAO9C,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadge.js

@@ -0,0 +1,34 @@
+'use client';
+import * as React from 'react';
+import { useBadgeBase_unstable } from '../Badge/index';
+/**
+ * Returns the props and state required to render the component
+ */ export const useCounterBadge_unstable = (props, ref)=>{
+    const { shape = 'circular', appearance = 'filled', color = 'brand', size = 'medium', ...counterBadgeProps } = props;
+    const state = useCounterBadgeBase_unstable(counterBadgeProps, ref);
+    return {
+        ...state,
+        shape,
+        appearance,
+        color,
+        size
+    };
+};
+/**
+ * Base hook for CounterBadge component, which manages state related to slots structure and counter logic.
+ *
+ * @param props - User provided props to the CounterBadge component.
+ * @param ref - User provided ref to be passed to the CounterBadge component.
+ */ export const useCounterBadgeBase_unstable = (props, ref)=>{
+    const { showZero = false, overflowCount = 99, count = 0, dot = false, ...badgeProps } = props;
+    const state = {
+        ...useBadgeBase_unstable(badgeProps, ref),
+        showZero,
+        count,
+        dot
+    };
+    if ((count !== 0 || showZero) && !dot && !state.root.children) {
+        state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
+    }
+    return state;
+};

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/useCounterBadge.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBadgeBase_unstable } from '../Badge/index';\nimport type {\n  CounterBadgeBaseProps,\n  CounterBadgeBaseState,\n  CounterBadgeProps,\n  CounterBadgeState,\n} from './CounterBadge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useCounterBadge_unstable = (props: CounterBadgeProps, ref: React.Ref<HTMLElement>): CounterBadgeState => {\n  const { shape = 'circular', appearance = 'filled', color = 'brand', size = 'medium', ...counterBadgeProps } = props;\n\n  const state = useCounterBadgeBase_unstable(counterBadgeProps, ref);\n\n  return {\n    ...state,\n    shape,\n    appearance,\n    color,\n    size,\n  };\n};\n\n/**\n * Base hook for CounterBadge component, which manages state related to slots structure and counter logic.\n *\n * @param props - User provided props to the CounterBadge component.\n * @param ref - User provided ref to be passed to the CounterBadge component.\n */\nexport const useCounterBadgeBase_unstable = (\n  props: CounterBadgeBaseProps,\n  ref: React.Ref<HTMLElement>,\n): CounterBadgeBaseState => {\n  const { showZero = false, overflowCount = 99, count = 0, dot = false, ...badgeProps } = props;\n\n  const state: CounterBadgeBaseState = {\n    ...useBadgeBase_unstable(badgeProps, ref as React.Ref<HTMLDivElement>),\n    showZero,\n    count,\n    dot,\n  };\n\n  if ((count !== 0 || showZero) && !dot && !state.root.children) {\n    state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;\n  }\n\n  return state;\n};\n"],"names":["React","useBadgeBase_unstable","useCounterBadge_unstable","props","ref","shape","appearance","color","size","counterBadgeProps","state","useCounterBadgeBase_unstable","showZero","overflowCount","count","dot","badgeProps","root","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AAQvD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,QAAQ,UAAU,EAAEC,aAAa,QAAQ,EAAEC,QAAQ,OAAO,EAAEC,OAAO,QAAQ,EAAE,GAAGC,mBAAmB,GAAGN;IAE9G,MAAMO,QAAQC,6BAA6BF,mBAAmBL;IAE9D,OAAO;QACL,GAAGM,KAAK;QACRL;QACAC;QACAC;QACAC;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,+BAA+B,CAC1CR,OACAC;IAEA,MAAM,EAAEQ,WAAW,KAAK,EAAEC,gBAAgB,EAAE,EAAEC,QAAQ,CAAC,EAAEC,MAAM,KAAK,EAAE,GAAGC,YAAY,GAAGb;IAExF,MAAMO,QAA+B;QACnC,GAAGT,sBAAsBe,YAAYZ,IAAiC;QACtEQ;QACAE;QACAC;IACF;IAEA,IAAI,AAACD,CAAAA,UAAU,KAAKF,QAAO,KAAM,CAACG,OAAO,CAACL,MAAMO,IAAI,CAACC,QAAQ,EAAE;QAC7DR,MAAMO,IAAI,CAACC,QAAQ,GAAGJ,QAAQD,gBAAgB,GAAGA,cAAc,CAAC,CAAC,GAAG,GAAGC,OAAO;IAChF;IAEA,OAAOJ;AACT,EAAE"}

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.js

@@ -0,0 +1,40 @@
+'use client';
+
+import { mergeClasses, __styles } from '@griffel/react';
+import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
+export const counterBadgeClassNames = {
+  root: 'fui-CounterBadge',
+  icon: 'fui-CounterBadge__icon'
+};
+const useStyles = /*#__PURE__*/__styles({
+  dot: {
+    Bf4jedk: "fgfkb25",
+    a9b677: "f16dn6v3",
+    Bqenvij: "f3mu39s",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai"
+  },
+  hide: {
+    mc9l5x: "fjseox"
+  }
+}, {
+  d: [".fgfkb25{min-width:auto;}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], ".fjseox{display:none;}"]
+});
+/**
+ * Applies style classnames to slots
+ */
+export const useCounterBadgeStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+  }
+  return useBadgeStyles_unstable(state);
+};

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","__styles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","Bf4jedk","a9b677","Bqenvij","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","hide","mc9l5x","d","p","useCounterBadgeStyles_unstable","state","styles","className","children"],"sources":["useCounterBadgeStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nexport const counterBadgeClassNames = {\n    root: 'fui-CounterBadge',\n    icon: 'fui-CounterBadge__icon'\n};\nconst useStyles = makeStyles({\n    dot: {\n        minWidth: 'auto',\n        width: '6px',\n        height: '6px',\n        padding: '0'\n    },\n    hide: {\n        display: 'none'\n    }\n});\n/**\n * Applies style classnames to slots\n */ export const useCounterBadgeStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n    }\n    return useBadgeStyles_unstable(state);\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAM,GAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAUjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1Be,KAAK,CAACjB,IAAI,CAACmB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACC,IAAI,EAAEiB,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACf,GAAG,EAAE,CAACc,KAAK,CAACjB,IAAI,CAACoB,QAAQ,IAAI,CAACH,KAAK,CAACd,GAAG,IAAIe,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;EAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;IACZgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,GAAGvB,YAAY,CAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;EAC1F;EACA,OAAOrB,uBAAuB,CAACmB,KAAK,CAAC;AACzC,CAAC","ignoreList":[]}

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js

@@ -0,0 +1,29 @@
+'use client';
+import { mergeClasses, makeStyles } from '@griffel/react';
+import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';
+export const counterBadgeClassNames = {
+    root: 'fui-CounterBadge',
+    icon: 'fui-CounterBadge__icon'
+};
+const useStyles = makeStyles({
+    dot: {
+        minWidth: 'auto',
+        width: '6px',
+        height: '6px',
+        padding: '0'
+    },
+    hide: {
+        display: 'none'
+    }
+});
+/**
+ * Applies style classnames to slots
+ */ export const useCounterBadgeStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
+    if (state.icon) {
+        state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+    }
+    return useBadgeStyles_unstable(state);
+};

node_modules/@fluentui/react-badge/lib/components/CounterBadge/useCounterBadgeStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CounterBadge/useCounterBadgeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useBadgeStyles_unstable } from '../Badge/useBadgeStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { BadgeSlots } from '../Badge/Badge.types';\nimport type { CounterBadgeState } from './CounterBadge.types';\n\nexport const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {\n  root: 'fui-CounterBadge',\n  icon: 'fui-CounterBadge__icon',\n};\n\nconst useStyles = makeStyles({\n  dot: {\n    minWidth: 'auto',\n    width: '6px',\n    height: '6px',\n    padding: '0',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\n/**\n * Applies style classnames to slots\n */\nexport const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    counterBadgeClassNames.root,\n    state.dot && styles.dot,\n    !state.root.children && !state.dot && styles.hide,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);\n  }\n\n  return useBadgeStyles_unstable(state) as CounterBadgeState;\n};\n"],"names":["mergeClasses","makeStyles","useBadgeStyles_unstable","counterBadgeClassNames","root","icon","useStyles","dot","minWidth","width","height","padding","hide","display","useCounterBadgeStyles_unstable","state","styles","className","children"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAC1D,SAASC,uBAAuB,QAAQ,iCAAiC;AAKzE,OAAO,MAAMC,yBAAqD;IAChEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGjB,aACrBG,uBAAuBC,IAAI,EAC3BW,MAAMR,GAAG,IAAIS,OAAOT,GAAG,EACvB,CAACQ,MAAMX,IAAI,CAACc,QAAQ,IAAI,CAACH,MAAMR,GAAG,IAAIS,OAAOJ,IAAI,EACjDG,MAAMX,IAAI,CAACa,SAAS;IAGtB,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,GAAGjB,aAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,OAAOf,wBAAwBa;AACjC,EAAE"}