@trackunit/react-components 1.9.4 → 1.9.7

package/index.cjs.js

@@ -930,18 +930,22 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
     "font-bold",
     "text-center",
     "tabular-nums",
-    "text-xs",
 ], {
     variants: {
         color: {
-            primary: "bg-info-600 text-white",
+            primary: "bg-primary-600 text-white",
             danger: "bg-danger-600 text-white",
             warning: "bg-warning-600 text-white",
+            neutral: "bg-neutral-500 text-white",
         },
         compact: {
             true: "size-2",
             false: "h-fit min-h-4 w-fit min-w-4",
         },
+        size: {
+            default: "text-xs",
+            condensed: "h-3.5 min-h-3.5 min-w-3.5 text-[10px]",
+        },
         isSingleChar: {
             true: "aspect-square",
             false: "px-1",
@@ -953,9 +957,15 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
             compact: false,
             className: "px-1",
         },
+        {
+            isSingleChar: false,
+            size: "condensed",
+            className: "px-[3px] py-0",
+        },
     ],
     defaultVariants: {
         color: "primary",
+        size: "default",
     },
 });
 
@@ -970,7 +980,7 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-const Badge = ({ color = "primary", compact = false, className, count, max, hideZero = false, dataTestId, }) => {
+const Badge = ({ color = "primary", size = "default", compact = false, className, count, max, hideZero = false, dataTestId, }) => {
     if (hideZero && count === 0) {
         return null;
     }
@@ -980,7 +990,7 @@ const Badge = ({ color = "primary", compact = false, className, count, max, hide
             : count
         : count;
     const isSingleChar = displayedCount?.toString().length === 1;
-    return (jsxRuntime.jsx("span", { className: cvaBadge({ color, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
+    return (jsxRuntime.jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
 };
 
 /**

package/index.esm.js

@@ -928,18 +928,22 @@ const cvaBadge = cvaMerge([
     "font-bold",
     "text-center",
     "tabular-nums",
-    "text-xs",
 ], {
     variants: {
         color: {
-            primary: "bg-info-600 text-white",
+            primary: "bg-primary-600 text-white",
             danger: "bg-danger-600 text-white",
             warning: "bg-warning-600 text-white",
+            neutral: "bg-neutral-500 text-white",
         },
         compact: {
             true: "size-2",
             false: "h-fit min-h-4 w-fit min-w-4",
         },
+        size: {
+            default: "text-xs",
+            condensed: "h-3.5 min-h-3.5 min-w-3.5 text-[10px]",
+        },
         isSingleChar: {
             true: "aspect-square",
             false: "px-1",
@@ -951,9 +955,15 @@ const cvaBadge = cvaMerge([
             compact: false,
             className: "px-1",
         },
+        {
+            isSingleChar: false,
+            size: "condensed",
+            className: "px-[3px] py-0",
+        },
     ],
     defaultVariants: {
         color: "primary",
+        size: "default",
     },
 });
 
@@ -968,7 +978,7 @@ const cvaBadge = cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-const Badge = ({ color = "primary", compact = false, className, count, max, hideZero = false, dataTestId, }) => {
+const Badge = ({ color = "primary", size = "default", compact = false, className, count, max, hideZero = false, dataTestId, }) => {
     if (hideZero && count === 0) {
         return null;
     }
@@ -978,7 +988,7 @@ const Badge = ({ color = "primary", compact = false, className, count, max, hide
             : count
         : count;
     const isSingleChar = displayedCount?.toString().length === 1;
-    return (jsx("span", { className: cvaBadge({ color, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
+    return (jsx("span", { className: cvaBadge({ color, size, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.4",
+  "version": "1.9.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,12 +16,12 @@
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.7.4",
-    "@trackunit/css-class-variance-utilities": "1.7.4",
-    "@trackunit/shared-utils": "1.9.4",
-    "@trackunit/ui-icons": "1.7.4",
-    "@trackunit/react-table-pagination": "1.7.4",
-    "@trackunit/react-test-setup": "1.4.4",
+    "@trackunit/ui-design-tokens": "1.7.5",
+    "@trackunit/css-class-variance-utilities": "1.7.5",
+    "@trackunit/shared-utils": "1.9.5",
+    "@trackunit/ui-icons": "1.7.6",
+    "@trackunit/react-table-pagination": "1.7.5",
+    "@trackunit/react-test-setup": "1.4.5",
     "@tanstack/react-router": "1.114.29",
     "es-toolkit": "^1.39.10"
   },

package/src/components/Badge/Badge.d.ts

@@ -1,12 +1,17 @@
 import { ThemeColors } from "@trackunit/ui-design-tokens";
 import { ReactElement } from "react";
 import { CommonProps } from "../../common/CommonProps";
-type BadgeColors = Extract<ThemeColors, "primary" | "danger" | "warning">;
+type BadgeColors = Extract<ThemeColors, "primary" | "danger" | "warning" | "neutral">;
+type BadgeSize = "default" | "condensed";
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
      */
     color?: BadgeColors;
+    /**
+     * The size of the badge.
+     */
+    size?: BadgeSize;
     /**
      * Custom classNames can be added to make adjustments where needed.
      * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
@@ -43,5 +48,5 @@ export type BadgeProps = BaseBadgeProps;
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-export declare const Badge: ({ color, compact, className, count, max, hideZero, dataTestId, }: BadgeProps) => ReactElement | null;
+export declare const Badge: ({ color, size, compact, className, count, max, hideZero, dataTestId, }: BadgeProps) => ReactElement | null;
 export {};

package/src/components/Badge/Badge.variants.d.ts

@@ -1,5 +1,6 @@
 export declare const cvaBadge: (props?: ({
-    color?: "primary" | "danger" | "warning" | null | undefined;
+    color?: "primary" | "danger" | "warning" | "neutral" | null | undefined;
     compact?: boolean | null | undefined;
+    size?: "default" | "condensed" | null | undefined;
     isSingleChar?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;