@parto-system-design/ui 1.0.5 → 1.1.1

package/dist/index.css

@@ -245,8 +245,8 @@
 .max-h-\[300px\] {
   max-height: 300px;
 }
-.min-h-\[38px\] {
-  min-height: 38px;
+.min-h-\[34px\] {
+  min-height: 34px;
 }
 .min-h-\[200px\] {
   min-height: 200px;
@@ -320,8 +320,8 @@
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
-.min-w-\[120px\] {
-  min-width: 120px;
+.min-w-\[80px\] {
+  min-width: 80px;
 }
 .min-w-\[140px\] {
   min-width: 140px;
@@ -886,27 +886,27 @@
 .bg-warning-300 {
   background-color: hsl(var(--warning-300));
 }
+.bg-warning-500 {
+  background-color: hsl(var(--warning-500));
+}
 .bg-warning-600 {
   background-color: hsl(var(--warning-600));
 }
-.bg-yellow-500 {
-  background-color: #eab308;
-}
 .bg-gradient-to-br {
   --tw-gradient-position: to bottom right in oklab;
   background-image: linear-gradient(var(--tw-gradient-stops));
 }
-.from-amber-500 {
-  --tw-gradient-from: #f59e0b;
+.from-brand-400 {
+  --tw-gradient-from: hsl(var(--brand-400));
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 }
-.via-yellow-400 {
-  --tw-gradient-via: #facc15;
+.via-brand {
+  --tw-gradient-via: hsl(var(--brand-default));
   --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-via-stops);
 }
-.to-amber-500 {
-  --tw-gradient-to: #f59e0b;
+.to-brand-400 {
+  --tw-gradient-to: hsl(var(--brand-400));
   --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
 }
 .fill-brand {
@@ -915,6 +915,9 @@
 .fill-current {
   fill: currentcolor;
 }
+.object-contain {
+  object-fit: contain;
+}
 .object-cover {
   object-fit: cover;
 }
@@ -1107,6 +1110,9 @@
 .opacity-0 {
   opacity: 0%;
 }
+.opacity-40 {
+  opacity: 40%;
+}
 .opacity-50 {
   opacity: 50%;
 }
@@ -1133,8 +1139,8 @@
   --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
-.\[--tw-ring-color\:conic-gradient\(from_180deg\,\#f59e0b\,\#fbbf24\,\#f59e0b\)\] {
-  --tw-ring-color: conic-gradient(from 180deg,#f59e0b,#fbbf24,#f59e0b);
+.\[--tw-ring-color\:conic-gradient\(from_180deg\,\#22c55e\,\#4ade80\,\#22c55e\)\] {
+  --tw-ring-color: conic-gradient(from 180deg,#22c55e,#4ade80,#22c55e);
 }
 .ring-background {
   --tw-ring-color: hsl(var(--background-default));
@@ -1313,6 +1319,13 @@
     }
   }
 }
+.group-hover\:scale-\[1\.02\] {
+  &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      scale: 1.02;
+    }
+  }
+}
 .group-hover\:opacity-100 {
   &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -1667,6 +1680,17 @@
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
 }
+.focus-within\:ring-offset-foreground-muted {
+  &:focus-within {
+    --tw-ring-offset-color: hsl(var(--foreground-muted));
+  }
+}
+.focus-within\:outline-none {
+  &:focus-within {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+}
 .hover\:border-brand-600 {
   &:hover {
     @media (hover: hover) {
@@ -2140,11 +2164,6 @@
     outline-offset: 1px;
   }
 }
-.focus-visible\:outline-amber-700 {
-  &:focus-visible {
-    outline-color: #b45309;
-  }
-}
 .focus-visible\:outline-border-strong {
   &:focus-visible {
     outline-color: hsl(var(--border-strong));

package/dist/index.d.cts

@@ -869,6 +869,10 @@ interface InstagramPostProps extends React$1.HTMLAttributes<HTMLDivElement>, Var
     onAIAnalysis?: () => void;
     onOpenInstagram?: () => void;
     instagramUrl?: string;
+    disableCommentAnalyzer?: boolean;
+    disableBooster?: boolean;
+    disableAIAnalysis?: boolean;
+    disableOpenInstagram?: boolean;
     placeholderText?: string;
 }
 declare const instagramPostVariants: (props?: ({

package/dist/index.d.ts

@@ -869,6 +869,10 @@ interface InstagramPostProps extends React$1.HTMLAttributes<HTMLDivElement>, Var
     onAIAnalysis?: () => void;
     onOpenInstagram?: () => void;
     instagramUrl?: string;
+    disableCommentAnalyzer?: boolean;
+    disableBooster?: boolean;
+    disableAIAnalysis?: boolean;
+    disableOpenInstagram?: boolean;
     placeholderText?: string;
 }
 declare const instagramPostVariants: (props?: ({

package/dist/index.js

@@ -668,7 +668,7 @@ var buttonVariants = cva2(
           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
@@ -678,7 +678,7 @@ var buttonVariants = cva2(
           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
@@ -688,7 +688,7 @@ var buttonVariants = cva2(
           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
@@ -4014,12 +4014,16 @@ import { X as X3 } from "lucide-react";
 import { cva as cva7 } from "class-variance-authority";
 import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 var tagInputVariants = cva7(
-  "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: {
@@ -4090,7 +4094,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__ */ jsxs20(
@@ -4124,7 +4128,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
             }
@@ -4142,12 +4146,16 @@ import { X as X4 } from "lucide-react";
 import { cva as cva8 } from "class-variance-authority";
 import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var hashtagInputVariants = cva8(
-  "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: {
@@ -4218,7 +4226,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,
@@ -4253,7 +4261,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
             }
@@ -4588,8 +4596,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__ */ jsxs23("div", { className: "text-center p-4", children: [
           /* @__PURE__ */ jsx41(ImageOff, { className: "size-12 mx-auto mb-2 text-muted-foreground" }),
           /* @__PURE__ */ jsx41("p", { className: "text-sm text-muted-foreground", children: placeholderText })
@@ -4613,19 +4622,33 @@ function InstagramPostMedia({
         )
       ] });
     }
-    const ratio = getAspectRatio(item.aspectRatio || "1:1");
-    return /* @__PURE__ */ jsxs23("div", { className: "w-full relative overflow-hidden group cursor-pointer bg-muted/30", style: { aspectRatio: ratio }, children: [
-      /* @__PURE__ */ jsx41("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
-      imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ jsx41(
-        "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__ */ jsxs23(
+      "div",
+      {
+        className: "w-full relative overflow-hidden group cursor-pointer bg-black",
+        style: { aspectRatio: instagramRatio },
+        children: [
+          /* @__PURE__ */ jsx41("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
+          imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ jsx41(
+            "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];
@@ -4643,19 +4666,31 @@ function InstagramPostMedia({
         )
       ] });
     }
-    const ratio = getAspectRatio(item.aspectRatio || "16:9");
-    return /* @__PURE__ */ jsxs23("div", { className: "w-full relative overflow-hidden group cursor-pointer bg-muted/30", style: { aspectRatio: ratio }, children: [
-      /* @__PURE__ */ jsx41("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
-      imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ jsx41(
-        "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__ */ jsxs23(
+      "div",
+      {
+        className: "w-full relative overflow-hidden group cursor-pointer bg-black",
+        style: { aspectRatio: instagramRatio },
+        children: [
+          /* @__PURE__ */ jsx41("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
+          imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ jsx41(
+            "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") {
@@ -4677,38 +4712,47 @@ function InstagramPostMedia({
       ] }) });
     }
     return /* @__PURE__ */ jsxs23(Carousel, { className: "w-full", children: [
-      /* @__PURE__ */ jsx41(CarouselContent, { children: media.map((item, index) => /* @__PURE__ */ jsx41(CarouselItem, { children: /* @__PURE__ */ jsxs23(
-        "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__ */ jsx41("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
-            imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ jsx41(
-              "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__ */ jsx41(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__ */ jsx41(CarouselItem, { children: /* @__PURE__ */ jsxs23(
+          "div",
+          {
+            className: "w-full relative overflow-hidden group cursor-pointer bg-black",
+            style: { aspectRatio: itemRatio },
+            children: [
+              /* @__PURE__ */ jsx41("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
+              imageError[item.url] ? renderPlaceholder() : /* @__PURE__ */ jsx41(
+                "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__ */ jsx41(CarouselPrevious, { className: "ms-2" }),
       /* @__PURE__ */ jsx41(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];
 }
@@ -4931,7 +4975,11 @@ function InstagramPostActions({
   onBooster,
   onAIAnalysis,
   onOpenInstagram,
-  instagramUrl
+  instagramUrl,
+  disableCommentAnalyzer = false,
+  disableBooster = false,
+  disableAIAnalysis = false,
+  disableOpenInstagram = false
 }) {
   if (!showActions) return null;
   const handleOpenInstagram = () => {
@@ -4941,21 +4989,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__ */ jsx41(TooltipProvider, { children: /* @__PURE__ */ jsxs23("div", { className: "absolute top-2 end-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity z-10", children: [
     /* @__PURE__ */ jsxs23(Tooltip, { children: [
       /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
@@ -4963,13 +4996,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__ */ jsx41(Icons.messageCircle, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx41(TooltipContent, { children: /* @__PURE__ */ jsx41("p", { children: "\u062A\u062D\u0644\u06CC\u0644 \u06A9\u0627\u0645\u0646\u062A\u200C\u0647\u0627" }) })
+      /* @__PURE__ */ jsx41(TooltipContent, { children: /* @__PURE__ */ jsx41("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__ */ jsxs23(Tooltip, { children: [
       /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
@@ -4977,13 +5014,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__ */ jsx41(Icons.rocket, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx41(TooltipContent, { children: /* @__PURE__ */ jsx41("p", { children: "\u0628\u0648\u0633\u062A\u0631" }) })
+      /* @__PURE__ */ jsx41(TooltipContent, { children: /* @__PURE__ */ jsx41("p", { children: disableBooster ? "\u0628\u0648\u0633\u062A\u0631 (\u063A\u06CC\u0631\u0641\u0639\u0627\u0644)" : "\u0628\u0648\u0633\u062A\u0631" }) })
     ] }),
     /* @__PURE__ */ jsxs23(Tooltip, { children: [
       /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
@@ -4991,13 +5032,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__ */ jsx41(Icons.sparkles, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx41(TooltipContent, { children: /* @__PURE__ */ jsx41("p", { children: "\u062A\u062D\u0644\u06CC\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06CC" }) })
+      /* @__PURE__ */ jsx41(TooltipContent, { children: /* @__PURE__ */ jsx41("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__ */ jsxs23(Tooltip, { children: [
       /* @__PURE__ */ jsx41(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx41(
@@ -5005,13 +5050,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__ */ jsx41(Icons.instagram, { className: "size-4" })
         }
       ) }),
-      /* @__PURE__ */ jsx41(TooltipContent, { children: /* @__PURE__ */ jsx41("p", { children: "\u0628\u0627\u0632 \u06A9\u0631\u062F\u0646 \u062F\u0631 \u0627\u06CC\u0646\u0633\u062A\u0627\u06AF\u0631\u0627\u0645" }) })
+      /* @__PURE__ */ jsx41(TooltipContent, { children: /* @__PURE__ */ jsx41("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" }) })
     ] })
   ] }) });
 }
@@ -5067,6 +5116,10 @@ var InstagramPost = React19.forwardRef(
     onAIAnalysis,
     onOpenInstagram,
     instagramUrl,
+    disableCommentAnalyzer = false,
+    disableBooster = false,
+    disableAIAnalysis = false,
+    disableOpenInstagram = false,
     placeholderText,
     dir,
     ...props
@@ -5088,7 +5141,11 @@ var InstagramPost = React19.forwardRef(
               onBooster,
               onAIAnalysis,
               onOpenInstagram,
-              instagramUrl
+              instagramUrl,
+              disableCommentAnalyzer,
+              disableBooster,
+              disableAIAnalysis,
+              disableOpenInstagram
             }
           ),
           isVertical ? /* @__PURE__ */ jsxs23(Fragment4, { children: [
@@ -6365,7 +6422,7 @@ var ProfileCard = React22.forwardRef(
         onClick: onCardClick,
         ...props,
         children: [
-          /* @__PURE__ */ jsx50("div", { className: "relative flex-shrink-0", children: avatarBorderVariant === "gold" ? /* @__PURE__ */ jsx50("div", { className: "relative p-0.5 rounded-full bg-gradient-to-br from-amber-500 via-yellow-400 to-amber-500", children: /* @__PURE__ */ jsxs30(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-background"), children: [
+          /* @__PURE__ */ jsx50("div", { className: "relative flex-shrink-0", children: avatarBorderVariant === "gold" ? /* @__PURE__ */ jsx50("div", { className: "relative p-0.5 rounded-full bg-gradient-to-br from-brand-400 via-brand to-brand-400", children: /* @__PURE__ */ jsxs30(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-background"), children: [
             /* @__PURE__ */ jsx50(AvatarImage, { src: avatarSrc, alt: avatarAlt || name }),
             /* @__PURE__ */ jsx50(AvatarFallback, { className: "bg-surface-300 text-foreground font-medium", children: initials || name.charAt(0) })
           ] }) }) : avatarBorderVariant === "primary" ? /* @__PURE__ */ jsxs30(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-offset-2 ring-offset-background ring-primary"), children: [
@@ -6443,7 +6500,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: ""
     };
@@ -6463,7 +6520,7 @@ var ProfileInfo = React23.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx51("div", { className: "relative", children: avatarBorderVariant === "gold" ? /* @__PURE__ */ jsx51("div", { className: "relative p-0.5 rounded-full bg-gradient-to-br from-amber-500 via-yellow-400 to-amber-500", children: /* @__PURE__ */ jsxs31(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-background"), children: [
+            /* @__PURE__ */ jsx51("div", { className: "relative", children: avatarBorderVariant === "gold" ? /* @__PURE__ */ jsx51("div", { className: "relative p-0.5 rounded-full bg-gradient-to-br from-brand-400 via-brand to-brand-400", children: /* @__PURE__ */ jsxs31(Avatar, { className: cn(currentSize.avatar, "ring-2 ring-background"), children: [
               /* @__PURE__ */ jsx51(AvatarImage, { src: avatarSrc, alt: avatarAlt || name }),
               /* @__PURE__ */ jsx51(AvatarFallback, { className: "bg-surface-300 text-foreground font-medium", children: initials || name.charAt(0) })
             ] }) }) : /* @__PURE__ */ jsxs31(Avatar, { className: cn(currentSize.avatar, borderClasses[avatarBorderVariant]), children: [
@@ -6716,10 +6773,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,
@@ -7060,10 +7117,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,
@@ -7203,7 +7260,7 @@ var progressIndicatorVariants = cva12(
         primary: "bg-brand-500",
         secondary: "bg-foreground",
         success: "bg-green-500",
-        warning: "bg-yellow-500",
+        warning: "bg-warning-500",
         destructive: "bg-destructive-500"
       }
     },