@react-spectrum/s2 0.2.1-nightly.4979

package/page.css

@@ -0,0 +1,34 @@
+html {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+  color-scheme: light dark;
+  background: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+  }
+}
+
+html[data-color-scheme="light"] {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+  color-scheme: light;
+}
+
+html[data-color-scheme="dark"] {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
+  color-scheme: dark;
+}
+
+html[data-background="layer-1"] {
+  background: var(--lightningcss-light, #f8f8f8) var(--lightningcss-dark, #1b1b1b);
+}
+
+html[data-background="layer-2"] {
+  background: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
+}
+/*# sourceMappingURL=page.css.map */

package/src/ActionButton.tsx

@@ -0,0 +1,209 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {baseColor, fontRelative, style} from '../style/spectrum-theme' with { type: 'macro' };
+import {ButtonProps, ButtonRenderProps, OverlayTriggerStateContext, Provider, Button as RACButton, Text} from 'react-aria-components';
+import {centerBaseline} from './CenterBaseline';
+import {FocusableRef} from '@react-types/shared';
+import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };
+import {forwardRef, ReactNode, useContext} from 'react';
+import {IconContext} from './Icon';
+import {pressScale} from './pressScale';
+import {TextContext} from './Content';
+import {useFocusableRef} from '@react-spectrum/utils';
+
+export interface ActionButtonStyleProps {
+  /**
+   * The size of the ActionButton.
+   *
+   * @default 'M'
+   */
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  /** The static color style to apply. Useful when the ActionButton appears over a color background. */
+  staticColor?: 'black' | 'white',
+  /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
+  isQuiet?: boolean
+}
+
+interface ToggleButtonStyleProps {
+  /** Whether the ActionButton should be selected (controlled). */
+  isSelected?: boolean,
+  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
+  isEmphasized?: boolean
+}
+
+export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
+  /** The content to display in the ActionButton. */
+  children?: ReactNode
+}
+
+// These styles handle both ActionButton and ToggleButton
+export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps>({
+  ...focusRing(),
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  columnGap: 'text-to-visual',
+  font: 'control',
+  fontWeight: 'medium',
+  userSelect: 'none',
+  height: 'control',
+  minWidth: 'control',
+  transition: 'default',
+  forcedColorAdjust: 'none',
+  backgroundColor: {
+    default: {
+      ...baseColor('gray-100'),
+      default: {
+        default: 'gray-100',
+        isQuiet: 'transparent'
+      }
+    },
+    isSelected: {
+      default: 'neutral',
+      isEmphasized: 'accent',
+      isDisabled: {
+        default: 'gray-100',
+        isQuiet: 'transparent'
+      }
+    },
+    staticColor: {
+      white: {
+        ...baseColor('transparent-white-100'),
+        default: {
+          default: 'transparent-white-100',
+          isQuiet: 'transparent'
+        },
+        isSelected: {
+          default: baseColor('transparent-white-800'),
+          isDisabled: {
+            default: 'transparent-white-100',
+            isQuiet: 'transparent'
+          }
+        }
+      },
+      black: {
+        ...baseColor('transparent-black-100'),
+        default: {
+          default: 'transparent-black-100',
+          isQuiet: 'transparent'
+        },
+        isSelected: {
+          default: baseColor('transparent-black-800'),
+          isDisabled: {
+            default: 'transparent-black-100',
+            isQuiet: 'transparent'
+          }
+        }
+      }
+    },
+    forcedColors: {
+      default: 'ButtonFace',
+      isSelected: {
+        default: 'Highlight',
+        isDisabled: 'ButtonFace'
+      }
+    }
+  },
+  color: {
+    default: 'neutral',
+    isSelected: {
+      default: 'gray-25',
+      isEmphasized: 'white'
+    },
+    isDisabled: 'disabled',
+    staticColor: {
+      white: {
+        default: baseColor('transparent-white-800'),
+        isSelected: 'black',
+        isDisabled: 'transparent-white-400'
+      },
+      black: {
+        default: baseColor('transparent-black-800'),
+        isSelected: 'white',
+        isDisabled: 'transparent-black-400'
+      }
+    },
+    forcedColors: {
+      default: 'ButtonText',
+      isSelected: 'HighlightText',
+      isDisabled: {
+        default: 'GrayText'
+      }
+    }
+  },
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  },
+  outlineColor: {
+    default: 'focus-ring',
+    staticColor: {
+      white: 'white',
+      black: 'black'
+    },
+    forcedColors: 'Highlight'
+  },
+  borderStyle: 'none',
+  paddingX: {
+    default: 'edge-to-text',
+    ':has([slot=icon]:only-child)': 0
+  },
+  paddingY: 0,
+  borderRadius: 'control',
+  '--iconMargin': {
+    type: 'marginTop',
+    value: {
+      default: fontRelative(-2),
+      ':has([slot=icon]:only-child)': 0
+    }
+  },
+  disableTapHighlight: true
+}, getAllowedOverrides());
+
+function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+  let domRef = useFocusableRef(ref);
+  let overlayTriggerState = useContext(OverlayTriggerStateContext);
+
+  return (
+    <RACButton
+      {...props}
+      ref={domRef}
+      style={pressScale(domRef, props.UNSAFE_style)}
+      className={renderProps => (props.UNSAFE_className || '') + btnStyles({
+        ...renderProps,
+        // Retain hover styles when an overlay is open.
+        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
+        staticColor: props.staticColor,
+        size: props.size || 'M',
+        isQuiet: props.isQuiet
+      }, props.styles)}>
+      <Provider
+        values={[
+          [TextContext, {className: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
+          [IconContext, {
+            render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+          }]
+        ]}>
+        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+      </Provider>
+    </RACButton>
+  );
+}
+
+/**
+ * ActionButtons allow users to perform an action.
+ * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
+ */
+let _ActionButton = forwardRef(ActionButton);
+export {_ActionButton as ActionButton};

package/src/ActionMenu.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionButton, ActionButtonProps} from './ActionButton';
+import {AriaLabelingProps, DOMProps, FocusableRef} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import {forwardRef} from 'react';
+import {forwardRefType} from './types';
+import {Menu, MenuProps, MenuTrigger, MenuTriggerProps} from './Menu';
+import MoreIcon from '../s2wf-icons/S2_Icon_More_20_N.svg';
+import {StyleProps} from './style-utils' with { type: 'macro' };
+
+export interface ActionMenuProps<T> extends
+  Pick<MenuTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'>,
+  Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction' | 'size'>,
+  Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus'>,
+  StyleProps, DOMProps, AriaLabelingProps {
+  }
+
+function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+  let buttonProps = filterDOMProps(props, {labelable: true});
+
+  // size independently controlled?
+  return (
+    <MenuTrigger
+      isOpen={props.isOpen}
+      defaultOpen={props.defaultOpen}
+      onOpenChange={props.onOpenChange}
+      align={props.align}
+      direction={props.direction}
+      shouldFlip={props.shouldFlip}>
+      <ActionButton
+        ref={ref}
+        aria-label="Help"
+        size={props.size}
+        isDisabled={props.isDisabled}
+        autoFocus={props.autoFocus}
+        isQuiet={props.isQuiet}
+        {...buttonProps}>
+        <MoreIcon />
+      </ActionButton>
+      <Menu
+        items={props.items}
+        disabledKeys={props.disabledKeys}
+        onAction={props.onAction}
+        size={props.size}>
+        {/* @ts-ignore TODO: fix type, right now this component is the same as Menu */}
+        {props.children}
+      </Menu>
+    </MenuTrigger>
+  );
+}
+
+/**
+ * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
+ */
+let _ActionMenu = /*#__PURE__*/(forwardRef as forwardRefType)(ActionMenu);
+export {_ActionMenu as ActionMenu};

