@clayui/badge 3.144.1 → 3.157.0

package/README.md

@@ -2,9 +2,9 @@
 
 Badges help highlight important information, such as notifications or new and unread messages.
 
--   [Documentation](https://clayui.com/docs/components/badge.html)
--   [Changelog](./CHANGELOG.md)
--   [Breaking change schedule](./BREAKING.md)
+- [Documentation](https://clayui.com/docs/components/badge.html)
+- [Changelog](./CHANGELOG.md)
+- [Breaking change schedule](./BREAKING.md)
 
 ## Install
 
@@ -16,4 +16,4 @@ yarn add @clayui/badge
 
 ## Contribute
 
-We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.

package/lib/cjs/index.js

@@ -1,42 +1,73 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
 });
-exports.default = void 0;
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const Badge = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  let {
+module.exports = __toCommonJS(src_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+const Badge = import_react.default.forwardRef(
+  ({
     className,
     dark,
-    displayType = 'primary',
+    displayType = "primary",
     label,
     translucent,
     ...otherProps
-  } = _ref;
-  if (displayType === 'beta') {
-    displayType = 'info';
-    translucent = true;
-  } else if (displayType === 'beta-dark') {
-    dark = true;
-    displayType = 'info';
-    translucent = true;
+  }, ref) => {
+    if (displayType === "beta") {
+      displayType = "info";
+      translucent = true;
+    } else if (displayType === "beta-dark") {
+      dark = true;
+      displayType = "info";
+      translucent = true;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        ...otherProps,
+        className: (0, import_classnames.default)(
+          "badge",
+          `badge-${displayType}`,
+          className,
+          {
+            "badge-translucent": translucent,
+            "clay-dark": dark
+          }
+        ),
+        ref
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: "badge-item badge-item-expand" }, label)
+    );
   }
-  return /*#__PURE__*/_react.default.createElement("span", _extends({}, otherProps, {
-    className: (0, _classnames.default)('badge', `badge-${displayType}`, className, {
-      'badge-translucent': translucent,
-      'clay-dark': dark
-    }),
-    ref: ref
-  }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "badge-item badge-item-expand"
-  }, label));
-});
-Badge.displayName = 'ClayBadge';
-var _default = exports.default = Badge;
+);
+Badge.displayName = "ClayBadge";
+var src_default = Badge;

package/lib/esm/index.js

@@ -1,37 +1,43 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/**
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
- * SPDX-License-Identifier: BSD-3-Clause
- */
-
-import classNames from 'classnames';
-import React from 'react';
-const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
+import classNames from "classnames";
+import React from "react";
+const Badge = React.forwardRef(
+  ({
     className,
     dark,
-    displayType = 'primary',
+    displayType = "primary",
     label,
     translucent,
     ...otherProps
-  } = _ref;
-  if (displayType === 'beta') {
-    displayType = 'info';
-    translucent = true;
-  } else if (displayType === 'beta-dark') {
-    dark = true;
-    displayType = 'info';
-    translucent = true;
+  }, ref) => {
+    if (displayType === "beta") {
+      displayType = "info";
+      translucent = true;
+    } else if (displayType === "beta-dark") {
+      dark = true;
+      displayType = "info";
+      translucent = true;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ...otherProps,
+        className: classNames(
+          "badge",
+          `badge-${displayType}`,
+          className,
+          {
+            "badge-translucent": translucent,
+            "clay-dark": dark
+          }
+        ),
+        ref
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "badge-item badge-item-expand" }, label)
+    );
   }
-  return /*#__PURE__*/React.createElement("span", _extends({}, otherProps, {
-    className: classNames('badge', `badge-${displayType}`, className, {
-      'badge-translucent': translucent,
-      'clay-dark': dark
-    }),
-    ref: ref
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "badge-item badge-item-expand"
-  }, label));
-});
-Badge.displayName = 'ClayBadge';
-export default Badge;
+);
+Badge.displayName = "ClayBadge";
+var src_default = Badge;
+export {
+  src_default as default
+};

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 /**
- * SPDX-FileCopyrightText: © 2019 Liferay, Inc. <https://liferay.com>
- * SPDX-License-Identifier: BSD-3-Clause
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
  */
 import React from 'react';
 declare type DisplayType = 'primary' | 'secondary' | 'info' | 'danger' | 'success' | 'warning' | 'beta' | 'beta-dark';

package/package.json

