@parto-system-design/ui 1.0.5 → 1.1.1

package/dist/index.cjs

@@ -982,7 +982,7 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
           bg-destructive-300 dark:bg-destructive-400 hover:bg-destructive-400 dark:hover:bg-destructive/50
           border-destructive-500 hover:border-destructive
           hover:text-hi-contrast
-          focus-visible:outline-amber-700
+          focus-visible:outline-brand-600
           data-[state=open]:border-destructive
           data-[state=open]:bg-destructive-400 dark:data-[state=open]:bg-destructive/50
           data-[state=open]:outline-destructive
@@ -992,7 +992,7 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
           bg-warning-300 dark:bg-warning-400 hover:bg-warning-400 dark:hover:bg-warning/50
           border-warning-500 hover:border-warning
           hover:text-hi-contrast
-          focus-visible:outline-amber-700
+          focus-visible:outline-brand-600
           data-[state=open]:border-warning
           data-[state=open]:bg-warning-400 dark:data-[state=open]:bg-warning/50
           data-[state=open]:outline-warning
@@ -1002,7 +1002,7 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
           bg-destructive-300 dark:bg-destructive-400 hover:bg-destructive-400 dark:hover:bg-destructive/50
           border-destructive-500 hover:border-destructive
           hover:text-hi-contrast
-          focus-visible:outline-amber-700
+          focus-visible:outline-brand-600
           data-[state=open]:border-destructive
           data-[state=open]:bg-destructive-400 dark:data-[state=open]:bg-destructive/50
           data-[state=open]:outline-destructive
