From ca1c260735e0a7561cd2ccb56228ca415fc8a733 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 13 Feb 2026 12:24:48 +0800
Subject: [PATCH] feat(ui): add size prop to MulticaIcon bordered variant

Supports sm, md, lg sizes for flexible usage in different contexts.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/ui/src/components/multica-icon.tsx | 49 ++++++++++++---------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/packages/ui/src/components/multica-icon.tsx b/packages/ui/src/components/multica-icon.tsx
index ac2401ef..52b0fe82 100644
--- a/packages/ui/src/components/multica-icon.tsx
+++ b/packages/ui/src/components/multica-icon.tsx
@@ -14,8 +14,18 @@ interface MulticaIconProps extends React.ComponentProps<"span"> {
    * If true, show a border around the icon.
    */
   bordered?: boolean;
+  /**
+   * Size of the bordered icon: "sm" (default), "md", "lg"
+   */
+  size?: "sm" | "md" | "lg";
 }
 
+const borderedSizes = {
+  sm: { wrapper: "p-1.5", icon: "size-3.5" },
+  md: { wrapper: "p-2", icon: "size-4" },
+  lg: { wrapper: "p-2.5", icon: "size-5" },
+};
+
 /**
  * Pure CSS 8-pointed asterisk icon matching the Multica logo.
  * Uses currentColor so it adapts to light/dark themes automatically.
@@ -26,6 +36,7 @@ export function MulticaIcon({
   animate = false,
   noSpin = false,
   bordered = false,
+  size = "sm",
   ...props
 }: MulticaIconProps) {
   const [entranceDone, setEntranceDone] = useState(!animate);
@@ -36,11 +47,22 @@ export function MulticaIcon({
     return () => clearTimeout(timer);
   }, [animate]);
 
+  const clipPath = `polygon(
+    45% 62.1%, 45% 100%, 55% 100%, 55% 62.1%,
+    81.8% 88.9%, 88.9% 81.8%, 62.1% 55%, 100% 55%,
+    100% 45%, 62.1% 45%, 88.9% 18.2%, 81.8% 11.1%,
+    55% 37.9%, 55% 0%, 45% 0%, 45% 37.9%,
+    18.2% 11.1%, 11.1% 18.2%, 37.9% 45%, 0% 45%,
+    0% 55%, 37.9% 55%, 11.1% 81.8%, 18.2% 88.9%
+  )`;
+
   if (bordered) {
+    const sizeConfig = borderedSizes[size];
     return (
       <span
         className={cn(
-          "inline-flex items-center justify-center p-1.5 border border-border rounded-md",
+          "inline-flex items-center justify-center border border-border rounded-md",
+          sizeConfig.wrapper,
           className
         )}
         aria-hidden="true"
@@ -48,23 +70,15 @@ export function MulticaIcon({
       >
         <span
           className={cn(
-            "block size-3.5",
+            "block",
+            sizeConfig.icon,
             !entranceDone && "animate-entrance-spin",
             entranceDone && !noSpin && "hover:animate-spin"
           )}
         >
           <span
             className="block size-full bg-current"
-            style={{
-              clipPath: `polygon(
-                45% 62.1%, 45% 100%, 55% 100%, 55% 62.1%,
-                81.8% 88.9%, 88.9% 81.8%, 62.1% 55%, 100% 55%,
-                100% 45%, 62.1% 45%, 88.9% 18.2%, 81.8% 11.1%,
-                55% 37.9%, 55% 0%, 45% 0%, 45% 37.9%,
-                18.2% 11.1%, 11.1% 18.2%, 37.9% 45%, 0% 45%,
-                0% 55%, 37.9% 55%, 11.1% 81.8%, 18.2% 88.9%
-              )`,
-            }}
+            style={{ clipPath }}
           />
         </span>
       </span>
@@ -84,16 +98,7 @@ export function MulticaIcon({
     >
       <span
         className="block size-full bg-current"
-        style={{
-          clipPath: `polygon(
-            45% 62.1%, 45% 100%, 55% 100%, 55% 62.1%,
-            81.8% 88.9%, 88.9% 81.8%, 62.1% 55%, 100% 55%,
-            100% 45%, 62.1% 45%, 88.9% 18.2%, 81.8% 11.1%,
-            55% 37.9%, 55% 0%, 45% 0%, 45% 37.9%,
-            18.2% 11.1%, 11.1% 18.2%, 37.9% 45%, 0% 45%,
-            0% 55%, 37.9% 55%, 11.1% 81.8%, 18.2% 88.9%
-          )`,
-        }}
+        style={{ clipPath }}
       />
     </span>
   );