@spark-ui/components/dist/badge/index.js

Spark (Leboncoin design system) components.

"use strict";
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);

// src/badge/index.ts
var badge_exports = {};
__export(badge_exports, {
  Badge: () => Badge
});
module.exports = __toCommonJS(badge_exports);

// src/badge/BadgeItem.styles.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority = require("class-variance-authority");
var styles = (0, import_class_variance_authority.cva)(
  ["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: (0, import_internal_utils.makeVariants)({
        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: (0, import_internal_utils.makeVariants)({
        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"
    }
  }
);

// src/badge/BadgeItem.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var BadgeItem = ({
  intent = "danger",
  size = "md",
  type = "relative",
  count,
  overflowCount = 99,
  "aria-label": label,
  className,
  ...others
}) => {
  const hasOverflow = count && count > overflowCount;
  const ariaLabel = typeof label === "function" ? label({ count, overflowCount }) : label;
  const props = { ...others, "aria-label": ariaLabel };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "span",
    {
      "data-spark-component": "badge",
      role: "status",
      className: styles({
        intent,
        size,
        type,
        className
      }),
      ...props,
      children: hasOverflow ? `${overflowCount}+` : count
    }
  );
};
BadgeItem.displayName = "BadgeItem";

// src/badge/Badge.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Badge = ({ children, ...props }) => {
  const isStandalone = !children;
  return isStandalone ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BadgeItem, { type: "standalone", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative inline-flex", children: [
    children,
    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BadgeItem, { ...props })
  ] });
};
Badge.displayName = "Badge";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Badge
});
//# sourceMappingURL=index.js.map