From 502cde351a18d0772c02f1326bbe5bee373b8988 Mon Sep 17 00:00:00 2001
From: Josem1801 <Josemanuelrosales2@gmail.com>
Date: Fri, 20 Jun 2025 21:36:23 -0600
Subject: [PATCH 1/2] feat(react): add Badge component

---
 .../lib/components/badge/badge.component.tsx  | 34 ++++++++++++++++++
 js/react/lib/components/badge/badge.const.ts  | 35 +++++++++++++++++++
 js/react/lib/components/badge/badge.types.ts  | 13 +++++++
 js/react/lib/components/badge/index.ts        |  2 ++
 js/react/lib/index.ts                         |  1 +
 js/react/showcase/App.tsx                     | 23 ++++++++++++
 6 files changed, 108 insertions(+)
 create mode 100644 js/react/lib/components/badge/badge.component.tsx
 create mode 100644 js/react/lib/components/badge/badge.const.ts
 create mode 100644 js/react/lib/components/badge/badge.types.ts
 create mode 100644 js/react/lib/components/badge/index.ts

diff --git a/js/react/lib/components/badge/badge.component.tsx b/js/react/lib/components/badge/badge.component.tsx
new file mode 100644
index 0000000..9072f3f
--- /dev/null
+++ b/js/react/lib/components/badge/badge.component.tsx
@@ -0,0 +1,34 @@
+import { withAs } from "@/utils/hoc";
+import { cn } from "@/utils/tw-merge";
+import {
+  BADGE_TEXT,
+  BADGE_TYPE,
+  BADGE_VARIANTS,
+  LIMIT_NUMERIC,
+} from "./badge.const";
+import { BadgeProps } from "./badge.types";
+
+export const Badge = withAs(
+  (Component, { type, variant, count, ...rest }: BadgeProps) => {
+    const displayValue = () => {
+      if (type !== "numeric") return BADGE_TEXT[variant];
+      if (count > LIMIT_NUMERIC) return "+9";
+      return count;
+    };
+
+    return (
+      <Component
+        {...rest}
+        className={cn([
+          "text-paragraph-2 flex items-center gap-1 rounded-full border-[0.8px] border-black px-2",
+          BADGE_VARIANTS[variant],
+          BADGE_TYPE[type],
+          "desktop:text-[12px] text-[10px]",
+        ])}
+      >
+        <div className="size-1 rounded-full" />
+        <span>{displayValue()}</span>
+      </Component>
+    );
+  }
+);
diff --git a/js/react/lib/components/badge/badge.const.ts b/js/react/lib/components/badge/badge.const.ts
new file mode 100644
index 0000000..a09de9d
--- /dev/null
+++ b/js/react/lib/components/badge/badge.const.ts
@@ -0,0 +1,35 @@
+export const BADGE_VARIANTS = {
+  completed: [
+    "bg-success-100 text-success-600 [&>div]:bg-success-600",
+    "dark:bg-success-950 dark:text-success-400 [&>div]:bg-success-600",
+  ],
+  reading: [
+    "bg-warning-100 text-warning-500 [&>div]:bg-warning-500",
+    "dark:bg-warning-950 dark:text-warning-300 [&>div]:bg-warning-300",
+  ],
+  pending: [
+    "bg-error-100 text-error-600 [&>div]:bg-error-600",
+    "dark:bg-error-950 dark:text-error-300 [&>div]:bg-error-300",
+  ],
+  unread: [
+    "bg-neutral-100 text-neutral-500 [&>div]:bg-neutral-500",
+    "dark:bg-neutral-950 dark:text-neutral-300 [&>div]:bg-neutral-300",
+  ],
+};
+
+export const BADGE_TYPE = {
+  default: "[&>span]:hidden size-4 px-0! justify-center",
+  numeric: "flex-row-reverse ",
+  text: undefined,
+};
+
+export const BADGE_TEXT = {
+  completed: "Completo",
+  reading: "Leyendo",
+  pending: "Pendiente",
+  unread: "No leído",
+};
+
+export const LIMIT_NUMERIC = 9;
+export type BadgeVariants = keyof typeof BADGE_VARIANTS;
+export type BadgeTypes = keyof typeof BADGE_TYPE;
diff --git a/js/react/lib/components/badge/badge.types.ts b/js/react/lib/components/badge/badge.types.ts
new file mode 100644
index 0000000..4c02e00
--- /dev/null
+++ b/js/react/lib/components/badge/badge.types.ts
@@ -0,0 +1,13 @@
+import { BadgeTypes, BadgeVariants } from "./badge.const";
+
+export type BadgeProps =
+  | {
+      type: Extract<BadgeTypes, "numeric">;
+      variant: BadgeVariants;
+      count: number;
+    }
+  | {
+      type: Exclude<BadgeTypes, "numeric">;
+      variant: BadgeVariants;
+      count?: never;
+    };
diff --git a/js/react/lib/components/badge/index.ts b/js/react/lib/components/badge/index.ts
new file mode 100644
index 0000000..f2ee33c
--- /dev/null
+++ b/js/react/lib/components/badge/index.ts
@@ -0,0 +1,2 @@
+export * from "./badge.component";
+export * from "./badge.types";
diff --git a/js/react/lib/index.ts b/js/react/lib/index.ts
index edaf843..927f19e 100644
--- a/js/react/lib/index.ts
+++ b/js/react/lib/index.ts
@@ -7,4 +7,5 @@ export * from "./components/level";
 export * from "./components/avatar";
 export * from "./components/collaborators";
 export * from "./components/radio";
+export * from "./components/badge";
 export * from "./icons";
diff --git a/js/react/showcase/App.tsx b/js/react/showcase/App.tsx
index 3b7bd5c..e922c5d 100644
--- a/js/react/showcase/App.tsx
+++ b/js/react/showcase/App.tsx
@@ -9,6 +9,7 @@ import {
   Level,
   Collaborators,
   Radio,
+  Badge,
 } from "@rustlanges/react";
 import { ShowComponent } from "./ShowComponent";
 
@@ -219,6 +220,28 @@ export function App() {
           },
         }}
       />
+      <ShowComponent
+        title="Badge"
+        component={Badge}
+        propsDef={{
+          variant: {
+            type: "string",
+            options: ["completed", "pending", "reading", "unread"],
+            default: "completed",
+          },
+          type: {
+            type: "string",
+            default: "numeric",
+
+            options: ["default", "numeric", "text"] as unknown as ["numeric"],
+          },
+          count: {
+            type: "string",
+            default: 1,
+            optional: false,
+          },
+        }}
+      />
     </div>
   );
 }

From 93a09f0e819da02bff5b7d3a640ef3b85065e096 Mon Sep 17 00:00:00 2001
From: Josem1801 <Josemanuelrosales2@gmail.com>
Date: Fri, 20 Jun 2025 21:57:43 -0600
Subject: [PATCH 2/2] fix(react): use LIMIT_NUMERIC

---
 js/react/lib/components/badge/badge.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/react/lib/components/badge/badge.component.tsx b/js/react/lib/components/badge/badge.component.tsx
index 9072f3f..85dd494 100644
--- a/js/react/lib/components/badge/badge.component.tsx
+++ b/js/react/lib/components/badge/badge.component.tsx
@@ -12,7 +12,7 @@ export const Badge = withAs(
   (Component, { type, variant, count, ...rest }: BadgeProps) => {
     const displayValue = () => {
       if (type !== "numeric") return BADGE_TEXT[variant];
-      if (count > LIMIT_NUMERIC) return "+9";
+      if (count > LIMIT_NUMERIC) return `+${LIMIT_NUMERIC}`;
       return count;
     };