@kopexa/grc 0.0.21 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/grc",
-  "version": "0.0.21",
+  "version": "0.0.24",
   "description": "GRC (Governance, Risk, Compliance) components for Kopexa",
   "sideEffects": false,
   "main": "dist/index.js",
@@ -42,16 +42,16 @@
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
     "react-intl": "^7.1.14",
-    "@kopexa/theme": "17.17.1",
-    "@kopexa/tiptap": "17.6.4",
-    "@kopexa/sight": "17.6.2"
+    "@kopexa/sight": "17.6.5",
+    "@kopexa/theme": "17.18.0",
+    "@kopexa/tiptap": "17.6.7"
   },
   "dependencies": {
     "@kopexa/krn": "^1.0.1",
-    "@kopexa/react-utils": "17.0.31",
-    "@kopexa/shared-utils": "17.0.31",
-    "@kopexa/i18n": "17.5.12",
-    "@kopexa/icons": "17.5.2"
+    "@kopexa/react-utils": "17.0.34",
+    "@kopexa/shared-utils": "17.0.34",
+    "@kopexa/icons": "17.6.0",
+    "@kopexa/i18n": "17.5.15"
   },
   "clean-package": "../../clean-package.config.json",
   "publishConfig": {

package/src/common/impact/impact-badge.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useSafeIntl } from "@kopexa/i18n";
+import { cn } from "@kopexa/shared-utils";
+import {
+	getScale,
+	type ImpactLevel,
+	type ImpactScaleConfig,
+	type ImpactScalePreset,
+} from "./scales";
+
+export interface ImpactBadgeProps {
+	/** Impact level 0-5 */
+	level: ImpactLevel | number | null | undefined;
+	/** Scale preset or custom scale config */
+	scale?: ImpactScalePreset | ImpactScaleConfig;
+	/** Show numeric value before label */
+	showValue?: boolean;
+	/** Additional class names */
+	className?: string;
+}
+
+/**
+ * ImpactBadge displays an impact level as a colored badge.
+ *
+ * @example
+ * ```tsx
+ * <ImpactBadge level={3} scale="risk" />
+ * <ImpactBadge level={4} scale="asset" showValue />
+ * ```
+ */
+export function ImpactBadge({
+	level,
+	scale = "risk",
+	showValue = false,
+	className,
+}: ImpactBadgeProps) {
+	const intl = useSafeIntl();
+
+	// Normalize level to ImpactLevel
+	const normalizedLevel: ImpactLevel =
+		level === null || level === undefined
+			? 0
+			: ((Math.min(5, Math.max(0, Math.round(level))) as ImpactLevel) ?? 0);
+
+	// Resolve scale config
+	const scaleConfig: ImpactScaleConfig =
+		typeof scale === "string" ? getScale(scale) : scale;
+
+	const config = scaleConfig[normalizedLevel];
+	const isUnrated = normalizedLevel === 0;
+
+	// Get label from i18n or fallback
+	const label = intl.formatMessage(config.message);
+
+	return (
+		<span
+			className={cn(
+				"inline-flex items-center gap-1.5 text-sm font-medium px-2 py-0.5 rounded",
+				isUnrated
+					? "text-muted-foreground bg-muted"
+					: `${config.color} ${config.bgColor}`,
+				className,
+			)}
+		>
+			{showValue && !isUnrated && (
+				<span className="text-xs font-mono opacity-70">{normalizedLevel}</span>
+			)}
+			{label}
+		</span>
+	);
+}

package/src/common/impact/index.ts

@@ -1,3 +1,5 @@
+export type { ImpactBadgeProps } from "./impact-badge";
+export { ImpactBadge } from "./impact-badge";
 export type { ImpactCardProps, ImpactValue } from "./impact-card";
 export { ImpactCard } from "./impact-card";
 export { messages as impactMessages } from "./messages";