@stisocial/ui 0.1.0 → 0.2.1

package/dist/charts/ComboChart/ComboChart.js

@@ -0,0 +1,19 @@
+import { Bars } from "../_internal/Bars.js";
+import ComboChart_module_default from "./ComboChart.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/charts/ComboChart/ComboChart.tsx
+/**
+* Bileşik grafik: çubukları ve çizgileri aynı kategori ekseninde birleştirir (harcama çubukları,
+* dönüşüm oranı çizgisi). Birimleri farklı seriler için çizgi ikinci eksene bağlanır; iki eksen de
+* adlı değer biçimiyle etiketlenir ve ipucu her seriyi kendi biçimiyle yazar. Etkileşim ve klavye
+* `BarChart` ile aynıdır.
+*/
+function ComboChart({ className, stacked = false, series, ...rest }) {
+	return /* @__PURE__ */ jsx(Bars, {
+		...rest,
+		series,
+		mode: stacked ? "stacked" : "grouped",
+		className: [ComboChart_module_default.root, className].filter(Boolean).join(" ")
+	});
+}
+export { ComboChart };

package/dist/charts/ComboChart/ComboChart.module.js

@@ -0,0 +1,4 @@
+import './ComboChart.css';
+// src/charts/ComboChart/ComboChart.module.css
+var ComboChart_module_default = { "root": "sti-ComboChart-root-27f94" };
+export { ComboChart_module_default as default };

package/dist/charts/ComboChart/index.d.ts

@@ -0,0 +1,3 @@
+import { BarSeries } from "../_internal/Bars.js";
+import { ComboChart, ComboChartProps } from "./ComboChart.js";
+export { ComboChart, ComboChartProps, type BarSeries as ComboSeries };

package/dist/charts/LineChart/LineChart.css

@@ -0,0 +1,9 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-LineChart-root-2f7af {
+    --sti-line-chart-gap: var(--sti-space-3);
+    gap: var(--sti-line-chart-gap);
+    width: 100%;
+    min-width: 0;
+  }
+}

package/dist/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,13 @@
+import { LineAreaCommonProps } from "../_internal/LineArea.js";
+export interface LineChartProps extends LineAreaCommonProps {
+  /** Noktalarda seri işareti (daire, kare, baklava…); varsayılan en çok 24 kategoride açık. */
+  showMarkers?: boolean;
+}
+/**
+ * Çizgi grafiği: bir ya da birkaç serinin kategoriler (ay, gün, kampanya) boyunca değişimini
+ * gösterir. Seri yalnız renkle değil işaret biçimiyle de ayrılır; gösterge seri gizler; eksik
+ * değerde çizgi kesilir. İşaretçi ve klavye (oklar, Home, End) kategori başına veri ipucu açar;
+ * `tableToggle` ile aynı veri tablo olarak da görülür. WAI-ARIA'da grafik kalıbı yoktur: çizim
+ * alanı tek odak durağıdır, ekran okuyucu değerleri duyurur.
+ */
+export declare function LineChart({ className, ...rest }: LineChartProps): import("react").JSX.Element;

package/dist/charts/LineChart/LineChart.js

@@ -0,0 +1,19 @@
+import { LineArea } from "../_internal/LineArea.js";
+import LineChart_module_default from "./LineChart.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/charts/LineChart/LineChart.tsx
+/**
+* Çizgi grafiği: bir ya da birkaç serinin kategoriler (ay, gün, kampanya) boyunca değişimini
+* gösterir. Seri yalnız renkle değil işaret biçimiyle de ayrılır; gösterge seri gizler; eksik
+* değerde çizgi kesilir. İşaretçi ve klavye (oklar, Home, End) kategori başına veri ipucu açar;
+* `tableToggle` ile aynı veri tablo olarak da görülür. WAI-ARIA'da grafik kalıbı yoktur: çizim
+* alanı tek odak durağıdır, ekran okuyucu değerleri duyurur.
+*/
+function LineChart({ className, ...rest }) {
+	return /* @__PURE__ */ jsx(LineArea, {
+		...rest,
+		area: false,
+		className: [LineChart_module_default.root, className].filter(Boolean).join(" ")
+	});
+}
+export { LineChart };