package/src/AlertDialog.tsx

@@ -0,0 +1,158 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';
+import {Button} from './Button';
+import {ButtonGroup} from './ButtonGroup';
+import {CenterBaseline} from './CenterBaseline';
+import {chain} from '@react-aria/utils';
+import {Content, Heading} from './Content';
+import {Dialog} from './Dialog';
+import {DOMProps, DOMRef} from '@react-types/shared';
+import {forwardRef, ReactNode} from 'react';
+import {IconContext} from './Icon';
+import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';
+import {Provider} from 'react-aria-components';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {UnsafeStyles} from './style-utils' with {type: 'macro'};
+
+export interface AlertDialogProps extends DOMProps, UnsafeStyles {
+  /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.  */
+  variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',
+  /** The title of the AlertDialog. */
+  title: string,
+  /** The contents of the AlertDialog. */
+  children: ReactNode,
+  /** The label to display within the cancel button. */
+  cancelLabel?: string,
+  /** The label to display within the confirm button. */
+  primaryActionLabel: string,
+  /** The label to display within the secondary button. */
+  secondaryActionLabel?: string,
+  /** Whether the primary button is disabled. */
+  isPrimaryActionDisabled?: boolean,
+  /** Whether the secondary button is disabled. */
+  isSecondaryActionDisabled?: boolean,
+  /** Handler that is called when the cancel button is pressed. */
+  onCancel?: () => void,
+  /** Handler that is called when the primary button is pressed. */
+  onPrimaryAction?: () => void,
+  /** Handler that is called when the secondary button is pressed. */
+  onSecondaryAction?: () => void,
+  /** Button to focus by default when the dialog opens. */
+  autoFocusButton?: 'cancel' | 'primary' | 'secondary',
+  /**
+   * The size of the Dialog.
+   *
+   * @default 'M'
+   */
+    size?: 'S' | 'M' | 'L'
+}
+
+const icon = style({
+  marginEnd: 8,
+  '--iconPrimary': {
+    type: 'fill',
+    value: {
+      variant: {
+        error: 'negative',
+        warning: 'notice'
+      }
+    }
+  }
+});
+
+function AlertDialog(props: AlertDialogProps, ref: DOMRef) {
+  let {
+    autoFocusButton,
+    cancelLabel,
+    secondaryActionLabel,
+    primaryActionLabel,
+    isSecondaryActionDisabled,
+    isPrimaryActionDisabled,
+    onCancel = () => {},
+    onPrimaryAction = () => {},
+    onSecondaryAction = () => {},
+    title,
+    children,
+    variant = 'confirmation'
+  } = props;
+
+  let buttonVariant = 'primary';
+  if (variant === 'confirmation') {
+    buttonVariant = 'accent';
+  } else if (variant === 'destructive') {
+    buttonVariant = 'negative';
+  }
+
+  return (
+    <Dialog
+      role="alertdialog"
+      ref={ref}
+      size={props.size}
+      UNSAFE_style={props.UNSAFE_style}
+      UNSAFE_className={(props.UNSAFE_className || '')}>
+      {({close}) => (
+        <>
+          <Provider
+            values={[
+              [IconContext, {styles: icon({variant})}]
+            ]}>
+            <Heading slot="title">
+              <CenterBaseline>
+                {/* TODO: Add translations */}
+                {variant === 'error' && <AlertTriangle aria-label="Alert" />}
+                {variant === 'warning' && <NoticeSquare aria-label="Alert" />}
+                {title}
+              </CenterBaseline>
+            </Heading>
+          </Provider>
+          <Content>{children}</Content>
+          <ButtonGroup>
+            {cancelLabel &&
+              <Button
+                onPress={() => chain(close(), onCancel())}
+                variant="secondary"
+                fillStyle="outline"
+                autoFocus={autoFocusButton === 'cancel'}>
+                {cancelLabel}
+              </Button>
+            }
+            {secondaryActionLabel &&
+              <Button
+                onPress={() => chain(close(), onSecondaryAction())}
+                variant="secondary"
+                isDisabled={isSecondaryActionDisabled}
+                fillStyle="outline"
+                autoFocus={autoFocusButton === 'secondary'}>
+                {secondaryActionLabel}
+              </Button>
+            }
+            <Button
+              variant={buttonVariant as 'primary' | 'accent' | 'negative'}
+              isDisabled={isPrimaryActionDisabled}
+              autoFocus={autoFocusButton === 'primary'}
+              onPress={() => chain(close(), onPrimaryAction())}>
+              {primaryActionLabel}
+            </Button>
+          </ButtonGroup>
+        </>
+      )}
+    </Dialog>
+  );
+}
+
+/**
+ * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+ */
+let _AlertDialog = forwardRef(AlertDialog);
+export {_AlertDialog as AlertDialog};

