@kloudlite/design-system/mjs/atoms/badge.js

A design system for building ambitious products.

"use client";

// components/atoms/badge.tsx
import { cloneElement } from "react";

// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
  return classNames(...props);
};

// components/atoms/badge.tsx
import { jsxs } from "react/jsx-runtime";
var Badge = ({
  type = "neutral",
  children,
  icon,
  className
}) => {
  const iconProps = { size: 12, color: "currentColor" };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "kl-flex kl-gap-md kl-items-center kl-py-md kl-px-2xl kl-w-fit kl-rounded-full kl-bodySm kl-border kl-select-none pulsable",
        {
          "kl-border-border-dark kl-bg-surface-basic-subdued kl-text-text-default": type === "neutral",
          "kl-border-border-primary kl-bg-surface-primary-subdued kl-text-text-primary": type === "info",
          "kl-border-border-success kl-bg-surface-success-subdued kl-text-text-success": type === "success",
          "kl-border-border-warning kl-bg-surface-warning-subdued kl-text-text-warning": type === "warning",
          "kl-border-border-critical kl-bg-surface-critical-subdued kl-text-text-critical": type === "critical"
        },
        className
      ),
      children: [
        !!icon && cloneElement(icon, iconProps),
        children
      ]
    }
  );
};
export {
  Badge
};