@spark-web/badge/dist/spark-web-badge.esm.js

--- title: Badge isExperimentalPackage: true ---

import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import { css } from '@emotion/react';
import { Box } from '@spark-web/box';
import { Text } from '@spark-web/text';
import { useTheme } from '@spark-web/theme';
import { jsxs, jsx } from '@emotion/react/jsx-runtime';

////////////////////////////////////////////////////////////////////////////////

/**
 * Badge
 *
 * A decorative indicator used to either call attention to an item or for
 * communicating non-actionable, supplemental information.
 */
function Badge(_ref) {
  var children = _ref.children,
    data = _ref.data,
    _ref$tone = _ref.tone,
    tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
  var textSize = 'xsmall';
  return jsxs(Box, {
    data: data
    // Styles
    ,
    display: "inline-flex",
    alignItems: "center",
    background: "surface",
    border: "standard",
    borderRadius: "full",
    gap: "xsmall",
    height: "xsmall",
    paddingX: "small",
    children: [jsx(IndicatorContainer, {
      size: textSize,
      children: jsx(IndicatorDot, {
        tone: tone
      })
    }), jsx(Text, {
      overflowStrategy: "nowrap",
      size: textSize,
      children: children
    })]
  });
}
////////////////////////////////////////////////////////////////////////////////

/**
 * IndicatorDot
 *
 * A small decorative indicator used to call attention to an item.
 */
function IndicatorDot(_ref2) {
  var data = _ref2.data,
    label = _ref2.label,
    tone = _ref2.tone;
  var theme = useTheme();
  var dotSize = 8;
  return jsx(Box, _objectSpread(_objectSpread({}, label ? {
    'aria-label': label
  } : {
    'aria-hidden': 'true'
  }), {}, {
    data: data,
    borderRadius: "full",
    css: css({
      height: dotSize,
      width: dotSize,
      background: theme.color.status[tone]
    })
  }));
}
////////////////////////////////////////////////////////////////////////////////

/**
 * IndicatorContainer
 *
 * Component that renders a div the same height as our text so that we can
 * perfectly align the content side-by-side.
 */
function IndicatorContainer(_ref3) {
  var children = _ref3.children,
    _ref3$size = _ref3.size,
    size = _ref3$size === void 0 ? 'standard' : _ref3$size;
  var theme = useTheme();
  var _theme$typography$tex = theme.typography.text[size],
    mobile = _theme$typography$tex.mobile,
    tablet = _theme$typography$tex.tablet;
  var responsiveHeight = theme.utils.responsiveStyles({
    mobile: {
      height: mobile.capHeight
    },
    tablet: {
      height: tablet.capHeight
    }
  });
  return jsx(Box, {
    display: "flex",
    alignItems: "center",
    "aria-hidden": "true",
    cursor: "default",
    flexShrink: 0,
    css: css(responsiveHeight),
    children: children
  });
}

////////////////////////////////////////////////////////////////////////////////

/**
 * Shared Types
 */

/** The tone of the badge. */

export { Badge, IndicatorDot };