@@ -1,44 +1,33 @@
 {
-	"name": "@clayui/badge",
-	"version": "3.144.1",
-	"description": "ClayBadge component",
-	"license": "BSD-3-Clause",
-	"repository": "https://github.com/liferay/clay",
-	"main": "lib/cjs/index.js",
-	"module": "lib/esm/index.js",
-	"exports": {
-		".": {
-			"types": "./lib/index.d.ts",
-			"import": "./lib/esm/index.js",
-			"require": "./lib/cjs/index.js"
-		}
+	"browserslist": [
+		"extends browserslist-config-clay"
+	],
+	"dependencies": {
+		"classnames": "2.3.1"
 	},
-	"types": "lib/index.d.ts",
-	"ts:main": "src/index.tsx",
+	"description": "ClayBadge component",
 	"files": [
 		"lib"
 	],
-	"scripts": {
-		"build": "yarn build:cjs && yarn build:esm",
-		"build:cjs": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib/cjs --extensions .ts,.tsx",
-		"build:esm": "cross-env NODE_ENV=production babel src --root-mode upward --out-dir lib/esm --extensions .ts,.tsx --env-name esm",
-		"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
-		"test": "jest --config ../../jest.config.js"
-	},
 	"keywords": [
 		"clay",
 		"react"
 	],
-	"dependencies": {
-		"classnames": "^2.2.6"
-	},
+	"license": "BSD-3-Clause",
+	"main": "src/index.tsx",
+	"name": "@clayui/badge",
 	"peerDependencies": {
-		"@clayui/css": "3.x",
+		"@clayui/css": "^3.157.0",
 		"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
 		"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
 	},
-	"browserslist": [
-		"extends browserslist-config-clay"
-	],
-	"gitHead": "96b1e589bb0777fb30d4fbe050ce7670c8061fe5"
+	"repository": "https://github.com/liferay/clay",
+	"scripts": {
+		"build": "yarn build:cjs && yarn build:esm",
+		"build:cjs": "cross-env NODE_ENV=production node ../build-package-esbuild.js --format=cjs --outdir=lib/cjs",
+		"build:esm": "cross-env NODE_ENV=production node ../build-package-esbuild.js --format=esm --outdir=lib/esm",
+		"buildTypes": "cross-env NODE_ENV=production tsc --project ./tsconfig.declarations.json",
+		"test": "jest --config ../../jest.config.js"
+	},
+	"version": "3.157.0"
 }

package/src/index.tsx

@@ -0,0 +1,88 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import classNames from 'classnames';
+import React from 'react';
+
+type DisplayType =
+	| 'primary'
+	| 'secondary'
+	| 'info'
+	| 'danger'
+	| 'success'
+	| 'warning'
+	| 'beta'
+	| 'beta-dark';
+
+interface IProps extends React.HTMLAttributes<HTMLSpanElement> {
+
+	/**
+	 * Flag to indicate if the badge should use the clay-dark variant.
+	 */
+	dark?: boolean;
+
+	/**
+	 * Determines the color of the badge.
+	 * The values `beta` and `beta-dark` are deprecated since v3.100.0 - use
+	 * `translucent` and `dark` instead.
+	 */
+	displayType?: DisplayType;
+
+	/**
+	 * Info that is shown inside of the badge itself.
+	 */
+	label?: string | number;
+
+	/**
+	 * Flag to indicate if the badge should use the translucent variant.
+	 */
+	translucent?: boolean;
+}
+
+const Badge = React.forwardRef<HTMLSpanElement, IProps>(
+	(
+		{
+			className,
+			dark,
+			displayType = 'primary',
+			label,
+			translucent,
+			...otherProps
+		}: IProps,
+		ref
+	) => {
+		if (displayType === 'beta') {
+			displayType = 'info';
+			translucent = true;
+		}
+		else if (displayType === 'beta-dark') {
+			dark = true;
+			displayType = 'info';
+			translucent = true;
+		}
+
+		return (
+			<span
+				{...otherProps}
+				className={classNames(
+					'badge',
+					`badge-${displayType}`,
+					className,
+					{
+						'badge-translucent': translucent,
+						'clay-dark': dark,
+					}
+				)}
+				ref={ref}
+			>
+				<span className="badge-item badge-item-expand">{label}</span>
+			</span>
+		);
+	}
+);
+
+Badge.displayName = 'ClayBadge';
+
+export default Badge;