@mari-ui/components 0.0.0-stage → 0.1.1

package/dist/chart.js

@@ -0,0 +1,986 @@
+"use client";
+
+import {
+  Empty
+} from "./chunk-LBXIPDAB.js";
+import "./chunk-2IEXY3OZ.js";
+import "./chunk-FFXRFQSU.js";
+import "./chunk-IP2J3BWY.js";
+import {
+  skeletonFill
+} from "./chunk-54HHEXXD.js";
+
+// src/chart/line-chart/LineChart.tsx
+import { useId, useMemo, useState as useState2 } from "react";
+
+// src/chart/_shared/ChartFrame.tsx
+import { cn as cn2 } from "@mari-ui/core";
+
+// src/chart/_shared/ChartSkeleton.tsx
+import { cn } from "@mari-ui/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function svgMask(svg) {
+  const url = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+  return { maskImage: url, WebkitMaskImage: url, maskSize: "100% 100%", WebkitMaskSize: "100% 100%", maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" };
+}
+function waveMask(strokeWidth) {
+  return svgMask(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M1 72 C 12 70, 16 48, 27 52 S 42 74, 53 58 S 68 22, 80 30 S 94 40, 99 18" fill="none" stroke="black" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></svg>`
+  );
+}
+function TextStub({ className }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("block h-2 rounded-sm", skeletonFill(true), className) });
+}
+var categoryStubWidth = (i) => i % 2 ? "w-10" : "w-14";
+function LegendSkeleton({ count }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("span", { className: "flex h-4 items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: cn("size-2.5 rounded-sm", skeletonFill(true)) }),
+    /* @__PURE__ */ jsx(TextStub, { className: categoryStubWidth(i) })
+  ] }, i)) });
+}
+var BAR_HEIGHTS = [0.55, 0.8, 0.4, 0.95, 0.65, 0.75, 0.5, 0.85, 0.6, 0.7, 0.45, 0.9];
+function CartesianSkeleton({ shape, count }) {
+  const n = Math.max(3, Math.min(12, count));
+  const horizontal = shape === "barHorizontal";
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+    /* @__PURE__ */ jsx("div", { className: cn("absolute top-2 bottom-7 left-0 flex flex-col items-end", horizontal ? "w-16 justify-around" : "w-8 justify-between"), children: Array.from({ length: horizontal ? n : 4 }, (_, i) => /* @__PURE__ */ jsx(TextStub, { className: horizontal ? categoryStubWidth(i) : "w-6" }, i)) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("absolute top-2 right-3 bottom-7", horizontal ? "left-18" : "left-10"), children: [
+      !horizontal && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col justify-between", children: Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx("span", { className: "h-px bg-mari-border/70" }, i)) }),
+      shape === "line" && /* @__PURE__ */ jsx("div", { className: cn("absolute inset-0", skeletonFill(true)), style: waveMask(2) }),
+      shape === "bar" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-end justify-around", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx("span", { className: cn("w-[min(1.5rem,6%)] rounded-t-sm", skeletonFill(true)), style: { height: `${BAR_HEIGHTS[i % BAR_HEIGHTS.length] * 100}%` } }, i)) }),
+      horizontal && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col justify-around border-l border-mari-border/70", children: Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx("span", { className: cn("rounded-r-sm", skeletonFill(true)), style: { width: `${BAR_HEIGHTS[i % BAR_HEIGHTS.length] * 100}%`, height: `min(1.5rem, ${60 / n}%)` } }, i)) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("absolute right-3 bottom-0 flex h-5 items-center justify-around", horizontal ? "left-18" : "left-10"), children: Array.from({ length: horizontal ? 4 : Math.min(n, 6) }, (_, i) => /* @__PURE__ */ jsx(TextStub, { className: "w-8" }, i)) })
+  ] });
+}
+function ChartEmpty({ plot, children, compact = false }) {
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("absolute inset-0 [&_*]:animate-none", compact ? "blur-[1px]" : "blur-[2px]"), children: plot }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 grid place-items-center", children })
+  ] });
+}
+function PieSkeleton({ donut }) {
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-1.5 grid place-items-center", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("aspect-square h-full max-w-full rounded-full", skeletonFill(true)),
+      style: donut ? { maskImage: "radial-gradient(circle closest-side, transparent 61.5%, black 62%)", WebkitMaskImage: "radial-gradient(circle closest-side, transparent 61.5%, black 62%)" } : void 0
+    }
+  ) });
+}
+
+// src/chart/_shared/ChartFrame.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Swatch({ color, shape }) {
+  return shape === "line" ? /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "h-0.5 w-3 shrink-0 rounded-full", style: { backgroundColor: color } }) : /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "size-2.5 shrink-0 rounded-sm", style: { backgroundColor: color } });
+}
+function ChartLegend({ items }) {
+  return /* @__PURE__ */ jsx2("ul", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-mari-muted", children: items.map((item) => /* @__PURE__ */ jsxs2("li", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx2(Swatch, { color: item.color, shape: item.shape }),
+    item.name
+  ] }, item.name)) });
+}
+function ChartTooltip({ state, width }) {
+  const flip = state.x > width / 2;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute z-mari-tooltip min-w-32 rounded-md border border-mari-border bg-mari-surface px-3 py-2 text-xs shadow-mari-md",
+      style: {
+        left: state.x,
+        top: state.y,
+        transform: `translate(${flip ? "calc(-100% - 0.75rem)" : "0.75rem"}, -50%)`
+      },
+      children: [
+        state.title && /* @__PURE__ */ jsx2("p", { className: "mb-1 text-mari-muted", children: state.title }),
+        /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-1", children: state.rows.map((row) => /* @__PURE__ */ jsxs2("li", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(Swatch, { color: row.color, shape: "line" }),
+          /* @__PURE__ */ jsx2("span", { className: "font-semibold tabular-nums text-mari-foreground", children: row.value }),
+          /* @__PURE__ */ jsx2("span", { className: "text-mari-muted", children: row.name })
+        ] }, row.name)) })
+      ]
+    }
+  );
+}
+function ChartFrame({
+  label,
+  className,
+  skeleton,
+  empty,
+  emptyText,
+  legend,
+  table,
+  tooltip,
+  plotRef,
+  plotWidth,
+  onKeyDown,
+  onBlur,
+  children,
+  legendPosition = "top",
+  skeletonPlot,
+  skeletonLegend = 0
+}) {
+  if (skeleton) {
+    const legendStub = skeletonLegend > 0 ? /* @__PURE__ */ jsx2(LegendSkeleton, { count: skeletonLegend }) : null;
+    return /* @__PURE__ */ jsxs2("div", { "aria-hidden": true, "data-skeleton": "", className: cn2("pointer-events-none flex h-64 w-full min-w-0 flex-col gap-3", className), children: [
+      legendPosition === "top" && legendStub,
+      /* @__PURE__ */ jsx2("div", { className: "relative min-h-0 flex-1", children: skeletonPlot }),
+      legendPosition === "bottom" && legendStub
+    ] });
+  }
+  const interactive = !empty && Boolean(onKeyDown);
+  const legendNode = legend && legend.length > 0 && !empty ? /* @__PURE__ */ jsx2(ChartLegend, { items: legend }) : null;
+  return /* @__PURE__ */ jsxs2("figure", { "aria-label": label, className: cn2("flex h-64 w-full min-w-0 flex-col gap-3", className), children: [
+    legendPosition === "top" && legendNode,
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: plotRef,
+        className: "relative min-h-0 flex-1 rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+        ...interactive ? { role: "group", tabIndex: 0, "aria-label": `${label}. De\u011Ferleri ok tu\u015Flar\u0131yla gezin.`, onKeyDown, onBlur } : {},
+        children: [
+          empty ? /* @__PURE__ */ jsx2(ChartEmpty, { plot: skeletonPlot, children: /* @__PURE__ */ jsx2(Empty, { size: "sm", title: emptyText }) }) : children,
+          tooltip && /* @__PURE__ */ jsx2(ChartTooltip, { state: tooltip, width: plotWidth })
+        ]
+      }
+    ),
+    legendPosition === "bottom" && legendNode,
+    !empty && /* @__PURE__ */ jsxs2("table", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx2("caption", { children: label }),
+      /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: table.columns.map((c) => /* @__PURE__ */ jsx2("th", { scope: "col", children: c }, c)) }) }),
+      /* @__PURE__ */ jsx2("tbody", { children: table.rows.map((row, i) => /* @__PURE__ */ jsx2("tr", { children: row.map((cell, j) => j === 0 ? /* @__PURE__ */ jsx2("th", { scope: "row", children: cell }, j) : /* @__PURE__ */ jsx2("td", { children: cell }, j)) }, i)) })
+    ] })
+  ] });
+}
+function nextIndex(key, current, count) {
+  if (count === 0) return null;
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowDown":
+      return current === null ? 0 : Math.min(current + 1, count - 1);
+    case "ArrowLeft":
+    case "ArrowUp":
+      return current === null ? count - 1 : Math.max(current - 1, 0);
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+
+// src/chart/_shared/cartesian.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var approxTextWidth = (text, rem, sizeRem = 0.75) => text.length * sizeRem * rem * 0.6;
+function plotBox(width, height, rem, leftLabels, hasBottomLabels = true) {
+  const left = Math.ceil(Math.max(0, ...leftLabels.map((l) => approxTextWidth(l, rem))) + rem * 0.5);
+  const right = Math.ceil(rem * 0.75);
+  const top = Math.ceil(rem * 0.5);
+  const bottom = hasBottomLabels ? Math.ceil(rem * 1.75) : Math.ceil(rem * 0.5);
+  return { left, right, top, bottom, width: Math.max(0, width - left - right), height: Math.max(0, height - top - bottom) };
+}
+function labelStride(labels, available, rem) {
+  if (labels.length <= 1 || available <= 0) return 1;
+  const widest = Math.max(...labels.map((l) => approxTextWidth(l, rem))) + rem;
+  return Math.max(1, Math.ceil(widest * labels.length / available));
+}
+function YGrid({
+  domain,
+  y,
+  box,
+  format,
+  showGrid,
+  zeroLine
+}) {
+  return /* @__PURE__ */ jsxs3("g", { "aria-hidden": true, children: [
+    domain.ticks.map((t) => /* @__PURE__ */ jsxs3("g", { children: [
+      showGrid && /* @__PURE__ */ jsx3("line", { x1: box.left, x2: box.left + box.width, y1: y(t), y2: y(t), className: "stroke-mari-border", strokeWidth: 1, shapeRendering: "crispEdges" }),
+      /* @__PURE__ */ jsx3("text", { x: box.left - 8, y: y(t), dy: "0.32em", textAnchor: "end", className: "fill-mari-muted text-xs tabular-nums", children: format(t) })
+    ] }, t)),
+    zeroLine && domain.min < 0 && domain.max > 0 && /* @__PURE__ */ jsx3("line", { x1: box.left, x2: box.left + box.width, y1: y(0), y2: y(0), className: "stroke-mari-muted/60", strokeWidth: 1, shapeRendering: "crispEdges" })
+  ] });
+}
+function XValueGrid({ domain, x, box, format, showGrid }) {
+  return /* @__PURE__ */ jsx3("g", { "aria-hidden": true, children: domain.ticks.map((t) => /* @__PURE__ */ jsxs3("g", { children: [
+    showGrid && /* @__PURE__ */ jsx3("line", { y1: box.top, y2: box.top + box.height, x1: x(t), x2: x(t), className: "stroke-mari-border", strokeWidth: 1, shapeRendering: "crispEdges" }),
+    /* @__PURE__ */ jsx3("text", { x: x(t), y: box.top + box.height + 8, dy: "0.71em", textAnchor: "middle", className: "fill-mari-muted text-xs tabular-nums", children: format(t) })
+  ] }, t)) });
+}
+function visibleLabelIndexes(count, stride) {
+  const shown = [];
+  for (let i = 0; i < count; i += stride) shown.push(i);
+  const last = count - 1;
+  const prev = shown[shown.length - 1] ?? 0;
+  if (last > prev && last - prev >= stride * 0.6) shown.push(last);
+  return shown;
+}
+function XLabels({ labels, xAt, box, stride }) {
+  return /* @__PURE__ */ jsx3("g", { "aria-hidden": true, children: visibleLabelIndexes(labels.length, stride).map((i) => /* @__PURE__ */ jsx3("text", { x: xAt(i), y: box.top + box.height + 8, dy: "0.71em", textAnchor: "middle", className: "fill-mari-muted text-xs", children: labels[i] }, i)) });
+}
+function barPath(x, y, w, h, radius, end) {
+  if (w <= 0 || h <= 0) return "";
+  const r = Math.min(radius, (end === "top" || end === "bottom" ? w : h) / 2, end === "top" || end === "bottom" ? h : w);
+  const f2 = (n) => Number(n.toFixed(2));
+  const [x0, y0, x1, y1] = [f2(x), f2(y), f2(x + w), f2(y + h)];
+  if (r <= 0) return `M${x0},${y0}H${x1}V${y1}H${x0}Z`;
+  switch (end) {
+    case "top":
+      return `M${x0},${y1}V${f2(y + r)}Q${x0},${y0},${f2(x + r)},${y0}H${f2(x + w - r)}Q${x1},${y0},${x1},${f2(y + r)}V${y1}Z`;
+    case "bottom":
+      return `M${x0},${y0}H${x1}V${f2(y + h - r)}Q${x1},${y1},${f2(x + w - r)},${y1}H${f2(x + r)}Q${x0},${y1},${x0},${f2(y + h - r)}Z`;
+    case "right":
+      return `M${x0},${y0}H${f2(x + w - r)}Q${x1},${y0},${x1},${f2(y + r)}V${f2(y + h - r)}Q${x1},${y1},${f2(x + w - r)},${y1}H${x0}Z`;
+    case "left":
+      return `M${x1},${y0}V${y1}H${f2(x + r)}Q${x0},${y1},${x0},${f2(y + h - r)}V${f2(y + r)}Q${x0},${y0},${f2(x + r)},${y0}Z`;
+  }
+}
+
+// src/chart/_shared/format.ts
+function seriesColor(color, index) {
+  if (typeof color === "string") return `var(--mari-color-${color}-solid)`;
+  const slot = color ?? Math.min(index + 1, 8);
+  return `var(--mari-color-chart-${slot})`;
+}
+function makeFormatters(locale, valueFormatter) {
+  const full = new Intl.NumberFormat(locale, { maximumFractionDigits: 2 });
+  const compact = new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 });
+  return {
+    /** Tooltip ve tablo: tam değer. */
+    value: valueFormatter ?? ((v) => full.format(v)),
+    /** Eksen: kısaltılmış (12,5 B) — özel biçim verildiyse o. */
+    axis: valueFormatter ?? ((v) => Math.abs(v) >= 1e4 ? compact.format(v) : full.format(v))
+  };
+}
+
+// src/chart/_shared/paths.ts
+var f = (n) => Number(n.toFixed(2));
+function linearSegments(points) {
+  return points.map(([x, y], i) => `${i === 0 ? "M" : "L"}${f(x)},${f(y)}`).join("");
+}
+function monotoneSegments(points) {
+  const n = points.length;
+  if (n < 3) return linearSegments(points);
+  const dx = [];
+  const slope = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx.push(points[i + 1][0] - points[i][0]);
+    slope.push((points[i + 1][1] - points[i][1]) / (dx[i] || 1));
+  }
+  const tangent = [slope[0]];
+  for (let i = 1; i < n - 1; i++) {
+    const a = slope[i - 1];
+    const b = slope[i];
+    if (a * b <= 0) tangent.push(0);
+    else {
+      const w1 = 2 * dx[i] + dx[i - 1];
+      const w2 = dx[i] + 2 * dx[i - 1];
+      tangent.push((w1 + w2) / (w1 / a + w2 / b));
+    }
+  }
+  tangent.push(slope[n - 2]);
+  let d = `M${f(points[0][0])},${f(points[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const [x0, y0] = points[i];
+    const [x1, y1] = points[i + 1];
+    const h = dx[i] / 3;
+    d += `C${f(x0 + h)},${f(y0 + tangent[i] * h)},${f(x1 - h)},${f(y1 - tangent[i + 1] * h)},${f(x1)},${f(y1)}`;
+  }
+  return d;
+}
+function linePath(points, curve = "linear") {
+  const segments = [[]];
+  for (const p of points) {
+    if (p) segments[segments.length - 1].push(p);
+    else if (segments[segments.length - 1].length) segments.push([]);
+  }
+  const draw = curve === "smooth" ? monotoneSegments : linearSegments;
+  return segments.filter((s) => s.length).map(draw).join("");
+}
+function areaPath(points, baseY, curve = "linear") {
+  const segments = [[]];
+  for (const p of points) {
+    if (p) segments[segments.length - 1].push(p);
+    else if (segments[segments.length - 1].length) segments.push([]);
+  }
+  return segments.filter((s) => s.length > 1).map((s) => {
+    const top = curve === "smooth" ? monotoneSegments(s) : linearSegments(s);
+    return `${top}L${f(s[s.length - 1][0])},${f(baseY)}L${f(s[0][0])},${f(baseY)}Z`;
+  }).join("");
+}
+function polar(cx, cy, r, angle) {
+  return [cx + r * Math.sin(angle), cy - r * Math.cos(angle)];
+}
+function arcPath(cx, cy, outer, inner, start, end) {
+  const sweep = end - start;
+  if (sweep <= 0) return "";
+  if (sweep >= Math.PI * 2 - 1e-6) {
+    const mid = start + Math.PI;
+    return arcPath(cx, cy, outer, inner, start, mid) + arcPath(cx, cy, outer, inner, mid, start + Math.PI * 2);
+  }
+  const large = sweep > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, outer, start);
+  const [x1, y1] = polar(cx, cy, outer, end);
+  if (inner <= 0) {
+    return `M${f(cx)},${f(cy)}L${f(x0)},${f(y0)}A${f(outer)},${f(outer)},0,${large},1,${f(x1)},${f(y1)}Z`;
+  }
+  const [x2, y2] = polar(cx, cy, inner, end);
+  const [x3, y3] = polar(cx, cy, inner, start);
+  return `M${f(x0)},${f(y0)}A${f(outer)},${f(outer)},0,${large},1,${f(x1)},${f(y1)}L${f(x2)},${f(y2)}A${f(inner)},${f(inner)},0,${large},0,${f(x3)},${f(y3)}Z`;
+}
+function strokeArcPath(cx, cy, r, start, end) {
+  if (end - start <= 0) return "";
+  const [x0, y0] = polar(cx, cy, r, start);
+  const [x1, y1] = polar(cx, cy, r, end);
+  return `M${f(x0)},${f(y0)}A${f(r)},${f(r)},0,${end - start > Math.PI ? 1 : 0},1,${f(x1)},${f(y1)}`;
+}
+
+// src/chart/_shared/scale.ts
+function tickStep(min, max, count) {
+  const raw = Math.abs(max - min) / Math.max(1, count);
+  if (raw === 0 || !Number.isFinite(raw)) return 1;
+  const power = Math.floor(Math.log10(raw));
+  const base = 10 ** power;
+  const error = raw / base;
+  if (error >= Math.SQRT2 * 5) return 10 * base;
+  if (error >= Math.sqrt(10)) return 5 * base;
+  if (error >= Math.SQRT2) return 2 * base;
+  return base;
+}
+var clean = (n) => Number.parseFloat(n.toPrecision(12));
+function niceDomain(min, max, count = 5) {
+  let lo = Math.min(min, max);
+  let hi = Math.max(min, max);
+  if (lo === hi) {
+    const pad = lo === 0 ? 1 : Math.abs(lo) * 0.5;
+    lo -= pad;
+    hi += pad;
+  }
+  const step = tickStep(lo, hi, count);
+  const niceMin = clean(Math.floor(lo / step) * step);
+  const niceMax = clean(Math.ceil(hi / step) * step);
+  const ticks = [];
+  for (let v = niceMin; v <= niceMax + step / 2; v += step) ticks.push(clean(v));
+  return { min: niceMin, max: niceMax, ticks };
+}
+function linearScale([d0, d1], [r0, r1]) {
+  const span = d1 - d0 || 1;
+  return (value) => r0 + (value - d0) / span * (r1 - r0);
+}
+function bandScale(count, [r0, r1], paddingRatio = 0.3) {
+  const step = (r1 - r0) / Math.max(1, count);
+  const bandwidth = step * (1 - paddingRatio);
+  const offset = (step - bandwidth) / 2;
+  const scale = ((index) => r0 + index * step + offset);
+  scale.bandwidth = bandwidth;
+  scale.center = (index) => r0 + index * step + step / 2;
+  return scale;
+}
+function extent(values) {
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (const v of values) {
+    if (v == null || Number.isNaN(v)) continue;
+    if (v < lo) lo = v;
+    if (v > hi) hi = v;
+  }
+  return lo === Infinity ? [0, 0] : [lo, hi];
+}
+
+// src/chart/_shared/useChartSize.ts
+import { useCallback, useEffect, useState } from "react";
+function useChartSize() {
+  const [el, setEl] = useState(null);
+  const [size, setSize] = useState({ width: 0, height: 0, rem: 16 });
+  const ref = useCallback((node) => setEl(node), []);
+  useEffect(() => {
+    if (!el) return;
+    const measure = () => {
+      const rem = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+      setSize(
+        (prev) => prev.width === el.clientWidth && prev.height === el.clientHeight && prev.rem === rem ? prev : { width: el.clientWidth, height: el.clientHeight, rem }
+      );
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [el]);
+  return [ref, size];
+}
+
+// src/chart/_shared/animation.ts
+var CHART_ANIMATION_MS = 700;
+var GROW_Y = "animate-[mari-chart-grow-y_700ms_var(--mari-easing-decelerate)_both] motion-reduce:animate-none";
+var GROW_X = "animate-[mari-chart-grow-x_700ms_var(--mari-easing-decelerate)_both] motion-reduce:animate-none";
+var DRAW = "animate-[mari-chart-draw_900ms_var(--mari-easing-decelerate)_both] motion-reduce:animate-none";
+var FADE = "animate-[mari-fade-in_300ms_ease-out_both] motion-reduce:animate-none";
+var stagger = (index, count) => `${Math.round(Math.min(index, count) * 400 / Math.max(count, 1))}ms`;
+function growProps(animated, horizontal, zero, index, count) {
+  if (!animated) return {};
+  return {
+    className: horizontal ? GROW_X : GROW_Y,
+    style: { transformOrigin: horizontal ? `${zero}px 0px` : `0px ${zero}px`, animationDelay: stagger(index, count) }
+  };
+}
+function revealRectProps(animated, left) {
+  if (!animated) return {};
+  return { className: GROW_X, style: { transformOrigin: `${left}px 0px` } };
+}
+function drawProps(animated) {
+  if (!animated) return {};
+  return { className: DRAW, pathLength: 1, strokeDasharray: "1 1" };
+}
+function fadeAfterProps(animated, delayMs = CHART_ANIMATION_MS) {
+  if (!animated) return {};
+  return { className: FADE, style: { animationDelay: `${delayMs}ms` } };
+}
+
+// src/chart/line-chart/LineChart.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var toNumber = (v) => typeof v === "number" && Number.isFinite(v) ? v : null;
+function LineChart({
+  data,
+  xKey,
+  series,
+  label,
+  curve = "linear",
+  area = false,
+  includeZero = area,
+  xFormatter,
+  valueFormatter,
+  locale = "tr-TR",
+  showGrid = true,
+  showLegend,
+  emptyText = "Veri yok",
+  skeleton,
+  animated = true,
+  className
+}) {
+  const [plotRef, size] = useChartSize();
+  const clipId = `mari-line-${useId().replace(/[^\w-]/g, "")}`;
+  const [active, setActive] = useState2(null);
+  const fmt = useMemo(() => makeFormatters(locale, valueFormatter), [locale, valueFormatter]);
+  const xLabels = data.map((row) => xFormatter ? xFormatter(row[xKey], row) : String(row[xKey] ?? ""));
+  const colors = series.map((s, i) => seriesColor(s.color, i));
+  const values = series.flatMap((s) => data.map((row) => toNumber(row[s.key])));
+  const [lo, hi] = extent(values);
+  const domain = niceDomain(includeZero ? Math.min(0, lo) : lo, includeZero ? Math.max(0, hi) : hi);
+  const box = plotBox(size.width, size.height, size.rem, domain.ticks.map(fmt.axis));
+  const y = linearScale([domain.min, domain.max], [box.top + box.height, box.top]);
+  const xAt = (i) => data.length <= 1 ? box.left + box.width / 2 : box.left + i * box.width / (data.length - 1);
+  const stride = labelStride(xLabels, box.width, size.rem);
+  const baseY = y(Math.max(domain.min, Math.min(0, domain.max)));
+  const legend = showLegend ?? series.length > 1 ? series.map((s, i) => ({ name: s.name, color: colors[i], shape: area ? "rect" : "line" })) : void 0;
+  const tooltipAt = (i) => {
+    const row = data[i];
+    const ys = series.map((s) => toNumber(row[s.key])).filter((v) => v !== null);
+    return {
+      x: xAt(i),
+      y: ys.length ? y(Math.max(...ys)) : box.top + box.height / 2,
+      title: xLabels[i],
+      rows: series.map((s, si) => {
+        const v = toNumber(row[s.key]);
+        return { name: s.name, color: colors[si], shape: "line", value: v === null ? "\u2014" : fmt.value(v) };
+      })
+    };
+  };
+  const onPointerMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const px = e.clientX - rect.left;
+    const i = data.length <= 1 ? 0 : Math.round(px / rect.width * (data.length - 1));
+    setActive(Math.max(0, Math.min(data.length - 1, i)));
+  };
+  const ready = size.width > 0 && box.width > 0 && box.height > 0;
+  return /* @__PURE__ */ jsx4(
+    ChartFrame,
+    {
+      label,
+      className,
+      skeleton,
+      skeletonPlot: /* @__PURE__ */ jsx4(CartesianSkeleton, { shape: "line", count: data.length || 6 }),
+      skeletonLegend: legend?.length ?? 0,
+      empty: data.length === 0 || series.length === 0,
+      emptyText,
+      legend,
+      table: {
+        columns: [String(xKey), ...series.map((s) => s.name)],
+        rows: data.map((row, i) => [xLabels[i], ...series.map((s) => {
+          const v = toNumber(row[s.key]);
+          return v === null ? "\u2014" : fmt.value(v);
+        })])
+      },
+      tooltip: active !== null && data[active] ? tooltipAt(active) : null,
+      plotRef,
+      plotWidth: size.width,
+      onKeyDown: (e) => {
+        const next = nextIndex(e.key, active, data.length);
+        if (next === null) return;
+        e.preventDefault();
+        setActive(next);
+      },
+      onBlur: () => setActive(null),
+      children: ready && /* @__PURE__ */ jsxs4("svg", { "aria-hidden": true, width: size.width, height: size.height, className: "absolute inset-0 overflow-visible", children: [
+        /* @__PURE__ */ jsx4(YGrid, { domain, y, box, format: fmt.axis, showGrid, zeroLine: true }),
+        /* @__PURE__ */ jsx4(XLabels, { labels: xLabels, xAt, box, stride }),
+        animated && /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsx4("clipPath", { id: clipId, children: /* @__PURE__ */ jsx4("rect", { x: box.left - 4, y: 0, width: box.width + 8, height: size.height, ...revealRectProps(animated, box.left - 4) }) }) }),
+        /* @__PURE__ */ jsx4("g", { clipPath: animated ? `url(#${clipId})` : void 0, children: series.map((s, si) => {
+          const pts = data.map((row, i) => {
+            const v = toNumber(row[s.key]);
+            return v === null ? null : [xAt(i), y(v)];
+          });
+          return /* @__PURE__ */ jsxs4("g", { children: [
+            area && /* @__PURE__ */ jsx4("path", { d: areaPath(pts, baseY, curve), fill: colors[si], fillOpacity: 0.1 }),
+            /* @__PURE__ */ jsx4("path", { d: linePath(pts, curve), fill: "none", stroke: colors[si], strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round" })
+          ] }, s.key);
+        }) }),
+        active !== null && /* @__PURE__ */ jsxs4("g", { children: [
+          /* @__PURE__ */ jsx4("line", { x1: xAt(active), x2: xAt(active), y1: box.top, y2: box.top + box.height, className: "stroke-mari-muted/50", strokeWidth: 1 }),
+          series.map((s, si) => {
+            const v = toNumber(data[active]?.[s.key]);
+            return v === null ? null : /* @__PURE__ */ jsx4("circle", { cx: xAt(active), cy: y(v), r: 4, fill: colors[si], className: "stroke-mari-surface", strokeWidth: 2 }, s.key);
+          })
+        ] }),
+        /* @__PURE__ */ jsx4(
+          "rect",
+          {
+            x: box.left,
+            y: box.top,
+            width: box.width,
+            height: box.height,
+            fill: "transparent",
+            onPointerMove,
+            onPointerLeave: () => setActive(null)
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/chart/bar-chart/BarChart.tsx
+import { useMemo as useMemo2, useState as useState3 } from "react";
+
+// src/chart/bar-chart/bars.ts
+var GAP = 2;
+var num = (v) => typeof v === "number" && Number.isFinite(v) ? v : 0;
+function valueExtent(rows, stacked) {
+  let lo = 0;
+  let hi = 0;
+  for (const values of rows) {
+    if (stacked) {
+      hi = Math.max(hi, values.filter((v) => v > 0).reduce((a, v) => a + v, 0));
+      lo = Math.min(lo, values.filter((v) => v < 0).reduce((a, v) => a + v, 0));
+    } else {
+      hi = Math.max(hi, ...values);
+      lo = Math.min(lo, ...values);
+    }
+  }
+  return [lo, hi];
+}
+function segment(g, offset, from, to, roundEnd) {
+  const a = g.value(from);
+  const b = g.value(to);
+  const radius = roundEnd ? 4 : 0;
+  const gap = g.stacked && from !== 0 ? GAP : 0;
+  const positive = to >= from;
+  const lo = Math.min(a, b);
+  const len = Math.abs(b - a) - gap;
+  if (g.horizontal) {
+    return positive ? barPath(lo + gap, offset, len, g.thickness, radius, "right") : barPath(lo, offset, len, g.thickness, radius, "left");
+  }
+  return positive ? barPath(offset, lo, g.thickness, len, radius, "top") : barPath(offset, lo + gap, g.thickness, len, radius, "bottom");
+}
+function outerIndexes(values) {
+  let pos = -1;
+  let neg = -1;
+  values.forEach((v, i) => {
+    if (v > 0) pos = i;
+    if (v < 0) neg = i;
+  });
+  return { pos, neg };
+}
+function buildBars(rows, g) {
+  const groupCount = g.stacked ? 1 : rows[0]?.length ?? 1;
+  const span = g.thickness * groupCount + GAP * (groupCount - 1);
+  const shapes = [];
+  rows.forEach((values, i) => {
+    const start = g.band.center(i) - span / 2;
+    const outer = outerIndexes(values);
+    let pos = 0;
+    let neg = 0;
+    values.forEach((v, s) => {
+      if (v === 0) return;
+      if (!g.stacked) {
+        shapes.push({ row: i, series: s, d: segment(g, start + s * (g.thickness + GAP), 0, v, true) });
+        return;
+      }
+      const from = v > 0 ? pos : neg;
+      if (v > 0) pos += v;
+      else neg += v;
+      shapes.push({ row: i, series: s, d: segment(g, start, from, from + v, s === (v > 0 ? outer.pos : outer.neg)) });
+    });
+  });
+  return shapes;
+}
+
+// src/chart/bar-chart/BarChart.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function BarChart({
+  data,
+  xKey,
+  series,
+  label,
+  layout = "vertical",
+  stacked = false,
+  xFormatter,
+  valueFormatter,
+  locale = "tr-TR",
+  showGrid = true,
+  showLegend,
+  emptyText = "Veri yok",
+  skeleton,
+  animated = true,
+  className
+}) {
+  const [plotRef, size] = useChartSize();
+  const [active, setActive] = useState3(null);
+  const fmt = useMemo2(() => makeFormatters(locale, valueFormatter), [locale, valueFormatter]);
+  const horizontal = layout === "horizontal";
+  const categories = data.map((row) => xFormatter ? xFormatter(row[xKey], row) : String(row[xKey] ?? ""));
+  const colors = series.map((s, i) => seriesColor(s.color, i));
+  const matrix = data.map((row) => series.map((s) => num(row[s.key])));
+  const domain = niceDomain(...valueExtent(matrix, stacked));
+  const box = plotBox(size.width, size.height, size.rem, horizontal ? categories : domain.ticks.map(fmt.axis));
+  const value = horizontal ? linearScale([domain.min, domain.max], [box.left, box.left + box.width]) : linearScale([domain.min, domain.max], [box.top + box.height, box.top]);
+  const band = horizontal ? bandScale(data.length, [box.top, box.top + box.height], 0.3) : bandScale(data.length, [box.left, box.left + box.width], 0.3);
+  const maxThickness = size.rem * 1.5;
+  const groupCount = stacked ? 1 : series.length;
+  const thickness = Math.max(1, Math.min(maxThickness, (band.bandwidth - GAP * (groupCount - 1)) / groupCount));
+  const zero = value(0);
+  const bars = buildBars(matrix, { horizontal, stacked, band, value, thickness });
+  const legend = showLegend ?? series.length > 1 ? series.map((s, i) => ({ name: s.name, color: colors[i], shape: "rect" })) : void 0;
+  const tooltipAt = (i) => {
+    const row = data[i];
+    const total = series.reduce((acc, s) => acc + num(row[s.key]), 0);
+    const tip = value(stacked ? total : Math.max(...series.map((s) => num(row[s.key])), 0));
+    return {
+      x: horizontal ? tip : band.center(i),
+      y: horizontal ? band.center(i) : tip,
+      title: categories[i],
+      rows: series.map((s, si) => ({ name: s.name, color: colors[si], shape: "rect", value: fmt.value(num(row[s.key])) }))
+    };
+  };
+  const stride = horizontal ? 1 : labelStride(categories, box.width, size.rem);
+  const ready = size.width > 0 && box.width > 0 && box.height > 0;
+  const axisLength = horizontal ? box.height : box.width;
+  const step = data.length ? axisLength / data.length : 0;
+  return /* @__PURE__ */ jsx5(
+    ChartFrame,
+    {
+      label,
+      className,
+      skeleton,
+      skeletonPlot: /* @__PURE__ */ jsx5(CartesianSkeleton, { shape: horizontal ? "barHorizontal" : "bar", count: data.length || 6 }),
+      skeletonLegend: legend?.length ?? 0,
+      empty: data.length === 0 || series.length === 0,
+      emptyText,
+      legend,
+      table: {
+        columns: [String(xKey), ...series.map((s) => s.name)],
+        rows: data.map((row, i) => [categories[i], ...series.map((s) => fmt.value(num(row[s.key])))])
+      },
+      tooltip: active !== null && data[active] ? tooltipAt(active) : null,
+      plotRef,
+      plotWidth: size.width,
+      onKeyDown: (e) => {
+        const next = nextIndex(e.key, active, data.length);
+        if (next === null) return;
+        e.preventDefault();
+        setActive(next);
+      },
+      onBlur: () => setActive(null),
+      children: ready && /* @__PURE__ */ jsxs5("svg", { "aria-hidden": true, width: size.width, height: size.height, className: "absolute inset-0 overflow-visible", children: [
+        active !== null && (horizontal ? /* @__PURE__ */ jsx5("rect", { x: box.left, y: box.top + active * step, width: box.width, height: step, className: "fill-mari-surface-alt" }) : /* @__PURE__ */ jsx5("rect", { x: box.left + active * step, y: box.top, width: step, height: box.height, className: "fill-mari-surface-alt" })),
+        horizontal ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5(XValueGrid, { domain, x: value, box, format: fmt.axis, showGrid }),
+          /* @__PURE__ */ jsx5("g", { "aria-hidden": true, children: categories.map((c, i) => /* @__PURE__ */ jsx5("text", { x: box.left - 8, y: band.center(i), dy: "0.32em", textAnchor: "end", className: "fill-mari-muted text-xs", children: c }, i)) }),
+          /* @__PURE__ */ jsx5("line", { x1: zero, x2: zero, y1: box.top, y2: box.top + box.height, className: "stroke-mari-muted/60", strokeWidth: 1, shapeRendering: "crispEdges" })
+        ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx5(YGrid, { domain, y: value, box, format: fmt.axis, showGrid, zeroLine: false }),
+          /* @__PURE__ */ jsx5(XLabels, { labels: categories, xAt: (i) => band.center(i), box, stride }),
+          /* @__PURE__ */ jsx5("line", { x1: box.left, x2: box.left + box.width, y1: zero, y2: zero, className: "stroke-mari-muted/60", strokeWidth: 1, shapeRendering: "crispEdges" })
+        ] }),
+        bars.map((bar) => /* @__PURE__ */ jsx5("path", { d: bar.d, fill: colors[bar.series], ...growProps(animated, horizontal, zero, bar.row, data.length) }, `${bar.row}-${bar.series}`)),
+        data.map(
+          (_, i) => horizontal ? /* @__PURE__ */ jsx5("rect", { x: box.left, y: box.top + i * step, width: box.width, height: step, fill: "transparent", onPointerEnter: () => setActive(i), onPointerLeave: () => setActive(null) }, i) : /* @__PURE__ */ jsx5("rect", { x: box.left + i * step, y: box.top, width: step, height: box.height, fill: "transparent", onPointerEnter: () => setActive(i), onPointerLeave: () => setActive(null) }, i)
+        )
+      ] })
+    }
+  );
+}
+
+// src/chart/pie-chart/PieChart.tsx
+import { useId as useId2, useMemo as useMemo3, useState as useState4 } from "react";
+import { cn as cn3 } from "@mari-ui/core";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function PieChart({
+  data,
+  label,
+  donut = false,
+  centerLabel = "Toplam",
+  centerValue,
+  maxSlices = 6,
+  otherLabel = "Di\u011Fer",
+  showPercent = true,
+  valueFormatter,
+  locale = "tr-TR",
+  emptyText = "Veri yok",
+  skeleton,
+  animated = true,
+  className
+}) {
+  const [plotRef, size] = useChartSize();
+  const maskId = `mari-pie-${useId2().replace(/[^\w-]/g, "")}`;
+  const [active, setActive] = useState4(null);
+  const fmt = useMemo3(() => makeFormatters(locale, valueFormatter), [locale, valueFormatter]);
+  const percent = useMemo3(() => new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }), [locale]);
+  const slices = useMemo3(() => {
+    const positive = data.filter((d) => Number.isFinite(d.value) && d.value > 0);
+    if (positive.length <= maxSlices) return positive;
+    const kept = positive.slice(0, maxSlices - 1);
+    const rest = positive.slice(maxSlices - 1).reduce((sum, d) => sum + d.value, 0);
+    return [...kept, { name: otherLabel, value: rest }];
+  }, [data, maxSlices, otherLabel]);
+  const total = slices.reduce((sum, d) => sum + d.value, 0);
+  const colors = slices.map((d, i) => seriesColor(d.color, i));
+  const cx = size.width / 2;
+  const cy = size.height / 2;
+  const outer = Math.max(0, Math.min(size.width, size.height) / 2 - 6);
+  const inner = donut ? outer * 0.62 : 0;
+  let angle = 0;
+  const arcs = slices.map((d, i) => {
+    const start = angle;
+    angle += d.value / total * Math.PI * 2;
+    return { ...d, start, end: angle, color: colors[i] };
+  });
+  const legend = arcs.map((a) => ({
+    name: showPercent ? `${a.name} \xB7 ${percent.format(a.value / total)}` : a.name,
+    color: a.color,
+    shape: "rect"
+  }));
+  const activeArc = active !== null ? arcs[active] : void 0;
+  const tooltip = activeArc ? (() => {
+    const [x, y] = polar(cx, cy, (outer + inner) / 2 || outer * 0.6, (activeArc.start + activeArc.end) / 2);
+    return {
+      x,
+      y,
+      rows: [{ name: `${activeArc.name} \xB7 ${percent.format(activeArc.value / total)}`, color: activeArc.color, shape: "rect", value: fmt.value(activeArc.value) }]
+    };
+  })() : null;
+  return /* @__PURE__ */ jsx6(
+    ChartFrame,
+    {
+      label,
+      className,
+      skeleton,
+      skeletonPlot: /* @__PURE__ */ jsx6(PieSkeleton, { donut }),
+      skeletonLegend: Math.min(data.length || 4, maxSlices),
+      empty: slices.length === 0,
+      emptyText,
+      legend,
+      legendPosition: "bottom",
+      table: { columns: ["Dilim", "De\u011Fer", "Oran"], rows: arcs.map((a) => [a.name, fmt.value(a.value), percent.format(a.value / total)]) },
+      tooltip,
+      plotRef,
+      plotWidth: size.width,
+      onKeyDown: (e) => {
+        const next = nextIndex(e.key, active, arcs.length);
+        if (next === null) return;
+        e.preventDefault();
+        setActive(next);
+      },
+      onBlur: () => setActive(null),
+      children: outer > 0 && /* @__PURE__ */ jsxs6("svg", { "aria-hidden": true, width: size.width, height: size.height, className: "absolute inset-0 overflow-visible", children: [
+        animated && /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6("mask", { id: maskId, maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx6(
+          "circle",
+          {
+            cx,
+            cy,
+            r: (outer + 6) / 2,
+            fill: "none",
+            stroke: "white",
+            strokeWidth: outer + 6,
+            transform: `rotate(-90 ${cx} ${cy})`,
+            ...drawProps(animated)
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx6("g", { mask: animated ? `url(#${maskId})` : void 0, children: arcs.map((a, i) => /* @__PURE__ */ jsx6(
+          "path",
+          {
+            d: arcPath(cx, cy, i === active ? outer + 4 : outer, inner, a.start, a.end),
+            fill: a.color,
+            className: "stroke-mari-surface transition-[d] duration-150 motion-reduce:transition-none",
+            strokeWidth: arcs.length > 1 ? 2 : 0,
+            strokeLinejoin: "round",
+            onPointerEnter: () => setActive(i),
+            onPointerLeave: () => setActive(null)
+          },
+          a.name
+        )) }),
+        donut && /* @__PURE__ */ jsxs6("g", { className: cn3("pointer-events-none", fadeAfterProps(animated, 600).className), style: fadeAfterProps(animated, 600).style, children: [
+          /* @__PURE__ */ jsx6("text", { x: cx, y: cy, dy: "-0.35em", textAnchor: "middle", className: "fill-mari-muted text-xs", children: centerLabel }),
+          /* @__PURE__ */ jsx6("text", { x: cx, y: cy, dy: "1em", textAnchor: "middle", className: "fill-mari-foreground text-lg font-semibold", children: centerValue ?? fmt.value(total) })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/chart/sparkline/Sparkline.tsx
+import { useId as useId3 } from "react";
+import { InboxIcon } from "lucide-react";
+import { cn as cn4 } from "@mari-ui/core";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function Sparkline({ data, label, color = "muted", endColor = "primary", area = false, curve = "smooth", skeleton, animated = true, emptyText = "Veri yok", className }) {
+  const [ref, size] = useChartSize();
+  const clipId = `mari-spark-${useId3().replace(/[^\w-]/g, "")}`;
+  if (skeleton) return /* @__PURE__ */ jsx7("span", { "aria-hidden": true, "data-skeleton": "", className: cn4("pointer-events-none block h-8 w-full", skeletonFill(true), className), style: waveMask(1.5) });
+  const stroke = color === "muted" ? "var(--mari-color-muted)" : seriesColor(color, 0);
+  const pad = 3;
+  const [lo, hi] = extent(data);
+  const flat = lo === hi;
+  const y = linearScale(flat ? [lo - 1, hi + 1] : [lo, hi], [size.height - pad, pad]);
+  const x = (i) => data.length <= 1 ? size.width / 2 : pad + i * (size.width - pad * 2) / (data.length - 1);
+  const pts = data.map((v, i) => v == null ? null : [x(i), y(v)]);
+  let lastIndex = -1;
+  for (let i = data.length - 1; i >= 0; i--) {
+    if (data[i] != null) {
+      lastIndex = i;
+      break;
+    }
+  }
+  const last = lastIndex >= 0 ? pts[lastIndex] : null;
+  if (!last) {
+    return /* @__PURE__ */ jsx7("div", { role: "img", "aria-label": emptyText, className: cn4("relative h-8 w-full", className), children: /* @__PURE__ */ jsx7(ChartEmpty, { compact: true, plot: /* @__PURE__ */ jsx7("span", { className: cn4("absolute inset-0", skeletonFill(false)), style: waveMask(1.5) }), children: /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-1.5 text-xs text-mari-muted", children: [
+      /* @__PURE__ */ jsx7(InboxIcon, { "aria-hidden": true, className: "size-3.5 shrink-0" }),
+      emptyText
+    ] }) }) });
+  }
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref,
+      className: cn4("h-8 w-full", className),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      children: size.width > 0 && /* @__PURE__ */ jsxs7("svg", { width: size.width, height: size.height, "aria-hidden": true, className: "block overflow-visible", children: [
+        animated && /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: clipId, children: /* @__PURE__ */ jsx7("rect", { x: -2, y: -2, width: size.width + 4, height: size.height + 4, ...revealRectProps(animated, -2) }) }) }),
+        /* @__PURE__ */ jsxs7("g", { clipPath: animated ? `url(#${clipId})` : void 0, children: [
+          area && /* @__PURE__ */ jsx7("path", { d: areaPath(pts, size.height, curve), fill: stroke, fillOpacity: 0.1 }),
+          /* @__PURE__ */ jsx7("path", { d: linePath(pts, curve), fill: "none", stroke, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
+        ] }),
+        last && /* @__PURE__ */ jsx7("circle", { cx: last[0], cy: last[1], r: 3, fill: seriesColor(endColor, 0), className: cn4("stroke-mari-surface", fadeAfterProps(animated).className), style: fadeAfterProps(animated).style, strokeWidth: 1.5 })
+      ] })
+    }
+  );
+}
+
+// src/chart/gauge/Gauge.tsx
+import { useMemo as useMemo4 } from "react";
+import { InboxIcon as InboxIcon2 } from "lucide-react";
+import { cn as cn5 } from "@mari-ui/core";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var START = -Math.PI * 0.75;
+var END = Math.PI * 0.75;
+var R = 80;
+var CX = 100;
+var CY = 96;
+var STROKE = 14;
+function gaugeMask(withValue) {
+  const [minX, minY] = polar(CX, CY, R, START);
+  const [maxX] = polar(CX, CY, R, END);
+  const stub = (x, y, w, h) => `<rect x="${x - w / 2}" y="${y - h / 2}" width="${w}" height="${h}" rx="3" fill="black"/>`;
+  return svgMask(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 184"><path d="${strokeArcPath(CX, CY, R, START, END)}" fill="none" stroke="black" stroke-width="${STROKE}" stroke-linecap="round"/>` + (withValue ? stub(CX, CY, 64, 26) : "") + stub(minX, minY + 21, 16, 10) + stub(maxX, minY + 21, 24, 10) + `</svg>`
+  );
+}
+var SKELETON_MASK = gaugeMask(true);
+var EMPTY_MASK = gaugeMask(false);
+function Gauge({
+  value,
+  min = 0,
+  max = 100,
+  label,
+  hideLabel = false,
+  color = "primary",
+  segments,
+  valueFormatter,
+  locale = "tr-TR",
+  emptyText = "Veri yok",
+  skeleton,
+  animated = true,
+  className
+}) {
+  const format = useMemo4(() => valueFormatter ?? ((v) => new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(v)), [valueFormatter, locale]);
+  if (skeleton) {
+    return /* @__PURE__ */ jsxs8("div", { "aria-hidden": true, "data-skeleton": "", className: cn5("pointer-events-none inline-flex w-48 flex-col items-center", className), children: [
+      /* @__PURE__ */ jsx8("div", { className: cn5("aspect-[200/184] w-full", skeletonFill(true)), style: SKELETON_MASK }),
+      !hideLabel && /* @__PURE__ */ jsx8("span", { className: "-mt-2 flex h-5 items-center", children: /* @__PURE__ */ jsx8("span", { className: cn5("block h-2.5 w-24 rounded-sm", skeletonFill(true)) }) })
+    ] });
+  }
+  if (value == null || !Number.isFinite(value)) {
+    return /* @__PURE__ */ jsxs8("div", { role: "img", "aria-label": `${label}: ${emptyText}`, className: cn5("inline-flex w-48 flex-col items-center", className), children: [
+      /* @__PURE__ */ jsx8("div", { className: "relative aspect-[200/184] w-full", children: /* @__PURE__ */ jsx8(ChartEmpty, { plot: /* @__PURE__ */ jsx8("div", { className: cn5("absolute inset-0", skeletonFill(false)), style: EMPTY_MASK }), children: /* @__PURE__ */ jsxs8("span", { className: "absolute top-[52%] left-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1 text-xs text-mari-muted", children: [
+        /* @__PURE__ */ jsx8(InboxIcon2, { "aria-hidden": true, className: "size-5" }),
+        /* @__PURE__ */ jsx8("span", { className: "whitespace-nowrap", children: emptyText })
+      ] }) }) }),
+      !hideLabel && /* @__PURE__ */ jsx8("span", { className: "-mt-2 text-sm text-mari-muted", children: label })
+    ] });
+  }
+  const clamped = Math.min(max, Math.max(min, value));
+  const ratio = max === min ? 0 : (clamped - min) / (max - min);
+  const segment2 = segments?.slice().sort((a, b) => a.upTo - b.upTo).find((s) => clamped <= s.upTo) ?? segments?.[segments.length - 1];
+  const fill = seriesColor(segment2?.color ?? color, 0);
+  const r = R;
+  const cx = CX;
+  const cy = CY;
+  const stroke = STROKE;
+  const valueText = format(value);
+  const [minX, minY] = polar(cx, cy, r, START);
+  const [maxX, maxY] = polar(cx, cy, r, END);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      role: "meter",
+      "aria-label": label,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": clamped,
+      "aria-valuetext": segment2?.label ? `${valueText}, ${segment2.label}` : valueText,
+      className: cn5("inline-flex w-48 flex-col items-center", className),
+      children: [
+        /* @__PURE__ */ jsxs8("svg", { viewBox: "0 0 200 184", "aria-hidden": true, className: "block w-full overflow-visible", children: [
+          /* @__PURE__ */ jsx8("path", { d: strokeArcPath(cx, cy, r, START, END), fill: "none", stroke: fill, strokeOpacity: 0.15, strokeWidth: stroke, strokeLinecap: "round" }),
+          ratio > 0 && /* @__PURE__ */ jsx8("path", { d: strokeArcPath(cx, cy, r, START, START + (END - START) * ratio), fill: "none", stroke: fill, strokeWidth: stroke, strokeLinecap: "round", ...drawProps(animated) }),
+          /* @__PURE__ */ jsx8("text", { x: cx, y: cy, dy: "0.35em", textAnchor: "middle", fontSize: 36, className: "fill-mari-foreground font-semibold", children: valueText }),
+          /* @__PURE__ */ jsx8("text", { x: minX, y: minY + 26, textAnchor: "middle", fontSize: 14, className: "fill-mari-muted tabular-nums", children: format(min) }),
+          /* @__PURE__ */ jsx8("text", { x: maxX, y: maxY + 26, textAnchor: "middle", fontSize: 14, className: "fill-mari-muted tabular-nums", children: format(max) })
+        ] }),
+        !hideLabel && /* @__PURE__ */ jsx8("span", { className: "-mt-2 text-sm text-mari-muted", children: label }),
+        segment2?.label && /* @__PURE__ */ jsx8("span", { className: "text-xs font-medium text-mari-foreground", children: segment2.label })
+      ]
+    }
+  );
+}
+export {
+  BarChart,
+  Gauge,
+  LineChart,
+  PieChart,
+  Sparkline
+};
+//# sourceMappingURL=chart.js.map