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

2651
node_modules/@fluentui/react-badge/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-badge/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-badge
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

43
node_modules/@fluentui/react-badge/README.md generated vendored Normal file
View File

@@ -0,0 +1,43 @@
# @fluentui/react-badge
**Badge components for [Fluent UI](https://react.fluentui.dev/)**
A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.
## Usage
To import Badge:
```js
import { Badge, CounterBadge, PresenceBadge } from '@fluentui/react-components';
```
### Examples
```jsx
<Badge>999+</Badge>
<Badge appearance="filled">999+</Badge>
<Badge shape="rounded" />
<Badge size="medium" icon={<PasteIcon />} />
<CounterBadge count={5} appearance="ghost" />
<CounterBadge count={0} dot />
<CounterBadge count={5} size="extra-large" />
<PresenceBadge status="available" />
<PresenceBadge status="away" />
<PresenceBadge outOfOffice status="do-not-disturb" />
```
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
Alternatively, run Storybook locally with:
1. `yarn start`
2. Select `react-badge` from the list.
### Specification
See [SPEC.md](./SPEC.md).
### Migration Guide
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Badge component implementations.

218
node_modules/@fluentui/react-badge/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,218 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* Define a styled Badge, using the `useBadge_unstable` hook.
*/
export declare const Badge: ForwardRefComponent<BadgeProps>;
export declare type BadgeBaseProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;
export declare type BadgeBaseState = Omit<BadgeState, 'appearance' | 'color' | 'shape' | 'size'>;
export declare const badgeClassNames: SlotClassNames<BadgeSlots>;
export declare type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {
/**
* A Badge can be filled, outline, ghost, inverted
* @defaultvalue filled
*/
appearance?: 'filled' | 'ghost' | 'outline' | 'tint';
/**
* A Badge can be one of preset colors
* @defaultvalue brand
*/
color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
/**
* A Badge can position the icon before or after the content.
* @defaultvalue before
*/
iconPosition?: 'before' | 'after';
/**
* A Badge can be square, circular or rounded.
* @defaultvalue circular
*/
shape?: 'circular' | 'rounded' | 'square';
/**
* A Badge can be on of several preset sizes.
* @defaultvalue medium
*/
size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
};
export declare type BadgeSlots = {
root: Slot<'div'>;
icon?: Slot<'span'>;
};
export declare type BadgeState = ComponentState<BadgeSlots> & Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;
/**
* Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
*/
export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
export declare type CounterBadgeBaseProps = Omit<CounterBadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;
export declare type CounterBadgeBaseState = Omit<CounterBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;
export declare const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape'> & {
/**
* A Badge can have different appearances that emphasize certain parts of it:
* - filled: The default appearance if one is not specified.
* The badge background is filled with color with a contrasting foreground text to match.
* - ghost: The badge background is transparent, with the foreground text taking color to emphasize it.
* @default filled
*/
appearance?: 'filled' | 'ghost';
/**
* Semantic colors for a counter badge
* @default brand
*/
color?: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
/**
* Value displayed by the Badge
* @default 0
*/
count?: number;
/**
* If a dot should be displayed without the count
* @default false
*/
dot?: boolean;
/**
* Max number to be displayed
* @default 99
*/
overflowCount?: number;
/**
* A Badge can be circular or rounded
* @default circular
*/
shape?: 'circular' | 'rounded';
/**
* If the badge should be shown when count is 0
* @default false
*/
showZero?: boolean;
};
export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'color' | 'shape'> & Required<Pick<CounterBadgeProps, 'appearance' | 'color' | 'count' | 'dot' | 'shape' | 'showZero'>>;
export declare const presenceAvailableFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceAvailableRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceAwayFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceAwayRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
/**
* Define a styled Badge, using the `useBadge_unstable` hook.
*/
export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
export declare type PresenceBadgeBaseProps = Omit<PresenceBadgeProps, 'size'>;
export declare type PresenceBadgeBaseState = Omit<PresenceBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;
export declare const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> & Pick<BadgeProps, 'size'> & {
/**
* Represents several status
* @default available
*/
status?: PresenceBadgeStatus;
/**
* Modifies the display to indicate that the user is out of office.
* This can be combined with any status to display an out-of-office version of that status
* @default false
*/
outOfOffice?: boolean;
};
export declare type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
export declare type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown' | 'blocked';
export declare const presenceBlockedRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceBusyFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceDndFilled: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceDndRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceOfflineRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceOofRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const presenceUnknownRegular: Record<PresenceBadgeState['size'], React_2.FunctionComponent>;
export declare const renderBadge_unstable: (state: BadgeBaseState) => JSXElement;
/**
* Returns the props and state required to render the component
*/
export declare const useBadge_unstable: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
/**
* Base hook for Badge component, which manages state related to slots structure and ARIA attributes.
*
* @param props - User provided props to the Badge component.
* @param ref - User provided ref to be passed to the Badge component.
*/
export declare const useBadgeBase_unstable: (props: BadgeBaseProps, ref: React_2.Ref<HTMLDivElement>) => BadgeBaseState;
/**
* Applies style classnames to slots
*/
export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;
/**
* Returns the props and state required to render the component
*/
export declare const useCounterBadge_unstable: (props: CounterBadgeProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeState;
/**
* 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 declare const useCounterBadgeBase_unstable: (props: CounterBadgeBaseProps, ref: React_2.Ref<HTMLElement>) => CounterBadgeBaseState;
/**
* Applies style classnames to slots
*/
export declare const useCounterBadgeStyles_unstable: (state: CounterBadgeState) => CounterBadgeState;
/**
* Returns the props and state required to render the component
*/
export declare const usePresenceBadge_unstable: (props: PresenceBadgeProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeState;
/**
* Base hook for PresenceBadge component, which manages state related to presence status and ARIA attributes.
* Note: size is excluded from BaseProps as it is a design prop; icon selection uses the 'medium' size default.
* To render size-specific icons, use the full usePresenceBadge_unstable hook.
*
* @param props - User provided props to the PresenceBadge component.
* @param ref - User provided ref to be passed to the PresenceBadge component.
*/
export declare const usePresenceBadgeBase_unstable: (props: PresenceBadgeBaseProps, ref: React_2.Ref<HTMLElement>) => PresenceBadgeBaseState;
/**
* Applies style classnames to slots
*/
export declare const usePresenceBadgeStyles_unstable: (state: PresenceBadgeState) => PresenceBadgeState;
export { }

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, {
Badge: function() {
return _index.Badge;
},
badgeClassNames: function() {
return _index.badgeClassNames;
},
renderBadge_unstable: function() {
return _index.renderBadge_unstable;
},
useBadgeBase_unstable: function() {
return _index.useBadgeBase_unstable;
},
useBadgeStyles_unstable: function() {
return _index.useBadgeStyles_unstable;
},
useBadge_unstable: function() {
return _index.useBadge_unstable;
}
});
const _index = require("./components/Badge/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Badge.ts"],"sourcesContent":["export type { BadgeBaseProps, BadgeProps, BadgeSlots, BadgeBaseState, BadgeState } from './components/Badge/index';\nexport {\n Badge,\n badgeClassNames,\n renderBadge_unstable,\n useBadgeStyles_unstable,\n useBadge_unstable,\n useBadgeBase_unstable,\n} from './components/Badge/index';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useBadgeBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,2BAA2B"}

View File

@@ -0,0 +1,28 @@
"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, {
CounterBadge: function() {
return _index.CounterBadge;
},
counterBadgeClassNames: function() {
return _index.counterBadgeClassNames;
},
useCounterBadgeBase_unstable: function() {
return _index.useCounterBadgeBase_unstable;
},
useCounterBadgeStyles_unstable: function() {
return _index.useCounterBadgeStyles_unstable;
},
useCounterBadge_unstable: function() {
return _index.useCounterBadge_unstable;
}
});
const _index = require("./components/CounterBadge/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CounterBadge.ts"],"sourcesContent":["export type {\n CounterBadgeProps,\n CounterBadgeState,\n CounterBadgeBaseProps,\n CounterBadgeBaseState,\n} from './components/CounterBadge/index';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n useCounterBadgeBase_unstable,\n} from './components/CounterBadge/index';\n"],"names":["CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable","useCounterBadgeBase_unstable"],"mappings":";;;;;;;;;;;;eAOEA,mBAAY;;;eACZC,6BAAsB;;;eAGtBG,mCAA4B;;;eAF5BF,qCAA8B;;;eAC9BC,+BAAwB;;;uBAEnB,kCAAkC"}

View File

