import { jsx as n, jsxs as f } from "react/jsx-runtime";
import { makeVariants as i } from "@spark-ui/internal-utils";
import { c as u } from "../index-BmAFn37q.mjs";
const x = u(
  ["inline-flex h-fit", "empty:p-0", "text-center font-bold", "rounded-full box-content"],
  {
    variants: {
      /**
       * Visual color appearance of the component.
       * @default 'danger'
       */
      intent: i({
        main: ["bg-main", "text-on-main", "border-surface"],
        support: ["bg-support", "text-on-support", "border-surface"],
        accent: ["bg-accent", "text-on-accent", "border-surface"],
        success: ["bg-success", "text-on-success", "border-surface"],
        alert: ["bg-alert", "text-on-alert", "border-surface"],
        danger: ["bg-error", "text-on-error", "border-surface"],
        info: ["bg-info", "text-on-info", "border-surface"],
        neutral: ["bg-neutral", "text-on-neutral", "border-surface"],
        surface: ["bg-surface", "text-on-surface", "border-surface"],
        basic: ["bg-basic", "text-on-basic", "border-surface"]
      }),
      /**
       * Size of the component.
       * @default 'md'
       */
      size: i({
        sm: ["text-small", "px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]", "empty:size-sz-8"],
        md: ["text-caption", "px-md py-sm", "empty:size-sz-16"]
      }),
      /**
       * Type of the component.
       * @default 'relative'
       */
      type: {
        relative: ["absolute right-0 border-md", "translate-x-1/2 -translate-y-1/2"],
        standalone: []
      }
    },
    defaultVariants: {
      intent: "danger",
      size: "md",
      type: "relative"
    }
  }
), o = ({
  intent: e = "danger",
  size: a = "md",
  type: c = "relative",
  count: t,
  overflowCount: r = 99,
  "aria-label": s,
  className: d,
  ...l
}) => {
  const p = t && t > r, b = typeof s == "function" ? s({ count: t, overflowCount: r }) : s, m = { ...l, "aria-label": b };
  return /* @__PURE__ */ n(
    "span",
    {
      "data-spark-component": "badge",
      role: "status",
      className: x({
        intent: e,
        size: a,
        type: c,
        className: d
      }),
      ...m,
      children: p ? `${r}+` : t
    }
  );
};
o.displayName = "BadgeItem";
const g = ({ children: e, ...a }) => !e ? /* @__PURE__ */ n(o, { type: "standalone", ...a }) : /* @__PURE__ */ f("div", { className: "relative inline-flex", children: [
  e,
  /* @__PURE__ */ n(o, { ...a })
] });
g.displayName = "Badge";
export {
  g as Badge
};
//# sourceMappingURL=index.mjs.map
