@parto-system-design/ui 1.1.11 → 1.1.17

package/dist/components/ui/concept-card.cjs

@@ -1,18 +1,735 @@
+'use client';
 'use strict';
 
-var chunkHYZ6BQPS_cjs = require('../../chunk-HYZ6BQPS.cjs');
-require('../../chunk-HJPDZOMJ.cjs');
-require('../../chunk-S5IPJQZ3.cjs');
-require('../../chunk-CAJKSTXX.cjs');
-require('../../chunk-GKRAZGDI.cjs');
-require('../../chunk-Z2TY4A75.cjs');
-require('../../chunk-NV4JOKWL.cjs');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
 
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 
-Object.defineProperty(exports, "ConceptCard", {
-  enumerable: true,
-  get: function () { return chunkHYZ6BQPS_cjs.ConceptCard; }
-});
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.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 FLOW_KEYS = [
+  "pro-gov",
+  "internal-critic",
+  "internal-opponent",
+  "external-opponent",
+  "grey"
+];
+var flowLabels = {
+  fa: {
+    "pro-gov": "\u062D\u0627\u0645\u06CC",
+    "internal-critic": "\u0645\u0646\u062A\u0642\u062F \u0633\u0627\u0632\u0646\u062F\u0647",
+    "internal-opponent": "\u0645\u062E\u0627\u0644\u0641",
+    "external-opponent": "\u0645\u062E\u0627\u0644\u0641 \u062C\u062F\u06CC",
+    grey: "\u062E\u0646\u062B\u06CC"
+  },
+  ar: {
+    "pro-gov": "\u0645\u0624\u064A\u062F",
+    "internal-critic": "\u0645\u0646\u062A\u0642\u062F \u0628\u0646\u0651\u0627\u0621",
+    "internal-opponent": "\u0645\u0639\u0627\u0631\u0636",
+    "external-opponent": "\u0645\u0639\u0627\u0631\u0636 \u0634\u062F\u064A\u062F",
+    grey: "\u0645\u062D\u0627\u064A\u062F"
+  },
+  en: {
+    "pro-gov": "Supporter",
+    "internal-critic": "Constructive Critic",
+    "internal-opponent": "Detractor",
+    "external-opponent": "Strong Detractor",
+    grey: "Undecided"
+  }
+};
+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 severityLabels = {
+  fa: { urgent: "\u0641\u0648\u0631\u06CC", high: "\u0628\u0627\u0644\u0627", medium: "\u0645\u062A\u0648\u0633\u0637", low: "\u067E\u0627\u06CC\u06CC\u0646" },
+  ar: { urgent: "\u0639\u0627\u062C\u0644", high: "\u0645\u0631\u062A\u0641\u0639", medium: "\u0645\u062A\u0648\u0633\u0637", low: "\u0645\u0646\u062E\u0641\u0636" },
+  en: { urgent: "Urgent", high: "High", medium: "Medium", low: "Low" }
+};
+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__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex", children: [
+            shouldPulse && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "absolute inset-0 rounded-full animate-pulse-subtle",
+                style: { backgroundColor: `hsl(var(${token}) / 0.5)` },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn("relative inline-block rounded-full", SIZE_CLASSES[size].dot),
+                style: { backgroundColor: `hsl(var(${token}))` },
+                "aria-hidden": "true"
+              }
+            )
+          ] }),
+          showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+StatusBadge.displayName = "StatusBadge";
+var SEVERITY_ICON = {
+  urgent: lucideReact.Flame,
+  high: lucideReact.ChevronUp,
+  medium: lucideReact.Minus,
+  low: lucideReact.ChevronDown
+};
+var SIZE_CLASSES2 = {
+  sm: { badge: "h-6 text-xs px-2 gap-1", icon: "size-3" },
+  md: { badge: "h-7 text-sm px-2.5 gap-1.5", icon: "size-3.5" }
+};
+function tokenVar2(severity) {
+  return `--severity-${severity}`;
+}
+var SeverityBadge = React__namespace.forwardRef(
+  ({ className, severity, size = "md", showLabel = true, variant = "soft", locale = "fa", ...props }, ref) => {
+    const label = severityLabels[locale]?.[severity] ?? severityLabels.fa[severity];
+    const Icon = SEVERITY_ICON[severity];
+    const token = tokenVar2(severity);
+    const softStyle = {
+      backgroundColor: `hsl(var(${token}) / 0.1)`,
+      borderColor: `hsl(var(${token}) / 0.3)`,
+      color: `hsl(var(${token}))`
+    };
+    const solidStyle = {
+      backgroundColor: `hsl(var(${token}))`,
+      borderColor: `hsl(var(${token}))`,
+      color: "hsl(var(--foreground-contrast))"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "severity-badge",
+        "data-severity": severity,
+        "data-variant": variant,
+        "aria-label": showLabel ? void 0 : label,
+        className: cn(
+          "inline-flex items-center rounded-full border font-medium transition-colors duration-150",
+          SIZE_CLASSES2[size].badge,
+          className
+        ),
+        style: variant === "solid" ? solidStyle : softStyle,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: SIZE_CLASSES2[size].icon, "aria-hidden": "true" }),
+          showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+SeverityBadge.displayName = "SeverityBadge";
+function calcPercents(data) {
+  const total = FLOW_KEYS.reduce((s, k) => s + (data[k] ?? 0), 0);
+  const result = Object.fromEntries(FLOW_KEYS.map((k) => [k, 0]));
+  if (total === 0) return result;
+  const floats = FLOW_KEYS.filter((k) => (data[k] ?? 0) > 0).map((k) => {
+    const v = (data[k] ?? 0) / total * 100;
+    return { k, floor: Math.floor(v), rem: v - Math.floor(v) };
+  });
+  const remaining = 100 - floats.reduce((s, f) => s + f.floor, 0);
+  const sorted = [...floats].sort((a, b) => b.rem - a.rem);
+  sorted.slice(0, remaining).forEach((f) => f.floor++);
+  floats.forEach(({ k, floor }) => result[k] = floor);
+  return result;
+}
+var STACKED_ORDER = [
+  "pro-gov",
+  "internal-critic",
+  "internal-opponent",
+  "external-opponent",
+  "grey"
+];
+function tokenVar3(key) {
+  return `--flow-${key}`;
+}
+var FlowDistribution = React__namespace.forwardRef(
+  ({
+    className,
+    data,
+    variant = "stacked",
+    showCounts = false,
+    showPercent = true,
+    locale = "fa",
+    isLoading = false,
+    ...props
+  }, ref) => {
+    const labels = flowLabels[locale] ?? flowLabels.fa;
+    const percents = calcPercents(data);
+    const percentSign = locale === "en" ? "%" : "\u066A";
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "flow-distribution", className: cn("space-y-2", className), ...props, children: variant === "stacked" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-full rounded-full bg-muted animate-pulse" }) : variant === "compact" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-20 rounded-full bg-muted animate-pulse" }, i)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-16 rounded bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 flex-1 rounded-full bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-8 rounded bg-muted animate-pulse" })
+      ] }, i)) }) });
+    }
+    if (variant === "stacked") {
+      const active = STACKED_ORDER.filter((k) => (data[k] ?? 0) > 0);
+      const srLabel = active.map((k) => `${labels[k]} ${convertToLocalNumbers(percents[k], locale)}${percentSign}`).join("\u060C ");
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-slot": "flow-distribution", className: cn("space-y-2", className), ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-3 w-full overflow-hidden rounded-full bg-muted", role: "img", "aria-label": srLabel, children: active.map((k) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "transition-all duration-500",
+            style: { width: `${percents[k]}%`, backgroundColor: `hsl(var(${tokenVar3(k)}))` }
+          },
+          k
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1", children: active.map((k) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "inline-block h-2 w-2 rounded-full",
+              style: { backgroundColor: `hsl(var(${tokenVar3(k)}))` }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground-light", children: labels[k] }),
+          showPercent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium tabular-nums", style: { color: `hsl(var(${tokenVar3(k)}))` }, children: [
+            convertToLocalNumbers(percents[k], locale),
+            percentSign
+          ] }),
+          showCounts && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-foreground-muted tabular-nums", children: [
+            "(",
+            convertToLocalNumbers(data[k] ?? 0, locale),
+            ")"
+          ] })
+        ] }, k)) })
+      ] });
+    }
+    if (variant === "compact") {
+      const active = FLOW_KEYS.filter((k) => (data[k] ?? 0) > 0).sort((a, b) => (data[b] ?? 0) - (data[a] ?? 0));
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          "data-slot": "flow-distribution",
+          className: cn("inline-flex flex-wrap gap-2", className),
+          ...props,
+          children: active.map((k) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-full px-2 py-0.5",
+              style: {
+                backgroundColor: `hsl(var(${tokenVar3(k)}) / 0.12)`,
+                color: `hsl(var(${tokenVar3(k)}))`
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: labels[k] }),
+                showPercent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-bold tabular-nums", children: [
+                  convertToLocalNumbers(percents[k], locale),
+                  percentSign
+                ] }),
+                showCounts && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-foreground-muted tabular-nums", children: [
+                  "(",
+                  convertToLocalNumbers(data[k] ?? 0, locale),
+                  ")"
+                ] })
+              ]
+            },
+            k
+          ))
+        }
+      );
+    }
+    const sorted = FLOW_KEYS.filter((k) => (data[k] ?? 0) > 0).sort((a, b) => (data[b] ?? 0) - (data[a] ?? 0));
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "flow-distribution", className: cn("space-y-1.5", className), ...props, children: sorted.map((k) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-24 shrink-0 text-xs text-foreground-light text-end", children: labels[k] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 h-2 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-y-0 start-0 rounded-full transition-all duration-500",
+          style: {
+            width: `${percents[k]}%`,
+            backgroundColor: `hsl(var(${tokenVar3(k)}))`
+          },
+          role: "progressbar",
+          "aria-valuenow": percents[k],
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-label": `${labels[k]}: ${percents[k]}%`
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "w-12 shrink-0 text-xs font-medium tabular-nums text-start",
+          style: { color: `hsl(var(${tokenVar3(k)}))` },
+          children: showCounts ? convertToLocalNumbers((data[k] ?? 0).toLocaleString(), locale) : `${convertToLocalNumbers(percents[k], locale)}${percentSign}`
+        }
+      )
+    ] }, k)) });
+  }
+);
+FlowDistribution.displayName = "FlowDistribution";
+var LABELS = {
+  fa: { positive: "\u0645\u062B\u0628\u062A", negative: "\u0645\u0646\u0641\u06CC", neutral: "\u062E\u0646\u062B\u06CC", mixed: "\u062A\u0631\u06A9\u06CC\u0628\u06CC" },
+  ar: { positive: "\u0625\u064A\u062C\u0627\u0628\u064A", negative: "\u0633\u0644\u0628\u064A", neutral: "\u0645\u062D\u0627\u064A\u062F", mixed: "\u0645\u062E\u062A\u0644\u0637" },
+  en: { positive: "Positive", negative: "Negative", neutral: "Neutral", mixed: "Mixed" }
+};
+var SENTIMENT_STYLES = {
+  positive: {
+    bar: "bg-[hsl(var(--sentiment-positive))]",
+    text: "text-[hsl(var(--sentiment-positive))]",
+    bg: "bg-[hsl(var(--sentiment-positive)/0.12)]"
+  },
+  negative: {
+    bar: "bg-[hsl(var(--sentiment-negative))]",
+    text: "text-[hsl(var(--sentiment-negative))]",
+    bg: "bg-[hsl(var(--sentiment-negative)/0.12)]"
+  },
+  neutral: {
+    bar: "bg-[hsl(var(--sentiment-neutral))]",
+    text: "text-[hsl(var(--sentiment-neutral))]",
+    bg: "bg-[hsl(var(--sentiment-neutral)/0.12)]"
+  },
+  mixed: {
+    bar: "bg-[hsl(var(--sentiment-mixed))]",
+    text: "text-[hsl(var(--sentiment-mixed))]",
+    bg: "bg-[hsl(var(--sentiment-mixed)/0.12)]"
+  }
+};
+function calcPercents2(data) {
+  const keys = ["positive", "negative", "neutral", "mixed"].filter((k) => (data[k] ?? 0) > 0);
+  const total = ["positive", "negative", "neutral", "mixed"].reduce((sum, k) => sum + (data[k] ?? 0), 0);
+  if (total === 0) return { positive: 0, negative: 0, neutral: 0, mixed: 0 };
+  const floats = keys.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 = { positive: 0, negative: 0, neutral: 0, mixed: 0 };
+  sorted.forEach(({ k, floor }) => result[k] = floor);
+  return result;
+}
+var SENTIMENT_ORDER = ["positive", "neutral", "mixed", "negative"];
+var SentimentDistribution = React__namespace.forwardRef(
+  ({
+    className,
+    data,
+    variant = "bars",
+    showCounts = false,
+    showPercent = true,
+    locale = "fa",
+    isLoading = false,
+    ...props
+  }, ref) => {
+    const labels = LABELS[locale] ?? LABELS.fa;
+    const percents = calcPercents2(data);
+    const activeOrder = SENTIMENT_ORDER.filter((key) => (data[key] ?? 0) > 0);
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "sentiment-distribution", className: cn("space-y-2", className), ...props, children: variant === "stacked" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-full rounded-full bg-muted animate-pulse" }) : variant === "compact" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-16 rounded bg-muted animate-pulse" }, i)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-12 rounded bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 flex-1 rounded-full bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-8 rounded bg-muted animate-pulse" })
+      ] }, i)) }) });
+    }
+    if (variant === "stacked") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-slot": "sentiment-distribution", className: cn("space-y-2", className), ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex h-3 w-full overflow-hidden rounded-full bg-muted",
+            role: "img",
+            "aria-label": `${labels.positive} ${percents.positive}\u066A\u060C ${labels.negative} ${percents.negative}\u066A\u060C ${labels.neutral} ${percents.neutral}\u066A`,
+            children: activeOrder.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn("transition-all duration-500", SENTIMENT_STYLES[key].bar),
+                style: { width: `${percents[key]}%` }
+              },
+              key
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1", children: activeOrder.map((key) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-block h-2 w-2 rounded-full", SENTIMENT_STYLES[key].bar) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground-light", children: labels[key] }),
+          showPercent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-xs font-medium", SENTIMENT_STYLES[key].text), children: [
+            convertToLocalNumbers(percents[key], locale),
+            locale === "en" ? "%" : "\u066A"
+          ] }),
+          showCounts && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-foreground-muted", children: [
+            "(",
+            convertToLocalNumbers(data[key] ?? 0, locale),
+            ")"
+          ] })
+        ] }, key)) })
+      ] });
+    }
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          "data-slot": "sentiment-distribution",
+          className: cn("inline-flex flex-wrap gap-2", className),
+          ...props,
+          children: activeOrder.map((key) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: cn("inline-flex items-center gap-1 rounded-full px-2 py-0.5", SENTIMENT_STYLES[key].bg),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs font-medium", SENTIMENT_STYLES[key].text), children: labels[key] }),
+                showPercent && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-xs font-bold tabular-nums", SENTIMENT_STYLES[key].text), children: [
+                  convertToLocalNumbers(percents[key], locale),
+                  locale === "en" ? "%" : "\u066A"
+                ] }),
+                showCounts && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-foreground-muted tabular-nums", children: [
+                  "(",
+                  convertToLocalNumbers((data[key] ?? 0).toLocaleString(), locale),
+                  ")"
+                ] })
+              ]
+            },
+            key
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "sentiment-distribution", className: cn("space-y-1.5", className), ...props, children: activeOrder.map((key) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-10 shrink-0 text-xs text-foreground-light text-end", children: labels[key] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 h-2 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "absolute inset-y-0 start-0 rounded-full transition-all duration-500",
+            SENTIMENT_STYLES[key].bar
+          ),
+          style: { width: `${percents[key]}%` },
+          role: "progressbar",
+          "aria-valuenow": percents[key],
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-label": `${labels[key]}: ${percents[key]}%`
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn("w-10 shrink-0 text-xs font-medium tabular-nums text-start", SENTIMENT_STYLES[key].text),
+          children: showCounts ? convertToLocalNumbers((data[key] ?? 0).toLocaleString(), locale) : `${convertToLocalNumbers(percents[key], locale)}${locale === "en" ? "%" : "\u066A"}`
+        }
+      )
+    ] }, key)) });
+  }
+);
+SentimentDistribution.displayName = "SentimentDistribution";
+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__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: "none",
+            focusable: "false",
+            children: [
+              variant === "area" && /* @__PURE__ */ jsxRuntime.jsx("path", { d: areaPath, fill: stroke, opacity: 0.18 }),
+              (variant === "line" || variant === "area") && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 Checkbox = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  CheckboxPrimitive__namespace.Root,
+  {
+    ref,
+    "data-slot": "checkbox",
+    className: cn(
+      "peer border-control bg-control data-[state=checked]:bg-brand data-[state=checked]:text-on-brand data-[state=checked]:border-brand focus-visible:border-brand-default focus-visible:ring-brand-default/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-all duration-150 outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxPrimitive__namespace.Indicator,
+      {
+        "data-slot": "checkbox-indicator",
+        className: "grid place-content-center text-current transition-none",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "size-3.5" })
+      }
+    )
+  }
+));
+Checkbox.displayName = "Checkbox";
+var ConceptCard = React__namespace.forwardRef(
+  ({
+    className,
+    title,
+    subtitle,
+    status,
+    severity,
+    flow,
+    sentiment,
+    trend,
+    aiSummary,
+    totalCount,
+    comparison,
+    interactive = false,
+    locale = "fa",
+    onClick,
+    ...props
+  }, ref) => {
+    const isClickable = interactive || !!onClick;
+    const handleClick = isClickable ? (e) => {
+      const target = e.target;
+      if (target && target.closest('[data-slot="concept-card-comparison"]')) return;
+      onClick?.(e);
+    } : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "concept-card",
+        "data-status": status,
+        "data-severity": severity,
+        role: isClickable ? "button" : "article",
+        tabIndex: isClickable ? 0 : void 0,
+        onClick: handleClick,
+        onKeyDown: isClickable ? (e) => {
+          if ((e.key === "Enter" || e.key === " ") && e.target === e.currentTarget) {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        } : void 0,
+        className: cn(
+          "group/concept-card 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__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground truncate", children: title }),
+                status && /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { status, size: "sm", animated: true, locale }),
+                severity && /* @__PURE__ */ jsxRuntime.jsx(SeverityBadge, { severity, size: "sm", locale })
+              ] }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-foreground-lighter truncate", children: subtitle })
+            ] }),
+            comparison && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "concept-card-comparison", className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Checkbox,
+              {
+                checked: comparison.selected,
+                onCheckedChange: (next) => comparison.onSelectionChange(next === true),
+                "aria-label": typeof comparison.label === "string" ? comparison.label : locale === "fa" ? "\u0627\u0646\u062A\u062E\u0627\u0628 \u0628\u0631\u0627\u06CC \u0645\u0642\u0627\u06CC\u0633\u0647" : locale === "ar" ? "\u062A\u062D\u062F\u064A\u062F \u0644\u0644\u0645\u0642\u0627\u0631\u0646\u0629" : "Select for comparison"
+              }
+            ) })
+          ] }),
+          aiSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground leading-relaxed", children: aiSummary }),
+          (flow || sentiment) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+            flow && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "concept-card-flow", children: /* @__PURE__ */ jsxRuntime.jsx(FlowDistribution, { data: flow, variant: "stacked", showCounts: false, showPercent: true, locale }) }),
+            sentiment && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "concept-card-sentiment", children: /* @__PURE__ */ jsxRuntime.jsx(
+              SentimentDistribution,
+              {
+                data: sentiment,
+                variant: "stacked",
+                showCounts: false,
+                showPercent: true,
+                locale
+              }
+            ) })
+          ] }),
+          (trend || typeof totalCount === "number") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between gap-3 pt-1 border-t border-border mt-auto", children: [
+            trend && trend.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "concept-card-trend", children: /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: trend, variant: "area", width: 120, height: 28 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+            typeof totalCount === "number" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-end", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-foreground-lighter", children: locale === "fa" ? "\u0645\u062C\u0645\u0648\u0639" : locale === "ar" ? "\u0627\u0644\u0625\u062C\u0645\u0627\u0644\u064A" : "Total" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold tabular-nums text-foreground", children: convertToLocalNumbers(totalCount, locale) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ConceptCard.displayName = "ConceptCard";
+
+exports.ConceptCard = ConceptCard;
 //# sourceMappingURL=concept-card.cjs.map
 //# sourceMappingURL=concept-card.cjs.map