@parto-system-design/ui 1.1.11 → 1.1.17

package/dist/components/ui/page-card.js

@@ -1,7 +1,613 @@
-export { PageCard } from '../../chunk-5HCXH6GS.js';
-import '../../chunk-MEK4RSGC.js';
-import '../../chunk-YC5KLN6I.js';
-import '../../chunk-CV3N3HVK.js';
-import '../../chunk-4SVQNEVH.js';
+'use client';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function convertToLocalNumbers(text, locale) {
+  if (locale === "fa" || locale === "ar") {
+    const persianDigits = ["\u06F0", "\u06F1", "\u06F2", "\u06F3", "\u06F4", "\u06F5", "\u06F6", "\u06F7", "\u06F8", "\u06F9"];
+    return String(text).replace(/\d/g, (digit) => persianDigits[parseInt(digit)]);
+  }
+  return String(text);
+}
+
+// src/lib/i18n.ts
+var statusLabels = {
+  fa: { critical: "\u0628\u062D\u0631\u0627\u0646\u06CC", warning: "\u0647\u0634\u062F\u0627\u0631", normal: "\u0639\u0627\u062F\u06CC" },
+  ar: { critical: "\u062D\u0631\u062C", warning: "\u062A\u062D\u0630\u064A\u0631", normal: "\u0637\u0628\u064A\u0639\u064A" },
+  en: { critical: "Critical", warning: "Warning", normal: "Normal" }
+};
+var SIZE_CLASSES = {
+  sm: { badge: "h-6 text-xs px-2 gap-1.5", dot: "size-1.5" },
+  md: { badge: "h-7 text-sm px-2.5 gap-2", dot: "size-2" }
+};
+function tokenVar(status) {
+  return `--status-${status}`;
+}
+var StatusBadge = React.forwardRef(
+  ({ className, status, size = "md", showLabel = true, locale = "fa", animated, ...props }, ref) => {
+    const label = statusLabels[locale]?.[status] ?? statusLabels.fa[status];
+    const shouldPulse = animated ?? status === "critical";
+    const token = tokenVar(status);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "status-badge",
+        "data-status": status,
+        "aria-label": showLabel ? void 0 : label,
+        className: cn(
+          "inline-flex items-center rounded-full border font-medium transition-colors duration-150",
+          SIZE_CLASSES[size].badge,
+          className
+        ),
+        style: {
+          backgroundColor: `hsl(var(${token}) / 0.1)`,
+          borderColor: `hsl(var(${token}) / 0.3)`,
+          color: `hsl(var(${token}))`
+        },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+            shouldPulse && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "absolute inset-0 rounded-full animate-pulse-subtle",
+                style: { backgroundColor: `hsl(var(${token}) / 0.5)` },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("relative inline-block rounded-full", SIZE_CLASSES[size].dot),
+                style: { backgroundColor: `hsl(var(${token}))` },
+                "aria-hidden": "true"
+              }
+            )
+          ] }),
+          showLabel && /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+StatusBadge.displayName = "StatusBadge";
+var PLATFORM_META = {
+  instagram: {
+    label: "Instagram",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" }) })
+  },
+  twitter: {
+    label: "X",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.259 5.63 5.905-5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
+  },
+  tiktok: {
+    label: "TikTok",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.16 8.16 0 004.77 1.52V6.75a4.85 4.85 0 01-1-.06z" }) })
+  },
+  youtube: {
+    label: "YouTube",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) })
+  },
+  linkedin: {
+    label: "LinkedIn",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) })
+  },
+  telegram: {
+    label: "Telegram",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M11.944 0A12 12 0 000 12a12 12 0 0012 12 12 12 0 0012-12A12 12 0 0012 0a12 12 0 00-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 01.171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" }) })
+  },
+  threads: {
+    label: "Threads",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.868 1.205 8.617.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.749-1.752-2.98-.065-1.19.388-2.285 1.277-3.086.84-.754 2.02-1.164 3.43-1.19.954-.018 1.858.09 2.695.322-.082-.858-.372-1.502-.861-1.903-.529-.434-1.32-.658-2.332-.67-.884.01-1.63.23-2.22.65l-1.11-1.75c.97-.625 2.18-.95 3.6-.97h.022c1.63.02 2.976.497 3.898 1.385.955.92 1.444 2.25 1.51 3.95.23.073.46.149.682.232 1.69.64 2.847 1.635 3.406 2.946.859 2.002.86 5.139-1.773 7.674-1.797 1.742-3.993 2.525-6.935 2.545zm.098-10.02c-.745.01-1.377.186-1.882.523-.443.298-.706.733-.67 1.215.03.564.342 1.017.876 1.275.516.25 1.087.299 1.58.127.684-.24 1.34-.93 1.614-2.366a9.68 9.68 0 00-1.518-.774z" }) })
+  },
+  facebook: {
+    label: "Facebook",
+    icon: ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.875v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) })
+  }
+};
+var socialPlatformBadgeVariants = cva("inline-flex items-center font-medium transition-colors duration-150", {
+  variants: {
+    size: {
+      xs: "gap-1",
+      sm: "gap-1.5",
+      md: "gap-1.5",
+      lg: "gap-2"
+    },
+    variant: {
+      flat: "",
+      badge: "border border-border bg-surface-100"
+    }
+  },
+  compoundVariants: [
+    { variant: "badge", size: "xs", className: "px-1.5 py-0.5 rounded" },
+    { variant: "badge", size: "sm", className: "px-2 py-1 rounded" },
+    { variant: "badge", size: "md", className: "px-2.5 py-1 rounded-md" },
+    { variant: "badge", size: "lg", className: "px-3 py-1.5 rounded-md" }
+  ],
+  defaultVariants: { size: "sm", variant: "flat" }
+});
+var SIZE_CHILD_CLASSES = {
+  xs: { icon: "size-3", text: "text-xs" },
+  sm: { icon: "size-4", text: "text-xs" },
+  md: { icon: "size-5", text: "text-sm" },
+  lg: { icon: "size-6", text: "text-base" }
+};
+var SocialPlatformBadge = React.forwardRef(
+  ({ className, platform, size = "sm", showLabel = false, variant = "flat", style, ...props }, ref) => {
+    const meta = PLATFORM_META[platform];
+    const Icon = meta.icon;
+    const sizeClasses = SIZE_CHILD_CLASSES[size];
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "social-platform-badge",
+        className: cn(socialPlatformBadgeVariants({ size, variant }), className),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: cn(sizeClasses.icon, "shrink-0"), style: { color: `var(--social-platform-${platform})` } }),
+          showLabel && /* @__PURE__ */ jsx("span", { className: cn(sizeClasses.text, "text-foreground-light"), children: meta.label })
+        ]
+      }
+    );
+  }
+);
+SocialPlatformBadge.displayName = "SocialPlatformBadge";
+var TREND_CLASSES = {
+  up: "text-[hsl(var(--sentiment-positive))]",
+  down: "text-[hsl(var(--sentiment-negative))]",
+  neutral: "text-[hsl(var(--sentiment-neutral))]"
+};
+function resolveTrend(data, trend) {
+  if (trend !== "auto") return trend;
+  if (data.length < 2) return "neutral";
+  const first = data[0];
+  const last = data[data.length - 1];
+  if (last > first) return "up";
+  if (last < first) return "down";
+  return "neutral";
+}
+var Sparkline = React.forwardRef(
+  ({
+    className,
+    data,
+    variant = "line",
+    trend = "auto",
+    width = 80,
+    height = 24,
+    strokeWidth = 1.5,
+    showEndDot = false,
+    padding = 2,
+    color,
+    barGap = 1,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const effectiveTrend = resolveTrend(data, trend);
+    const trendColorClass = color ? void 0 : TREND_CLASSES[effectiveTrend];
+    if (data.length === 0) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-slot": "sparkline",
+          "data-empty": "true",
+          "aria-hidden": "true",
+          className: cn("inline-block", className),
+          style: { width, height },
+          ...props
+        }
+      );
+    }
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const innerW = width - padding * 2;
+    const innerH = height - padding * 2;
+    const stepX = data.length > 1 ? innerW / (data.length - 1) : 0;
+    const yFor = (v) => padding + innerH - (v - min) / range * innerH;
+    const xFor = (i) => padding + i * stepX;
+    const points = data.map((v, i) => ({ x: xFor(i), y: yFor(v) }));
+    const linePath = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(" ");
+    const areaPath = `${linePath} L${points[points.length - 1].x.toFixed(2)} ${(height - padding).toFixed(
+      2
+    )} L${points[0].x.toFixed(2)} ${(height - padding).toFixed(2)} Z`;
+    const stroke = color ?? "currentColor";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "sparkline",
+        "data-variant": variant,
+        "data-trend": effectiveTrend,
+        role: ariaLabel ? "img" : void 0,
+        "aria-label": ariaLabel,
+        "aria-hidden": ariaLabel ? void 0 : true,
+        className: cn("inline-block align-middle", trendColorClass, className),
+        style: { width, height },
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: "none",
+            focusable: "false",
+            children: [
+              variant === "area" && /* @__PURE__ */ jsx("path", { d: areaPath, fill: stroke, opacity: 0.18 }),
+              (variant === "line" || variant === "area") && /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: linePath,
+                  fill: "none",
+                  stroke,
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  vectorEffect: "non-scaling-stroke"
+                }
+              ),
+              variant === "bars" && data.map((v, i) => {
+                const gap = barGap;
+                const barW = Math.max(0, stepX - gap);
+                const y = yFor(v);
+                const barH = Math.max(1, height - padding - y);
+                const x = xFor(i) - barW / 2;
+                return /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: x.toFixed(2),
+                    y: y.toFixed(2),
+                    width: barW.toFixed(2),
+                    height: barH.toFixed(2),
+                    rx: Math.min(1, barW / 3),
+                    fill: stroke
+                  },
+                  i
+                );
+              }),
+              showEndDot && variant !== "bars" && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: points[points.length - 1].x.toFixed(2),
+                  cy: points[points.length - 1].y.toFixed(2),
+                  r: strokeWidth + 0.5,
+                  fill: stroke
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Sparkline.displayName = "Sparkline";
+var LABELS = {
+  fa: { real: "\u0648\u0627\u0642\u0639\u06CC", suspicious: "\u0645\u0634\u06A9\u0648\u06A9", bot: "\u0628\u0627\u062A", summary: "\u0646\u0631\u062E \u062D\u0633\u0627\u0628\u200C\u0647\u0627\u06CC \u0648\u0627\u0642\u0639\u06CC" },
+  ar: { real: "\u062D\u0642\u064A\u0642\u064A", suspicious: "\u0645\u0634\u0628\u0648\u0647", bot: "\u0631\u0648\u0628\u0648\u062A", summary: "\u0645\u0639\u062F\u0644 \u0627\u0644\u062D\u0633\u0627\u0628\u0627\u062A \u0627\u0644\u062D\u0642\u064A\u0642\u064A\u0629" },
+  en: { real: "Real", suspicious: "Suspicious", bot: "Bot", summary: "Real-account rate" }
+};
+var SEGMENT_STYLES = {
+  real: {
+    bar: "bg-[hsl(var(--sentiment-positive))]",
+    text: "text-[hsl(var(--sentiment-positive))]",
+    bg: "bg-[hsl(var(--sentiment-positive)/0.12)]",
+    dot: "bg-[hsl(var(--sentiment-positive))]"
+  },
+  suspicious: {
+    bar: "bg-[hsl(var(--warning-default))]",
+    text: "text-[hsl(var(--warning-default))]",
+    bg: "bg-[hsl(var(--warning-default)/0.12)]",
+    dot: "bg-[hsl(var(--warning-default))]"
+  },
+  bot: {
+    bar: "bg-[hsl(var(--destructive-default))]",
+    text: "text-[hsl(var(--destructive-default))]",
+    bg: "bg-[hsl(var(--destructive-default)/0.12)]",
+    dot: "bg-[hsl(var(--destructive-default))]"
+  }
+};
+var SEGMENT_ORDER = ["real", "suspicious", "bot"];
+function calcPercents(data) {
+  const total = SEGMENT_ORDER.reduce((sum, k) => sum + (data[k] ?? 0), 0);
+  if (total === 0) return { real: 0, suspicious: 0, bot: 0 };
+  const floats = SEGMENT_ORDER.map((k) => ({ k, v: (data[k] ?? 0) / total * 100 }));
+  const floors = floats.map(({ k, v }) => ({ k, floor: Math.floor(v), rem: v - Math.floor(v) }));
+  const remaining = 100 - floors.reduce((s, f) => s + f.floor, 0);
+  const sorted = [...floors].sort((a, b) => b.rem - a.rem);
+  sorted.slice(0, remaining).forEach((f) => f.floor++);
+  const result = { real: 0, suspicious: 0, bot: 0 };
+  sorted.forEach(({ k, floor }) => result[k] = floor);
+  return result;
+}
+var BAR_HEIGHT = {
+  sm: "h-1.5",
+  md: "h-2",
+  lg: "h-3"
+};
+var BotDetectionMeter = React.forwardRef(
+  ({
+    className,
+    data,
+    variant = "stacked",
+    showCounts = false,
+    showPercent = true,
+    showSummary = true,
+    size = "md",
+    locale = "fa",
+    ...props
+  }, ref) => {
+    const labels = LABELS[locale];
+    const percents = calcPercents(data);
+    const total = SEGMENT_ORDER.reduce((sum, k) => sum + (data[k] ?? 0), 0);
+    const fmt = (n) => convertToLocalNumbers(n, locale);
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-slot": "bot-detection-meter",
+          "data-variant": "compact",
+          className: cn("flex items-center gap-2 text-xs", className),
+          ...props,
+          children: SEGMENT_ORDER.map((k) => {
+            const value = showCounts ? data[k] ?? 0 : percents[k];
+            return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", SEGMENT_STYLES[k].dot), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "text-foreground-lighter", children: labels[k] }),
+              /* @__PURE__ */ jsxs("span", { className: cn("font-semibold tabular-nums", SEGMENT_STYLES[k].text), children: [
+                fmt(value),
+                !showCounts && showPercent && "\u066A"
+              ] })
+            ] }, k);
+          })
+        }
+      );
+    }
+    if (variant === "bars") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          "data-slot": "bot-detection-meter",
+          "data-variant": "bars",
+          className: cn("flex flex-col gap-2", className),
+          ...props,
+          children: SEGMENT_ORDER.map((k) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-foreground", children: [
+                /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", SEGMENT_STYLES[k].dot), "aria-hidden": "true" }),
+                labels[k]
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-foreground-lighter", children: [
+                showCounts && /* @__PURE__ */ jsx("span", { className: "me-2", children: fmt(data[k] ?? 0) }),
+                showPercent && /* @__PURE__ */ jsxs("span", { className: cn("font-semibold", SEGMENT_STYLES[k].text), children: [
+                  fmt(percents[k]),
+                  "\u066A"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-full overflow-hidden", SEGMENT_STYLES[k].bg, BAR_HEIGHT[size]), children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("h-full rounded-full transition-[width] duration-300", SEGMENT_STYLES[k].bar),
+                style: { width: `${percents[k]}%` },
+                role: "progressbar",
+                "aria-valuenow": percents[k],
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-label": `${labels[k]}: ${fmt(percents[k])}\u066A`
+              }
+            ) })
+          ] }, k))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "bot-detection-meter",
+        "data-variant": "stacked",
+        className: cn("flex flex-col gap-2", className),
+        ...props,
+        children: [
+          showSummary && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-foreground-lighter", children: labels.summary }),
+            /* @__PURE__ */ jsxs("span", { className: cn("font-semibold tabular-nums", SEGMENT_STYLES.real.text), children: [
+              fmt(percents.real),
+              "\u066A",
+              showCounts && total > 0 && /* @__PURE__ */ jsxs("span", { className: "ms-1 font-normal text-foreground-lighter", children: [
+                "(",
+                fmt(data.real),
+                " / ",
+                fmt(total),
+                ")"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("w-full rounded-full overflow-hidden bg-surface-200 flex", BAR_HEIGHT[size]),
+              role: "group",
+              "aria-label": labels.summary,
+              children: SEGMENT_ORDER.map((k) => {
+                if (percents[k] === 0) return null;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn("h-full transition-[width] duration-300", SEGMENT_STYLES[k].bar),
+                    style: { width: `${percents[k]}%` },
+                    role: "progressbar",
+                    "aria-valuenow": percents[k],
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100,
+                    "aria-label": `${labels[k]}: ${fmt(percents[k])}\u066A`
+                  },
+                  k
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 text-xs", children: SEGMENT_ORDER.map((k) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", SEGMENT_STYLES[k].dot), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground-lighter", children: labels[k] }),
+            /* @__PURE__ */ jsx("span", { className: cn("font-semibold tabular-nums", SEGMENT_STYLES[k].text), children: showCounts ? fmt(data[k] ?? 0) : `${fmt(percents[k])}\u066A` })
+          ] }, k)) })
+        ]
+      }
+    );
+  }
+);
+BotDetectionMeter.displayName = "BotDetectionMeter";
+function formatBig(n, locale) {
+  if (n >= 1e6) return `${convertToLocalNumbers((n / 1e6).toFixed(1), locale)}M`;
+  if (n >= 1e3) return `${convertToLocalNumbers((n / 1e3).toFixed(1), locale)}K`;
+  return convertToLocalNumbers(n, locale);
+}
+var PageCard = React.forwardRef(
+  ({
+    className,
+    handle,
+    subtitle,
+    avatarSrc,
+    platform,
+    status,
+    followers,
+    followerTrend,
+    engagementRate,
+    postsPerWeek,
+    contentMix,
+    botDetection,
+    interactive = false,
+    locale = "fa",
+    onClick,
+    ...props
+  }, ref) => {
+    const isClickable = interactive || !!onClick;
+    const totalContent = contentMix && (contentMix.photo ?? 0) + (contentMix.video ?? 0) + (contentMix.carousel ?? 0) + (contentMix.story ?? 0);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "page-card",
+        "data-status": status,
+        role: isClickable ? "button" : "article",
+        tabIndex: isClickable ? 0 : void 0,
+        onClick,
+        onKeyDown: isClickable ? (e) => {
+          if ((e.key === "Enter" || e.key === " ") && e.target === e.currentTarget) {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        } : void 0,
+        className: cn(
+          "flex flex-col gap-3 rounded-lg border border-border bg-background p-4 transition-colors",
+          isClickable && "cursor-pointer hover:border-strong hover:bg-surface-100/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            avatarSrc ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: avatarSrc,
+                alt: "",
+                className: "size-10 rounded-full object-cover object-center shrink-0 border border-border"
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "size-10 rounded-full bg-surface-200 shrink-0", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: handle }),
+                platform && /* @__PURE__ */ jsx(SocialPlatformBadge, { platform, size: "xs" }),
+                status && /* @__PURE__ */ jsx(StatusBadge, { status, size: "sm", animated: true, locale })
+              ] }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground-lighter truncate", children: subtitle })
+            ] })
+          ] }),
+          (typeof followers === "number" || followerTrend || typeof engagementRate === "number") && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3 text-xs", children: [
+            typeof followers === "number" && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "text-foreground-lighter", children: locale === "fa" ? "\u0641\u0627\u0644\u0648\u0648\u0631" : locale === "ar" ? "\u0645\u062A\u0627\u0628\u0639\u0648\u0646" : "Followers" }),
+              /* @__PURE__ */ jsx("div", { className: "text-base font-semibold tabular-nums text-foreground", children: formatBig(followers, locale) })
+            ] }),
+            followerTrend && followerTrend.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-foreground-lighter", children: locale === "fa" ? "\u0631\u0648\u0646\u062F" : locale === "ar" ? "\u0627\u0644\u0627\u062A\u062C\u0627\u0647" : "Trend" }),
+              /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(Sparkline, { data: followerTrend, variant: "line", width: 80, height: 24 }) })
+            ] }),
+            typeof engagementRate === "number" && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "text-foreground-lighter", children: locale === "fa" ? "\u0646\u0631\u062E \u062A\u0639\u0627\u0645\u0644" : locale === "ar" ? "\u0645\u0639\u062F\u0644 \u0627\u0644\u062A\u0641\u0627\u0639\u0644" : "Engagement" }),
+              /* @__PURE__ */ jsxs("div", { className: "text-base font-semibold tabular-nums text-foreground", children: [
+                convertToLocalNumbers(engagementRate.toFixed(1), locale),
+                locale === "en" ? "%" : "\u066A"
+              ] })
+            ] })
+          ] }),
+          contentMix && totalContent && totalContent > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-2xs text-foreground-lighter", children: locale === "fa" ? "\u062A\u0631\u06A9\u06CC\u0628 \u0645\u062D\u062A\u0648\u0627" : locale === "ar" ? "\u0645\u0632\u064A\u062C \u0627\u0644\u0645\u062D\u062A\u0648\u0649" : "Content mix" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex h-1.5 w-full overflow-hidden rounded-full bg-surface-200", children: [
+              contentMix.photo ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: `${contentMix.photo / totalContent * 100}%`,
+                    backgroundColor: "hsl(var(--chart-1))"
+                  },
+                  "aria-label": `photo ${contentMix.photo}`
+                }
+              ) : null,
+              contentMix.video ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: `${contentMix.video / totalContent * 100}%`,
+                    backgroundColor: "hsl(var(--chart-2))"
+                  },
+                  "aria-label": `video ${contentMix.video}`
+                }
+              ) : null,
+              contentMix.carousel ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: `${contentMix.carousel / totalContent * 100}%`,
+                    backgroundColor: "hsl(var(--chart-3))"
+                  },
+                  "aria-label": `carousel ${contentMix.carousel}`
+                }
+              ) : null,
+              contentMix.story ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: `${contentMix.story / totalContent * 100}%`,
+                    backgroundColor: "hsl(var(--chart-4))"
+                  },
+                  "aria-label": `story ${contentMix.story}`
+                }
+              ) : null
+            ] })
+          ] }),
+          botDetection && /* @__PURE__ */ jsx("div", { "data-slot": "page-card-bot", children: /* @__PURE__ */ jsx(BotDetectionMeter, { data: botDetection, variant: "compact", size: "sm", locale }) }),
+          typeof postsPerWeek === "number" && /* @__PURE__ */ jsx("div", { className: "text-2xs text-foreground-lighter pt-1 border-t border-border", children: locale === "fa" ? `\u0645\u06CC\u0627\u0646\u06AF\u06CC\u0646 ${convertToLocalNumbers(postsPerWeek.toFixed(1), "fa")} \u067E\u0633\u062A \u062F\u0631 \u0647\u0641\u062A\u0647` : locale === "ar" ? `\u0645\u062A\u0648\u0633\u0637 ${convertToLocalNumbers(postsPerWeek.toFixed(1), "ar")} \u0645\u0646\u0634\u0648\u0631 \u0641\u064A \u0627\u0644\u0623\u0633\u0628\u0648\u0639` : `Avg ${postsPerWeek.toFixed(1)} posts/week` })
+        ]
+      }
+    );
+  }
+);
+PageCard.displayName = "PageCard";
+
+export { PageCard };
 //# sourceMappingURL=page-card.js.map
 //# sourceMappingURL=page-card.js.map