@fluentui/react-badge 0.0.0-nightly-20220302-0405.1

package/LICENSE

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

package/README.md

@@ -0,0 +1,5 @@
+# @fluentui/react-badge
+
+**React Badge components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

package/Spec.md

@@ -0,0 +1,157 @@
+# [Badge](https://github.com/microsoft/fluentui/issues/16925)
+
+## Background
+
+A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.
+
+## Prior Art
+
+- [OpenUI Research](https://open-ui.org/components/badge.research)
+
+## Sample Code
+
+```jsx
+  <Badge>
+    My Custom Badge
+  </Badge>
+  <Badge
+    style={{ position: 'absolute', top: -4, right: -4 }}
+  />
+```
+
+## Variants
+
+`Badge` can have several variations.
+
+- Appearance: `default`, `rounded` and `circular`
+- Size: `tiny`, `extra-small`, `small`, `medium`, `large`, `extra-large`.
+- Styles: `filled`, `outline`, `ghost`, `tint`, `inverted filled`
+
+## PROPS
+
+```typescript
+type BadgeAppearance = 'filled' | 'outline' | 'ghost' | 'tint';
+
+type BadgeShape = 'rounded' | 'square' | 'circular';
+
+type BadgeSize = 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
+
+type BadgeProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
+  /**
+   * A Badge can be sized.
+   */
+  size?: BadgeSize;
+
+  /**
+   * A Badge can be square, circular or rounded
+   */
+  shape?: BadgeShape;
+
+  /**
+   * A Badge can be filled, outline, ghost, inverted
+   */
+  appearance?: BadgeAppearance;
+
+  /**
+   * Icon slot
+   */
+  icon?: ShorthandProps<HTMLElement>;
+
+  /**
+   * Position for Icon to be rendered
+   */
+  iconPosition?: 'before' | 'after';
+}
+```
+
+## Structure
+
+- _**Public**_
+
+```jsx
+<Badge />
+```
+
+- _**Internal**_
+
+```jsx
+<ElementType>{children}</ElementType>
+```
+
+- _**DOM**_
+
+```html
+<span class="ui-badge"> ... </span>
+```
+
+## Migration
+
+- _Migration from v8_
+
+`Badge` can be passed to `Avatar`'s `badge` slot. The `PresenceBadge` will be the best replacement for `Persona` presence mapping status, icon and colors.
+
+- _Migration from v0_
+
+`Badge` can be passed to `Avatar`'s `badge` slot.
+
+## Behaviors
+
+- Badges don't receive focus
+
+  - Badge information would be surfaced as part of the control that it is associated with, badges themselves do not receive focus meaning they are not directly accessible by screenreaders.
+    If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way through screenreader or tooltip on the component the badge is associated with.
+
+- Screen Readers
+
+  - Badges should be given a meaningful description. This description will be applied, via “aria-describedby” to the element decorated by the Badge. For example, "Chat, 6 unread" or similar.
+    General guidance is that the badge icon is marked as “aria-hidden” by default.
+
+- Badge shouldn't rely only on color information
+
+  - Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only [unread dot] ensure that non-visual information is included using aria-describedby
+
+## Variants
+
+`Badge` is base component that can be used to create custom `Badge` such as `PresenceBadge` or `CounterBadge` with specific behaviors.
+
+### Presence Badge
+
+A Presence Badge represents someone's availbility or status
+
+```typescript
+export type PresenceBadgeStatus = 'busy' | 'oof' | 'away' | 'available' | 'offline';
+
+export type PresenceBadgeProps = Omit<BadgeProps, 'shape' | 'appearance'> & {
+  /**
+   * A PresenceBadge can represent several status
+   * @defaultvalue available
+   */
+  status?: PresenceBadgeStatus;
+  /**
+   * A PresenceBadge can represent status of someone out of the office
+   * @defaultvalue true
+   */
+  inOffice?: boolean;
+};
+
+export type PresenceBadgeState = BadgeState & {
+  /**
+   * A PresenceBadge can represent several status
+   * @defaultvalue available
+   */
+  status: PresenceBadgeStatus;
+  /**
+   * A PresenceBadge can represent status of someone out of the office
+   * @defaultvalue true
+   */
+  inOffice: boolean;
+};
+```
+
+### Counter Badge
+
+A Counter Badge is a visual indicator for numeric values such as tallies and scores.
+
+```typescript
+export type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape'> & Partial<CounterBadgeCommons>;
+```

package/dist/react-badge.d.ts

@@ -0,0 +1,159 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+
+/**
+ * Define a styled Badge, using the `useBadge_unstable` hook.
+ */
+export declare const Badge: ForwardRefComponent<BadgeProps>;
+
+export declare const badgeClassName = "fui-Badge";
+
+declare type BadgeCommons = {
+    /**
+     * 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 BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;
+
+export declare type BadgeSlots = {
+    root: Slot<'div'>;
+    icon?: Slot<'span'>;
+};
+
+export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
+
+/**
+ * Define a styled CounterBadge, using the `useCounterBadge_unstable` hook.
+ */
+export declare const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
+
+export declare const counterBadgeClassName = "fui-CounterBadge";
+
+declare type CounterBadgeCommons = {
+    /**
+     * Max number to be displayed
+     * @default 99
+     */
+    overflowCount: number;
+    /**
+     * Value displayed by the Badge
+     * @default 0
+     */
+    count: number;
+    /**
+     * If the badge should be shown when count is 0
+     * @default false
+     */
+    showZero: boolean;
+    /**
+     * If a dot should be displayed without the count
+     * @default false
+     */
+    dot: boolean;
+    /**
+     * A Badge can be circular or rounded
+     * @default circular
+     */
+    shape: 'circular' | 'rounded';
+    /**
+     * A Badge can be filled, ghost
+     * @default filled
+     */
+    appearance: 'filled' | 'ghost';
+    /**
+     * Semantic colors for a counter badge
+     * @default brand
+     */
+    color: Extract<BadgeProps['color'], 'brand' | 'danger' | 'important' | 'informative'>;
+};
+
+export declare type CounterBadgeProps = Omit<BadgeProps, 'appearance' | 'shape' | 'color'> & Partial<CounterBadgeCommons>;
+
+export declare type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color'> & CounterBadgeCommons;
+
+/**
+ * Define a styled Badge, using the `useBadge_unstable` hook.
+ */
+export declare const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
+
+export declare const presenceBadgeClassName = "fui-PresenceBadge";
+
+declare type PresenceBadgeCommons = {
+    /**
+     * 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;
+} & BadgeCommons;
+
+export declare type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>, 'color'> & Partial<Pick<PresenceBadgeCommons, 'status' | 'outOfOffice' | 'size'>>;
+
+export declare type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;
+
+export declare type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
+
+export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;
+
+/**
+ * Returns the props and state required to render the component
+ */
+export declare const useBadge_unstable: (props: BadgeProps, ref: React_2.Ref<HTMLElement>) => BadgeState;
+
+/**
+ * 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;
+
+/**
+ * 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;
+
+/**
+ * Applies style classnames to slots
+ */
+export declare const usePresenceBadgeStyles_unstable: (state: PresenceBadgeState) => PresenceBadgeState;
+
+export { }

package/lib/Badge.d.ts

@@ -0,0 +1 @@
+export * from './components/Badge/index';

package/lib/Badge.js

@@ -0,0 +1,2 @@
+export * from './components/Badge/index';
+//# sourceMappingURL=Badge.js.map

package/lib/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"../src/","sources":["Badge.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Badge/index';\n"]}

package/lib/CounterBadge.d.ts

@@ -0,0 +1 @@
+export * from './components/CounterBadge/index';

package/lib/CounterBadge.js

@@ -0,0 +1,2 @@
+export * from './components/CounterBadge/index';
+//# sourceMappingURL=CounterBadge.js.map

package/lib/CounterBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CounterBadge.js","sourceRoot":"../src/","sources":["CounterBadge.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './components/CounterBadge/index';\n"]}

package/lib/PresenceBadge.d.ts

@@ -0,0 +1 @@
+export * from './components/PresenceBadge/index';

package/lib/PresenceBadge.js

@@ -0,0 +1,2 @@
+export * from './components/PresenceBadge/index';
+//# sourceMappingURL=PresenceBadge.js.map

package/lib/PresenceBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresenceBadge.js","sourceRoot":"../src/","sources":["PresenceBadge.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/PresenceBadge/index';\n"]}

package/lib/components/Badge/Badge.d.ts

@@ -0,0 +1,6 @@
+import type { BadgeProps } from './Badge.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * Define a styled Badge, using the `useBadge_unstable` hook.
+ */
+export declare const Badge: ForwardRefComponent<BadgeProps>;

package/lib/components/Badge/Badge.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useBadge_unstable } from './useBadge';
+import { useBadgeStyles_unstable } from './useBadgeStyles';
+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);
+  return renderBadge_unstable(state);
+});
+Badge.displayName = 'Badge';
+//# sourceMappingURL=Badge.js.map