package/dist/charts/LineChart/LineChart.module.js

@@ -0,0 +1,4 @@
+import './LineChart.css';
+// src/charts/LineChart/LineChart.module.css
+var LineChart_module_default = { "root": "sti-LineChart-root-2f7af" };
+export { LineChart_module_default as default };

package/dist/charts/LineChart/index.d.ts

@@ -0,0 +1,2 @@
+import { LineChart, LineChartProps } from "./LineChart.js";
+export { LineChart, LineChartProps };

package/dist/charts/StackedBarChart/StackedBarChart.css

@@ -0,0 +1,9 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-StackedBarChart-root-4af52 {
+    --sti-stacked-bar-chart-gap: var(--sti-space-3);
+    gap: var(--sti-stacked-bar-chart-gap);
+    width: 100%;
+    min-width: 0;
+  }
+}

package/dist/charts/StackedBarChart/StackedBarChart.d.ts

@@ -0,0 +1,17 @@
+import { ChartSeries } from "../_internal/category.js";
+import { BarsCommonProps } from "../_internal/Bars.js";
+export interface StackedBarChartProps extends BarsCommonProps {
+  /** Üst üste dizilen seriler (sıra aşağıdan yukarıya / soldan sağa). */
+  series: readonly ChartSeries[];
+  /** Her kategoriyi yüzde 100'e çeker (paylar karşılaştırılır). */
+  normalize?: boolean;
+  orientation?: "vertical" | "horizontal";
+  /** Her yığının ucuna toplamı yazar (`normalize` ile "%100"). */
+  showValues?: boolean;
+}
+/**
+ * Yığın çubuk grafiği: bir bütünün parçalarını kategori başına üst üste gösterir (kanal bazında
+ * harcama dağılımı). Negatif değerler istife girmez. `normalize` ile payları karşılaştırır. Eksik
+ * değer sıfır yükseklik sayılır. Etkileşim ve klavye `BarChart` ile aynıdır.
+ */
+export declare function StackedBarChart({ className, normalize, orientation, showValues, series, ...rest }: StackedBarChartProps): import("react").JSX.Element;

package/dist/charts/StackedBarChart/StackedBarChart.js

@@ -0,0 +1,21 @@
+import { Bars } from "../_internal/Bars.js";
+import StackedBarChart_module_default from "./StackedBarChart.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/charts/StackedBarChart/StackedBarChart.tsx
+/**
+* Yığın çubuk grafiği: bir bütünün parçalarını kategori başına üst üste gösterir (kanal bazında
+* harcama dağılımı). Negatif değerler istife girmez. `normalize` ile payları karşılaştırır. Eksik
+* değer sıfır yükseklik sayılır. Etkileşim ve klavye `BarChart` ile aynıdır.
+*/
+function StackedBarChart({ className, normalize, orientation, showValues, series, ...rest }) {
+	return /* @__PURE__ */ jsx(Bars, {
+		...rest,
+		series,
+		mode: "stacked",
+		normalize,
+		orientation,
+		showValues,
+		className: [StackedBarChart_module_default.root, className].filter(Boolean).join(" ")
+	});
+}
+export { StackedBarChart };

package/dist/charts/StackedBarChart/StackedBarChart.module.js

@@ -0,0 +1,4 @@
+import './StackedBarChart.css';
+// src/charts/StackedBarChart/StackedBarChart.module.css
+var StackedBarChart_module_default = { "root": "sti-StackedBarChart-root-4af52" };
+export { StackedBarChart_module_default as default };

package/dist/charts/StackedBarChart/index.d.ts