@@ -0,0 +1,61 @@
"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, {
PresenceBadge: function() {
return _index.PresenceBadge;
},
presenceAvailableFilled: function() {
return _index.presenceAvailableFilled;
},
presenceAvailableRegular: function() {
return _index.presenceAvailableRegular;
},
presenceAwayFilled: function() {
return _index.presenceAwayFilled;
},
presenceAwayRegular: function() {
return _index.presenceAwayRegular;
},
presenceBadgeClassNames: function() {
return _index.presenceBadgeClassNames;
},
presenceBlockedRegular: function() {
return _index.presenceBlockedRegular;
},
presenceBusyFilled: function() {
return _index.presenceBusyFilled;
},
presenceDndFilled: function() {
return _index.presenceDndFilled;
},
presenceDndRegular: function() {
return _index.presenceDndRegular;
},
presenceOfflineRegular: function() {
return _index.presenceOfflineRegular;
},
presenceOofRegular: function() {
return _index.presenceOofRegular;
},
presenceUnknownRegular: function() {
return _index.presenceUnknownRegular;
},
usePresenceBadgeBase_unstable: function() {
return _index.usePresenceBadgeBase_unstable;
},
usePresenceBadgeStyles_unstable: function() {
return _index.usePresenceBadgeStyles_unstable;
},
usePresenceBadge_unstable: function() {
return _index.usePresenceBadge_unstable;
}
});
const _index = require("./components/PresenceBadge/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/PresenceBadge.ts"],"sourcesContent":["export type {\n PresenceBadgeProps,\n PresenceBadgeState,\n PresenceBadgeStatus,\n PresenceBadgeBaseProps,\n PresenceBadgeBaseState,\n} from './components/PresenceBadge/index';\nexport {\n PresenceBadge,\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceAwayRegular,\n presenceBadgeClassNames,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n usePresenceBadgeBase_unstable,\n} from './components/PresenceBadge/index';\n"],"names":["PresenceBadge","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","usePresenceBadgeBase_unstable"],"mappings":";;;;;;;;;;;IAQEA,aAAa;;;;eACbC,8BAAuB;;;eACvBC,+BAAwB;;;eACxBC,yBAAkB;;;eAClBC,0BAAmB;;;eACnBC,8BAAuB;;;eACvBC,6BAAsB;;;eACtBC,yBAAkB;;;eAClBC,wBAAiB;;;eACjBC,yBAAkB;;;eAClBC,6BAAsB;;;eACtBC,yBAAkB;;;eAClBC,6BAAsB;;;eAGtBG,oCAA6B;;;eAF7BF,sCAA+B;;;eAC/BC,gCAAyB;;;uBAEpB,mCAAmC"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Badge", {
enumerable: true,
get: function() {
return Badge;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useBadge = require("./useBadge");
const _useBadgeStylesstyles = require("./useBadgeStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _renderBadge = require("./renderBadge");
const Badge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useBadge.useBadge_unstable)(props, ref);
(0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useBadgeStyles_unstable')(state);
return (0, _renderBadge.renderBadge_unstable)(state);
});
Badge.displayName = 'Badge';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n const state = useBadge_unstable(props, ref);\n\n useBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;0BACG,aAAa;sCACP,0BAA0B;qCACtB,kCAAkC;6BACzC,gBAAgB;AAO9C,MAAMK,QAAAA,WAAAA,GAAyCL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,YAAQR,2BAAAA,EAAkBM,OAAOC;QAEvCN,6CAAAA,EAAwBO;QAExBN,gDAAAA,EAA4B,2BAA2BM;IAEvD,WAAOL,iCAAAA,EAAqBK;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/Badge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n /**\n * A Badge can be one of preset colors\n * @defaultvalue brand\n */\n color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n /**\n * A Badge can position the icon before or after the content.\n * @defaultvalue before\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A Badge can be square, circular or rounded.\n * @defaultvalue circular\n */\n shape?: 'circular' | 'rounded' | 'square';\n\n /**\n * A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n\nexport type BadgeBaseProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;\n\nexport type BadgeBaseState = Omit<BadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,34 @@
"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, {
Badge: function() {
return _Badge.Badge;
},
badgeClassNames: function() {
return _useBadgeStylesstyles.badgeClassNames;
},
renderBadge_unstable: function() {
return _renderBadge.renderBadge_unstable;
},
useBadgeBase_unstable: function() {
return _useBadge.useBadgeBase_unstable;
},
useBadgeStyles_unstable: function() {
return _useBadgeStylesstyles.useBadgeStyles_unstable;
},
useBadge_unstable: function() {
return _useBadge.useBadge_unstable;
}
});
const _Badge = require("./Badge");
const _renderBadge = require("./renderBadge");
const _useBadge = require("./useBadge");
const _useBadgeStylesstyles = require("./useBadgeStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/index.ts"],"sourcesContent":["export { Badge } from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport { renderBadge_unstable } from './renderBadge';\nexport { useBadge_unstable, useBadgeBase_unstable } from './useBadge';\nexport { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';\n"],"names":["Badge","renderBadge_unstable","useBadge_unstable","useBadgeBase_unstable","badgeClassNames","useBadgeStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,YAAK;;;eAKLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAJJ,UAAU;6BAGK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderBadge_unstable", {
enumerable: true,
get: function() {
return renderBadge_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderBadge_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.iconPosition === 'before' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.root.children,
state.iconPosition === 'after' && state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/renderBadge.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 { BadgeBaseState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeBaseState): JSXElement => {\n assertSlots<BadgeSlots>(state);\n\n return (\n <state.root>\n {state.iconPosition === 'before' && state.icon && <state.icon />}\n {state.root.children}\n {state.iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderBadge_unstable","state","root","iconPosition","icon","children"],"mappings":";;;;+BAQaC;;;;;;4BAPb,iCAAiD;gCAErB,4BAA4B;AAKjD,6BAA6B,CAACC;QACnCF,2BAAAA,EAAwBE;IAExB,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;;;AAGlE,EAAE"}

View File

@@ -0,0 +1,52 @@
'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, {
useBadgeBase_unstable: function() {
return useBadgeBase_unstable;
},
useBadge_unstable: function() {
return useBadge_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const useBadge_unstable = (props, ref)=>{
const { shape = 'circular', size = 'medium', appearance = 'filled', color = 'brand', ...badgeProps } = props;
const state = useBadgeBase_unstable(badgeProps, ref);
return {
...state,
shape,
size,
appearance,
color
};
};
const useBadgeBase_unstable = (props, ref)=>{
const { iconPosition = 'before' } = props;
return {
iconPosition,
components: {
root: 'div',
icon: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
...props
}), {
elementType: 'div'
}),
icon: _reactutilities.slot.optional(props.icon, {
elementType: 'span'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/useBadge.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n const { shape = 'circular', size = 'medium', appearance = 'filled', color = 'brand', ...badgeProps } = props;\n\n const state = useBadgeBase_unstable(badgeProps, ref as React.Ref<HTMLDivElement>);\n\n return {\n ...state,\n shape,\n size,\n appearance,\n color,\n };\n};\n\n/**\n * Base hook for Badge component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Badge component.\n * @param ref - User provided ref to be passed to the Badge component.\n */\nexport const useBadgeBase_unstable = (props: BadgeBaseProps, ref: React.Ref<HTMLDivElement>): BadgeBaseState => {\n const { iconPosition = 'before' } = props;\n\n return {\n iconPosition,\n components: {\n root: 'div',\n icon: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { elementType: 'span' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBadge_unstable","props","ref","shape","size","appearance","color","badgeProps","state","useBadgeBase_unstable","iconPosition","components","root","icon","always","elementType","optional"],"mappings":"AAAA;;;;;;;;;;;;yBA6BaY;eAAAA;;qBApBAT;;;;;iEAPU,QAAQ;gCACgB,4BAA4B;AAMpE,MAAMA,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,QAAQ,UAAU,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,QAAQ,OAAO,EAAE,GAAGC,YAAY,GAAGN;IAEvG,MAAMO,QAAQC,sBAAsBF,YAAYL;IAEhD,OAAO;QACL,GAAGM,KAAK;QACRL;QACAC;QACAC;QACAC;IACF;AACF,EAAE;AAQK,8BAA8B,CAACL,OAAuBC;IAC3D,MAAM,EAAEQ,eAAe,QAAQ,EAAE,GAAGT;IAEpC,OAAO;QACLS;QACAC,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMb,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAM;QAEvBF,MAAMd,oBAAAA,CAAKiB,QAAQ,CAACf,MAAMY,IAAI,EAAE;YAAEE,aAAa;QAAO;IACxD;AACF,EAAE"}

View File

@@ -0,0 +1,593 @@
'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, {
badgeClassNames: function() {
return badgeClassNames;
},
useBadgeStyles_unstable: function() {
return useBadgeStyles_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _react1 = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const badgeClassNames = {
root: 'fui-Badge',
icon: 'fui-Badge__icon'
};
// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
const textPadding = _reacttheme.tokens.spacingHorizontalXXS;
const useRootClassName = /*#__PURE__*/ (0, _react1.__resetStyles)("r1iycov", "r115jdol", [
".r1iycov{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}",
".r1iycov::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}",
".r115jdol{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}",
".r115jdol::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"
]);
const useRootStyles = /*#__PURE__*/ (0, _react1.__styles)({
fontSmallToTiny: {
Bahqtrf: "fk6fouc",
Be2twd7: "f13mqy1h",
Bhrd7zp: "fl43uef",
Bg96gwp: "fcpl73t"
},
tiny: {
a9b677: "f16dn6v3",
Bqenvij: "f3mu39s",
Be2twd7: "f130uwy9",
Bg96gwp: "fod1mrr",
Bf4jedk: "f18p0k4z",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f19jm9xf"
},
"extra-small": {
a9b677: "fpd43o0",
Bqenvij: "f30q22z",
Be2twd7: "f1tccstq",
Bg96gwp: "f1y3arg5",
Bf4jedk: "f18p0k4z",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f19jm9xf"
},
small: {
Bf4jedk: "fq2vo04",
Bqenvij: "fd461yt",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fupdldz"
},
medium: {},
large: {
Bf4jedk: "f17fgpbq",
Bqenvij: "frvgh55",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1996nqw"
},
"extra-large": {
Bf4jedk: "fwbmr0d",
Bqenvij: "f1d2rq10",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fty64o7"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw"
},
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5"
},
roundedSmallToTiny: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fq9zq91"
},
circular: {},
borderGhost: {
ap17g6: "f10ludwy"
},
filled: {},
"filled-brand": {
De3pzq: "ffp7eso",
sj55zd: "f1phragk"
},
"filled-danger": {
De3pzq: "fdl5y0r",
sj55zd: "f1phragk"
},
"filled-important": {
De3pzq: "f1c73kur",
sj55zd: "fr0bkrk"
},
"filled-informative": {
De3pzq: "f3vzo32",
sj55zd: "f11d4kpn"
},
"filled-severe": {
De3pzq: "f1s438gw",
sj55zd: "f1phragk"
},
"filled-subtle": {
De3pzq: "fxugw4r",
sj55zd: "f19n0e5"
},
"filled-success": {
De3pzq: "flxk52p",
sj55zd: "f1phragk"
},
"filled-warning": {
De3pzq: "ffq97bm",
sj55zd: "ff5vbop"
},
ghost: {},
"ghost-brand": {
sj55zd: "f16muhyy"
},
"ghost-danger": {
sj55zd: "f1whyuy6"
},
"ghost-important": {
sj55zd: "f19n0e5"
},
"ghost-informative": {
sj55zd: "f11d4kpn"
},
"ghost-severe": {
sj55zd: "f1l8vj45"
},
"ghost-subtle": {
sj55zd: "fonrgv7"
},
"ghost-success": {
sj55zd: "f1m7fhi8"
},
"ghost-warning": {
sj55zd: "fpti2h4"
},
outline: {
g2u3we: "f23ftbb",
h3c5rm: [
"f1gkuv52",
"f1p1bl80"
],
B9xav0g: "fioka3i",
zhjwy3: [
"f1p1bl80",
"f1gkuv52"
]
},
"outline-brand": {
sj55zd: "f16muhyy"
},
"outline-danger": {
sj55zd: "f1whyuy6",
g2u3we: "fyqpifd",
h3c5rm: [
"f3ukxca",
"f1k7dugc"
],
B9xav0g: "f1njxb2b",
zhjwy3: [
"f1k7dugc",
"f3ukxca"
]
},
"outline-important": {
sj55zd: "f11d4kpn",
g2u3we: "fq0vr37",
h3c5rm: [
"f1byw159",
"f11cr0be"
],
B9xav0g: "f1c1zstj",
zhjwy3: [
"f11cr0be",
"f1byw159"
]
},
"outline-informative": {
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: [
"f7pw515",
"fw35ms5"
],
B9xav0g: "frpde29",
zhjwy3: [
"fw35ms5",
"f7pw515"
]
},
"outline-severe": {
sj55zd: "f1l8vj45"
},
"outline-subtle": {
sj55zd: "fonrgv7"
},
"outline-success": {
sj55zd: "f1m7fhi8",
g2u3we: "f1mmhl11",
h3c5rm: [
"f1tjpp2f",
"f1ocn5n7"
],
B9xav0g: "f1gjv25d",
zhjwy3: [
"f1ocn5n7",
"f1tjpp2f"
]
},
"outline-warning": {
sj55zd: "fpti2h4"
},
tint: {},
"tint-brand": {
De3pzq: "f16xkysk",
sj55zd: "faj9fo0",
g2u3we: "f161y7kd",
h3c5rm: [
"f1c8dzaj",
"f1sl6hi9"
],
B9xav0g: "f1619yhw",
zhjwy3: [
"f1sl6hi9",
"f1c8dzaj"
]
},
"tint-danger": {
De3pzq: "ff0poqj",
sj55zd: "f1hcrxcs",
g2u3we: "f1oqjm8o",
h3c5rm: [
"fkgrb8g",
"frb5wm0"
],
B9xav0g: "f1iai1ph",
zhjwy3: [
"frb5wm0",
"fkgrb8g"
]
},
"tint-important": {
De3pzq: "f945g0u",
sj55zd: "fr0bkrk",
g2u3we: "fghlq4f",
h3c5rm: [
"f1gn591s",
"fjscplz"
],
B9xav0g: "fb073pr",
zhjwy3: [
"fjscplz",
"f1gn591s"
]
},
"tint-informative": {
De3pzq: "f1ctqxl6",
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: [
"f7pw515",
"fw35ms5"
],
B9xav0g: "frpde29",
zhjwy3: [
"fw35ms5",
"f7pw515"
]
},
"tint-severe": {
De3pzq: "f1xzsg4",
sj55zd: "f1k5f75o",
g2u3we: "fxy9dsj",
h3c5rm: [
"f54u6j2",
"fcm23ze"
],
B9xav0g: "f4vf0uq",
zhjwy3: [
"fcm23ze",
"f54u6j2"
]
},
"tint-subtle": {
De3pzq: "fxugw4r",
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: [
"f7pw515",
"fw35ms5"
],
B9xav0g: "frpde29",
zhjwy3: [
"fw35ms5",
"f7pw515"
]
},
"tint-success": {
De3pzq: "f2vsrz6",
sj55zd: "ffmvakt",
g2u3we: "fdmic9h",
h3c5rm: [
"f196y6m",
"fetptd8"
],
B9xav0g: "f1pev5xq",
zhjwy3: [
"fetptd8",
"f196y6m"
]
},
"tint-warning": {
De3pzq: "f10s6hli",
sj55zd: "f42v8de",
g2u3we: "fn9i3n",
h3c5rm: [
"f1aw8cx4",
"f51if14"
],
B9xav0g: "fvq8iai",
zhjwy3: [
"f51if14",
"f1aw8cx4"
]
}
}, {
d: [
".fk6fouc{font-family:var(--fontFamilyBase);}",
".f13mqy1h{font-size:var(--fontSizeBase100);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".fcpl73t{line-height:var(--lineHeightBase100);}",
".f16dn6v3{width:6px;}",
".f3mu39s{height:6px;}",
".f130uwy9{font-size:4px;}",
".fod1mrr{line-height:4px;}",
".f18p0k4z{min-width:unset;}",
[
".f19jm9xf{padding:unset;}",
{
p: -1
}
],
".fpd43o0{width:10px;}",
".f30q22z{height:10px;}",
".f1tccstq{font-size:6px;}",
".f1y3arg5{line-height:6px;}",
[
".f19jm9xf{padding:unset;}",
{
p: -1
}
],
".fq2vo04{min-width:16px;}",
".fd461yt{height:16px;}",
[
".fupdldz{padding:0 calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
".f17fgpbq{min-width:24px;}",
".frvgh55{height:24px;}",
[
".f1996nqw{padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
".fwbmr0d{min-width:32px;}",
".f1d2rq10{height:32px;}",
[
".fty64o7{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
],
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".fq9zq91{border-radius:var(--borderRadiusSmall);}",
{
p: -1
}
],
".f10ludwy::after{display:none;}",
".ffp7eso{background-color:var(--colorBrandBackground);}",
".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}",
".f1c73kur{background-color:var(--colorNeutralForeground1);}",
".fr0bkrk{color:var(--colorNeutralBackground1);}",
".f3vzo32{background-color:var(--colorNeutralBackground5);}",
".f11d4kpn{color:var(--colorNeutralForeground3);}",
".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".f19n0e5{color:var(--colorNeutralForeground1);}",
".flxk52p{background-color:var(--colorPaletteGreenBackground3);}",
".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}",
".ff5vbop{color:var(--colorNeutralForeground1Static);}",
".f16muhyy{color:var(--colorBrandForeground1);}",
".f1whyuy6{color:var(--colorPaletteRedForeground3);}",
".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}",
".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}",
".fpti2h4{color:var(--colorPaletteYellowForeground2);}",
".f23ftbb{border-top-color:currentColor;}",
".f1gkuv52{border-right-color:currentColor;}",
".f1p1bl80{border-left-color:currentColor;}",
".fioka3i{border-bottom-color:currentColor;}",
".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}",
".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}",
".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}",
".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}",
".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}",
".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}",
".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}",
".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
".f68mrw8{border-top-color:var(--colorNeutralStroke2);}",
".f7pw515{border-right-color:var(--colorNeutralStroke2);}",
".fw35ms5{border-left-color:var(--colorNeutralStroke2);}",
".frpde29{border-bottom-color:var(--colorNeutralStroke2);}",
".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}",
".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}",
".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}",
".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}",
".f16xkysk{background-color:var(--colorBrandBackground2);}",
".faj9fo0{color:var(--colorBrandForeground2);}",
".f161y7kd{border-top-color:var(--colorBrandStroke2);}",
".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}",
".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}",
".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}",
".ff0poqj{background-color:var(--colorPaletteRedBackground1);}",
".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}",
".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}",
".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}",
".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}",
".f945g0u{background-color:var(--colorNeutralForeground3);}",
".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
".fjscplz{border-left-color:var(--colorTransparentStroke);}",
".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
".f1ctqxl6{background-color:var(--colorNeutralBackground4);}",
".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}",
".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}",
".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}",
".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}",
".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}",
".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}",
".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}",
".ffmvakt{color:var(--colorPaletteGreenForeground1);}",
".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}",
".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}",
".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}",
".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}",
".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}",
".f42v8de{color:var(--colorPaletteYellowForeground1);}",
".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}",
".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}",
".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}",
".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"
]
});
const useIconRootClassName = /*#__PURE__*/ (0, _react1.__resetStyles)("rttl5z0", null, [
".rttl5z0{display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"
]);
const useIconStyles = /*#__PURE__*/ (0, _react1.__styles)({
beforeText: {
t21cq0: [
"f1t8l4o1",
"f11juvx6"
]
},
afterText: {
Frg6f3: [
"f11juvx6",
"f1t8l4o1"
]
},
beforeTextXL: {
t21cq0: [
"f1rs9grm",
"f1kwmkpi"
]
},
afterTextXL: {
Frg6f3: [
"f1kwmkpi",
"f1rs9grm"
]
},
tiny: {
Be2twd7: "f1tccstq"
},
"extra-small": {
Be2twd7: "fnmn6fi"
},
small: {
Be2twd7: "f1ugzwwg"
},
medium: {},
large: {
Be2twd7: "f4ybsrx"
},
"extra-large": {
Be2twd7: "fe5j1ua"
}
}, {
d: [
".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}",
".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}",
".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}",
".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}",
".f1tccstq{font-size:6px;}",
".fnmn6fi{font-size:10px;}",
".f1ugzwwg{font-size:12px;}",
".f4ybsrx{font-size:16px;}",
".fe5j1ua{font-size:20px;}"
]
});
const useBadgeStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
const rootStyles = useRootStyles();
const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
state.root.className = (0, _react1.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
const iconRootClassName = useIconRootClassName();
const iconStyles = useIconStyles();
if (state.icon) {
let iconPositionClass;
// Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
if (_react.Children.toArray(state.root.children).length > 0) {
if (state.size === 'extra-large') {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
} else {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
}
}
state.icon.className = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,306 @@
'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, {
badgeClassNames: function() {
return badgeClassNames;
},
useBadgeStyles_unstable: function() {
return useBadgeStyles_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _react1 = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const badgeClassNames = {
root: 'fui-Badge',
icon: 'fui-Badge__icon'
};
// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
const textPadding = _reacttheme.tokens.spacingHorizontalXXS;
const useRootClassName = (0, _react1.makeResetStyles)({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
..._reacttheme.typographyStyles.caption1Strong,
height: '20px',
minWidth: '20px',
padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`,
borderRadius: _reacttheme.tokens.borderRadiusCircular,
// Use a transparent stroke (rather than no border) so the border is visible in high contrast
borderColor: _reacttheme.tokens.colorTransparentStroke,
'::after': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
borderStyle: 'solid',
borderColor: 'inherit',
borderWidth: _reacttheme.tokens.strokeWidthThin,
borderRadius: 'inherit'
}
});
const useRootStyles = (0, _react1.makeStyles)({
fontSmallToTiny: {
..._reacttheme.typographyStyles.caption2Strong
},
// size
tiny: {
width: '6px',
height: '6px',
fontSize: '4px',
lineHeight: '4px',
minWidth: 'unset',
padding: 'unset'
},
'extra-small': {
width: '10px',
height: '10px',
fontSize: '6px',
lineHeight: '6px',
minWidth: 'unset',
padding: 'unset'
},
small: {
minWidth: '16px',
height: '16px',
padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
},
medium: {},
large: {
minWidth: '24px',
height: '24px',
padding: `0 calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
},
'extra-large': {
minWidth: '32px',
height: '32px',
padding: `0 calc(${_reacttheme.tokens.spacingHorizontalSNudge} + ${textPadding})`
},
// shape
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone
},
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium
},
roundedSmallToTiny: {
borderRadius: _reacttheme.tokens.borderRadiusSmall
},
circular: {},
// hide the boder when appearance is "ghost"
borderGhost: {
// The border is applied in an ::after pseudo-element because it should not affect layout.
// The padding and size of the badge should be the same regardless of whether or not it has a border.
'::after': {
display: 'none'
}
},
// appearance: filled
filled: {},
'filled-brand': {
backgroundColor: _reacttheme.tokens.colorBrandBackground,
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
'filled-danger': {
backgroundColor: _reacttheme.tokens.colorPaletteRedBackground3,
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
'filled-important': {
backgroundColor: _reacttheme.tokens.colorNeutralForeground1,
color: _reacttheme.tokens.colorNeutralBackground1
},
'filled-informative': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground5,
color: _reacttheme.tokens.colorNeutralForeground3
},
'filled-severe': {
backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground3,
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
'filled-subtle': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
color: _reacttheme.tokens.colorNeutralForeground1
},
'filled-success': {
backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground3,
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
},
'filled-warning': {
backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground3,
color: _reacttheme.tokens.colorNeutralForeground1Static
},
// appearance: ghost
ghost: {},
'ghost-brand': {
color: _reacttheme.tokens.colorBrandForeground1
},
'ghost-danger': {
color: _reacttheme.tokens.colorPaletteRedForeground3
},
'ghost-important': {
color: _reacttheme.tokens.colorNeutralForeground1
},
'ghost-informative': {
color: _reacttheme.tokens.colorNeutralForeground3
},
'ghost-severe': {
color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
},
'ghost-subtle': {
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
},
'ghost-success': {
color: _reacttheme.tokens.colorPaletteGreenForeground3
},
'ghost-warning': {
color: _reacttheme.tokens.colorPaletteYellowForeground2
},
// appearance: outline
outline: {
..._react1.shorthands.borderColor('currentColor')
},
'outline-brand': {
color: _reacttheme.tokens.colorBrandForeground1
},
'outline-danger': {
color: _reacttheme.tokens.colorPaletteRedForeground3,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder2)
},
'outline-important': {
color: _reacttheme.tokens.colorNeutralForeground3,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeAccessible)
},
'outline-informative': {
color: _reacttheme.tokens.colorNeutralForeground3,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
},
'outline-severe': {
color: _reacttheme.tokens.colorPaletteDarkOrangeForeground3
},
'outline-subtle': {
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
},
'outline-success': {
color: _reacttheme.tokens.colorPaletteGreenForeground3,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder2)
},
'outline-warning': {
color: _reacttheme.tokens.colorPaletteYellowForeground2
},
// appearance: tint
tint: {},
'tint-brand': {
backgroundColor: _reacttheme.tokens.colorBrandBackground2,
color: _reacttheme.tokens.colorBrandForeground2,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke2)
},
'tint-danger': {
backgroundColor: _reacttheme.tokens.colorPaletteRedBackground1,
color: _reacttheme.tokens.colorPaletteRedForeground1,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteRedBorder1)
},
'tint-important': {
backgroundColor: _reacttheme.tokens.colorNeutralForeground3,
color: _reacttheme.tokens.colorNeutralBackground1,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
},
'tint-informative': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground4,
color: _reacttheme.tokens.colorNeutralForeground3,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
},
'tint-severe': {
backgroundColor: _reacttheme.tokens.colorPaletteDarkOrangeBackground1,
color: _reacttheme.tokens.colorPaletteDarkOrangeForeground1,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteDarkOrangeBorder1)
},
'tint-subtle': {
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
color: _reacttheme.tokens.colorNeutralForeground3,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
},
'tint-success': {
backgroundColor: _reacttheme.tokens.colorPaletteGreenBackground1,
color: _reacttheme.tokens.colorPaletteGreenForeground1,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteGreenBorder1)
},
'tint-warning': {
backgroundColor: _reacttheme.tokens.colorPaletteYellowBackground1,
color: _reacttheme.tokens.colorPaletteYellowForeground1,
..._react1.shorthands.borderColor(_reacttheme.tokens.colorPaletteYellowBorder1)
}
});
const useIconRootClassName = (0, _react1.makeResetStyles)({
display: 'flex',
lineHeight: '1',
margin: `0 calc(-1 * ${textPadding})`,
fontSize: '12px'
});
const useIconStyles = (0, _react1.makeStyles)({
beforeText: {
marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
},
afterText: {
marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXXS} + ${textPadding})`
},
beforeTextXL: {
marginRight: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
},
afterTextXL: {
marginLeft: `calc(${_reacttheme.tokens.spacingHorizontalXS} + ${textPadding})`
},
// size
tiny: {
fontSize: '6px'
},
'extra-small': {
fontSize: '10px'
},
small: {
fontSize: '12px'
},
medium: {},
large: {
fontSize: '16px'
},
'extra-large': {
fontSize: '20px'
}
});
const useBadgeStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
const rootStyles = useRootStyles();
const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
state.root.className = (0, _react1.mergeClasses)(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
const iconRootClassName = useIconRootClassName();
const iconStyles = useIconStyles();
if (state.icon) {
let iconPositionClass;
// Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
if (_react.Children.toArray(state.root.children).length > 0) {
if (state.size === 'extra-large') {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
} else {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
}
}
state.icon.className = (0, _react1.mergeClasses)(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "CounterBadge", {
enumerable: true,
get: function() {
return CounterBadge;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCounterBadge = require("./useCounterBadge");
const _useCounterBadgeStylesstyles = require("./useCounterBadgeStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _index = require("../Badge/index");
const CounterBadge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCounterBadge.useCounterBadge_unstable)(props, ref);
(0, _useCounterBadgeStylesstyles.useCounterBadgeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCounterBadgeStyles_unstable')(state);
return (0, _index.renderBadge_unstable)(state);
});
CounterBadge.displayName = 'CounterBadge';

View File

@@ -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;;;;;;;;;;;;iEAEuB,QAAQ;iCACU,oBAAoB;6CACd,iCAAiC;qCACpC,kCAAkC;uBACzC,iBAAiB;AAO/C,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CN,2DAAAA,EAA+BO;QAE/BN,gDAAAA,EAA4B,kCAAkCM;IAE9D,WAAOL,2BAAAA,EAAqBK;AAC9B,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -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":""}

View File

@@ -0,0 +1,30 @@
"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, {
CounterBadge: function() {
return _CounterBadge.CounterBadge;
},
counterBadgeClassNames: function() {
return _useCounterBadgeStylesstyles.counterBadgeClassNames;
},
useCounterBadgeBase_unstable: function() {
return _useCounterBadge.useCounterBadgeBase_unstable;
},
useCounterBadgeStyles_unstable: function() {
return _useCounterBadgeStylesstyles.useCounterBadgeStyles_unstable;
},
useCounterBadge_unstable: function() {
return _useCounterBadge.useCounterBadge_unstable;
}
});
const _CounterBadge = require("./CounterBadge");
const _useCounterBadge = require("./useCounterBadge");
const _useCounterBadgeStylesstyles = require("./useCounterBadgeStyles.styles");

View File

@@ -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":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZG,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BAPJ,iBAAiB;iCAOyB,oBAAoB;6CACpB,iCAAiC"}

View File

@@ -0,0 +1,46 @@
'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, {
useCounterBadgeBase_unstable: function() {
return useCounterBadgeBase_unstable;
},
useCounterBadge_unstable: function() {
return useCounterBadge_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _index = require("../Badge/index");
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
};
};
const useCounterBadgeBase_unstable = (props, ref)=>{
const { showZero = false, overflowCount = 99, count = 0, dot = false, ...badgeProps } = props;
const state = {
...(0, _index.useBadgeBase_unstable)(badgeProps, ref),
showZero,
count,
dot
};
if ((count !== 0 || showZero) && !dot && !state.root.children) {
state.root.children = count > overflowCount ? `${overflowCount}+` : `${count}`;
}
return state;
};

View File

@@ -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;;;;;;;;;;;;gCAkCaW;eAAAA;;4BApBAT;;;;;iEAZU,QAAQ;uBACO,iBAAiB;AAWhD,MAAMA,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;AAQK,qCAAqC,CAC1CL,OACAC;IAEA,MAAM,EAAEQ,WAAW,KAAK,EAAEC,gBAAgB,EAAE,EAAEC,QAAQ,CAAC,EAAEC,MAAM,KAAK,EAAE,GAAGC,YAAY,GAAGb;IAExF,MAAMO,QAA+B;QACnC,OAAGT,4BAAAA,EAAsBe,YAAYZ,IAAiC;QACtEQ;QACAE;QACAC;IACF;IAEA,IAAKD,CAAAA,UAAU,KAAKF,QAAAA,CAAO,IAAM,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"}

View File

@@ -0,0 +1,62 @@
'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, {
counterBadgeClassNames: function() {
return counterBadgeClassNames;
},
useCounterBadgeStyles_unstable: function() {
return useCounterBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useBadgeStylesstyles = require("../Badge/useBadgeStyles.styles");
const counterBadgeClassNames = {
root: 'fui-CounterBadge',
icon: 'fui-CounterBadge__icon'
};
const useStyles = /*#__PURE__*/ (0, _react.__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;}"
]
});
const useCounterBadgeStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(counterBadgeClassNames.icon, state.icon.className);
}
return (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;kCAiBY;eAA9BiB;;;uBAnBwB,gBAAgB;sCACjB,gCAAgC;AACjE,+BAA+B;IAClChB,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAM,GAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CAUjB,CAAC;AAGS,wCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGhB,SAAS,CAAC,CAAC;IAC1Be,KAAK,CAACjB,IAAI,CAACmB,SAAS,OAAGvB,mBAAY,EAACG,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;IAClK,IAAIF,KAAK,CAAChB,IAAI,EAAE;QACZgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,OAAGvB,mBAAY,EAACG,sBAAsB,CAACE,IAAI,EAAEgB,KAAK,CAAChB,IAAI,CAACkB,SAAS,CAAC;IAC1F;IACA,WAAOrB,6CAAuB,EAACmB,KAAK,CAAC;AACzC,CAAC"}

View File

@@ -0,0 +1,45 @@
'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, {
counterBadgeClassNames: function() {
return counterBadgeClassNames;
},
useCounterBadgeStyles_unstable: function() {
return useCounterBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useBadgeStylesstyles = require("../Badge/useBadgeStyles.styles");
const counterBadgeClassNames = {
root: 'fui-CounterBadge',
icon: 'fui-CounterBadge__icon'
};
const useStyles = (0, _react.makeStyles)({
dot: {
minWidth: 'auto',
width: '6px',
height: '6px',
padding: '0'
},
hide: {
display: 'none'
}
});
const useCounterBadgeStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(counterBadgeClassNames.root, state.dot && styles.dot, !state.root.children && !state.dot && styles.hide, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(counterBadgeClassNames.icon, state.icon.className);
}
return (0, _useBadgeStylesstyles.useBadgeStyles_unstable)(state);
};

View File

@@ -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;;;;;;;;;;;;IAQaG,sBAAAA;;;kCAoBAW;eAAAA;;;uBA1B4B,iBAAiB;sCAClB,iCAAiC;AAKlE,+BAA2D;IAChEV,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BM,KAAK;QACHC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJC,SAAS;IACX;AACF;AAKO,uCAAuC,CAACE;IAC7C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,OAAGjB,mBAAAA,EACrBG,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,OAAGjB,mBAAAA,EAAaG,uBAAuBE,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACvF;IAEA,WAAOf,6CAAAA,EAAwBa;AACjC,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "PresenceBadge", {
enumerable: true,
get: function() {
return PresenceBadge;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _usePresenceBadge = require("./usePresenceBadge");
const _usePresenceBadgeStylesstyles = require("./usePresenceBadgeStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _Badge = require("../../Badge");
const PresenceBadge = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _usePresenceBadge.usePresenceBadge_unstable)(props, ref);
(0, _usePresenceBadgeStylesstyles.usePresenceBadgeStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('usePresenceBadgeStyles_unstable')(state);
return (0, _Badge.renderBadge_unstable)(state);
});
PresenceBadge.displayName = 'PresenceBadge';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n\n usePresenceBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;kCACW,qBAAqB;8CACf,kCAAkC;qCACtC,kCAAkC;uBACzC,cAAc;AAO5C,MAAMK,gBAAAA,WAAAA,GAAyDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,YAAQR,2CAAAA,EAA0BM,OAAOC;QAE/CN,6DAAAA,EAAgCO;QAEhCN,gDAAAA,EAA4B,mCAAmCM;IAE/D,WAAOL,2BAAAA,EAAqBK;AAC9B,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/PresenceBadge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n | 'busy'\n | 'out-of-office'\n | 'away'\n | 'available'\n | 'offline'\n | 'do-not-disturb'\n | 'unknown'\n | 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /**\n * Represents several status\n * @default available\n */\n status?: PresenceBadgeStatus;\n\n /**\n * Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;\n\nexport type PresenceBadgeBaseProps = Omit<PresenceBadgeProps, 'size'>;\n\nexport type PresenceBadgeBaseState = Omit<PresenceBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,64 @@
"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, {
PresenceBadge: function() {
return _PresenceBadge.PresenceBadge;
},
presenceAvailableFilled: function() {
return _presenceIcons.presenceAvailableFilled;
},
presenceAvailableRegular: function() {
return _presenceIcons.presenceAvailableRegular;
},
presenceAwayFilled: function() {
return _presenceIcons.presenceAwayFilled;
},
presenceAwayRegular: function() {
return _presenceIcons.presenceAwayRegular;
},
presenceBadgeClassNames: function() {
return _usePresenceBadgeStylesstyles.presenceBadgeClassNames;
},
presenceBlockedRegular: function() {
return _presenceIcons.presenceBlockedRegular;
},
presenceBusyFilled: function() {
return _presenceIcons.presenceBusyFilled;
},
presenceDndFilled: function() {
return _presenceIcons.presenceDndFilled;
},
presenceDndRegular: function() {
return _presenceIcons.presenceDndRegular;
},
presenceOfflineRegular: function() {
return _presenceIcons.presenceOfflineRegular;
},
presenceOofRegular: function() {
return _presenceIcons.presenceOofRegular;
},
presenceUnknownRegular: function() {
return _presenceIcons.presenceUnknownRegular;
},
usePresenceBadgeBase_unstable: function() {
return _usePresenceBadge.usePresenceBadgeBase_unstable;
},
usePresenceBadgeStyles_unstable: function() {
return _usePresenceBadgeStylesstyles.usePresenceBadgeStyles_unstable;
},
usePresenceBadge_unstable: function() {
return _usePresenceBadge.usePresenceBadge_unstable;
}
});
const _PresenceBadge = require("./PresenceBadge");
const _usePresenceBadge = require("./usePresenceBadge");
const _usePresenceBadgeStylesstyles = require("./usePresenceBadgeStyles.styles");
const _presenceIcons = require("./presenceIcons");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/index.ts"],"sourcesContent":["export { PresenceBadge } from './PresenceBadge';\nexport type {\n PresenceBadgeBaseProps,\n PresenceBadgeBaseState,\n PresenceBadgeProps,\n PresenceBadgeState,\n PresenceBadgeStatus,\n} from './PresenceBadge.types';\nexport { usePresenceBadge_unstable, usePresenceBadgeBase_unstable } from './usePresenceBadge';\nexport { presenceBadgeClassNames, usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nexport {\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceAwayRegular,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n} from './presenceIcons';\n"],"names":["PresenceBadge","usePresenceBadge_unstable","usePresenceBadgeBase_unstable","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular"],"mappings":";;;;;;;;;;;IAASA;2CAAa;;;eAWpBK,sCAAuB;;;eACvBC,uCAAwB;;;eACxBC,iCAAkB;;;eAClBC,kCAAmB;;;eALZL,qDAAuB;;;eAM9BM,qCAAsB;;;eACtBC,iCAAkB;;;eAClBC,gCAAiB;;;eACjBC,iCAAkB;;IAClBC;oDAAsB;;;eACtBC,iCAAkB;;;eAClBC,qCAAsB;;;eAbYb,+CAA6B;;;eAC/BE,6DAA+B;;;eADxDH,2CAAyB;;;+BARJ,kBAAkB;kCAQyB,qBAAqB;8CACrB,kCAAkC;+BAapG,kBAAkB"}

View File

@@ -0,0 +1,180 @@
"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, {
presenceAvailableFilled: function() {
return presenceAvailableFilled;
},
presenceAvailableRegular: function() {
return presenceAvailableRegular;
},
presenceAwayFilled: function() {
return presenceAwayFilled;
},
presenceAwayRegular: function() {
return presenceAwayRegular;
},
presenceBlockedRegular: function() {
return presenceBlockedRegular;
},
presenceBusyFilled: function() {
return presenceBusyFilled;
},
presenceDndFilled: function() {
return presenceDndFilled;
},
presenceDndRegular: function() {
return presenceDndRegular;
},
presenceOfflineRegular: function() {
return presenceOfflineRegular;
},
presenceOofRegular: function() {
return presenceOofRegular;
},
presenceUnknownRegular: function() {
return presenceUnknownRegular;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacticons = require("@fluentui/react-icons");
const presenceAwayRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceAway10Regular,
'extra-small': _reacticons.PresenceAway10Regular,
small: _reacticons.PresenceAway12Regular,
medium: _reacticons.PresenceAway16Regular,
large: _reacticons.PresenceAway20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceAway20Regular
};
const presenceAwayFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceAway10Filled,
'extra-small': _reacticons.PresenceAway10Filled,
small: _reacticons.PresenceAway12Filled,
medium: _reacticons.PresenceAway16Filled,
large: _reacticons.PresenceAway20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceAway20Filled
};
const presenceAvailableRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceAvailable10Regular,
'extra-small': _reacticons.PresenceAvailable10Regular,
small: _reacticons.PresenceAvailable12Regular,
medium: _reacticons.PresenceAvailable16Regular,
large: _reacticons.PresenceAvailable20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceAvailable20Regular
};
const presenceAvailableFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceAvailable10Filled,
'extra-small': _reacticons.PresenceAvailable10Filled,
small: _reacticons.PresenceAvailable12Filled,
medium: _reacticons.PresenceAvailable16Filled,
large: _reacticons.PresenceAvailable20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceAvailable20Filled
};
const presenceBlockedRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceBlocked10Regular,
'extra-small': _reacticons.PresenceBlocked10Regular,
small: _reacticons.PresenceBlocked12Regular,
medium: _reacticons.PresenceBlocked16Regular,
large: _reacticons.PresenceBlocked20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceBlocked20Regular
};
const presenceBusyFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceBusy10Filled,
'extra-small': _reacticons.PresenceBusy10Filled,
small: _reacticons.PresenceBusy12Filled,
medium: _reacticons.PresenceBusy16Filled,
large: _reacticons.PresenceBusy20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceBusy20Filled
};
const presenceDndFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceDnd10Filled,
'extra-small': _reacticons.PresenceDnd10Filled,
small: _reacticons.PresenceDnd12Filled,
medium: _reacticons.PresenceDnd16Filled,
large: _reacticons.PresenceDnd20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceDnd20Filled
};
const presenceDndRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceDnd10Regular,
'extra-small': _reacticons.PresenceDnd10Regular,
small: _reacticons.PresenceDnd12Regular,
medium: _reacticons.PresenceDnd16Regular,
large: _reacticons.PresenceDnd20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceDnd20Regular
};
const presenceOofRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceOof10Regular,
'extra-small': _reacticons.PresenceOof10Regular,
small: _reacticons.PresenceOof12Regular,
medium: _reacticons.PresenceOof16Regular,
large: _reacticons.PresenceOof20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceOof20Regular
};
const presenceOfflineRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceOffline10Regular,
'extra-small': _reacticons.PresenceOffline10Regular,
small: _reacticons.PresenceOffline12Regular,
medium: _reacticons.PresenceOffline16Regular,
large: _reacticons.PresenceOffline20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceOffline20Regular
};
const presenceUnknownRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: _reacticons.PresenceUnknown10Regular,
'extra-small': _reacticons.PresenceUnknown10Regular,
small: _reacticons.PresenceUnknown12Regular,
medium: _reacticons.PresenceUnknown16Regular,
large: _reacticons.PresenceUnknown20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': _reacticons.PresenceUnknown20Regular
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,96 @@
'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, {
DEFAULT_STRINGS: function() {
return DEFAULT_STRINGS;
},
usePresenceBadgeBase_unstable: function() {
return usePresenceBadgeBase_unstable;
},
usePresenceBadge_unstable: function() {
return usePresenceBadge_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _presenceIcons = require("./presenceIcons");
const _index = require("../Badge/index");
const iconMap = (status, outOfOffice, size)=>{
switch(status){
case 'available':
return outOfOffice ? _presenceIcons.presenceAvailableRegular[size] : _presenceIcons.presenceAvailableFilled[size];
case 'away':
return outOfOffice ? _presenceIcons.presenceOofRegular[size] : _presenceIcons.presenceAwayFilled[size];
case 'blocked':
return _presenceIcons.presenceBlockedRegular[size];
case 'busy':
return outOfOffice ? _presenceIcons.presenceUnknownRegular[size] : _presenceIcons.presenceBusyFilled[size];
case 'do-not-disturb':
return outOfOffice ? _presenceIcons.presenceDndRegular[size] : _presenceIcons.presenceDndFilled[size];
case 'offline':
return outOfOffice ? _presenceIcons.presenceOofRegular[size] : _presenceIcons.presenceOfflineRegular[size];
case 'out-of-office':
return _presenceIcons.presenceOofRegular[size];
case 'unknown':
return _presenceIcons.presenceUnknownRegular[size];
}
};
const DEFAULT_STRINGS = {
busy: 'busy',
'out-of-office': 'out of office',
away: 'away',
available: 'available',
offline: 'offline',
'do-not-disturb': 'do not disturb',
unknown: 'unknown',
blocked: 'blocked'
};
const usePresenceBadge_unstable = (props, ref)=>{
const { size = 'medium', outOfOffice = false, ...baseProps } = props;
var _props_status;
const status = (_props_status = props.status) !== null && _props_status !== void 0 ? _props_status : 'available';
const IconElement = iconMap(status, outOfOffice, size);
const state = {
...usePresenceBadgeBase_unstable(baseProps, ref),
appearance: 'filled',
color: 'brand',
shape: 'circular',
size,
outOfOffice
};
if (state.icon) {
var _state_icon;
var _children;
(_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ _react.createElement(IconElement, null);
}
return state;
};
const usePresenceBadgeBase_unstable = (props, ref)=>{
const { status = 'available', outOfOffice = false } = props;
const statusText = DEFAULT_STRINGS[status];
const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';
const state = {
...(0, _index.useBadgeBase_unstable)({
'aria-label': statusText + oofText,
role: 'img',
...props,
icon: _reactutilities.slot.optional(props.icon, {
renderByDefault: true,
elementType: 'span'
})
}, ref),
status,
outOfOffice
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,119 @@
'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, {
presenceBadgeClassNames: function() {
return presenceBadgeClassNames;
},
usePresenceBadgeStyles_unstable: function() {
return usePresenceBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
const presenceBadgeClassNames = {
root: 'fui-PresenceBadge',
icon: 'fui-PresenceBadge__icon'
};
const getIsBusy = (status)=>{
if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
return true;
}
return false;
};
const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r832ydo", null, [
".r832ydo{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--borderRadiusCircular);background-color:var(--colorNeutralBackground1);padding:1px;background-clip:content-box;}"
]);
const useIconClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r11ag4qr", null, [
".r11ag4qr{display:flex;margin:-1px;}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
statusBusy: {
sj55zd: "fvi85wt"
},
statusAway: {
sj55zd: "f14k8a89"
},
statusAvailable: {
sj55zd: "fqa5hgp"
},
statusOffline: {
sj55zd: "f11d4kpn"
},
statusOutOfOffice: {
sj55zd: "fdce8r3"
},
statusUnknown: {
sj55zd: "f11d4kpn"
},
outOfOffice: {
sj55zd: "fr0bkrk"
},
outOfOfficeAvailable: {
sj55zd: "fqa5hgp"
},
outOfOfficeBusy: {
sj55zd: "fvi85wt"
},
outOfOfficeUnknown: {
sj55zd: "f11d4kpn"
},
tiny: {
Bubjx69: "f9ikmtg",
a9b677: "f16dn6v3",
B2eet1l: "f1w2irj7",
B5pe6w7: "fab5kbq",
p4uzdd: "f1ms1d91"
},
large: {
Bubjx69: "f9ikmtg",
a9b677: "f64fuq3",
B5pe6w7: "f1vfi1yj",
p4uzdd: "f15s34gz"
},
extraLarge: {
Bubjx69: "f9ikmtg",
a9b677: "f1w9dchk",
B5pe6w7: "f14efy9b",
p4uzdd: "fhipgdu"
}
}, {
d: [
".fvi85wt{color:var(--colorPaletteRedBackground3);}",
".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}",
".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}",
".f11d4kpn{color:var(--colorNeutralForeground3);}",
".fdce8r3{color:var(--colorPaletteBerryForeground3);}",
".fr0bkrk{color:var(--colorNeutralBackground1);}",
".f9ikmtg{aspect-ratio:1;}",
".f16dn6v3{width:6px;}",
".f1w2irj7{background-clip:unset;}",
".fab5kbq svg{width:6px!important;}",
".f1ms1d91 svg{height:6px!important;}",
".f64fuq3{width:20px;}",
".f1vfi1yj svg{width:20px!important;}",
".f15s34gz svg{height:20px!important;}",
".f1w9dchk{width:28px;}",
".f14efy9b svg{width:28px!important;}",
".fhipgdu svg{height:28px!important;}"
]
});
const usePresenceBadgeStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
const iconClassName = useIconClassName();
const styles = useStyles();
const isBusy = getIsBusy(state.status);
state.root.className = (0, _react.mergeClasses)(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,121 @@
'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, {
presenceBadgeClassNames: function() {
return presenceBadgeClassNames;
},
usePresenceBadgeStyles_unstable: function() {
return usePresenceBadgeStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const presenceBadgeClassNames = {
root: 'fui-PresenceBadge',
icon: 'fui-PresenceBadge__icon'
};
const getIsBusy = (status)=>{
if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
return true;
}
return false;
};
const useRootClassName = (0, _react.makeResetStyles)({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
borderRadius: _reacttheme.tokens.borderRadiusCircular,
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
// The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.
// Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background
// using padding and backgroundClip. The icon has margin: -1px to account for the padding.
// (* except size="tiny", where backgroundClip is unset)
padding: '1px',
backgroundClip: 'content-box'
});
const useIconClassName = (0, _react.makeResetStyles)({
display: 'flex',
margin: '-1px'
});
const useStyles = (0, _react.makeStyles)({
statusBusy: {
color: _reacttheme.tokens.colorPaletteRedBackground3
},
statusAway: {
color: _reacttheme.tokens.colorPaletteMarigoldBackground3
},
statusAvailable: {
color: _reacttheme.tokens.colorPaletteLightGreenForeground3
},
statusOffline: {
color: _reacttheme.tokens.colorNeutralForeground3
},
statusOutOfOffice: {
color: _reacttheme.tokens.colorPaletteBerryForeground3
},
statusUnknown: {
color: _reacttheme.tokens.colorNeutralForeground3
},
outOfOffice: {
color: _reacttheme.tokens.colorNeutralBackground1
},
outOfOfficeAvailable: {
color: _reacttheme.tokens.colorPaletteLightGreenForeground3
},
outOfOfficeBusy: {
color: _reacttheme.tokens.colorPaletteRedBackground3
},
outOfOfficeUnknown: {
color: _reacttheme.tokens.colorNeutralForeground3
},
// Icons are not resizeable, and these sizes are currently missing
// use `!important` to size the currently available icons to the missing ones
//
tiny: {
aspectRatio: '1',
width: '6px',
backgroundClip: 'unset',
'& svg': {
width: '6px !important',
height: '6px !important'
}
},
large: {
aspectRatio: '1',
width: '20px',
'& svg': {
width: '20px !important',
height: '20px !important'
}
},
extraLarge: {
aspectRatio: '1',
width: '28px',
'& svg': {
width: '28px !important',
height: '28px !important'
}
}
});
const usePresenceBadgeStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
const iconClassName = useIconClassName();
const styles = useStyles();
const isBusy = getIsBusy(state.status);
state.root.className = (0, _react.mergeClasses)(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,96 @@
"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, {
Badge: function() {
return _Badge.Badge;
},
CounterBadge: function() {
return _CounterBadge.CounterBadge;
},
PresenceBadge: function() {
return _PresenceBadge.PresenceBadge;
},
badgeClassNames: function() {
return _Badge.badgeClassNames;
},
counterBadgeClassNames: function() {
return _CounterBadge.counterBadgeClassNames;
},
presenceAvailableFilled: function() {
return _PresenceBadge.presenceAvailableFilled;
},
presenceAvailableRegular: function() {
return _PresenceBadge.presenceAvailableRegular;
},
presenceAwayFilled: function() {
return _PresenceBadge.presenceAwayFilled;
},
presenceAwayRegular: function() {
return _PresenceBadge.presenceAwayRegular;
},
presenceBadgeClassNames: function() {
return _PresenceBadge.presenceBadgeClassNames;
},
presenceBlockedRegular: function() {
return _PresenceBadge.presenceBlockedRegular;
},
presenceBusyFilled: function() {
return _PresenceBadge.presenceBusyFilled;
},
presenceDndFilled: function() {
return _PresenceBadge.presenceDndFilled;
},
presenceDndRegular: function() {
return _PresenceBadge.presenceDndRegular;
},
presenceOfflineRegular: function() {
return _PresenceBadge.presenceOfflineRegular;
},
presenceOofRegular: function() {
return _PresenceBadge.presenceOofRegular;
},
presenceUnknownRegular: function() {
return _PresenceBadge.presenceUnknownRegular;
},
renderBadge_unstable: function() {
return _Badge.renderBadge_unstable;
},
useBadgeBase_unstable: function() {
return _Badge.useBadgeBase_unstable;
},
useBadgeStyles_unstable: function() {
return _Badge.useBadgeStyles_unstable;
},
useBadge_unstable: function() {
return _Badge.useBadge_unstable;
},
useCounterBadgeBase_unstable: function() {
return _CounterBadge.useCounterBadgeBase_unstable;
},
useCounterBadgeStyles_unstable: function() {
return _CounterBadge.useCounterBadgeStyles_unstable;
},
useCounterBadge_unstable: function() {
return _CounterBadge.useCounterBadge_unstable;
},
usePresenceBadgeBase_unstable: function() {
return _PresenceBadge.usePresenceBadgeBase_unstable;
},
usePresenceBadgeStyles_unstable: function() {
return _PresenceBadge.usePresenceBadgeStyles_unstable;
},
usePresenceBadge_unstable: function() {
return _PresenceBadge.usePresenceBadge_unstable;
}
});
const _Badge = require("./Badge");
const _PresenceBadge = require("./PresenceBadge");
const _CounterBadge = require("./CounterBadge");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Badge,\n badgeClassNames,\n renderBadge_unstable,\n useBadgeStyles_unstable,\n useBadge_unstable,\n useBadgeBase_unstable,\n} from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState, BadgeBaseProps, BadgeBaseState } from './Badge';\nexport {\n PresenceBadge,\n presenceBadgeClassNames,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n usePresenceBadgeBase_unstable,\n presenceAwayRegular,\n presenceAwayFilled,\n presenceAvailableRegular,\n presenceAvailableFilled,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndRegular,\n presenceDndFilled,\n presenceOofRegular,\n presenceOfflineRegular,\n presenceUnknownRegular,\n} from './PresenceBadge';\nexport type {\n PresenceBadgeProps,\n PresenceBadgeState,\n PresenceBadgeStatus,\n PresenceBadgeBaseProps,\n PresenceBadgeBaseState,\n} from './PresenceBadge';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n useCounterBadgeBase_unstable,\n} from './CounterBadge';\nexport type {\n CounterBadgeProps,\n CounterBadgeState,\n CounterBadgeBaseProps,\n CounterBadgeBaseState,\n} from './CounterBadge';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useBadgeBase_unstable","PresenceBadge","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","usePresenceBadgeBase_unstable","presenceAwayRegular","presenceAwayFilled","presenceAvailableRegular","presenceAvailableFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndRegular","presenceDndFilled","presenceOofRegular","presenceOfflineRegular","presenceUnknownRegular","CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable","useCounterBadgeBase_unstable"],"mappings":";;;;;;;;;;;SACO;eAALA;;;eAkCAsB,0BAAY;;;eAzBZhB,4BAAa;;;eARbL,sBAAe;;;eAkCfsB,oCAAsB;;;eAlBtBT,sCAAuB;;;eADvBD,uCAAwB;;;eADxBD,iCAAkB;;;eADlBD,kCAAmB;;;eAJnBJ,sCAAuB;;;eAQvBQ,qCAAsB;;IACtBC,kBAAkB;;;qBAED;eAAjBE;;;eADAD,iCAAkB;;;eAGlBG,qCAAsB;;;eADtBD,iCAAkB;;;eAElBE,qCAAsB;;;eAtBtBnB,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;eAkCjBsB,0CAA4B;;kCAFE;eAA9BF;;;eACAC,sCAAwB;;;eAxBxBf,4CAA6B;;;eAF7BF,8CAA+B;;6BACN;eAAzBC;;;uBANK,UAAU;+BAmBV,kBAAkB;8BAclB,iBAAiB"}

1
node_modules/@fluentui/react-badge/lib/Badge.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, useBadgeBase_unstable } from './components/Badge/index';

1
node_modules/@fluentui/react-badge/lib/Badge.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Badge.ts"],"sourcesContent":["export type { BadgeBaseProps, BadgeProps, BadgeSlots, BadgeBaseState, BadgeState } from './components/Badge/index';\nexport {\n Badge,\n badgeClassNames,\n renderBadge_unstable,\n useBadgeStyles_unstable,\n useBadge_unstable,\n useBadgeBase_unstable,\n} from './components/Badge/index';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useBadgeBase_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}

View File

@@ -0,0 +1 @@
export { CounterBadge, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, useCounterBadgeBase_unstable } from './components/CounterBadge/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/CounterBadge.ts"],"sourcesContent":["export type {\n CounterBadgeProps,\n CounterBadgeState,\n CounterBadgeBaseProps,\n CounterBadgeBaseState,\n} from './components/CounterBadge/index';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n useCounterBadgeBase_unstable,\n} from './components/CounterBadge/index';\n"],"names":["CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable","useCounterBadgeBase_unstable"],"mappings":"AAMA,SACEA,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,kCAAkC"}

View File

@@ -0,0 +1 @@
export { PresenceBadge, presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceAwayRegular, presenceBadgeClassNames, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, usePresenceBadgeBase_unstable } from './components/PresenceBadge/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/PresenceBadge.ts"],"sourcesContent":["export type {\n PresenceBadgeProps,\n PresenceBadgeState,\n PresenceBadgeStatus,\n PresenceBadgeBaseProps,\n PresenceBadgeBaseState,\n} from './components/PresenceBadge/index';\nexport {\n PresenceBadge,\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceAwayRegular,\n presenceBadgeClassNames,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n usePresenceBadgeBase_unstable,\n} from './components/PresenceBadge/index';\n"],"names":["PresenceBadge","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBadgeClassNames","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","usePresenceBadgeBase_unstable"],"mappings":"AAOA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,mBAAmB,EACnBC,uBAAuB,EACvBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,EACtBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,QACxB,mCAAmC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from './renderBadge';\nimport type { BadgeProps } from './Badge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const Badge: ForwardRefComponent<BadgeProps> = React.forwardRef((props, ref) => {\n const state = useBadge_unstable(props, ref);\n\n useBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('useBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"names":["React","useBadge_unstable","useBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","Badge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AAIrD;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCN,wBAAwBO;IAExBN,4BAA4B,2BAA2BM;IAEvD,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/Badge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n root: Slot<'div'>;\n icon?: Slot<'span'>;\n};\n\n// react has a non-standard `color` attribute in its types\n// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/a4ab0fa432320e70da9e51c8ae2e47377f65804b/types/react/index.d.ts#L1868\nexport type BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & {\n /**\n * A Badge can be filled, outline, ghost, inverted\n * @defaultvalue filled\n */\n appearance?: 'filled' | 'ghost' | 'outline' | 'tint';\n\n /**\n * A Badge can be one of preset colors\n * @defaultvalue brand\n */\n color?: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';\n\n /**\n * A Badge can position the icon before or after the content.\n * @defaultvalue before\n */\n iconPosition?: 'before' | 'after';\n\n /**\n * A Badge can be square, circular or rounded.\n * @defaultvalue circular\n */\n shape?: 'circular' | 'rounded' | 'square';\n\n /**\n * A Badge can be on of several preset sizes.\n * @defaultvalue medium\n */\n size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';\n};\n\nexport type BadgeState = ComponentState<BadgeSlots> &\n Required<Pick<BadgeProps, 'appearance' | 'color' | 'iconPosition' | 'shape' | 'size'>>;\n\nexport type BadgeBaseProps = Omit<BadgeProps, 'appearance' | 'color' | 'shape' | 'size'>;\n\nexport type BadgeBaseState = Omit<BadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":"AA8CA,WAAyF"}

View File

@@ -0,0 +1,4 @@
export { Badge } from './Badge';
export { renderBadge_unstable } from './renderBadge';
export { useBadge_unstable, useBadgeBase_unstable } from './useBadge';
export { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/index.ts"],"sourcesContent":["export { Badge } from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport { renderBadge_unstable } from './renderBadge';\nexport { useBadge_unstable, useBadgeBase_unstable } from './useBadge';\nexport { badgeClassNames, useBadgeStyles_unstable } from './useBadgeStyles.styles';\n"],"names":["Badge","renderBadge_unstable","useBadge_unstable","useBadgeBase_unstable","badgeClassNames","useBadgeStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAGhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

View File

@@ -0,0 +1,12 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
export const renderBadge_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.iconPosition === 'before' && state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
state.root.children,
state.iconPosition === 'after' && state.icon && /*#__PURE__*/ _jsx(state.icon, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/renderBadge.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 { BadgeBaseState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeBaseState): JSXElement => {\n assertSlots<BadgeSlots>(state);\n\n return (\n <state.root>\n {state.iconPosition === 'before' && state.icon && <state.icon />}\n {state.root.children}\n {state.iconPosition === 'after' && state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderBadge_unstable","state","root","iconPosition","icon","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IAExB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,YAAY,KAAK,YAAYF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YAC5DH,MAAMC,IAAI,CAACG,QAAQ;YACnBJ,MAAME,YAAY,KAAK,WAAWF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;;;AAGlE,EAAE"}

View File

@@ -0,0 +1,40 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Returns the props and state required to render the component
*/ export const useBadge_unstable = (props, ref)=>{
const { shape = 'circular', size = 'medium', appearance = 'filled', color = 'brand', ...badgeProps } = props;
const state = useBadgeBase_unstable(badgeProps, ref);
return {
...state,
shape,
size,
appearance,
color
};
};
/**
* Base hook for Badge component, which manages state related to slots structure and ARIA attributes.
*
* @param props - User provided props to the Badge component.
* @param ref - User provided ref to be passed to the Badge component.
*/ export const useBadgeBase_unstable = (props, ref)=>{
const { iconPosition = 'before' } = props;
return {
iconPosition,
components: {
root: 'div',
icon: 'span'
},
root: slot.always(getIntrinsicElementProps('div', {
ref,
...props
}), {
elementType: 'div'
}),
icon: slot.optional(props.icon, {
elementType: 'span'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Badge/useBadge.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { BadgeBaseProps, BadgeBaseState, BadgeProps, BadgeState } from './Badge.types';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>): BadgeState => {\n const { shape = 'circular', size = 'medium', appearance = 'filled', color = 'brand', ...badgeProps } = props;\n\n const state = useBadgeBase_unstable(badgeProps, ref as React.Ref<HTMLDivElement>);\n\n return {\n ...state,\n shape,\n size,\n appearance,\n color,\n };\n};\n\n/**\n * Base hook for Badge component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Badge component.\n * @param ref - User provided ref to be passed to the Badge component.\n */\nexport const useBadgeBase_unstable = (props: BadgeBaseProps, ref: React.Ref<HTMLDivElement>): BadgeBaseState => {\n const { iconPosition = 'before' } = props;\n\n return {\n iconPosition,\n components: {\n root: 'div',\n icon: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n icon: slot.optional(props.icon, { elementType: 'span' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBadge_unstable","props","ref","shape","size","appearance","color","badgeProps","state","useBadgeBase_unstable","iconPosition","components","root","icon","always","elementType","optional"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,QAAQ,UAAU,EAAEC,OAAO,QAAQ,EAAEC,aAAa,QAAQ,EAAEC,QAAQ,OAAO,EAAE,GAAGC,YAAY,GAAGN;IAEvG,MAAMO,QAAQC,sBAAsBF,YAAYL;IAEhD,OAAO;QACL,GAAGM,KAAK;QACRL;QACAC;QACAC;QACAC;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,wBAAwB,CAACR,OAAuBC;IAC3D,MAAM,EAAEQ,eAAe,QAAQ,EAAE,GAAGT;IAEpC,OAAO;QACLS;QACAC,YAAY;YACVC,MAAM;YACNC,MAAM;QACR;QACAD,MAAMb,KAAKe,MAAM,CACfhB,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEc,aAAa;QAAM;QAEvBF,MAAMd,KAAKiB,QAAQ,CAACf,MAAMY,IAAI,EAAE;YAAEE,aAAa;QAAO;IACxD;AACF,EAAE"}

View File

@@ -0,0 +1,344 @@
'use client';
import * as React from 'react';
import { shorthands, __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const badgeClassNames = {
root: 'fui-Badge',
icon: 'fui-Badge__icon'
};
// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
const textPadding = tokens.spacingHorizontalXXS;
const useRootClassName = /*#__PURE__*/__resetStyles("r1iycov", "r115jdol", [".r1iycov{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r1iycov::after{content:\"\";position:absolute;top:0;left:0;bottom:0;right:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}", ".r115jdol{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;position:relative;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase200);height:20px;min-width:20px;padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));border-radius:var(--borderRadiusCircular);border-color:var(--colorTransparentStroke);}", ".r115jdol::after{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;border-style:solid;border-color:inherit;border-width:var(--strokeWidthThin);border-radius:inherit;}"]);
const useRootStyles = /*#__PURE__*/__styles({
fontSmallToTiny: {
Bahqtrf: "fk6fouc",
Be2twd7: "f13mqy1h",
Bhrd7zp: "fl43uef",
Bg96gwp: "fcpl73t"
},
tiny: {
a9b677: "f16dn6v3",
Bqenvij: "f3mu39s",
Be2twd7: "f130uwy9",
Bg96gwp: "fod1mrr",
Bf4jedk: "f18p0k4z",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f19jm9xf"
},
"extra-small": {
a9b677: "fpd43o0",
Bqenvij: "f30q22z",
Be2twd7: "f1tccstq",
Bg96gwp: "f1y3arg5",
Bf4jedk: "f18p0k4z",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f19jm9xf"
},
small: {
Bf4jedk: "fq2vo04",
Bqenvij: "fd461yt",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fupdldz"
},
medium: {},
large: {
Bf4jedk: "f17fgpbq",
Bqenvij: "frvgh55",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1996nqw"
},
"extra-large": {
Bf4jedk: "fwbmr0d",
Bqenvij: "f1d2rq10",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fty64o7"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw"
},
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5"
},
roundedSmallToTiny: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fq9zq91"
},
circular: {},
borderGhost: {
ap17g6: "f10ludwy"
},
filled: {},
"filled-brand": {
De3pzq: "ffp7eso",
sj55zd: "f1phragk"
},
"filled-danger": {
De3pzq: "fdl5y0r",
sj55zd: "f1phragk"
},
"filled-important": {
De3pzq: "f1c73kur",
sj55zd: "fr0bkrk"
},
"filled-informative": {
De3pzq: "f3vzo32",
sj55zd: "f11d4kpn"
},
"filled-severe": {
De3pzq: "f1s438gw",
sj55zd: "f1phragk"
},
"filled-subtle": {
De3pzq: "fxugw4r",
sj55zd: "f19n0e5"
},
"filled-success": {
De3pzq: "flxk52p",
sj55zd: "f1phragk"
},
"filled-warning": {
De3pzq: "ffq97bm",
sj55zd: "ff5vbop"
},
ghost: {},
"ghost-brand": {
sj55zd: "f16muhyy"
},
"ghost-danger": {
sj55zd: "f1whyuy6"
},
"ghost-important": {
sj55zd: "f19n0e5"
},
"ghost-informative": {
sj55zd: "f11d4kpn"
},
"ghost-severe": {
sj55zd: "f1l8vj45"
},
"ghost-subtle": {
sj55zd: "fonrgv7"
},
"ghost-success": {
sj55zd: "f1m7fhi8"
},
"ghost-warning": {
sj55zd: "fpti2h4"
},
outline: {
g2u3we: "f23ftbb",
h3c5rm: ["f1gkuv52", "f1p1bl80"],
B9xav0g: "fioka3i",
zhjwy3: ["f1p1bl80", "f1gkuv52"]
},
"outline-brand": {
sj55zd: "f16muhyy"
},
"outline-danger": {
sj55zd: "f1whyuy6",
g2u3we: "fyqpifd",
h3c5rm: ["f3ukxca", "f1k7dugc"],
B9xav0g: "f1njxb2b",
zhjwy3: ["f1k7dugc", "f3ukxca"]
},
"outline-important": {
sj55zd: "f11d4kpn",
g2u3we: "fq0vr37",
h3c5rm: ["f1byw159", "f11cr0be"],
B9xav0g: "f1c1zstj",
zhjwy3: ["f11cr0be", "f1byw159"]
},
"outline-informative": {
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: ["f7pw515", "fw35ms5"],
B9xav0g: "frpde29",
zhjwy3: ["fw35ms5", "f7pw515"]
},
"outline-severe": {
sj55zd: "f1l8vj45"
},
"outline-subtle": {
sj55zd: "fonrgv7"
},
"outline-success": {
sj55zd: "f1m7fhi8",
g2u3we: "f1mmhl11",
h3c5rm: ["f1tjpp2f", "f1ocn5n7"],
B9xav0g: "f1gjv25d",
zhjwy3: ["f1ocn5n7", "f1tjpp2f"]
},
"outline-warning": {
sj55zd: "fpti2h4"
},
tint: {},
"tint-brand": {
De3pzq: "f16xkysk",
sj55zd: "faj9fo0",
g2u3we: "f161y7kd",
h3c5rm: ["f1c8dzaj", "f1sl6hi9"],
B9xav0g: "f1619yhw",
zhjwy3: ["f1sl6hi9", "f1c8dzaj"]
},
"tint-danger": {
De3pzq: "ff0poqj",
sj55zd: "f1hcrxcs",
g2u3we: "f1oqjm8o",
h3c5rm: ["fkgrb8g", "frb5wm0"],
B9xav0g: "f1iai1ph",
zhjwy3: ["frb5wm0", "fkgrb8g"]
},
"tint-important": {
De3pzq: "f945g0u",
sj55zd: "fr0bkrk",
g2u3we: "fghlq4f",
h3c5rm: ["f1gn591s", "fjscplz"],
B9xav0g: "fb073pr",
zhjwy3: ["fjscplz", "f1gn591s"]
},
"tint-informative": {
De3pzq: "f1ctqxl6",
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: ["f7pw515", "fw35ms5"],
B9xav0g: "frpde29",
zhjwy3: ["fw35ms5", "f7pw515"]
},
"tint-severe": {
De3pzq: "f1xzsg4",
sj55zd: "f1k5f75o",
g2u3we: "fxy9dsj",
h3c5rm: ["f54u6j2", "fcm23ze"],
B9xav0g: "f4vf0uq",
zhjwy3: ["fcm23ze", "f54u6j2"]
},
"tint-subtle": {
De3pzq: "fxugw4r",
sj55zd: "f11d4kpn",
g2u3we: "f68mrw8",
h3c5rm: ["f7pw515", "fw35ms5"],
B9xav0g: "frpde29",
zhjwy3: ["fw35ms5", "f7pw515"]
},
"tint-success": {
De3pzq: "f2vsrz6",
sj55zd: "ffmvakt",
g2u3we: "fdmic9h",
h3c5rm: ["f196y6m", "fetptd8"],
B9xav0g: "f1pev5xq",
zhjwy3: ["fetptd8", "f196y6m"]
},
"tint-warning": {
De3pzq: "f10s6hli",
sj55zd: "f42v8de",
g2u3we: "fn9i3n",
h3c5rm: ["f1aw8cx4", "f51if14"],
B9xav0g: "fvq8iai",
zhjwy3: ["f51if14", "f1aw8cx4"]
}
}, {
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f16dn6v3{width:6px;}", ".f3mu39s{height:6px;}", ".f130uwy9{font-size:4px;}", ".fod1mrr{line-height:4px;}", ".f18p0k4z{min-width:unset;}", [".f19jm9xf{padding:unset;}", {
p: -1
}], ".fpd43o0{width:10px;}", ".f30q22z{height:10px;}", ".f1tccstq{font-size:6px;}", ".f1y3arg5{line-height:6px;}", [".f19jm9xf{padding:unset;}", {
p: -1
}], ".fq2vo04{min-width:16px;}", ".fd461yt{height:16px;}", [".fupdldz{padding:0 calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", {
p: -1
}], ".f17fgpbq{min-width:24px;}", ".frvgh55{height:24px;}", [".f1996nqw{padding:0 calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", {
p: -1
}], ".fwbmr0d{min-width:32px;}", ".f1d2rq10{height:32px;}", [".fty64o7{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}", {
p: -1
}], [".f1fabniw{border-radius:var(--borderRadiusNone);}", {
p: -1
}], [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
p: -1
}], ".f10ludwy::after{display:none;}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1c73kur{background-color:var(--colorNeutralForeground1);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f3vzo32{background-color:var(--colorNeutralBackground5);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}", ".ffq97bm{background-color:var(--colorPaletteYellowBackground3);}", ".ff5vbop{color:var(--colorNeutralForeground1Static);}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f1whyuy6{color:var(--colorPaletteRedForeground3);}", ".f1l8vj45{color:var(--colorPaletteDarkOrangeForeground3);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}", ".fpti2h4{color:var(--colorPaletteYellowForeground2);}", ".f23ftbb{border-top-color:currentColor;}", ".f1gkuv52{border-right-color:currentColor;}", ".f1p1bl80{border-left-color:currentColor;}", ".fioka3i{border-bottom-color:currentColor;}", ".fyqpifd{border-top-color:var(--colorPaletteRedBorder2);}", ".f3ukxca{border-right-color:var(--colorPaletteRedBorder2);}", ".f1k7dugc{border-left-color:var(--colorPaletteRedBorder2);}", ".f1njxb2b{border-bottom-color:var(--colorPaletteRedBorder2);}", ".fq0vr37{border-top-color:var(--colorNeutralStrokeAccessible);}", ".f1byw159{border-right-color:var(--colorNeutralStrokeAccessible);}", ".f11cr0be{border-left-color:var(--colorNeutralStrokeAccessible);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".f1mmhl11{border-top-color:var(--colorPaletteGreenBorder2);}", ".f1tjpp2f{border-right-color:var(--colorPaletteGreenBorder2);}", ".f1ocn5n7{border-left-color:var(--colorPaletteGreenBorder2);}", ".f1gjv25d{border-bottom-color:var(--colorPaletteGreenBorder2);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".faj9fo0{color:var(--colorBrandForeground2);}", ".f161y7kd{border-top-color:var(--colorBrandStroke2);}", ".f1c8dzaj{border-right-color:var(--colorBrandStroke2);}", ".f1sl6hi9{border-left-color:var(--colorBrandStroke2);}", ".f1619yhw{border-bottom-color:var(--colorBrandStroke2);}", ".ff0poqj{background-color:var(--colorPaletteRedBackground1);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1oqjm8o{border-top-color:var(--colorPaletteRedBorder1);}", ".fkgrb8g{border-right-color:var(--colorPaletteRedBorder1);}", ".frb5wm0{border-left-color:var(--colorPaletteRedBorder1);}", ".f1iai1ph{border-bottom-color:var(--colorPaletteRedBorder1);}", ".f945g0u{background-color:var(--colorNeutralForeground3);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f1xzsg4{background-color:var(--colorPaletteDarkOrangeBackground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".fxy9dsj{border-top-color:var(--colorPaletteDarkOrangeBorder1);}", ".f54u6j2{border-right-color:var(--colorPaletteDarkOrangeBorder1);}", ".fcm23ze{border-left-color:var(--colorPaletteDarkOrangeBorder1);}", ".f4vf0uq{border-bottom-color:var(--colorPaletteDarkOrangeBorder1);}", ".f2vsrz6{background-color:var(--colorPaletteGreenBackground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}", ".fdmic9h{border-top-color:var(--colorPaletteGreenBorder1);}", ".f196y6m{border-right-color:var(--colorPaletteGreenBorder1);}", ".fetptd8{border-left-color:var(--colorPaletteGreenBorder1);}", ".f1pev5xq{border-bottom-color:var(--colorPaletteGreenBorder1);}", ".f10s6hli{background-color:var(--colorPaletteYellowBackground1);}", ".f42v8de{color:var(--colorPaletteYellowForeground1);}", ".fn9i3n{border-top-color:var(--colorPaletteYellowBorder1);}", ".f1aw8cx4{border-right-color:var(--colorPaletteYellowBorder1);}", ".f51if14{border-left-color:var(--colorPaletteYellowBorder1);}", ".fvq8iai{border-bottom-color:var(--colorPaletteYellowBorder1);}"]
});
const useIconRootClassName = /*#__PURE__*/__resetStyles("rttl5z0", null, [".rttl5z0{display:flex;line-height:1;margin:0 calc(-1 * var(--spacingHorizontalXXS));font-size:12px;}"]);
const useIconStyles = /*#__PURE__*/__styles({
beforeText: {
t21cq0: ["f1t8l4o1", "f11juvx6"]
},
afterText: {
Frg6f3: ["f11juvx6", "f1t8l4o1"]
},
beforeTextXL: {
t21cq0: ["f1rs9grm", "f1kwmkpi"]
},
afterTextXL: {
Frg6f3: ["f1kwmkpi", "f1rs9grm"]
},
tiny: {
Be2twd7: "f1tccstq"
},
"extra-small": {
Be2twd7: "fnmn6fi"
},
small: {
Be2twd7: "f1ugzwwg"
},
medium: {},
large: {
Be2twd7: "f4ybsrx"
},
"extra-large": {
Be2twd7: "fe5j1ua"
}
}, {
d: [".f1t8l4o1{margin-right:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f11juvx6{margin-left:calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));}", ".f1rs9grm{margin-right:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1kwmkpi{margin-left:calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));}", ".f1tccstq{font-size:6px;}", ".fnmn6fi{font-size:10px;}", ".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
});
/**
* Applies style classnames to slots
*/
export const useBadgeStyles_unstable = state => {
'use no memo';
const rootClassName = useRootClassName();
const rootStyles = useRootStyles();
const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
const iconRootClassName = useIconRootClassName();
const iconStyles = useIconStyles();
if (state.icon) {
let iconPositionClass;
// Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
if (React.Children.toArray(state.root.children).length > 0) {
if (state.size === 'extra-large') {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
} else {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
}
}
state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,295 @@
'use client';
import * as React from 'react';
import { shorthands, makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import { tokens, typographyStyles } from '@fluentui/react-theme';
export const badgeClassNames = {
root: 'fui-Badge',
icon: 'fui-Badge__icon'
};
// The text content of the badge has additional horizontal padding, but there is no `text` slot to add that padding to.
// Instead, add extra padding to the root, and a negative margin on the icon to "remove" the extra padding on the icon.
const textPadding = tokens.spacingHorizontalXXS;
const useRootClassName = makeResetStyles({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
...typographyStyles.caption1Strong,
height: '20px',
minWidth: '20px',
padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,
borderRadius: tokens.borderRadiusCircular,
// Use a transparent stroke (rather than no border) so the border is visible in high contrast
borderColor: tokens.colorTransparentStroke,
'::after': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
borderStyle: 'solid',
borderColor: 'inherit',
borderWidth: tokens.strokeWidthThin,
borderRadius: 'inherit'
}
});
const useRootStyles = makeStyles({
fontSmallToTiny: {
...typographyStyles.caption2Strong
},
// size
tiny: {
width: '6px',
height: '6px',
fontSize: '4px',
lineHeight: '4px',
minWidth: 'unset',
padding: 'unset'
},
'extra-small': {
width: '10px',
height: '10px',
fontSize: '6px',
lineHeight: '6px',
minWidth: 'unset',
padding: 'unset'
},
small: {
minWidth: '16px',
height: '16px',
padding: `0 calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
},
medium: {
},
large: {
minWidth: '24px',
height: '24px',
padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`
},
'extra-large': {
minWidth: '32px',
height: '32px',
padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`
},
// shape
square: {
borderRadius: tokens.borderRadiusNone
},
rounded: {
borderRadius: tokens.borderRadiusMedium
},
roundedSmallToTiny: {
borderRadius: tokens.borderRadiusSmall
},
circular: {
},
// hide the boder when appearance is "ghost"
borderGhost: {
// The border is applied in an ::after pseudo-element because it should not affect layout.
// The padding and size of the badge should be the same regardless of whether or not it has a border.
'::after': {
display: 'none'
}
},
// appearance: filled
filled: {
},
'filled-brand': {
backgroundColor: tokens.colorBrandBackground,
color: tokens.colorNeutralForegroundOnBrand
},
'filled-danger': {
backgroundColor: tokens.colorPaletteRedBackground3,
color: tokens.colorNeutralForegroundOnBrand
},
'filled-important': {
backgroundColor: tokens.colorNeutralForeground1,
color: tokens.colorNeutralBackground1
},
'filled-informative': {
backgroundColor: tokens.colorNeutralBackground5,
color: tokens.colorNeutralForeground3
},
'filled-severe': {
backgroundColor: tokens.colorPaletteDarkOrangeBackground3,
color: tokens.colorNeutralForegroundOnBrand
},
'filled-subtle': {
backgroundColor: tokens.colorNeutralBackground1,
color: tokens.colorNeutralForeground1
},
'filled-success': {
backgroundColor: tokens.colorPaletteGreenBackground3,
color: tokens.colorNeutralForegroundOnBrand
},
'filled-warning': {
backgroundColor: tokens.colorPaletteYellowBackground3,
color: tokens.colorNeutralForeground1Static
},
// appearance: ghost
ghost: {
},
'ghost-brand': {
color: tokens.colorBrandForeground1
},
'ghost-danger': {
color: tokens.colorPaletteRedForeground3
},
'ghost-important': {
color: tokens.colorNeutralForeground1
},
'ghost-informative': {
color: tokens.colorNeutralForeground3
},
'ghost-severe': {
color: tokens.colorPaletteDarkOrangeForeground3
},
'ghost-subtle': {
color: tokens.colorNeutralForegroundStaticInverted
},
'ghost-success': {
color: tokens.colorPaletteGreenForeground3
},
'ghost-warning': {
color: tokens.colorPaletteYellowForeground2
},
// appearance: outline
outline: {
...shorthands.borderColor('currentColor')
},
'outline-brand': {
color: tokens.colorBrandForeground1
},
'outline-danger': {
color: tokens.colorPaletteRedForeground3,
...shorthands.borderColor(tokens.colorPaletteRedBorder2)
},
'outline-important': {
color: tokens.colorNeutralForeground3,
...shorthands.borderColor(tokens.colorNeutralStrokeAccessible)
},
'outline-informative': {
color: tokens.colorNeutralForeground3,
...shorthands.borderColor(tokens.colorNeutralStroke2)
},
'outline-severe': {
color: tokens.colorPaletteDarkOrangeForeground3
},
'outline-subtle': {
color: tokens.colorNeutralForegroundStaticInverted
},
'outline-success': {
color: tokens.colorPaletteGreenForeground3,
...shorthands.borderColor(tokens.colorPaletteGreenBorder2)
},
'outline-warning': {
color: tokens.colorPaletteYellowForeground2
},
// appearance: tint
tint: {
},
'tint-brand': {
backgroundColor: tokens.colorBrandBackground2,
color: tokens.colorBrandForeground2,
...shorthands.borderColor(tokens.colorBrandStroke2)
},
'tint-danger': {
backgroundColor: tokens.colorPaletteRedBackground1,
color: tokens.colorPaletteRedForeground1,
...shorthands.borderColor(tokens.colorPaletteRedBorder1)
},
'tint-important': {
backgroundColor: tokens.colorNeutralForeground3,
color: tokens.colorNeutralBackground1,
...shorthands.borderColor(tokens.colorTransparentStroke)
},
'tint-informative': {
backgroundColor: tokens.colorNeutralBackground4,
color: tokens.colorNeutralForeground3,
...shorthands.borderColor(tokens.colorNeutralStroke2)
},
'tint-severe': {
backgroundColor: tokens.colorPaletteDarkOrangeBackground1,
color: tokens.colorPaletteDarkOrangeForeground1,
...shorthands.borderColor(tokens.colorPaletteDarkOrangeBorder1)
},
'tint-subtle': {
backgroundColor: tokens.colorNeutralBackground1,
color: tokens.colorNeutralForeground3,
...shorthands.borderColor(tokens.colorNeutralStroke2)
},
'tint-success': {
backgroundColor: tokens.colorPaletteGreenBackground1,
color: tokens.colorPaletteGreenForeground1,
...shorthands.borderColor(tokens.colorPaletteGreenBorder1)
},
'tint-warning': {
backgroundColor: tokens.colorPaletteYellowBackground1,
color: tokens.colorPaletteYellowForeground1,
...shorthands.borderColor(tokens.colorPaletteYellowBorder1)
}
});
const useIconRootClassName = makeResetStyles({
display: 'flex',
lineHeight: '1',
margin: `0 calc(-1 * ${textPadding})`,
fontSize: '12px'
});
const useIconStyles = makeStyles({
beforeText: {
marginRight: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
},
afterText: {
marginLeft: `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`
},
beforeTextXL: {
marginRight: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`
},
afterTextXL: {
marginLeft: `calc(${tokens.spacingHorizontalXS} + ${textPadding})`
},
// size
tiny: {
fontSize: '6px'
},
'extra-small': {
fontSize: '10px'
},
small: {
fontSize: '12px'
},
medium: {
},
large: {
fontSize: '16px'
},
'extra-large': {
fontSize: '20px'
}
});
/**
* Applies style classnames to slots
*/ export const useBadgeStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
const rootStyles = useRootStyles();
const smallToTiny = state.size === 'small' || state.size === 'extra-small' || state.size === 'tiny';
state.root.className = mergeClasses(badgeClassNames.root, rootClassName, smallToTiny && rootStyles.fontSmallToTiny, rootStyles[state.size], rootStyles[state.shape], state.shape === 'rounded' && smallToTiny && rootStyles.roundedSmallToTiny, state.appearance === 'ghost' && rootStyles.borderGhost, rootStyles[state.appearance], rootStyles[`${state.appearance}-${state.color}`], state.root.className);
const iconRootClassName = useIconRootClassName();
const iconStyles = useIconStyles();
if (state.icon) {
let iconPositionClass;
// Handle the edge case where children is 0 (a falsy value that should still render text and have margin)
if (React.Children.toArray(state.root.children).length > 0) {
if (state.size === 'extra-large') {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextXL : iconStyles.beforeTextXL;
} else {
iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterText : iconStyles.beforeText;
}
}
state.icon.className = mergeClasses(badgeClassNames.icon, iconRootClassName, iconPositionClass, iconStyles[state.size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -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';

View File

@@ -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"}

View File

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

View File

@@ -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"}

View File

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

View File

@@ -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"}

View File

@@ -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;
};

View File

@@ -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"}

View File

@@ -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);
};

View File

@@ -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":[]}

View File

@@ -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);
};

View File

@@ -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"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/PresenceBadge.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePresenceBadge_unstable } from './usePresenceBadge';\nimport { usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { renderBadge_unstable } from '../../Badge';\nimport type { PresenceBadgeProps } from './PresenceBadge.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled Badge, using the `useBadge_unstable` hook.\n */\nexport const PresenceBadge: ForwardRefComponent<PresenceBadgeProps> = React.forwardRef((props, ref) => {\n const state = usePresenceBadge_unstable(props, ref);\n\n usePresenceBadgeStyles_unstable(state);\n\n useCustomStyleHook_unstable('usePresenceBadgeStyles_unstable')(state);\n\n return renderBadge_unstable(state);\n});\n\nPresenceBadge.displayName = 'PresenceBadge';\n"],"names":["React","usePresenceBadge_unstable","usePresenceBadgeStyles_unstable","useCustomStyleHook_unstable","renderBadge_unstable","PresenceBadge","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,cAAc;AAInD;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAE/CN,gCAAgCO;IAEhCN,4BAA4B,mCAAmCM;IAE/D,OAAOL,qBAAqBK;AAC9B,GAAG;AAEHJ,cAAcK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/PresenceBadge.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { BadgeProps, BadgeState, BadgeSlots } from '../Badge/Badge.types';\n\nexport type PresenceBadgeStatus =\n | 'busy'\n | 'out-of-office'\n | 'away'\n | 'available'\n | 'offline'\n | 'do-not-disturb'\n | 'unknown'\n | 'blocked';\n\nexport type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &\n Pick<BadgeProps, 'size'> & {\n /**\n * Represents several status\n * @default available\n */\n status?: PresenceBadgeStatus;\n\n /**\n * Modifies the display to indicate that the user is out of office.\n * This can be combined with any status to display an out-of-office version of that status\n * @default false\n */\n outOfOffice?: boolean;\n };\n\nexport type PresenceBadgeState = ComponentState<BadgeSlots> &\n BadgeState &\n Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;\n\nexport type PresenceBadgeBaseProps = Omit<PresenceBadgeProps, 'size'>;\n\nexport type PresenceBadgeBaseState = Omit<PresenceBadgeState, 'appearance' | 'color' | 'shape' | 'size'>;\n"],"names":[],"mappings":"AAmCA,WAAyG"}

View File

@@ -0,0 +1,4 @@
export { PresenceBadge } from './PresenceBadge';
export { usePresenceBadge_unstable, usePresenceBadgeBase_unstable } from './usePresenceBadge';
export { presenceBadgeClassNames, usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';
export { presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceAwayRegular, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular } from './presenceIcons';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceBadge/index.ts"],"sourcesContent":["export { PresenceBadge } from './PresenceBadge';\nexport type {\n PresenceBadgeBaseProps,\n PresenceBadgeBaseState,\n PresenceBadgeProps,\n PresenceBadgeState,\n PresenceBadgeStatus,\n} from './PresenceBadge.types';\nexport { usePresenceBadge_unstable, usePresenceBadgeBase_unstable } from './usePresenceBadge';\nexport { presenceBadgeClassNames, usePresenceBadgeStyles_unstable } from './usePresenceBadgeStyles.styles';\nexport {\n presenceAvailableFilled,\n presenceAvailableRegular,\n presenceAwayFilled,\n presenceAwayRegular,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndFilled,\n presenceDndRegular,\n presenceOfflineRegular,\n presenceOofRegular,\n presenceUnknownRegular,\n} from './presenceIcons';\n"],"names":["PresenceBadge","usePresenceBadge_unstable","usePresenceBadgeBase_unstable","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","presenceAvailableFilled","presenceAvailableRegular","presenceAwayFilled","presenceAwayRegular","presenceBlockedRegular","presenceBusyFilled","presenceDndFilled","presenceDndRegular","presenceOfflineRegular","presenceOofRegular","presenceUnknownRegular"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAQhD,SAASC,yBAAyB,EAAEC,6BAA6B,QAAQ,qBAAqB;AAC9F,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SACEC,uBAAuB,EACvBC,wBAAwB,EACxBC,kBAAkB,EAClBC,mBAAmB,EACnBC,sBAAsB,EACtBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,kBAAkB,EAClBC,sBAAsB,QACjB,kBAAkB"}

View File

@@ -0,0 +1,134 @@
import * as React from 'react';
import { PresenceAvailable10Regular, PresenceAvailable12Regular, PresenceAvailable16Regular, PresenceAvailable20Regular, PresenceAvailable10Filled, PresenceAvailable12Filled, PresenceAvailable16Filled, PresenceAvailable20Filled, PresenceAway10Regular, PresenceAway12Regular, PresenceAway16Regular, PresenceAway20Regular, PresenceAway10Filled, PresenceAway12Filled, PresenceAway16Filled, PresenceAway20Filled, PresenceBlocked10Regular, PresenceBlocked12Regular, PresenceBlocked16Regular, PresenceBlocked20Regular, PresenceBusy10Filled, PresenceBusy12Filled, PresenceBusy16Filled, PresenceBusy20Filled, PresenceDnd10Regular, PresenceDnd12Regular, PresenceDnd16Regular, PresenceDnd20Regular, PresenceDnd10Filled, PresenceDnd12Filled, PresenceDnd16Filled, PresenceDnd20Filled, PresenceOof10Regular, PresenceOof12Regular, PresenceOof16Regular, PresenceOof20Regular, PresenceOffline10Regular, PresenceOffline12Regular, PresenceOffline16Regular, PresenceOffline20Regular, PresenceUnknown10Regular, PresenceUnknown12Regular, PresenceUnknown16Regular, PresenceUnknown20Regular } from '@fluentui/react-icons';
export const presenceAwayRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceAway10Regular,
'extra-small': PresenceAway10Regular,
small: PresenceAway12Regular,
medium: PresenceAway16Regular,
large: PresenceAway20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceAway20Regular
};
export const presenceAwayFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceAway10Filled,
'extra-small': PresenceAway10Filled,
small: PresenceAway12Filled,
medium: PresenceAway16Filled,
large: PresenceAway20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceAway20Filled
};
export const presenceAvailableRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceAvailable10Regular,
'extra-small': PresenceAvailable10Regular,
small: PresenceAvailable12Regular,
medium: PresenceAvailable16Regular,
large: PresenceAvailable20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceAvailable20Regular
};
export const presenceAvailableFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceAvailable10Filled,
'extra-small': PresenceAvailable10Filled,
small: PresenceAvailable12Filled,
medium: PresenceAvailable16Filled,
large: PresenceAvailable20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceAvailable20Filled
};
export const presenceBlockedRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceBlocked10Regular,
'extra-small': PresenceBlocked10Regular,
small: PresenceBlocked12Regular,
medium: PresenceBlocked16Regular,
large: PresenceBlocked20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceBlocked20Regular
};
export const presenceBusyFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceBusy10Filled,
'extra-small': PresenceBusy10Filled,
small: PresenceBusy12Filled,
medium: PresenceBusy16Filled,
large: PresenceBusy20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceBusy20Filled
};
export const presenceDndFilled = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceDnd10Filled,
'extra-small': PresenceDnd10Filled,
small: PresenceDnd12Filled,
medium: PresenceDnd16Filled,
large: PresenceDnd20Filled,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceDnd20Filled
};
export const presenceDndRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceDnd10Regular,
'extra-small': PresenceDnd10Regular,
small: PresenceDnd12Regular,
medium: PresenceDnd16Regular,
large: PresenceDnd20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceDnd20Regular
};
export const presenceOofRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceOof10Regular,
'extra-small': PresenceOof10Regular,
small: PresenceOof12Regular,
medium: PresenceOof16Regular,
large: PresenceOof20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceOof20Regular
};
export const presenceOfflineRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceOffline10Regular,
'extra-small': PresenceOffline10Regular,
small: PresenceOffline12Regular,
medium: PresenceOffline16Regular,
large: PresenceOffline20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceOffline20Regular
};
export const presenceUnknownRegular = {
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
tiny: PresenceUnknown10Regular,
'extra-small': PresenceUnknown10Regular,
small: PresenceUnknown12Regular,
medium: PresenceUnknown16Regular,
large: PresenceUnknown20Regular,
// FIXME not all presence icon sizes are available
// https://github.com/microsoft/fluentui/issues/20650
'extra-large': PresenceUnknown20Regular
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,83 @@
'use client';
import * as React from 'react';
import { slot } from '@fluentui/react-utilities';
import { presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, presenceOfflineRegular, presenceOofRegular, presenceUnknownRegular } from './presenceIcons';
import { useBadgeBase_unstable } from '../Badge/index';
const iconMap = (status, outOfOffice, size)=>{
switch(status){
case 'available':
return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size];
case 'away':
return outOfOffice ? presenceOofRegular[size] : presenceAwayFilled[size];
case 'blocked':
return presenceBlockedRegular[size];
case 'busy':
return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size];
case 'do-not-disturb':
return outOfOffice ? presenceDndRegular[size] : presenceDndFilled[size];
case 'offline':
return outOfOffice ? presenceOofRegular[size] : presenceOfflineRegular[size];
case 'out-of-office':
return presenceOofRegular[size];
case 'unknown':
return presenceUnknownRegular[size];
}
};
export const DEFAULT_STRINGS = {
busy: 'busy',
'out-of-office': 'out of office',
away: 'away',
available: 'available',
offline: 'offline',
'do-not-disturb': 'do not disturb',
unknown: 'unknown',
blocked: 'blocked'
};
/**
* Returns the props and state required to render the component
*/ export const usePresenceBadge_unstable = (props, ref)=>{
const { size = 'medium', outOfOffice = false, ...baseProps } = props;
var _props_status;
const status = (_props_status = props.status) !== null && _props_status !== void 0 ? _props_status : 'available';
const IconElement = iconMap(status, outOfOffice, size);
const state = {
...usePresenceBadgeBase_unstable(baseProps, ref),
appearance: 'filled',
color: 'brand',
shape: 'circular',
size,
outOfOffice
};
if (state.icon) {
var _state_icon;
var _children;
(_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ React.createElement(IconElement, null);
}
return state;
};
/**
* Base hook for PresenceBadge component, which manages state related to presence status and ARIA attributes.
* Note: size is excluded from BaseProps as it is a design prop; icon selection uses the 'medium' size default.
* To render size-specific icons, use the full usePresenceBadge_unstable hook.
*
* @param props - User provided props to the PresenceBadge component.
* @param ref - User provided ref to be passed to the PresenceBadge component.
*/ export const usePresenceBadgeBase_unstable = (props, ref)=>{
const { status = 'available', outOfOffice = false } = props;
const statusText = DEFAULT_STRINGS[status];
const oofText = props.outOfOffice && props.status !== 'out-of-office' ? ` ${DEFAULT_STRINGS['out-of-office']}` : '';
const state = {
...useBadgeBase_unstable({
'aria-label': statusText + oofText,
role: 'img',
...props,
icon: slot.optional(props.icon, {
renderByDefault: true,
elementType: 'span'
})
}, ref),
status,
outOfOffice
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,85 @@
'use client';
import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const presenceBadgeClassNames = {
root: 'fui-PresenceBadge',
icon: 'fui-PresenceBadge__icon'
};
const getIsBusy = status => {
if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
return true;
}
return false;
};
const useRootClassName = /*#__PURE__*/__resetStyles("r832ydo", null, [".r832ydo{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border-radius:var(--borderRadiusCircular);background-color:var(--colorNeutralBackground1);padding:1px;background-clip:content-box;}"]);
const useIconClassName = /*#__PURE__*/__resetStyles("r11ag4qr", null, [".r11ag4qr{display:flex;margin:-1px;}"]);
const useStyles = /*#__PURE__*/__styles({
statusBusy: {
sj55zd: "fvi85wt"
},
statusAway: {
sj55zd: "f14k8a89"
},
statusAvailable: {
sj55zd: "fqa5hgp"
},
statusOffline: {
sj55zd: "f11d4kpn"
},
statusOutOfOffice: {
sj55zd: "fdce8r3"
},
statusUnknown: {
sj55zd: "f11d4kpn"
},
outOfOffice: {
sj55zd: "fr0bkrk"
},
outOfOfficeAvailable: {
sj55zd: "fqa5hgp"
},
outOfOfficeBusy: {
sj55zd: "fvi85wt"
},
outOfOfficeUnknown: {
sj55zd: "f11d4kpn"
},
tiny: {
Bubjx69: "f9ikmtg",
a9b677: "f16dn6v3",
B2eet1l: "f1w2irj7",
B5pe6w7: "fab5kbq",
p4uzdd: "f1ms1d91"
},
large: {
Bubjx69: "f9ikmtg",
a9b677: "f64fuq3",
B5pe6w7: "f1vfi1yj",
p4uzdd: "f15s34gz"
},
extraLarge: {
Bubjx69: "f9ikmtg",
a9b677: "f1w9dchk",
B5pe6w7: "f14efy9b",
p4uzdd: "fhipgdu"
}
}, {
d: [".fvi85wt{color:var(--colorPaletteRedBackground3);}", ".f14k8a89{color:var(--colorPaletteMarigoldBackground3);}", ".fqa5hgp{color:var(--colorPaletteLightGreenForeground3);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fdce8r3{color:var(--colorPaletteBerryForeground3);}", ".fr0bkrk{color:var(--colorNeutralBackground1);}", ".f9ikmtg{aspect-ratio:1;}", ".f16dn6v3{width:6px;}", ".f1w2irj7{background-clip:unset;}", ".fab5kbq svg{width:6px!important;}", ".f1ms1d91 svg{height:6px!important;}", ".f64fuq3{width:20px;}", ".f1vfi1yj svg{width:20px!important;}", ".f15s34gz svg{height:20px!important;}", ".f1w9dchk{width:28px;}", ".f14efy9b svg{width:28px!important;}", ".fhipgdu svg{height:28px!important;}"]
});
/**
* Applies style classnames to slots
*/
export const usePresenceBadgeStyles_unstable = state => {
'use no memo';
const rootClassName = useRootClassName();
const iconClassName = useIconClassName();
const styles = useStyles();
const isBusy = getIsBusy(state.status);
state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
if (state.icon) {
state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,105 @@
'use client';
import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
import { tokens } from '@fluentui/react-theme';
export const presenceBadgeClassNames = {
root: 'fui-PresenceBadge',
icon: 'fui-PresenceBadge__icon'
};
const getIsBusy = (status)=>{
if (status === 'busy' || status === 'do-not-disturb' || status === 'blocked') {
return true;
}
return false;
};
const useRootClassName = makeResetStyles({
display: 'inline-flex',
boxSizing: 'border-box',
alignItems: 'center',
justifyContent: 'center',
borderRadius: tokens.borderRadiusCircular,
backgroundColor: tokens.colorNeutralBackground1,
// The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.
// Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background
// using padding and backgroundClip. The icon has margin: -1px to account for the padding.
// (* except size="tiny", where backgroundClip is unset)
padding: '1px',
backgroundClip: 'content-box'
});
const useIconClassName = makeResetStyles({
display: 'flex',
margin: '-1px'
});
const useStyles = makeStyles({
statusBusy: {
color: tokens.colorPaletteRedBackground3
},
statusAway: {
color: tokens.colorPaletteMarigoldBackground3
},
statusAvailable: {
color: tokens.colorPaletteLightGreenForeground3
},
statusOffline: {
color: tokens.colorNeutralForeground3
},
statusOutOfOffice: {
color: tokens.colorPaletteBerryForeground3
},
statusUnknown: {
color: tokens.colorNeutralForeground3
},
outOfOffice: {
color: tokens.colorNeutralBackground1
},
outOfOfficeAvailable: {
color: tokens.colorPaletteLightGreenForeground3
},
outOfOfficeBusy: {
color: tokens.colorPaletteRedBackground3
},
outOfOfficeUnknown: {
color: tokens.colorNeutralForeground3
},
// Icons are not resizeable, and these sizes are currently missing
// use `!important` to size the currently available icons to the missing ones
//
tiny: {
aspectRatio: '1',
width: '6px',
backgroundClip: 'unset',
'& svg': {
width: '6px !important',
height: '6px !important'
}
},
large: {
aspectRatio: '1',
width: '20px',
'& svg': {
width: '20px !important',
height: '20px !important'
}
},
extraLarge: {
aspectRatio: '1',
width: '28px',
'& svg': {
width: '28px !important',
height: '28px !important'
}
}
});
/**
* Applies style classnames to slots
*/ export const usePresenceBadgeStyles_unstable = (state)=>{
'use no memo';
const rootClassName = useRootClassName();
const iconClassName = useIconClassName();
const styles = useStyles();
const isBusy = getIsBusy(state.status);
state.root.className = mergeClasses(presenceBadgeClassNames.root, rootClassName, isBusy && styles.statusBusy, state.status === 'away' && styles.statusAway, state.status === 'available' && styles.statusAvailable, state.status === 'offline' && styles.statusOffline, state.status === 'out-of-office' && styles.statusOutOfOffice, state.status === 'unknown' && styles.statusUnknown, state.outOfOffice && styles.outOfOffice, state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable, state.outOfOffice && isBusy && styles.outOfOfficeBusy, state.outOfOffice && (state.status === 'out-of-office' || state.status === 'away' || state.status === 'offline') && styles.statusOutOfOffice, state.outOfOffice && state.status === 'unknown' && styles.outOfOfficeUnknown, state.size === 'tiny' && styles.tiny, state.size === 'large' && styles.large, state.size === 'extra-large' && styles.extraLarge, state.root.className);
if (state.icon) {
state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

3
node_modules/@fluentui/react-badge/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1,3 @@
export { Badge, badgeClassNames, renderBadge_unstable, useBadgeStyles_unstable, useBadge_unstable, useBadgeBase_unstable } from './Badge';
export { PresenceBadge, presenceBadgeClassNames, usePresenceBadgeStyles_unstable, usePresenceBadge_unstable, usePresenceBadgeBase_unstable, presenceAwayRegular, presenceAwayFilled, presenceAvailableRegular, presenceAvailableFilled, presenceBlockedRegular, presenceBusyFilled, presenceDndRegular, presenceDndFilled, presenceOofRegular, presenceOfflineRegular, presenceUnknownRegular } from './PresenceBadge';
export { CounterBadge, counterBadgeClassNames, useCounterBadgeStyles_unstable, useCounterBadge_unstable, useCounterBadgeBase_unstable } from './CounterBadge';

1
node_modules/@fluentui/react-badge/lib/index.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Badge,\n badgeClassNames,\n renderBadge_unstable,\n useBadgeStyles_unstable,\n useBadge_unstable,\n useBadgeBase_unstable,\n} from './Badge';\nexport type { BadgeProps, BadgeSlots, BadgeState, BadgeBaseProps, BadgeBaseState } from './Badge';\nexport {\n PresenceBadge,\n presenceBadgeClassNames,\n usePresenceBadgeStyles_unstable,\n usePresenceBadge_unstable,\n usePresenceBadgeBase_unstable,\n presenceAwayRegular,\n presenceAwayFilled,\n presenceAvailableRegular,\n presenceAvailableFilled,\n presenceBlockedRegular,\n presenceBusyFilled,\n presenceDndRegular,\n presenceDndFilled,\n presenceOofRegular,\n presenceOfflineRegular,\n presenceUnknownRegular,\n} from './PresenceBadge';\nexport type {\n PresenceBadgeProps,\n PresenceBadgeState,\n PresenceBadgeStatus,\n PresenceBadgeBaseProps,\n PresenceBadgeBaseState,\n} from './PresenceBadge';\nexport {\n CounterBadge,\n counterBadgeClassNames,\n useCounterBadgeStyles_unstable,\n useCounterBadge_unstable,\n useCounterBadgeBase_unstable,\n} from './CounterBadge';\nexport type {\n CounterBadgeProps,\n CounterBadgeState,\n CounterBadgeBaseProps,\n CounterBadgeBaseState,\n} from './CounterBadge';\n"],"names":["Badge","badgeClassNames","renderBadge_unstable","useBadgeStyles_unstable","useBadge_unstable","useBadgeBase_unstable","PresenceBadge","presenceBadgeClassNames","usePresenceBadgeStyles_unstable","usePresenceBadge_unstable","usePresenceBadgeBase_unstable","presenceAwayRegular","presenceAwayFilled","presenceAvailableRegular","presenceAvailableFilled","presenceBlockedRegular","presenceBusyFilled","presenceDndRegular","presenceDndFilled","presenceOofRegular","presenceOfflineRegular","presenceUnknownRegular","CounterBadge","counterBadgeClassNames","useCounterBadgeStyles_unstable","useCounterBadge_unstable","useCounterBadgeBase_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,UAAU;AAEjB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,6BAA6B,EAC7BC,mBAAmB,EACnBC,kBAAkB,EAClBC,wBAAwB,EACxBC,uBAAuB,EACvBC,sBAAsB,EACtBC,kBAAkB,EAClBC,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,sBAAsB,QACjB,kBAAkB;AAQzB,SACEC,YAAY,EACZC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,iBAAiB"}

Some files were not shown because too many files have changed in this diff Show More