@trackunit/react-components 1.4.47 → 1.4.48

package/index.cjs.js

@@ -808,24 +808,18 @@ const getIconName = (color) => {
 };
 
 const cvaBadge = cssClassVarianceUtilities.cvaMerge([
-    "uppercase",
-    "align-middle",
     "box-border",
     "whitespace-nowrap",
     "overflow-hidden",
     "text-ellipsis",
-    "inline-block",
+    "inline-flex",
+    "items-center",
+    "justify-center",
     "rounded-full",
     "font-bold",
     "text-center",
     "tabular-nums",
-    "w-min",
-    "h-min",
-    "min-h-[0.5rem]",
-    "min-w-[1.5rem]",
     "text-xs",
-    "px-1",
-    "py-0.5",
 ], {
     variants: {
         color: {
@@ -833,7 +827,22 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
             danger: "bg-danger-600 text-white",
             warning: "bg-warning-600 text-white",
         },
+        compact: {
+            true: "size-2",
+            false: "h-fit min-h-4 w-fit min-w-4",
+        },
+        isSingleChar: {
+            true: "aspect-square",
+            false: "px-1",
+        },
     },
+    compoundVariants: [
+        {
+            isSingleChar: false,
+            compact: false,
+            className: "px-1",
+        },
+    ],
     defaultVariants: {
         color: "primary",
     },
@@ -845,12 +854,13 @@ const cvaBadge = cssClassVarianceUtilities.cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId }) => {
+const Badge = ({ color = "primary", compact = false, className, count, max, hideZero = false, dataTestId, }) => {
     if (hideZero && count === 0) {
         return null;
     }
     const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
-    return (jsxRuntime.jsx("span", { className: cvaBadge({ color, className }), "data-testid": dataTestId, children: displayedCount }));
+    const isSingleChar = displayedCount?.toString().length === 1;
+    return (jsxRuntime.jsx("span", { className: cvaBadge({ color, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
 };
 
 /**

package/index.esm.js

@@ -806,24 +806,18 @@ const getIconName = (color) => {
 };
 
 const cvaBadge = cvaMerge([
-    "uppercase",
-    "align-middle",
     "box-border",
     "whitespace-nowrap",
     "overflow-hidden",
     "text-ellipsis",
-    "inline-block",
+    "inline-flex",
+    "items-center",
+    "justify-center",
     "rounded-full",
     "font-bold",
     "text-center",
     "tabular-nums",
-    "w-min",
-    "h-min",
-    "min-h-[0.5rem]",
-    "min-w-[1.5rem]",
     "text-xs",
-    "px-1",
-    "py-0.5",
 ], {
     variants: {
         color: {
@@ -831,7 +825,22 @@ const cvaBadge = cvaMerge([
             danger: "bg-danger-600 text-white",
             warning: "bg-warning-600 text-white",
         },
+        compact: {
+            true: "size-2",
+            false: "h-fit min-h-4 w-fit min-w-4",
+        },
+        isSingleChar: {
+            true: "aspect-square",
+            false: "px-1",
+        },
     },
+    compoundVariants: [
+        {
+            isSingleChar: false,
+            compact: false,
+            className: "px-1",
+        },
+    ],
     defaultVariants: {
         color: "primary",
     },
@@ -843,12 +852,13 @@ const cvaBadge = cvaMerge([
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-const Badge = ({ color = "primary", className, count, max, hideZero = false, dataTestId }) => {
+const Badge = ({ color = "primary", compact = false, className, count, max, hideZero = false, dataTestId, }) => {
     if (hideZero && count === 0) {
         return null;
     }
     const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
-    return (jsx("span", { className: cvaBadge({ color, className }), "data-testid": dataTestId, children: displayedCount }));
+    const isSingleChar = displayedCount?.toString().length === 1;
+    return (jsx("span", { className: cvaBadge({ color, className, compact, isSingleChar }), "data-testid": dataTestId, children: compact ? null : displayedCount }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.4.47",
+  "version": "1.4.48",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -25,6 +25,10 @@ interface BaseBadgeProps extends CommonProps {
      * If enabled the badge is shown even if the count is 0.
      */
     hideZero?: boolean;
+    /**
+     * If true the badge is displayed as a small colored dot with no content
+     */
+    compact?: boolean;
 }
 export type BadgeProps = BaseBadgeProps;
 /**
@@ -33,5 +37,5 @@ export type BadgeProps = BaseBadgeProps;
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {ReactElement} Badge component
  */
-export declare const Badge: ({ color, className, count, max, hideZero, dataTestId }: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Badge: ({ color, compact, className, count, max, hideZero, dataTestId, }: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

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