@@ -4323,12 +4323,16 @@ var import_lucide_react15 = require("lucide-react");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var tagInputVariants = (0, import_class_variance_authority7.cva)(
-  "flex min-h-[38px] w-full flex-wrap gap-2 rounded-md border border-control bg-background px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-background-control focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  cn(
+    "flex min-h-[34px] w-full flex-wrap gap-1.5 rounded-md border border-control bg-foreground/[.026] px-3 py-1.5 text-sm text-foreground",
+    "focus-within:outline-none focus-within:ring-2 focus-within:ring-background-control focus-within:ring-offset-2 focus-within:ring-offset-foreground-muted",
+    "disabled:cursor-not-allowed disabled:text-foreground-muted disabled:opacity-50"
+  ),
   {
     variants: {
       variant: {
-        default: "bg-background",
-        secondary: "bg-secondary"
+        default: "",
+        secondary: "bg-surface-200"
       }
     },
     defaultVariants: {
@@ -4399,7 +4403,7 @@ var TagInput = React14.forwardRef(
             Badge,
             {
               variant: "secondary",
-              className: "gap-1 pe-1 ps-2 h-7 hover:!bg-primary/20 hover:!text-primary transition-colors [&:hover_svg]:!text-primary",
+              className: "gap-1 pe-1 ps-2 h-6 text-xs font-medium hover:!bg-primary/20 hover:!text-primary transition-colors [&:hover_svg]:!text-primary",
               children: [
                 tag,
                 /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -4433,7 +4437,7 @@ var TagInput = React14.forwardRef(
               value: inputValue,
               onChange: (e) => setInputValue(e.target.value),
               onKeyDown: handleKeyDown,
-              className: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground min-w-[120px] text-sm h-7",
+              className: "flex-1 bg-transparent outline-none placeholder:text-foreground-muted min-w-[80px] text-sm leading-4",
               placeholder: value.length === 0 ? placeholder : void 0,
               disabled
             }
@@ -4451,12 +4455,16 @@ var import_lucide_react16 = require("lucide-react");
 var import_class_variance_authority8 = require("class-variance-authority");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var hashtagInputVariants = (0, import_class_variance_authority8.cva)(
-  "flex min-h-[38px] w-full flex-wrap gap-2 rounded-md border border-control bg-background px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-background-control focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  cn(
+    "flex min-h-[34px] w-full flex-wrap gap-1.5 rounded-md border border-control bg-foreground/[.026] px-3 py-1.5 text-sm text-foreground",
+    "focus-within:outline-none focus-within:ring-2 focus-within:ring-background-control focus-within:ring-offset-2 focus-within:ring-offset-foreground-muted",
+    "disabled:cursor-not-allowed disabled:text-foreground-muted disabled:opacity-50"
+  ),
   {
     variants: {
       variant: {
-        default: "bg-background",
-        secondary: "bg-secondary"
+        default: "",
+        secondary: "bg-surface-200"
       }
     },
     defaultVariants: {
@@ -4527,7 +4535,7 @@ var HashtagInput = React15.forwardRef(
             Badge,
             {
               variant: "secondary",
-              className: "gap-1 pe-1 ps-2 h-7 hover:!bg-primary/20 hover:!text-primary transition-colors [&:hover_svg]:!text-primary",
+              className: "gap-1 pe-1 ps-2 h-6 text-xs font-medium hover:!bg-primary/20 hover:!text-primary transition-colors [&:hover_svg]:!text-primary",
               children: [
                 "#",
                 tag,
@@ -4562,7 +4570,7 @@ var HashtagInput = React15.forwardRef(
               value: inputValue,
               onChange: (e) => setInputValue(e.target.value),
               onKeyDown: handleKeyDown,
-              className: "flex-1 bg-transparent outline-none placeholder:text-muted-foreground min-w-[120px] text-sm h-7",
+              className: "flex-1 bg-transparent outline-none placeholder:text-foreground-muted min-w-[80px] text-sm leading-4",
               placeholder: value.length === 0 ? placeholder : void 0,
               disabled
             }
@@ -4897,8 +4905,9 @@ function InstagramPostMedia({
       {
         className: cn(
           "flex items-center justify-center bg-muted/30",
-          variant === "vertical" ? "aspect-square" : "w-[20%] shrink-0 h-full min-h-[200px] -my-[1px] -ms-[1px]"
+          variant === "vertical" ? "w-full" : "w-[20%] shrink-0 h-full min-h-[200px] -my-[1px] -ms-[1px]"
         ),
+        style: variant === "vertical" ? { aspectRatio: "4/5" } : void 0,
         children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "text-center p-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react18.ImageOff, { className: "size-12 mx-auto mb-2 text-muted-foreground" }),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm text-muted-foreground", children: placeholderText })
@@ -4922,19 +4931,33 @@ function InstagramPostMedia({
         )
       ] });
     }
-    const ratio = getAspectRatio(item.aspectRatio || "1:1");
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full relative overflow-hidden group cursor-pointer bg-muted/30", style: { aspectRatio: ratio }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
-      imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        "img",
-        {
-          src: item.url,
-          alt: "Post media",
-          className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300",
-          onError: () => handleImageError(item.url)
-        }
-      )
-    ] });
+    const aspectRatio = item.aspectRatio || "4:5";
+    const isPortrait = aspectRatio === "9:16" || aspectRatio === "4:5";
+    const instagramRatio = isPortrait ? "4/5" : getAspectRatioCSS(aspectRatio);
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      "div",
+      {
+        className: "w-full relative overflow-hidden group cursor-pointer bg-black",
+        style: { aspectRatio: instagramRatio },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
+          imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "img",
+            {
+              src: item.url,
+              alt: "Post media",
+              className: cn(
+                "w-full h-full transition-transform duration-300 group-hover:scale-[1.02]",
+                // For portrait images: object-contain to show full image like Instagram
+                // For square/landscape: object-cover
+                isPortrait ? "object-contain" : "object-cover"
+              ),
+              onError: () => handleImageError(item.url)
+            }
+          )
+        ]
+      }
+    );
   }
   if (mediaType === "video" || media.length === 1 && media[0].type === "video") {
     const item = media[0];
@@ -4952,19 +4975,31 @@ function InstagramPostMedia({
         )
       ] });
     }