@@ -0,0 +1,2 @@
+import { StackedBarChart, StackedBarChartProps } from "./StackedBarChart.js";
+export { StackedBarChart, StackedBarChartProps };

package/dist/charts/_internal/Bars.d.ts

@@ -0,0 +1,31 @@
+import { ChartValueFormat } from "./format.js";
+import { ChartSeries } from "./category.js";
+import { ReactNode, Ref } from "react";
+/** Çubuk ve bileşik grafiklerin serisi. */
+export interface BarSeries extends ChartSeries {
+  /** `bar` (varsayılan) ya da `line` (yalnız bileşik grafikte). */
+  type?: "bar" | "line";
+  /** Çizgi serisinin ekseni; `right` ikinci (sağ) eksendir. Çubuklar her zaman soldadır. */
+  axis?: "left" | "right";
+}
+export interface BarsCommonProps {
+  /** Grafiğin erişilebilir adı (zorunlu). */
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  categories: readonly string[];
+  valueFormat?: ChartValueFormat;
+  /** Gösterge; varsayılan birden çok seri varsa görünür. */
+  showLegend?: boolean;
+  legendToggle?: boolean;
+  /** Çizim alanı yüksekliği (piksel); varsayılan 280 (yatay çubukta kategori sayısına göre büyür). */
+  height?: number;
+  /** Değer ekseni sınırları; verilmezse veriden. */
+  yMin?: number;
+  yMax?: number;
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}

package/dist/charts/_internal/Bars.js

