@parto-system-design/ui 1.1.9 → 1.1.16

package/dist/components/charts/PartoPieChart.cjs

@@ -1,15 +1,574 @@
+'use client';
 'use strict';
 
-var chunk4WONHORR_cjs = require('../../chunk-4WONHORR.cjs');
-require('../../chunk-KYM7NIJO.cjs');
-require('../../chunk-D2EBLE2B.cjs');
-require('../../chunk-NV4JOKWL.cjs');
+var React2 = require('react');
+var recharts = require('recharts');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
 
+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 React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
-Object.defineProperty(exports, "PartoPieChart", {
-  enumerable: true,
-  get: function () { return chunk4WONHORR_cjs.PartoPieChart; }
+function useRootStyles() {
+  const [version, setVersion] = React2.useState(0);
+  React2.useEffect(() => {
+    if (typeof window === "undefined" || !document?.documentElement) {
+      return;
+    }
+    const target = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setVersion((prev) => prev + 1);
+    });
+    observer.observe(target, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const mediaHandler = () => setVersion((prev) => prev + 1);
+    media.addEventListener("change", mediaHandler);
+    return () => {
+      observer.disconnect();
+      media.removeEventListener("change", mediaHandler);
+    };
+  }, []);
+  return React2.useMemo(() => {
+    if (typeof window === "undefined" || !document?.documentElement) {
+      return null;
+    }
+    return getComputedStyle(document.documentElement);
+  }, [version]);
+}
+
+// src/lib/theme.ts
+var COLOR_VALUE_REGEX = /^(#|rgb|hsl|oklch)/i;
+function resolveCssColor(styles, variable, fallback) {
+  if (!styles) return fallback;
+  const raw = styles.getPropertyValue(variable).trim();
+  if (!raw) return fallback;
+  if (COLOR_VALUE_REGEX.test(raw)) return raw;
+  if (raw.includes("%")) return `hsl(${raw})`;
+  return raw;
+}
+
+// src/hooks/use-chart-theme.ts
+var FALLBACKS = {
+  foregroundMuted: "hsl(0 0% 50%)",
+  border: "hsl(0 0% 22%)",
+  popover: "hsl(0 0% 10%)",
+  popoverForeground: "hsl(0 0% 98%)",
+  chart1: "hsl(155 65% 38%)",
+  chart2: "hsl(198 50% 48%)",
+  chart3: "hsl(240 40% 54%)",
+  chart4: "hsl(310 38% 52%)",
+  chart5: "hsl(355 45% 52%)",
+  chart6: "hsl(35 52% 48%)",
+  chart7: "hsl(75 38% 46%)",
+  chart8: "hsl(118 35% 46%)"
+};
+var CHART_FONT_FAMILY = "Yekan Bakh, system-ui, -apple-system, sans-serif";
+function useChartTheme() {
+  const styles = useRootStyles();
+  return React2__namespace.useMemo(() => {
+    const getColor = (variable, fallback) => resolveCssColor(styles, variable, fallback);
+    const chartColors = [
+      getColor("--chart-1", FALLBACKS.chart1),
+      getColor("--chart-2", FALLBACKS.chart2),
+      getColor("--chart-3", FALLBACKS.chart3),
+      getColor("--chart-4", FALLBACKS.chart4),
+      getColor("--chart-5", FALLBACKS.chart5),
+      getColor("--chart-6", FALLBACKS.chart6),
+      getColor("--chart-7", FALLBACKS.chart7),
+      getColor("--chart-8", FALLBACKS.chart8)
+    ];
+    const axisTickStyle = {
+      fontFamily: CHART_FONT_FAMILY,
+      fill: getColor("--foreground-lighter", FALLBACKS.foregroundMuted),
+      fontSize: 11,
+      fontWeight: 400
+    };
+    const gridStyle = {
+      stroke: getColor("--border", FALLBACKS.border),
+      strokeDasharray: "3 3",
+      strokeOpacity: 0.15
+    };
+    const tooltipStyle = {
+      fontFamily: CHART_FONT_FAMILY,
+      background: getColor("--background-overlay-default", FALLBACKS.popover),
+      color: getColor("--foreground-default", FALLBACKS.popoverForeground),
+      fontSize: 12,
+      lineHeight: "1.5",
+      borderRadius: "10px",
+      border: `1px solid ${getColor("--border-muted", FALLBACKS.border)}`,
+      boxShadow: "0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06)",
+      padding: "10px 14px",
+      backdropFilter: "blur(8px)",
+      WebkitBackdropFilter: "blur(8px)"
+    };
+    const crosshairStyle = {
+      stroke: getColor("--foreground-muted", FALLBACKS.foregroundMuted),
+      strokeWidth: 1,
+      strokeDasharray: "4 4",
+      strokeOpacity: 0.5
+    };
+    return {
+      chartColors,
+      getColor,
+      fontFamily: CHART_FONT_FAMILY,
+      axisTickStyle,
+      gridStyle,
+      tooltipStyle,
+      crosshairStyle
+    };
+  }, [styles]);
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var skeletonVariants = classVarianceAuthority.cva("bg-accent animate-pulse", {
+  variants: {
+    shape: {
+      rect: "rounded-md",
+      line: "rounded-full h-4 w-full",
+      circle: "rounded-full",
+      text: "rounded h-4"
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    { shape: "circle", size: "sm", class: "size-8" },
+    { shape: "circle", size: "md", class: "size-10" },
+    { shape: "circle", size: "lg", class: "size-14" }
+  ],
+  defaultVariants: {
+    shape: "rect",
+    size: "md"
+  }
 });
+function Skeleton({ className, shape, size, count, ...props }) {
+  if (count && count > 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-busy": "true", "aria-label": "Loading", className: "space-y-2", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-slot": "skeleton",
+        "aria-hidden": "true",
+        className: cn(skeletonVariants({ shape, size }), className)
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      className: cn(skeletonVariants({ shape, size }), className)
+    }
+  );
+}
+Skeleton.displayName = "Skeleton";
+var ChartContainer = React2__namespace.forwardRef(
+  ({ className, dataSlot, ariaLabel, children }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className,
+      dir: "ltr",
+      "data-slot": dataSlot,
+      role: "img",
+      "aria-label": ariaLabel ?? "\u0646\u0645\u0648\u062F\u0627\u0631",
+      style: { position: "relative", width: "100%", height: "100%" },
+      children
+    }
+  )
+);
+ChartContainer.displayName = "ChartContainer";
+function ChartLoadingSkeleton({ className, shape = "rect" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "chart-loading-skeleton",
+      className,
+      dir: "ltr",
+      style: { position: "relative", width: "100%", height: "100%" },
+      role: "status",
+      "aria-label": "Loading chart",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Skeleton,
+        {
+          shape,
+          className: shape === "circle" ? "w-full h-full min-h-[200px] aspect-square mx-auto" : "w-full h-full min-h-[200px]"
+        }
+      )
+    }
+  );
+}
+var LOCALE_TO_BCP47 = {
+  fa: "fa-IR",
+  ar: "ar",
+  en: "en-US"
+};
+function ChartTooltip({ active, payload, label, tooltipStyle, formatter, locale = "fa" }) {
+  if (!active || !payload?.length) return null;
+  const bcp47 = LOCALE_TO_BCP47[locale] ?? "fa-IR";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "chart-tooltip", style: tooltipStyle, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500, fontSize: 13, marginBottom: 6 }, children: label }),
+    payload.map((entry, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: i > 0 ? 4 : 0 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            width: 10,
+            height: 10,
+            borderRadius: 2,
+            backgroundColor: entry.color,
+            flexShrink: 0
+          }
+        }
+      ),
+      formatter ? formatter(entry.name, entry.value) : /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", justifyContent: "space-between", width: "100%", gap: 16 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: entry.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: typeof entry.value === "number" ? entry.value.toLocaleString(bcp47) : entry.value })
+      ] })
+    ] }, i))
+  ] });
+}
+var PATTERN_DASHARRAY = {
+  solid: void 0,
+  dashed: "4 3",
+  dotted: "1 3",
+  "dash-dot": "4 2 1 2"
+};
+var ChartLegend = React2__namespace.forwardRef(
+  ({ className, items, orientation = "horizontal", swatchSize = 10, ...props }, ref) => {
+    const isVertical = orientation === "vertical";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "chart-legend",
+        "data-orientation": orientation,
+        className,
+        style: {
+          display: "flex",
+          flexWrap: isVertical ? "nowrap" : "wrap",
+          flexDirection: isVertical ? "column" : "row",
+          gap: isVertical ? "6px" : "12px 16px",
+          fontSize: 12,
+          color: "hsl(var(--foreground-light))"
+        },
+        role: "list",
+        ...props,
+        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "listitem",
+            "data-slot": "chart-legend-item",
+            style: { display: "inline-flex", alignItems: "center", gap: 6, lineHeight: 1.2 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ChartLegendSwatch,
+                {
+                  color: item.color,
+                  shape: item.shape ?? "dot",
+                  pattern: item.pattern ?? "solid",
+                  size: swatchSize
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500 }, children: item.label }),
+              item.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: { marginInlineStart: 4, fontVariantNumeric: "tabular-nums", opacity: 0.7 },
+                  "data-slot": "chart-legend-value",
+                  children: item.value
+                }
+              )
+            ]
+          },
+          item.key
+        ))
+      }
+    );
+  }
+);
+ChartLegend.displayName = "ChartLegend";
+function ChartLegendSwatch({
+  color,
+  shape,
+  pattern,
+  size
+}) {
+  if (shape === "dot") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          display: "inline-block",
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          backgroundColor: color,
+          flexShrink: 0
+        }
+      }
+    );
+  }
+  if (shape === "bar") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          display: "inline-block",
+          width: size + 4,
+          height: Math.max(3, Math.round(size / 2.5)),
+          borderRadius: 2,
+          backgroundColor: color,
+          flexShrink: 0
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: size + 8,
+      height: Math.max(8, Math.round(size / 1.5)),
+      viewBox: `0 0 ${size + 8} ${Math.max(8, Math.round(size / 1.5))}`,
+      style: { flexShrink: 0 },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: 1,
+          y1: Math.max(8, Math.round(size / 1.5)) / 2,
+          x2: size + 7,
+          y2: Math.max(8, Math.round(size / 1.5)) / 2,
+          stroke: color,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeDasharray: PATTERN_DASHARRAY[pattern]
+        }
+      )
+    }
+  );
+}
+var ChartGradientLegend = React2__namespace.forwardRef(
+  ({
+    className,
+    startColor,
+    endColor,
+    startLabel,
+    endLabel,
+    caption,
+    width = 160,
+    height = 8,
+    "aria-label": ariaLabelProp,
+    ...props
+  }, ref) => {
+    const ariaLabel = ariaLabelProp ?? (typeof startLabel === "string" && typeof endLabel === "string" ? `${startLabel} \u062A\u0627 ${endLabel}` : "\u0645\u0642\u06CC\u0627\u0633 \u0631\u0646\u06AF");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "chart-gradient-legend",
+        className,
+        role: "img",
+        "aria-label": ariaLabel,
+        style: {
+          display: "inline-flex",
+          flexDirection: "column",
+          gap: 4,
+          fontSize: 12,
+          color: "hsl(var(--foreground-light))"
+        },
+        ...props,
+        children: [
+          caption && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "chart-gradient-legend-caption", style: { fontWeight: 500 }, children: caption }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-slot": "chart-gradient-legend-bar",
+              "aria-hidden": "true",
+              style: {
+                width,
+                height,
+                borderRadius: height / 2,
+                background: `linear-gradient(to right, ${startColor}, ${endColor})`
+              }
+            }
+          ),
+          (startLabel !== void 0 || endLabel !== void 0) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                width,
+                fontVariantNumeric: "tabular-nums",
+                opacity: 0.85
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "chart-gradient-legend-start", children: startLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "chart-gradient-legend-end", children: endLabel })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ChartGradientLegend.displayName = "ChartGradientLegend";
+function renderActiveShape(props) {
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill, cornerRadius } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Sector,
+    {
+      cx,
+      cy,
+      innerRadius: innerRadius - 3,
+      outerRadius: outerRadius + 5,
+      startAngle,
+      endAngle,
+      fill,
+      cornerRadius,
+      forceCornerRadius: true
+    }
+  );
+}
+function renderArcLinkLabel(props, labelSkipAngle, textColor) {
+  const { cx, cy, midAngle, outerRadius, name, percent } = props;
+  const angle = percent * 360;
+  if (angle < labelSkipAngle) return null;
+  const RADIAN = Math.PI / 180;
+  const sin = Math.sin(-RADIAN * midAngle);
+  const cos = Math.cos(-RADIAN * midAngle);
+  const arcX = cx + (outerRadius + 4) * cos;
+  const arcY = cy + (outerRadius + 4) * sin;
+  const diagLen = 10;
+  const diagX = arcX + diagLen * cos;
+  const diagY = arcY + diagLen * sin;
+  const straightLen = 14;
+  const endX = diagX + (cos >= 0 ? straightLen : -straightLen);
+  const endY = diagY;
+  const textAnchor = cos >= 0 ? "start" : "end";
+  const textX = endX + (cos >= 0 ? 4 : -4);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: `M ${arcX},${arcY} L ${diagX},${diagY} L ${endX},${endY}`,
+        fill: "none",
+        stroke: textColor,
+        strokeWidth: 1,
+        strokeOpacity: 0.4
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: textX,
+        y: endY,
+        textAnchor,
+        dominantBaseline: "central",
+        fill: textColor,
+        fontFamily: CHART_FONT_FAMILY,
+        fontSize: 11,
+        children: name
+      }
+    )
+  ] });
+}
+var PartoPieChart = React2__namespace.forwardRef(function PartoPieChart2({
+  data,
+  innerRadius = "60%",
+  outerRadius = "80%",
+  paddingAngle = 1.2,
+  cornerRadius = 4,
+  showLabels = true,
+  labelSkipAngle = 14,
+  margin = { top: 20, right: 20, bottom: 20, left: 20 },
+  tooltipFormatter,
+  locale = "fa",
+  className,
+  isLoading = false,
+  ariaLabel,
+  legend = false,
+  legendValues = true
+}, ref) {
+  const { chartColors, tooltipStyle, axisTickStyle } = useChartTheme();
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ChartLoadingSkeleton, { className, shape: "circle" });
+  }
+  const legendItems = legend ? data.map((row, i) => ({
+    key: String(row.name),
+    label: row.name,
+    color: chartColors[i % chartColors.length],
+    shape: "dot",
+    value: legendValues ? row.value : void 0
+  })) : [];
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { ref, className, dataSlot: "pie-chart", ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Pie,
+        {
+          data,
+          dataKey: "value",
+          nameKey: "name",
+          cx: "50%",
+          cy: "50%",
+          innerRadius,
+          outerRadius,
+          paddingAngle,
+          cornerRadius,
+          activeShape: renderActiveShape,
+          label: showLabels ? (props) => renderArcLinkLabel(props, labelSkipAngle, axisTickStyle.fill) : false,
+          labelLine: false,
+          animationDuration: 800,
+          animationEasing: "ease-out",
+          children: data.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: chartColors[i % chartColors.length], stroke: "none" }, i))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Tooltip,
+        {
+          content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { tooltipStyle, formatter: tooltipFormatter, locale })
+        }
+      )
+    ] }) }) }),
+    legend && /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: legendItems, style: { paddingTop: 12 } })
+  ] }) });
+});
+PartoPieChart.displayName = "PartoPieChart";
+
+exports.PartoPieChart = PartoPieChart;
 //# sourceMappingURL=PartoPieChart.cjs.map
 //# sourceMappingURL=PartoPieChart.cjs.map