-    const ratio = getAspectRatio(item.aspectRatio || "16:9");
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full relative overflow-hidden group cursor-pointer bg-muted/30", style: { aspectRatio: ratio }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
-      imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-        "img",
-        {
-          src: item.url,
-          alt: "Post media",
-          className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300",
-          onError: () => handleImageError(item.url)
-        }
-      )
-    ] });
+    const aspectRatio = item.aspectRatio || "4:5";
+    const isPortrait = aspectRatio === "9:16" || aspectRatio === "4:5";
+    const instagramRatio = isPortrait ? "4/5" : getAspectRatioCSS(aspectRatio);
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      "div",
+      {
+        className: "w-full relative overflow-hidden group cursor-pointer bg-black",
+        style: { aspectRatio: instagramRatio },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
+          imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "img",
+            {
+              src: item.url,
+              alt: "Post media",
+              className: cn(
+                "w-full h-full transition-transform duration-300 group-hover:scale-[1.02]",
+                isPortrait ? "object-contain" : "object-cover"
+              ),
+              onError: () => handleImageError(item.url)
+            }
+          )
+        ]
+      }
+    );
   }
   if (mediaType === "carousel" || media.length > 1) {
     if (variant === "horizontal") {
@@ -4986,38 +5021,47 @@ function InstagramPostMedia({
       ] }) });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Carousel, { className: "w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CarouselContent, { children: media.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CarouselItem, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-        "div",
-        {
-          className: "w-full relative overflow-hidden group cursor-pointer bg-muted/30",
-          style: { aspectRatio: getAspectRatio(item.aspectRatio || (item.type === "video" ? "16:9" : "1:1")) },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
-            imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-              "img",
-              {
-                src: item.url,
-                alt: `Post media ${index + 1}`,
-                className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300",
-                onError: () => handleImageError(item.url)
-              }
-            )
-          ]
-        }
-      ) }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CarouselContent, { children: media.map((item, index) => {
+        const itemAspect = item.aspectRatio || "4:5";
+        const itemIsPortrait = itemAspect === "9:16" || itemAspect === "4:5";
+        const itemRatio = itemIsPortrait ? "4/5" : getAspectRatioCSS(itemAspect);
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CarouselItem, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+          "div",
+          {
+            className: "w-full relative overflow-hidden group cursor-pointer bg-black",
+            style: { aspectRatio: itemRatio },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
+              imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "img",
+                {
+                  src: item.url,
+                  alt: `Post media ${index + 1}`,
+                  className: cn(
+                    "w-full h-full transition-transform duration-300",
+                    itemIsPortrait ? "object-contain" : "object-cover"
+                  ),
+                  onError: () => handleImageError(item.url)
+                }
+              )
+            ]
+          }
+        ) }, index);
+      }) }),
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CarouselPrevious, { className: "ms-2" }),
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CarouselNext, { className: "me-2" })
     ] });
   }
   return null;
 }