@@ -0,0 +1,295 @@
+"use client";
+import { useFormatter } from "../../provider/UIProvider.js";
+import { bandIndexAt, bandScale, clamp, extentOf, isNum, linear, niceScale, stackSeries, textWidth } from "./math.js";
+import { AxisLine, BarMark, CategoryLabels, Guide, Marker, SeriesPath, ValueLabel, XLabels, XTicks, YTicks } from "./marks/marks.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+import { makeValueFormat, useValueFormat } from "./format.js";
+import { cartesianLayout, categoryHit, categoryNav, useCategoryModel } from "./category.js";
+import { ChartFrame } from "./frame/ChartFrame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/charts/_internal/Bars.tsx
+const BAR_GAP = 2;
+/** Çubuk, yığın çubuk ve bileşik grafiğin ortak gövdesi (dışa açılmaz). */
+function Bars(props) {
+	const { label, title, description, categories, series, valueFormat, rightValueFormat, mode, normalize = false, orientation = "vertical", showValues = false, showLegend, legendToggle = true, curve = "linear", yMin, yMax, tableToggle, isLoading, className, id, ref } = props;
+	const f = useFormatter();
+	const rightFmt = useValueFormat(rightValueFormat ?? valueFormat);
+	const horizontal = orientation === "horizontal" && !series.some((s) => s.type === "line");
+	const kindOf = (s) => series[s]?.type === "line" ? "line" : "bar";
+	const m = useCategoryModel({
+		categories,
+		series,
+		valueFormat,
+		kindOf,
+		formatOf: (s) => series[s]?.type === "line" && series[s]?.axis === "right" ? rightFmt : void 0
+	});
+	const n = categories.length;
+	const stacked = mode === "stacked";
+	const axisFmt = normalize ? makeValueFormat(f, { style: "percent" }) : m.fmt;
+	const bars = m.visible.filter((v) => v.series.type !== "line");
+	const lines = m.visible.filter((v) => v.series.type === "line");
+	const leftLines = lines.filter((v) => v.series.axis !== "right");
+	const rightLines = lines.filter((v) => v.series.axis === "right");
+	const stack = stacked ? stackSeries(bars.map((v) => v.series.data), normalize) : null;
+	const height = props.height ?? (horizontal ? Math.max(160, n * 36 * (stacked ? 1 : Math.max(1, bars.length) * .6) + 48) : 280);
+	const leftDomain = () => {
+		const vals = [];
+		if (stack) vals.push(0, normalize ? 1 : Math.max(0, ...stack.totals));
+		else for (const v of bars) for (const x of v.series.data) if (isNum(x)) vals.push(x);
+		for (const v of leftLines) for (const x of v.series.data) if (isNum(x)) vals.push(x);
+		let [lo, hi] = extentOf(vals);
+		if (bars.length) lo = Math.min(0, lo);
+		if (bars.length) hi = Math.max(0, hi);
+		return [yMin ?? lo, yMax ?? hi];
+	};
+	const rightDomain = () => {
+		const [lo, hi] = extentOf(rightLines.flatMap((v) => v.series.data));
+		return [Math.min(0, lo), hi];
+	};
+	const layout = (ctx) => cartesianLayout({
+		width: ctx.width,
+		height: ctx.height,
+		compact: ctx.compact,
+		categories,
+		domain: leftDomain(),
+		format: axisFmt,
+		right: rightLines.length ? {
+			domain: rightDomain(),
+			format: rightFmt
+		} : void 0,
+		inner: .3,
+		top: showValues ? 24 : 8
+	});
+	/** Yatay yerleşim: kategori adları solda, değer ekseni altta. */
+	const hLayout = (ctx) => {
+		const [lo, hi] = leftDomain();
+		const ns = niceScale(lo, hi, clamp(Math.round(ctx.width / 90), 2, 6));
+		const totals = stack ? stack.totals : bars.flatMap((v) => v.series.data.filter(isNum));
+		const maxValueW = Math.max(...totals.map((t) => textWidth(m.fmt(t))), 0);
+		const labelW = Math.min(Math.max(...categories.map((c) => textWidth(c)), 0) + 12, Math.round(ctx.width * .38));
+		const left = Math.ceil(labelW);
+		const right = showValues && !normalize ? Math.ceil(maxValueW) + 12 : 16;
+		const top = 4;
+		const bottom = 28;
+		const plotW = Math.max(0, ctx.width - left - right);
+		const plotH = Math.max(0, ctx.height - top - bottom);
+		return {
+			ns,
+			left,
+			right,
+			top,
+			bottom,
+			plotW,
+			plotH,
+			x: linear(ns.min, ns.max, left, left + plotW),
+			band: bandScale(n, top, top + plotH, .3),
+			maxChars: Math.max(4, Math.floor((left - 12) / 7.2))
+		};
+	};
+	const trunc = (text, max) => text.length > max ? `${text.slice(0, Math.max(1, max - 1)).trimEnd()}…` : text;
+	const valueAt = (k, i) => {
+		const v = stack ? stack.upper[k]?.[i] ?? null : bars[k]?.series.data[i] ?? null;
+		return isNum(v) ? v : null;
+	};
+	const data = (ctx) => {
+		if (horizontal) {
+			const h = hLayout(ctx);
+			return categories.map((c, i) => {
+				const xs = bars.map((_, k) => valueAt(k, i)).filter(isNum);
+				return {
+					id: `c${i}`,
+					x: h.x(xs.length ? Math.max(...xs, 0) : 0),
+					y: h.band.center(i),
+					title: c,
+					rows: m.rowsAt(i),
+					announce: m.announceAt(i)
+				};
+			});
+		}
+		const lay = layout(ctx);
+		return categories.map((c, i) => {
+			const ys = [
+				...bars.map((_, k) => valueAt(k, i)).filter(isNum).map((v) => lay.y(v)),
+				...leftLines.map((v) => v.series.data[i]).filter(isNum).map((v) => lay.y(v)),
+				...rightLines.map((v) => v.series.data[i]).filter(isNum).map((v) => (lay.yRight ?? lay.y)(v))
+			];
+			return {
+				id: `c${i}`,
+				x: lay.band.center(i),
+				y: ys.length ? Math.min(...ys) : lay.top + lay.plotH,
+				title: c,
+				rows: m.rowsAt(i),
+				announce: m.announceAt(i)
+			};
+		});
+	};
+	const renderHorizontal = (ctx) => {
+		const h = hLayout(ctx);
+		const activeI = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+		const zero = h.x(Math.max(h.ns.min, 0));
+		const slot = stacked ? h.band.width : h.band.width / Math.max(1, bars.length);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(XTicks, {
+				ticks: h.ns.ticks,
+				x: h.x,
+				top: h.top,
+				bottom: h.top + h.plotH,
+				format: axisFmt
+			}),
+			/* @__PURE__ */ jsx(AxisLine, {
+				x1: zero,
+				y1: h.top,
+				x2: zero,
+				y2: h.top + h.plotH
+			}),
+			/* @__PURE__ */ jsx(CategoryLabels, {
+				x: h.left - 8,
+				labels: categories.map((c, i) => ({
+					text: trunc(c, h.maxChars),
+					y: h.band.center(i)
+				}))
+			}),
+			categories.map((c, i) => bars.map((v, k) => {
+				const val = stack ? stack.upper[k]?.[i] ?? null : v.series.data[i] ?? null;
+				if (!isNum(val)) return null;
+				const lo = stack ? stack.lower[k]?.[i] ?? 0 : 0;
+				const x1 = h.x(Math.min(lo, val));
+				const x2 = h.x(Math.max(lo, val));
+				const y = h.band.start(i) + (stacked ? 0 : k * slot);
+				return /* @__PURE__ */ jsx(BarMark, {
+					s: v.c,
+					x: x1,
+					y: y + (stacked ? 0 : BAR_GAP / 2),
+					width: x2 - x1,
+					height: Math.max(1, slot - (stacked ? 0 : BAR_GAP)),
+					dim: activeI >= 0 && i !== activeI
+				}, `${c}-${v.series.id}`);
+			})),
+			showValues && !normalize ? categories.map((c, i) => bars.map((v, k) => {
+				const val = stack ? stack.totals[i] ?? 0 : v.series.data[i];
+				if (!isNum(val) || stack && k !== bars.length - 1) return null;
+				const end = h.x(val);
+				return /* @__PURE__ */ jsx(ValueLabel, {
+					x: end + 6,
+					y: h.band.start(i) + (stacked ? 0 : k * slot) + (stacked ? h.band.width : slot) / 2,
+					anchor: "start",
+					text: m.valueText(v.s, val)
+				}, `${c}-${v.series.id}-l`);
+			})) : null
+		] });
+	};
+	const renderVertical = (ctx) => {
+		const lay = layout(ctx);
+		const activeI = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+		const base = lay.top + lay.plotH;
+		const zeroY = lay.y(clamp(0, lay.ticks[0] ?? 0, lay.ticks[lay.ticks.length - 1] ?? 0));
+		const slot = stacked ? lay.band.width : lay.band.width / Math.max(1, bars.length);
+		const pointsOf = (data, yFn) => data.map((v, i) => isNum(v) ? {
+			x: lay.band.center(i),
+			y: yFn(v)
+		} : null);
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(YTicks, {
+				ticks: lay.ticks,
+				y: lay.y,
+				left: lay.left,
+				right: lay.left + lay.plotW,
+				format: axisFmt
+			}),
+			lay.rightTicks && lay.yRight ? /* @__PURE__ */ jsx(YTicks, {
+				ticks: lay.rightTicks,
+				y: lay.yRight,
+				left: lay.left,
+				right: lay.left + lay.plotW,
+				format: rightFmt,
+				side: "right",
+				grid: false
+			}) : null,
+			/* @__PURE__ */ jsx(AxisLine, {
+				x1: lay.left,
+				y1: zeroY,
+				x2: lay.left + lay.plotW,
+				y2: zeroY
+			}),
+			/* @__PURE__ */ jsx(XLabels, {
+				labels: lay.xLabels,
+				y: base + 8
+			}),
+			categories.map((c, i) => bars.map((v, k) => {
+				const val = stack ? stack.upper[k]?.[i] ?? null : v.series.data[i] ?? null;
+				if (!isNum(val)) return null;
+				const lo = stack ? stack.lower[k]?.[i] ?? 0 : 0;
+				const y1 = lay.y(Math.max(lo, val));
+				const y2 = lay.y(Math.min(lo, val));
+				return /* @__PURE__ */ jsx(BarMark, {
+					s: v.c,
+					x: lay.band.start(i) + (stacked ? 0 : k * slot) + (stacked ? 0 : BAR_GAP / 2),
+					y: y1,
+					width: Math.max(1, slot - (stacked ? 0 : BAR_GAP)),
+					height: Math.max(1, y2 - y1),
+					dim: activeI >= 0 && i !== activeI
+				}, `${c}-${v.series.id}`);
+			})),
+			showValues && !normalize && slot >= 22 ? categories.map((c, i) => bars.map((v, k) => {
+				if (stack && k !== bars.length - 1) return null;
+				const val = stack ? stack.totals[i] ?? 0 : v.series.data[i];
+				if (!isNum(val)) return null;
+				const top = lay.y(Math.max(0, val));
+				return /* @__PURE__ */ jsx(ValueLabel, {
+					x: lay.band.start(i) + (stacked ? lay.band.width / 2 : k * slot + slot / 2),
+					y: top - 8,
+					text: m.valueText(v.s, val)
+				}, `${c}-${v.series.id}-l`);
+			})) : null,
+			activeI >= 0 && lines.length ? /* @__PURE__ */ jsx(Guide, {
+				x1: lay.band.center(activeI),
+				y1: lay.top,
+				x2: lay.band.center(activeI),
+				y2: base
+			}) : null,
+			lines.map((v) => {
+				const yFn = v.series.axis === "right" && lay.yRight ? lay.yRight : lay.y;
+				const pts = pointsOf(v.series.data, yFn);
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(SeriesPath, {
+					points: pts,
+					s: v.c,
+					curve
+				}), pts.map((p, i) => p ? /* @__PURE__ */ jsx(Marker, {
+					s: v.c,
+					cx: p.x,
+					cy: p.y,
+					r: i === activeI ? 5 : categories.length <= 24 ? 3 : 0
+				}, `${v.series.id}-${i}`) : null)] }, v.series.id);
+			})
+		] });
+	};
+	const legend = showLegend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, {
+		items: m.legendItems,
+		onToggle: legendToggle ? m.toggle : void 0
+	}) : void 0;
+	const hHit = (x, y, ctx) => {
+		const h = hLayout(ctx);
+		if (n === 0 || x < 0 || x > ctx.width || y < h.top || y > h.top + h.plotH) return null;
+		return `c${bandIndexAt(y, n, h.top, h.top + h.plotH)}`;
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className,
+		label,
+		title,
+		description,
+		summary: m.summary,
+		height,
+		data,
+		nav: categoryNav(n),
+		hit: (x, y, ctx) => horizontal ? hHit(x, y, ctx) : categoryHit(layout(ctx), n)(x, y),
+		legend,
+		table: m.table,
+		tableToggle,
+		isEmpty: n === 0 || series.length === 0,
+		isLoading,
+		children: horizontal ? renderHorizontal : renderVertical
+	});
+}
+export { Bars };