package/lib/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,oBAAT,QAAqC,eAArC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AACA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AAEA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourcesContent":["import * as React from 'react';\nimport { useBadge_unstable } from './useBadge';\nimport { useBadgeStyles_unstable } from './useBadgeStyles';\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  useBadgeStyles_unstable(state);\n\n  return renderBadge_unstable(state);\n});\n\nBadge.displayName = 'Badge';\n"],"sourceRoot":"../src/"}

package/lib/components/Badge/Badge.types.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type BadgeSlots = {
+    root: Slot<'div'>;
+    icon?: Slot<'span'>;
+};
+export declare type BadgeCommons = {
+    /**
+     * 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 BadgeProps = Omit<ComponentProps<BadgeSlots>, 'color'> & Partial<BadgeCommons>;
+export declare type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;

package/lib/components/Badge/Badge.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Badge.types.js.map

package/lib/components/Badge/Badge.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.types.js","sourceRoot":"../src/","sources":["components/Badge/Badge.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BadgeSlots = {\n  root: Slot<'div'>;\n  icon?: Slot<'span'>;\n};\n\nexport type BadgeCommons = {\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\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'> & Partial<BadgeCommons>;\nexport type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;\n"]}

package/lib/components/Badge/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Badge';
+export type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';
+export * from './renderBadge';
+export * from './useBadge';
+export * from './useBadgeStyles';

package/lib/components/Badge/index.js

@@ -0,0 +1,5 @@
+export * from './Badge';
+export * from './renderBadge';
+export * from './useBadge';
+export * from './useBadgeStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAGxB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Badge';\n// Explicit exports to omit BadgeCommons\nexport type { BadgeProps, BadgeSlots, BadgeState } from './Badge.types';\nexport * from './renderBadge';\nexport * from './useBadge';\nexport * from './useBadgeStyles';\n"]}

package/lib/components/Badge/renderBadge.d.ts

@@ -0,0 +1,2 @@
+import type { BadgeState } from './Badge.types';
+export declare const renderBadge_unstable: (state: BadgeState) => JSX.Element;

package/lib/components/Badge/renderBadge.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+export const renderBadge_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, state.iconPosition === 'before' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
+  }), state.root.children, state.iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, { ...slotProps.icon
+  }));
+};
+//# sourceMappingURL=renderBadge.js.map

package/lib/components/Badge/renderBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Badge/renderBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,YAAN,KAAuB,QAAvB,IAAmC,KAAK,CAAC,IAAzC,iBAAiD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADpD,EAEG,KAAK,CAAC,IAAN,CAAW,QAFd,EAGG,KAAK,CAAC,YAAN,KAAuB,OAAvB,IAAkC,KAAK,CAAC,IAAxC,iBAAgD,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAHnD,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { BadgeState, BadgeSlots } from './Badge.types';\n\nexport const renderBadge_unstable = (state: BadgeState) => {\n  const { slots, slotProps } = getSlots<BadgeSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {state.iconPosition === 'before' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {state.root.children}\n      {state.iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Badge/useBadge.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { BadgeProps, BadgeState } from './Badge.types';
+/**
+ * Returns the props and state required to render the component
+ */
+export declare const useBadge_unstable: (props: BadgeProps, ref: React.Ref<HTMLElement>) => BadgeState;

package/lib/components/Badge/useBadge.js

@@ -0,0 +1,33 @@
+import { getNativeElementProps, resolveShorthand } 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',
+    iconPosition = 'before',
+    appearance = 'filled',
+    color = 'brand'
+  } = props;
+  const state = {
+    shape,
+    size,
+    iconPosition,
+    appearance,
+    color,
+    components: {
+      root: 'div',
+      icon: 'span'
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      'aria-hidden': true,
+      ...props
+    }),
+    icon: resolveShorthand(props.icon)
+  };
+  return state;
+};
+//# sourceMappingURL=useBadge.js.map

