@crossed/ui/lib/commonjs/display/Badge.js

A universal & performant styling library for React Native, Next.js & React

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Badge_exports = {};
__export(Badge_exports, {
  Badge: () => Badge
});
module.exports = __toCommonJS(Badge_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_Text = require("../typography/Text");
var import_Box = require("../layout/Box");
var import_styled = require("@crossed/styled");
var import_core = require("@crossed/core");
const badgeStyles = (0, import_styled.createStyles)(({ space, colors }) => ({
  default: {
    base: {
      paddingLeft: space.md,
      paddingRight: space.md,
      paddingTop: space.md,
      paddingBottom: space.md,
      marginTop: 0,
      borderRadius: 4,
      backgroundColor: colors.background.primary
    }
  },
  success: { base: { backgroundColor: colors.success.light } },
  warning: { base: { backgroundColor: colors.warning.light } },
  error: { base: { backgroundColor: colors.error.low } },
  info: { base: { backgroundColor: colors.info.light } }
}));
const badgeTextStyles = (0, import_styled.createStyles)(({ colors }) => ({
  success: { base: { color: colors.success.primary } },
  warning: { base: { color: colors.warning.primary } },
  error: { base: { color: colors.error.primary } },
  info: { base: { color: colors.info.primary } }
}));
const [Provider, useContext] = (0, import_core.createScope)({});
const BadgeText = (0, import_react.memo)(({ style, ...props }) => {
  const { variant } = useContext();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Text.Text,
    {
      style: (0, import_styled.composeStyles)(variant && badgeTextStyles[variant], style),
      weight: "lg",
      ...props
    }
  );
});
const BadgeRoot = (0, import_react.memo)(({ children, style, variant, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { variant, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_Box.Box,
    {
      ...props,
      style: (0, import_styled.composeStyles)(
        badgeStyles.default,
        variant && badgeStyles[variant],
        style
      ),
      children
    }
  ) });
});
const Badge = (0, import_core.withStaticProperties)(BadgeRoot, { Text: BadgeText });
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Badge
});
//# sourceMappingURL=Badge.js.map