-function getAspectRatio(ratio) {
+function getAspectRatioCSS(ratio) {
   const ratios = {
-    "16:9": 16 / 9,
-    "9:16": 9 / 16,
-    "1:1": 1,
-    "4:5": 4 / 5,
-    "5:4": 5 / 4
+    "16:9": "16/9",
+    "9:16": "4/5",
+    // Instagram standard portrait
+    "1:1": "1/1",
+    "4:5": "4/5",
+    "5:4": "5/4"
   };
   return ratios[ratio];
 }
@@ -5240,7 +5284,11 @@ function InstagramPostActions({
   onBooster,
   onAIAnalysis,
   onOpenInstagram,
-  instagramUrl
+  instagramUrl,
+  disableCommentAnalyzer = false,
+  disableBooster = false,
+  disableAIAnalysis = false,
+  disableOpenInstagram = false
 }) {
   if (!showActions) return null;
   const handleOpenInstagram = () => {
@@ -5250,21 +5298,6 @@ function InstagramPostActions({
       window.open(instagramUrl, "_blank", "noopener,noreferrer");
     }
   };
-  const handleCommentAnalyzer = () => {
-    if (onCommentAnalyzer) {
-      onCommentAnalyzer();
-    }
-  };
-  const handleBooster = () => {
-    if (onBooster) {
-      onBooster();
-    }
-  };
-  const handleAIAnalysis = () => {
-    if (onAIAnalysis) {
-      onAIAnalysis();
-    }
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "absolute top-2 end-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-10", children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -5272,13 +5305,17 @@ function InstagramPostActions({
         {
           variant: "ghost",
           size: "icon",
-          className: "size-8 bg-background/80 backdrop-blur-sm hover:bg-background",
-          onClick: handleCommentAnalyzer,
+          className: cn(
+            "size-8 bg-background/80 backdrop-blur-sm hover:bg-background",
+            disableCommentAnalyzer && "opacity-40 cursor-not-allowed pointer-events-none"
+          ),
+          onClick: disableCommentAnalyzer ? void 0 : onCommentAnalyzer,
+          disabled: disableCommentAnalyzer,
           "aria-label": "Comment Analyzer",
           children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icons.messageCircle, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: "\u062A\u062D\u0644\u06CC\u0644 \u06A9\u0627\u0645\u0646\u062A\u200C\u0647\u0627" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: disableCommentAnalyzer ? "\u062A\u062D\u0644\u06CC\u0644 \u06A9\u0627\u0645\u0646\u062A\u200C\u0647\u0627 (\u063A\u06CC\u0631\u0641\u0639\u0627\u0644)" : "\u062A\u062D\u0644\u06CC\u0644 \u06A9\u0627\u0645\u0646\u062A\u200C\u0647\u0627" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -5286,13 +5323,17 @@ function InstagramPostActions({
         {
           variant: "ghost",
           size: "icon",
-          className: "size-8 bg-background/80 backdrop-blur-sm hover:bg-background",
-          onClick: handleBooster,
+          className: cn(
+            "size-8 bg-background/80 backdrop-blur-sm hover:bg-background",
+            disableBooster && "opacity-40 cursor-not-allowed pointer-events-none"
+          ),
+          onClick: disableBooster ? void 0 : onBooster,
+          disabled: disableBooster,
           "aria-label": "Booster",
           children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icons.rocket, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: "\u0628\u0648\u0633\u062A\u0631" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: disableBooster ? "\u0628\u0648\u0633\u062A\u0631 (\u063A\u06CC\u0631\u0641\u0639\u0627\u0644)" : "\u0628\u0648\u0633\u062A\u0631" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -5300,13 +5341,17 @@ function InstagramPostActions({
         {
           variant: "ghost",
           size: "icon",
-          className: "size-8 bg-background/80 backdrop-blur-sm hover:bg-background",
-          onClick: handleAIAnalysis,
+          className: cn(
+            "size-8 bg-background/80 backdrop-blur-sm hover:bg-background",
+            disableAIAnalysis && "opacity-40 cursor-not-allowed pointer-events-none"
+          ),
+          onClick: disableAIAnalysis ? void 0 : onAIAnalysis,
+          disabled: disableAIAnalysis,
           "aria-label": "AI Analysis",
           children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icons.sparkles, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: "\u062A\u062D\u0644\u06CC\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06CC" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: disableAIAnalysis ? "\u062A\u062D\u0644\u06CC\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06CC (\u063A\u06CC\u0631\u0641\u0639\u0627\u0644)" : "\u062A\u062D\u0644\u06CC\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06CC" }) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Tooltip, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -5314,13 +5359,17 @@ function InstagramPostActions({
         {
           variant: "ghost",
           size: "icon",
-          className: "size-8 bg-background/80 backdrop-blur-sm hover:bg-background",
-          onClick: handleOpenInstagram,
+          className: cn(
+            "size-8 bg-background/80 backdrop-blur-sm hover:bg-background",
+            disableOpenInstagram && "opacity-40 cursor-not-allowed pointer-events-none"
+          ),
+          onClick: disableOpenInstagram ? void 0 : handleOpenInstagram,
+          disabled: disableOpenInstagram,
           "aria-label": "Open on Instagram",
           children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icons.instagram, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: "\u0628\u0627\u0632 \u06A9\u0631\u062F\u0646 \u062F\u0631 \u0627\u06CC\u0646\u0633\u062A\u0627\u06AF\u0631\u0627\u0645" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: disableOpenInstagram ? "\u0628\u0627\u0632 \u06A9\u0631\u062F\u0646 \u062F\u0631 \u0627\u06CC\u0646\u0633\u062A\u0627\u06AF\u0631\u0627\u0645 (\u063A\u06CC\u0631\u0641\u0639\u0627\u0644)" : "\u0628\u0627\u0632 \u06A9\u0631\u062F\u0646 \u062F\u0631 \u0627\u06CC\u0646\u0633\u062A\u0627\u06AF\u0631\u0627\u0645" }) })
     ] })
   ] }) });
 }
@@ -5376,6 +5425,10 @@ var InstagramPost = React19.forwardRef(
     onAIAnalysis,
     onOpenInstagram,
     instagramUrl,
+    disableCommentAnalyzer = false,
+    disableBooster = false,
+    disableAIAnalysis = false,
+    disableOpenInstagram = false,
     placeholderText,
     dir,
     ...props
@@ -5397,7 +5450,11 @@ var InstagramPost = React19.forwardRef(
               onBooster,
               onAIAnalysis,
               onOpenInstagram,
-              instagramUrl
+              instagramUrl,
+              disableCommentAnalyzer,
+              disableBooster,
+              disableAIAnalysis,
+              disableOpenInstagram
             }
           ),
           isVertical ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
@@ -6670,7 +6727,7 @@ var ProfileCard = React22.forwardRef(
         onClick: onCardClick,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "relative flex-shrink-0", children: avatarBorderVariant === "gold" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "relative p-0.5 rounded-full bg-gradient-to-br from-amber-500 via-yellow-400 to-amber-500", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-background"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "relative flex-shrink-0", children: avatarBorderVariant === "gold" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "relative p-0.5 rounded-full bg-gradient-to-br from-brand-400 via-brand to-brand-400", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-background"), children: [
             /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AvatarImage, { src: avatarSrc, alt: avatarAlt || name }),
             /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(AvatarFallback, { className: "bg-surface-300 text-foreground font-medium", children: initials || name.charAt(0) })
           ] }) }) : avatarBorderVariant === "primary" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-offset-2 ring-offset-background ring-primary"), children: [