package/lib/components/Badge/useBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Badge/useBadge.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;AAEG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AACJ,IAAA,KAAK,GAAG,UADJ;AAEJ,IAAA,IAAI,GAAG,QAFH;AAGJ,IAAA,YAAY,GAAG,QAHX;AAIJ,IAAA,UAAU,GAAG,QAJT;AAKJ,IAAA,KAAK,GAAG;AALJ,MAMF,KANJ;AAQA,QAAM,KAAK,GAAe;AACxB,IAAA,KADwB;AAExB,IAAA,IAFwB;AAGxB,IAAA,YAHwB;AAIxB,IAAA,UAJwB;AAKxB,IAAA,KALwB;AAMxB,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,IAAI,EAAE;AAFI,KANY;AAUxB,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GADiC;AAEjC,qBAAe,IAFkB;AAGjC,SAAG;AAH8B,KAAR,CAVH;AAexB,IAAA,IAAI,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAP;AAfE,GAA1B;AAkBA,SAAO,KAAP;AACD,CA5BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { 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 {\n    shape = 'circular',\n    size = 'medium',\n    iconPosition = 'before',\n    appearance = 'filled',\n    color = 'brand',\n  } = props;\n\n  const state: BadgeState = {\n    shape,\n    size,\n    iconPosition,\n    appearance,\n    color,\n    components: {\n      root: 'div',\n      icon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      'aria-hidden': true,\n      ...props,\n    }),\n    icon: resolveShorthand(props.icon),\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Badge/useBadgeStyles.d.ts

@@ -0,0 +1,6 @@
+import type { BadgeState } from './Badge.types';
+export declare const badgeClassName = "fui-Badge";
+/**
+ * Applies style classnames to slots
+ */
+export declare const useBadgeStyles_unstable: (state: BadgeState) => BadgeState;