package/dist/charts/_internal/LineArea.d.ts

@@ -0,0 +1,32 @@
+import { ChartValueFormat } from "./format.js";
+import { ChartSeries } from "./category.js";
+import { Curve } from "./shapes.js";
+import { ReactNode, Ref } from "react";
+/** Çizgi ve alan grafiğinin ortak özellikleri. */
+export interface LineAreaCommonProps {
+  /** Grafiğin erişilebilir adı (zorunlu). */
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Yatay eksendeki kategori adları ("Ocak", "Şubat"). */
+  categories: readonly string[];
+  series: readonly ChartSeries[];
+  valueFormat?: ChartValueFormat;
+  /** Çizgi biçimi: `linear` (varsayılan), `monotone` (yumuşak, aşım yapmaz), `step` (basamak). */
+  curve?: Curve;
+  /** Gösterge; varsayılan birden çok seri varsa görünür. */
+  showLegend?: boolean;
+  /** Göstergeden seri gizleme/gösterme düğmeleri; varsayılan açık. */
+  legendToggle?: boolean;
+  /** Grafik yüksekliği (piksel); varsayılan 280. */
+  height?: number;
+  /** Değer ekseninin alt ve üst sınırı; verilmezse veriden. */
+  yMin?: number;
+  yMax?: number;
+  /** Grafik/Tablo görünüm düğmesi. */
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}