@@ -6748,7 +6805,7 @@ var ProfileInfo = React23.forwardRef(
       transparent: "bg-transparent"
     };
     const borderClasses = {
-      gold: "ring-2 ring-offset-2 ring-offset-background [--tw-ring-color:conic-gradient(from_180deg,#f59e0b,#fbbf24,#f59e0b)]",
+      gold: "ring-2 ring-offset-2 ring-offset-background [--tw-ring-color:conic-gradient(from_180deg,#22c55e,#4ade80,#22c55e)]",
       primary: "ring-2 ring-offset-2 ring-offset-background ring-primary",
       none: ""
     };
@@ -6768,7 +6825,7 @@ var ProfileInfo = React23.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "relative", children: avatarBorderVariant === "gold" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "relative p-0.5 rounded-full bg-gradient-to-br from-amber-500 via-yellow-400 to-amber-500", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-background"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "relative", children: avatarBorderVariant === "gold" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "relative p-0.5 rounded-full bg-gradient-to-br from-brand-400 via-brand to-brand-400", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-background"), children: [
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AvatarImage, { src: avatarSrc, alt: avatarAlt || name }),
               /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(AvatarFallback, { className: "bg-surface-300 text-foreground font-medium", children: initials || name.charAt(0) })
             ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Avatar, { className: cn(currentSize.avatar, borderClasses[avatarBorderVariant]), children: [
@@ -7021,10 +7078,10 @@ var EngagementRate = React24.forwardRef(
             min: r.average[0],
             max: r.average[1],
             display: `${r.average[0]}% - ${r.average[1]}%`,
-            color: "#eab308",
-            // yellow-500
-            hoverColor: "#ca8a04"
-            // yellow-600
+            color: "#22c55e",
+            // brand green (green-500)
+            hoverColor: "#16a34a"
+            // brand green hover (green-600)
           },
           {
             label: t.couldBeImproved,
@@ -7365,10 +7422,10 @@ var EngagementRateBar = React25.forwardRef(
           label: t.average,
           min: r.average[0],
           max: r.average[1],
-          color: "#eab308",
-          // yellow-500
-          hoverColor: "#ca8a04"
-          // yellow-600
+          color: "#22c55e",
+          // brand green (green-500)
+          hoverColor: "#16a34a"
+          // brand green hover (green-600)
         },
         {
           label: t.couldBeImproved,
@@ -7508,7 +7565,7 @@ var progressIndicatorVariants = (0, import_class_variance_authority12.cva)(
         primary: "bg-brand-500",
         secondary: "bg-foreground",
         success: "bg-green-500",
-        warning: "bg-yellow-500",
+        warning: "bg-warning-500",
         destructive: "bg-destructive-500"
       }
     },