package/src/Avatar.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ContextValue, useContextProps} from 'react-aria-components';
+import {createContext, forwardRef} from 'react';
+import {DOMProps, DOMRef} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {useDOMRef} from '@react-spectrum/utils';
+
+export interface AvatarProps extends StyleProps, DOMProps {
+  /** Text description of the avatar. */
+  alt?: string,
+  /** The image URL for the avatar. */
+  src?: string
+}
+
+export interface AvatarContextProps extends UnsafeStyles, DOMProps {
+  /** Text description of the avatar. */
+  alt?: string,
+  /** The image URL for the avatar. */
+  src?: string,
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StylesPropWithHeight
+}
+
+const imageStyles = style({
+  borderRadius: 'full',
+  size: 20,
+  disableTapHighlight: true
+}, getAllowedOverrides({height: true}));
+
+export const AvatarContext = createContext<ContextValue<AvatarContextProps, HTMLImageElement>>({});
+
+function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
+  let domRef = useDOMRef(ref);
+  [props, domRef] = useContextProps(props, domRef, AvatarContext);
+  let {
+    alt = '',
+    src,
+    UNSAFE_style,
+    UNSAFE_className = '',
+    ...otherProps
+  } = props;
+  const domProps = filterDOMProps(otherProps);
+
+  return (
+    <img
+      {...domProps}
+      ref={domRef}
+      alt={alt}
+      style={UNSAFE_style}
+      className={UNSAFE_className + imageStyles(null, props.styles)}
+      src={src} />
+  );
+}
+
+/**
+ * An avatar is a thumbnail representation of an entity, such as a user or an organization.
+ */
+let _Avatar = forwardRef(Avatar);
+export {_Avatar as Avatar};