package/dist/charts/_internal/LineArea.js

@@ -0,0 +1,150 @@
+"use client";
+import { useFormatter } from "../../provider/UIProvider.js";
+import { extentOf, isNum, stackSeries } from "./math.js";
+import { AxisLine, Guide, Marker, SeriesArea, SeriesPath, XLabels, YTicks } from "./marks/marks.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+import { makeValueFormat } from "./format.js";
+import { cartesianLayout, categoryHit, categoryNav, useCategoryModel } from "./category.js";
+import { ChartFrame } from "./frame/ChartFrame.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/charts/_internal/LineArea.tsx
+/** Çizgi ve alan grafiğinin ortak gövdesi (dışa açılmaz). */
+function LineArea(props) {
+	const { label, title, description, categories, series, valueFormat, curve = "linear", showLegend, legendToggle = true, height = 280, yMin, yMax, area, normalize = false, showMarkers = categories.length <= 24, tableToggle, isLoading, className, id, ref } = props;
+	const f = useFormatter();
+	const m = useCategoryModel({
+		categories,
+		series,
+		valueFormat,
+		kindOf: () => area ? "area" : "line"
+	});
+	const n = categories.length;
+	const stacked = area === "stacked";
+	const axisFmt = normalize ? makeValueFormat(f, { style: "percent" }) : m.fmt;
+	const visibleData = m.visible.map((v) => v.series.data);
+	const stack = stacked ? stackSeries(visibleData, normalize) : null;
+	const domain = () => {
+		const [lo, hi] = stack ? [0, normalize ? 1 : Math.max(0, ...stack.totals)] : extentOf(visibleData.flat());
+		const zeroBase = area !== false || lo >= 0 && lo <= hi * .6;
+		return [yMin ?? (zeroBase ? Math.min(0, lo) : lo), yMax ?? hi];
+	};
+	const layout = (ctx) => cartesianLayout({
+		width: ctx.width,
+		height: ctx.height,
+		compact: ctx.compact,
+		categories,
+		domain: domain(),
+		format: axisFmt
+	});
+	const topAt = (lay, i) => {
+		const ys = m.visible.map((v, k) => {
+			const val = stack ? stack.upper[k]?.[i] ?? null : v.series.data[i] ?? null;
+			return isNum(val) ? lay.y(val) : null;
+		}).filter(isNum);
+		return ys.length ? Math.min(...ys) : lay.top + lay.plotH;
+	};
+	const data = (ctx) => {
+		const lay = layout(ctx);
+		return categories.map((c, i) => ({
+			id: `c${i}`,
+			x: lay.band.center(i),
+			y: topAt(lay, i),
+			title: c,
+			rows: m.rowsAt(i),
+			announce: m.announceAt(i)
+		}));
+	};
+	const render = (ctx) => {
+		const lay = layout(ctx);
+		const activeI = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+		const baseline = lay.y(Math.max(0, lay.ticks[0] ?? 0));
+		const base = lay.top + lay.plotH;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx(YTicks, {
+				ticks: lay.ticks,
+				y: lay.y,
+				left: lay.left,
+				right: lay.left + lay.plotW,
+				format: axisFmt
+			}),
+			/* @__PURE__ */ jsx(AxisLine, {
+				x1: lay.left,
+				y1: base,
+				x2: lay.left + lay.plotW,
+				y2: base
+			}),
+			/* @__PURE__ */ jsx(XLabels, {
+				labels: lay.xLabels,
+				y: base + 8
+			}),
+			activeI >= 0 ? /* @__PURE__ */ jsx(Guide, {
+				x1: lay.band.center(activeI),
+				y1: lay.top,
+				x2: lay.band.center(activeI),
+				y2: base
+			}) : null,
+			m.visible.map((v, k) => {
+				const pts = v.series.data.map((val, i) => {
+					const raw = stack ? stack.upper[k]?.[i] ?? null : val;
+					return isNum(raw) ? {
+						x: lay.band.center(i),
+						y: lay.y(raw)
+					} : null;
+				});
+				const bottom = stack ? v.series.data.map((_, i) => {
+					const lo = stack.lower[k]?.[i] ?? null;
+					return isNum(lo) ? {
+						x: lay.band.center(i),
+						y: lay.y(lo)
+					} : null;
+				}) : baseline;
+				return /* @__PURE__ */ jsxs("g", { children: [area ? /* @__PURE__ */ jsx(SeriesArea, {
+					top: pts,
+					bottom,
+					s: v.c,
+					curve
+				}) : null, /* @__PURE__ */ jsx(SeriesPath, {
+					points: pts,
+					s: v.c,
+					curve
+				})] }, v.series.id);
+			}),
+			m.visible.map((v, k) => v.series.data.map((val, i) => {
+				const raw = stack ? stack.upper[k]?.[i] ?? null : val;
+				if (!isNum(raw)) return null;
+				const isActive = i === activeI;
+				if (!isActive && !(showMarkers && !area)) return null;
+				return /* @__PURE__ */ jsx(Marker, {
+					s: v.c,
+					cx: lay.band.center(i),
+					cy: lay.y(raw),
+					r: isActive ? 5 : 3
+				}, `${v.series.id}-${i}`);
+			}))
+		] });
+	};
+	const legend = showLegend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, {
+		items: m.legendItems,
+		onToggle: legendToggle ? m.toggle : void 0
+	}) : void 0;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className,
+		label,
+		title,
+		description,
+		summary: m.summary,
+		height,
+		data,
+		nav: categoryNav(n),
+		hit: (x, y, ctx) => categoryHit(layout(ctx), n)(x, y),
+		legend,
+		table: m.table,
+		tableToggle,
+		isEmpty: n === 0 || series.length === 0,
+		isLoading,
+		children: render
+	});
+}
+export { LineArea };

package/dist/charts/_internal/category.d.ts

@@ -0,0 +1,19 @@
+import "../../index.js";
+import "../ChartLegend/ChartLegend.js";
+import "../ChartTooltip/ChartTooltip.js";
+import "./frame/ChartFrame.js";
+/** Kategorik grafiklerin (çizgi, alan, çubuk, bileşik) ortak seri tanımı. */
+export interface ChartSeries {
+  /** Benzersiz kimlik. */
+  id: string;
+  /** Gösterge, ipucu ve tablodaki ad. */
+  label: string;
+  /** Kategori başına değer; `null` eksik veridir (çizgi kesilir, çubuk çizilmez). */
+  data: readonly (number | null)[];
+  /**
+   * Anlam rengi: verilirse serinin rengi sıradan değil tondan gelir (`success` yeşil, `warning`
+   * kehribar, `danger` kırmızı, `accent` mavi, `neutral` gri). Aynı tonu paylaşan seriler yalnız
+   * adla ayrılır; renk tek başına anlam taşımaz, ad ve değer her zaman yazılıdır.
+   */
+  tone?: "accent" | "success" | "warning" | "danger" | "neutral";
+}