@spark-web/badge/dist/spark-web-badge.cjs.dev.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var css = require('@emotion/css');
var box = require('@spark-web/box');
var text = require('@spark-web/text');
var theme = require('@spark-web/theme');
var jsxRuntime = require('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 /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
    data: data
    // Styles
    ,
    display: "inline-flex",
    alignItems: "center",
    background: "surface",
    border: "standard",
    borderRadius: "full",
    gap: "xsmall",
    height: "xsmall",
    paddingX: "small",
    children: [/*#__PURE__*/jsxRuntime.jsx(IndicatorContainer, {
      size: textSize,
      children: /*#__PURE__*/jsxRuntime.jsx(IndicatorDot, {
        tone: tone
      })
    }), /*#__PURE__*/jsxRuntime.jsx(text.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$1 = theme.useTheme();
  var dotSize = 8;
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, label ? {
    'aria-label': label
  } : {
    'aria-hidden': 'true'
  }), {}, {
    data: data,
    borderRadius: "full",
    className: css.css({
      height: dotSize,
      width: dotSize,
      background: theme$1.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$1 = theme.useTheme();
  var _theme$typography$tex = theme$1.typography.text[size],
    mobile = _theme$typography$tex.mobile,
    tablet = _theme$typography$tex.tablet;
  var responsiveHeight = theme$1.utils.responsiveStyles({
    mobile: {
      height: mobile.capHeight
    },
    tablet: {
      height: tablet.capHeight
    }
  });
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
    display: "flex",
    alignItems: "center",
    "aria-hidden": "true",
    cursor: "default",
    flexShrink: 0,
    className: css.css(responsiveHeight),
    children: children
  });
}

exports.Badge = Badge;
exports.IndicatorDot = IndicatorDot;