package/src/Badge.tsx

@@ -0,0 +1,155 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {AriaLabelingProps, DOMProps, DOMRef} from '@react-types/shared';
+import {centerBaseline} from './CenterBaseline';
+import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {filterDOMProps} from '@react-aria/utils';
+import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {IconContext} from './Icon';
+import {Provider} from 'react-aria-components';
+import React, {forwardRef, ReactNode} from 'react';
+import {Text, TextContext} from './Content';
+import {useDOMRef} from '@react-spectrum/utils';
+
+export interface BadgeStyleProps {
+  /**
+   * The size of the badge.
+   * 
+   * @default 'S'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL',
+  /**
+   * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.
+   * 
+   * @default 'neutral'
+   */
+  variant: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver'
+}
+
+export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps{
+  /**
+   * The content to display in the badge.
+   */
+  children: ReactNode
+}
+
+const badge = style<BadgeStyleProps>({
+  display: 'flex',
+  font: 'control',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: 'control',
+  minHeight: 'control',
+  paddingX: {
+    default: 'edge-to-text',
+    ':has([slot=icon]:only-child)': 0
+  },
+  '--labelPadding': {
+    type: 'paddingTop',
+    value: centerPadding()
+  },
+  aspectRatio: {
+    ':has([slot=icon]:only-child)': 'square'
+  },
+  '--iconMargin': {
+    type: 'marginTop',
+    value: {
+      default: fontRelative(-2),
+      ':has([slot=icon]:only-child)': 0
+    }
+  },
+  columnGap: 'text-to-visual',
+  color: {
+    default: 'white',
+    variant: {
+      notice: 'black',
+      orange: 'black',
+      yellow: 'black',
+      charteuse: 'black',
+      celery: 'black'
+    }
+  },
+  backgroundColor: {
+    variant: {
+      accent: 'accent',
+      informative: 'informative',
+      neutral: 'neutral-subdued',
+      positive: 'positive',
+      notice: 'notice',
+      negative: 'negative',
+      gray: 'gray',
+      red: 'red',
+      orange: 'orange',
+      yellow: 'yellow',
+      charteuse: 'chartreuse',
+      celery: 'celery',
+      green: 'green',
+      seafoam: 'seafoam',
+      cyan: 'cyan',
+      blue: 'blue',
+      indigo: 'indigo',
+      purple: 'purple',
+      fuchsia: 'fuchsia',
+      magenta: 'magenta',
+      pink: 'pink',
+      turquoise: 'turquoise',
+      brown: 'brown',
+      cinnamon: 'cinnamon',
+      silver: 'silver'
+    }
+  },
+  '--iconPrimary': {
+    type: 'fill',
+    value: 'currentColor'
+  }
+}, getAllowedOverrides());
+
+function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
+  let {
+    children,
+    variant = 'neutral',
+    size = 'S',
+    ...otherProps
+  } = props; // useProviderProps(props) in v3
+  let domRef = useDOMRef(ref);
+  let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));
+
+  return (
+    <Provider
+      values={[
+        [TextContext, {className: style({paddingY: '--labelPadding', order: 1})}],
+        [IconContext, {
+          render: centerBaseline({slot: 'icon', className: style({order: 0})}),
+          styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
+        }]
+      ]}>
+      <span
+        {...filterDOMProps(otherProps)}
+        role="presentation"
+        className={(props.UNSAFE_className || '') + badge({variant, size}, props.styles)}
+        ref={domRef}>
+        {
+          typeof children === 'string' || isTextOnly
+            ? <Text>{children}</Text>
+            : children
+        }
+      </span>
+    </Provider>
+  );
+}
+
+/**
+ * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
+ */
+let _Badge = forwardRef(Badge);
+export {_Badge as Badge};