import { jsx as _jsx } from "react/jsx-runtime";
import { cnb } from "cnbuilder";
import { forwardRef } from "react";
import { cssUtils } from "../cssUtils.js";
import { bem } from "../utils/bem.js";
const styles = bem("rmd-badge");
export function badge(options = {}) {
    const { className, theme = "greyscale" } = options;
    const greyscale = theme === "greyscale";
    const clear = theme === "clear";
    return cnb(styles({
        greyscale
    }), cssUtils({
        backgroundColor: !clear && !greyscale ? theme : undefined
    }), className);
}
/**
 * **Server Component**
 *
 * @example Simple Example
 * ```tsx
 * import type { ReactElement } from "react";
 * import { Badge, Button, MaterialSymbol } from "@react-md/core";
 *
 * function Example(): ReactElement {
 *   return (
 *     <>
 *       <Badge>3</Badge>
 *       <Badge theme="primary">100</Badge>
 *       <Badge theme="secondary">23</Badge>
 *       <Badge theme="greyscale">18</Badge>
 *       <Badge theme="clear">1</Badge>
 *     </>
 *   );
 * }
 * ```
 *
 * @example Within Buttons Example
 * ```tsx
 * import type { ReactElement } from "react";
 * import { Badge, Button, MaterialSymbol } from "@react-md/core";
 *
 * function Example(): ReactElement {
 *   return (
 *     <Button aria-label="Notifications" buttonType="icon">
 *       <Badge>88</Badge>
 *       <MaterialSymbol name="notifications" />
 *     </Button>
 *   );
 * }
 * ```
 *
 * @since 6.0.0 Removed the `disableNullOnZero` feature since it's
 * easier just to use condition rendering yourself.
 */ export const Badge = /*#__PURE__*/ forwardRef(function Badge(props, ref) {
    const { children, className, theme, ...remaining } = props;
    return /*#__PURE__*/ _jsx("span", {
        ...remaining,
        ref: ref,
        className: badge({
            theme,
            className
        }),
        children: children
    });
});

//# sourceMappingURL=Badge.js.map