@stisocial/ui 0.2.0 → 0.3.0

package/dist/charts/RadarChart/RadarChart.js

@@ -0,0 +1,146 @@
+"use client";
+import { isNum, niceScale, r2, textWidth } from "../_internal/math.js";
+import { polar } from "../_internal/shapes.js";
+import marks_module_default from "../_internal/marks/marks.module.js";
+import { AreaMark, LineMark, Marker } from "../_internal/marks/marks.js";
+import { ChartLegend } from "../ChartLegend/ChartLegend.js";
+import { categoryNav, useCategoryModel } from "../_internal/category.js";
+import { ChartFrame } from "../_internal/frame/ChartFrame.js";
+import RadarChart_module_default from "./RadarChart.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/RadarChart/RadarChart.tsx
+/**
+* Radar (örümcek) grafiği: birkaç ölçüde profil karşılaştırması (kanal performans puanları,
+* marka algısı). Her seri bir çokgendir; eksenler aynı ölçektedir (sıfırdan). Oklar eksenler
+* arasında gezer, ipucu o eksende bütün serileri yazar; gösterge seri gizler; tablo vardır.
+*/
+function RadarChart({ label, title, description, categories, series, valueFormat, max, showLegend = true, tableToggle = false, isLoading = false, height = 320, className, id, ref }) {
+	const m = useCategoryModel({
+		categories,
+		series,
+		valueFormat,
+		kindOf: () => "area"
+	});
+	const n = categories.length;
+	const hi = max ?? niceScale(0, Math.max(0, ...series.flatMap((s) => s.data.filter(isNum))), 4).max;
+	const rings = niceScale(0, hi, 4).ticks.filter((v) => v > 0 && v <= hi);
+	const angle = (i) => i / Math.max(1, n) * Math.PI * 2;
+	const geom = (ctx) => {
+		const labelPad = ctx.compact ? 40 : Math.min(90, Math.max(...categories.map((c) => textWidth(c)), 0) + 12);
+		const r = Math.max(30, Math.min(ctx.width / 2 - labelPad, ctx.height / 2 - 24));
+		return {
+			cx: ctx.width / 2,
+			cy: ctx.height / 2,
+			r
+		};
+	};
+	const at = (g, i, v) => polar(g.cx, g.cy, Math.max(0, v) / (hi || 1) * g.r, angle(i));
+	const data = (ctx) => {
+		const g = geom(ctx);
+		return categories.map((c, i) => {
+			const p = polar(g.cx, g.cy, g.r, angle(i));
+			return {
+				id: `c${i}`,
+				x: p.x,
+				y: p.y,
+				title: c,
+				rows: m.rowsAt(i),
+				announce: m.announceAt(i)
+			};
+		});
+	};
+	const hit = (x, y, ctx) => {
+		const g = geom(ctx);
+		if (Math.hypot(x - g.cx, y - g.cy) > g.r + 40 || n === 0) return null;
+		let a = Math.atan2(x - g.cx, -(y - g.cy));
+		if (a < 0) a += Math.PI * 2;
+		return `c${Math.round(a / (Math.PI * 2 / n)) % n}`;
+	};
+	const legend = showLegend && series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, {
+		items: m.legendItems,
+		onToggle: m.toggle
+	}) : null;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className: [RadarChart_module_default.root, className].filter(Boolean).join(" "),
+		label,
+		title,
+		description,
+		summary: m.summary,
+		height,
+		data,
+		nav: categoryNav(n),
+		hit,
+		legend,
+		table: m.table,
+		tableToggle,
+		isEmpty: n < 3 || series.length === 0,
+		isLoading,
+		children: (ctx) => {
+			const g = geom(ctx);
+			const active = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+			const ring = (v) => `${categories.map((_, i) => {
+				const p = at(g, i, v);
+				return `${i === 0 ? "M" : "L"}${r2(p.x)} ${r2(p.y)}`;
+			}).join("")}Z`;
+			return /* @__PURE__ */ jsxs("g", { children: [
+				rings.map((v) => /* @__PURE__ */ jsx("path", {
+					className: marks_module_default.grid,
+					d: ring(v)
+				}, v)),
+				categories.map((c, i) => {
+					const end = polar(g.cx, g.cy, g.r, angle(i));
+					const lp = polar(g.cx, g.cy, g.r + 12, angle(i));
+					const s = Math.sin(angle(i));
+					const anchor = Math.abs(s) < .2 ? "middle" : s > 0 ? "start" : "end";
+					const cos = Math.cos(angle(i));
+					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+						className: i === active ? marks_module_default.guide : marks_module_default.grid,
+						x1: r2(g.cx),
+						y1: r2(g.cy),
+						x2: r2(end.x),
+						y2: r2(end.y)
+					}), /* @__PURE__ */ jsx("text", {
+						className: RadarChart_module_default.axisLabel,
+						"data-anchor": anchor,
+						"data-active": i === active ? "" : void 0,
+						x: r2(lp.x),
+						y: r2(lp.y + (cos > .5 ? -4 : cos < -.5 ? 6 : 0)),
+						children: c
+					})] }, c);
+				}),
+				rings.map((v) => /* @__PURE__ */ jsx("text", {
+					className: RadarChart_module_default.ringLabel,
+					x: r2(g.cx + 4),
+					y: r2(at(g, 0, v).y),
+					children: m.fmt(v)
+				}, `t${v}`)),
+				m.visible.map((v) => {
+					const pts = categories.map((_, i) => {
+						const val = v.series.data[i];
+						return at(g, i, isNum(val) ? val : 0);
+					});
+					const d = `${pts.map((p, i) => `${i === 0 ? "M" : "L"}${r2(p.x)} ${r2(p.y)}`).join("")}Z`;
+					return /* @__PURE__ */ jsxs("g", { children: [
+						/* @__PURE__ */ jsx(AreaMark, {
+							d,
+							s: v.c
+						}),
+						/* @__PURE__ */ jsx(LineMark, {
+							d,
+							s: v.c
+						}),
+						active >= 0 && isNum(v.series.data[active]) ? /* @__PURE__ */ jsx(Marker, {
+							s: v.c,
+							cx: pts[active]?.x ?? 0,
+							cy: pts[active]?.y ?? 0,
+							r: 4.5
+						}) : null
+					] }, v.series.id);
+				})
+			] });
+		}
+	});
+}
+export { RadarChart };

package/dist/charts/RadarChart/RadarChart.module.js

@@ -0,0 +1,8 @@
+import './RadarChart.css';
+// src/charts/RadarChart/RadarChart.module.css
+var RadarChart_module_default = {
+	"root": "sti-RadarChart-root-60b46",
+	"axisLabel": "sti-RadarChart-axisLabel-de821",
+	"ringLabel": "sti-RadarChart-ringLabel-bc265"
+};
+export { RadarChart_module_default as default };

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

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

package/dist/charts/SankeyChart/SankeyChart.css

@@ -0,0 +1,45 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SankeyChart-root-3f628 {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sti-SankeyChart-link-63fd8.sti-SankeyChart-link-63fd8[data-kind] {
+    fill: color-mix(in srgb, var(--sti-chart-c) 32%, transparent);
+  }
+
+  .sti-SankeyChart-link-63fd8.sti-SankeyChart-link-63fd8[data-active] {
+    fill: color-mix(in srgb, var(--sti-chart-c) 60%, transparent);
+  }
+
+  .sti-SankeyChart-nodeLabel-5cd57, .sti-SankeyChart-nodeValue-ef4e4 {
+    font-family: var(--sti-font-text);
+    dominant-baseline: central;
+    paint-order: stroke;
+    stroke: var(--sti-chart-bg, var(--sti-bg-surface));
+    stroke-width: 3px;
+    stroke-linejoin: round;
+    font-size: 12px;
+  }
+
+  .sti-SankeyChart-nodeLabel-5cd57 {
+    fill: var(--sti-fg);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-SankeyChart-nodeValue-ef4e4 {
+    fill: var(--sti-fg-muted);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    font-size: 11px;
+  }
+
+  :is(.sti-SankeyChart-nodeLabel-5cd57, .sti-SankeyChart-nodeValue-ef4e4)[data-anchor="end"] {
+    text-anchor: end;
+  }
+
+  :is(.sti-SankeyChart-nodeLabel-5cd57, .sti-SankeyChart-nodeValue-ef4e4)[data-anchor="start"] {
+    text-anchor: start;
+  }
+}

package/dist/charts/SankeyChart/SankeyChart.d.ts

@@ -0,0 +1,34 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ChartTone } from "../_internal/items.js";
+import { ReactNode, Ref } from "react";
+export interface SankeyNode {
+  id: string;
+  label: string;
+  tone?: ChartTone;
+}
+export interface SankeyLink {
+  source: string;
+  target: string;
+  value: number;
+}
+export interface SankeyChartProps {
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  nodes: readonly SankeyNode[];
+  /** Akışlar (kaynak → hedef, değer). Döngü olmamalıdır. */
+  links: readonly SankeyLink[];
+  valueFormat?: ChartValueFormat;
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  height?: number;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Sankey grafiği: kaynaktan hedefe akış miktarları (trafik kanalı → açılış sayfası → dönüşüm,
+ * bütçe → kanal → kampanya). Bant kalınlığı değerle orantılıdır, rengi kaynağın rengidir.
+ * Oklar akışlar arasında gezer; ipucu ve tablo "kaynak → hedef: değer" yazar.
+ */
+export declare function SankeyChart({ label, title, description, nodes, links, valueFormat, tableToggle, isLoading, height, className, id, ref }: SankeyChartProps): import("react").JSX.Element;

package/dist/charts/SankeyChart/SankeyChart.js

@@ -0,0 +1,152 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { r2 } from "../_internal/math.js";
+import marks_module_default from "../_internal/marks/marks.module.js";
+import { useValueFormat } from "../_internal/format.js";
+import { ChartFrame } from "../_internal/frame/ChartFrame.js";
+import { linearNav, toneIndex } from "../_internal/items.js";
+import SankeyChart_module_default from "./SankeyChart.module.js";
+import { linkPath, linkTopAt, sankeyLayout } from "./sankeyLayout.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/SankeyChart/SankeyChart.tsx
+const NODE_W = 12;
+const GAP = 14;
+/**
+* Sankey grafiği: kaynaktan hedefe akış miktarları (trafik kanalı → açılış sayfası → dönüşüm,
+* bütçe → kanal → kampanya). Bant kalınlığı değerle orantılıdır, rengi kaynağın rengidir.
+* Oklar akışlar arasında gezer; ipucu ve tablo "kaynak → hedef: değer" yazar.
+*/
+function SankeyChart({ label, title, description, nodes, links, valueFormat, tableToggle = false, isLoading = false, height = 320, className, id, ref }) {
+	const t = useMessages();
+	const fmt = useValueFormat(valueFormat);
+	const color = new Map(nodes.map((n, i) => [n.id, toneIndex(n.tone, i)]));
+	const layout = (ctx) => {
+		const labelPad = ctx.compact ? 70 : 130;
+		return {
+			...sankeyLayout(nodes, links, {
+				width: Math.max(80, ctx.width - labelPad * 2),
+				height: ctx.height - 4,
+				nodeWidth: NODE_W,
+				gap: GAP
+			}),
+			dx: labelPad,
+			dy: 2
+		};
+	};
+	const flows = sankeyLayout(nodes, links, {
+		width: 100,
+		height: 100,
+		nodeWidth: 1,
+		gap: 0
+	}).links;
+	const flowName = (k) => {
+		const f = flows[k];
+		return f ? template(t.chartSankeyFlow, {
+			source: f.source.label,
+			target: f.target.label
+		}) : "";
+	};
+	const data = (ctx) => {
+		const l = layout(ctx);
+		return l.links.map((f, k) => ({
+			id: `i${k}`,
+			x: l.dx + (f.source.x + NODE_W + f.target.x) / 2,
+			y: l.dy + (f.y0 + f.y1) / 2 + f.w / 2,
+			title: `${f.source.label} → ${f.target.label}`,
+			rows: [{
+				label: t.chartValue,
+				value: fmt(f.value),
+				series: color.get(f.source.id)
+			}],
+			announce: `${flowName(k)}: ${fmt(f.value)}`
+		}));
+	};
+	const hit = (x, y, ctx) => {
+		const l = layout(ctx);
+		const px = x - l.dx;
+		const py = y - l.dy;
+		for (let k = l.links.length - 1; k >= 0; k--) {
+			const f = l.links[k];
+			if (!f) continue;
+			const top = linkTopAt(f, px, NODE_W);
+			if (top !== null && py >= top - 2 && py <= top + Math.max(f.w, 4) + 2) return `i${k}`;
+		}
+		return null;
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className: [SankeyChart_module_default.root, className].filter(Boolean).join(" "),
+		label,
+		title,
+		description,
+		summary: template(t.chartSummaryPoints, { count: flows.length }),
+		height,
+		data,
+		nav: linearNav(flows.length),
+		hit,
+		table: {
+			rowHeaderLabel: t.chartSankeyFlowHeader,
+			columns: [{
+				id: "value",
+				label: t.chartValue
+			}],
+			rows: flows.map((f, k) => ({
+				id: `i${k}`,
+				header: `${f.source.label} → ${f.target.label}`,
+				cells: [fmt(f.value)]
+			}))
+		},
+		tableToggle,
+		isEmpty: flows.length === 0,
+		isLoading,
+		children: (ctx) => {
+			const l = layout(ctx);
+			const active = ctx.activeId ? Number(ctx.activeId.slice(1)) : -1;
+			const activeFlow = l.links[active];
+			return /* @__PURE__ */ jsxs("g", {
+				transform: `translate(${l.dx} ${l.dy})`,
+				children: [l.links.map((f, k) => /* @__PURE__ */ jsx("path", {
+					className: `${marks_module_default.mark} ${SankeyChart_module_default.link}`,
+					"data-kind": "area",
+					"data-s": color.get(f.source.id),
+					"data-active": k === active ? "" : void 0,
+					"data-dim": active >= 0 && k !== active ? "" : void 0,
+					d: linkPath(f, NODE_W)
+				}, `${f.source.id}-${f.target.id}`)), l.nodes.map((n) => {
+					const last = n.column === l.columns - 1;
+					const lit = !activeFlow || activeFlow.source.id === n.id || activeFlow.target.id === n.id;
+					return /* @__PURE__ */ jsxs("g", { children: [
+						/* @__PURE__ */ jsx("rect", {
+							className: marks_module_default.mark,
+							"data-kind": "bar",
+							"data-s": color.get(n.id),
+							"data-dim": lit ? void 0 : "",
+							x: r2(n.x),
+							y: r2(n.y),
+							width: NODE_W,
+							height: r2(Math.max(1, n.h)),
+							rx: 2
+						}),
+						/* @__PURE__ */ jsx("text", {
+							className: SankeyChart_module_default.nodeLabel,
+							"data-anchor": last ? "start" : "end",
+							x: r2(last ? n.x + NODE_W + 8 : n.x - 8),
+							y: r2(n.y + n.h / 2 - 7),
+							children: n.label
+						}),
+						/* @__PURE__ */ jsx("text", {
+							className: SankeyChart_module_default.nodeValue,
+							"data-anchor": last ? "start" : "end",
+							x: r2(last ? n.x + NODE_W + 8 : n.x - 8),
+							y: r2(n.y + n.h / 2 + 8),
+							children: fmt(n.value)
+						})
+					] }, n.id);
+				})]
+			});
+		}
+	});
+}
+export { SankeyChart };

package/dist/charts/SankeyChart/SankeyChart.module.js

@@ -0,0 +1,9 @@
+import './SankeyChart.css';
+// src/charts/SankeyChart/SankeyChart.module.css
+var SankeyChart_module_default = {
+	"root": "sti-SankeyChart-root-3f628",
+	"link": "sti-SankeyChart-link-63fd8",
+	"nodeLabel": "sti-SankeyChart-nodeLabel-5cd57",
+	"nodeValue": "sti-SankeyChart-nodeValue-ef4e4"
+};
+export { SankeyChart_module_default as default };

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

@@ -0,0 +1,3 @@
+import { SankeyChart, SankeyChartProps, SankeyLink, SankeyNode } from "./SankeyChart.js";
+import { PlacedLink, PlacedNode, SankeyLinkInput, SankeyNodeInput, linkPath, linkTopAt, sankeyLayout } from "./sankeyLayout.js";
+export { PlacedLink, PlacedNode, SankeyChart, SankeyChartProps, SankeyLink, SankeyLinkInput, SankeyNode, SankeyNodeInput, linkPath, linkTopAt, sankeyLayout };

package/dist/charts/SankeyChart/sankeyLayout.d.ts

@@ -0,0 +1,43 @@
+export interface SankeyNodeInput {
+  id: string;
+  label: string;
+}
+export interface SankeyLinkInput {
+  source: string;
+  target: string;
+  value: number;
+}
+export interface PlacedNode {
+  id: string;
+  label: string;
+  index: number;
+  column: number;
+  value: number;
+  x: number;
+  y: number;
+  h: number;
+}
+export interface PlacedLink {
+  index: number;
+  source: PlacedNode;
+  target: PlacedNode;
+  value: number;
+  /** Bant kalınlığı ve uçların üst kenarı. */
+  w: number;
+  y0: number;
+  y1: number;
+}
+export declare function sankeyLayout(nodes: readonly SankeyNodeInput[], links: readonly SankeyLinkInput[], size: {
+  width: number;
+  height: number;
+  nodeWidth: number;
+  gap: number;
+}): {
+  nodes: PlacedNode[];
+  links: PlacedLink[];
+  columns: number;
+};
+/** Bandın yolu: kaynak sağ kenarından hedef sol kenarına yumuşak eğri. */
+export declare function linkPath(l: PlacedLink, nodeWidth: number): string;
+/** Bandın `x`'teki üst kenarı (kübik eğrinin yaklaşığı). */
+export declare function linkTopAt(l: PlacedLink, x: number, nodeWidth: number): number | null;

package/dist/charts/SankeyChart/sankeyLayout.js

@@ -0,0 +1,106 @@
+// src/charts/SankeyChart/sankeyLayout.ts
+function sankeyLayout(nodes, links, size) {
+	const byId = new Map(nodes.map((n, i) => [n.id, i]));
+	const valid = links.filter((l) => l.value > 0 && byId.has(l.source) && byId.has(l.target) && l.source !== l.target);
+	const column = nodes.map(() => 0);
+	for (let pass = 0; pass < nodes.length; pass++) {
+		let changed = false;
+		for (const l of valid) {
+			const s = byId.get(l.source);
+			const t = byId.get(l.target);
+			if (column[t] <= column[s] && column[s] + 1 < nodes.length) {
+				column[t] = column[s] + 1;
+				changed = true;
+			}
+		}
+		if (!changed) break;
+	}
+	const columns = Math.max(0, ...column) + 1;
+	const inSum = nodes.map(() => 0);
+	const outSum = nodes.map(() => 0);
+	for (const l of valid) {
+		const s = byId.get(l.source);
+		const t = byId.get(l.target);
+		outSum[s] = (outSum[s] ?? 0) + l.value;
+		inSum[t] = (inSum[t] ?? 0) + l.value;
+	}
+	const value = nodes.map((_, i) => Math.max(inSum[i], outSum[i]));
+	const cols = Array.from({ length: columns }, (_, c) => nodes.map((_, i) => i).filter((i) => column[i] === c && value[i] > 0));
+	const ky = Math.min(...cols.map((ids) => {
+		const sum = ids.reduce((s, i) => s + value[i], 0);
+		return sum > 0 ? (size.height - size.gap * Math.max(0, ids.length - 1)) / sum : Infinity;
+	}));
+	const step = columns > 1 ? (size.width - size.nodeWidth) / (columns - 1) : 0;
+	const placed = nodes.map(() => void 0);
+	for (const ids of cols) {
+		const used = ids.reduce((s, i) => s + value[i] * ky, 0) + size.gap * Math.max(0, ids.length - 1);
+		let y = (size.height - used) / 2;
+		for (const i of ids) {
+			const h = value[i] * ky;
+			const n = nodes[i];
+			placed[i] = {
+				id: n.id,
+				label: n.label,
+				index: i,
+				column: column[i],
+				value: value[i],
+				x: column[i] * step,
+				y,
+				h
+			};
+			y += h + size.gap;
+		}
+	}
+	const outOff = nodes.map(() => 0);
+	const inOff = nodes.map(() => 0);
+	const order = valid.map((l, k) => ({
+		l,
+		k
+	})).filter(({ l }) => placed[byId.get(l.source)] && placed[byId.get(l.target)]);
+	const sortedOut = [...order].sort((a, b) => (placed[byId.get(a.l.target)]?.y ?? 0) - (placed[byId.get(b.l.target)]?.y ?? 0));
+	const y0 = [];
+	for (const { l, k } of sortedOut) {
+		const s = byId.get(l.source);
+		y0[k] = (placed[s]?.y ?? 0) + outOff[s];
+		outOff[s] = outOff[s] + l.value * ky;
+	}
+	const sortedIn = [...order].sort((a, b) => (placed[byId.get(a.l.source)]?.y ?? 0) - (placed[byId.get(b.l.source)]?.y ?? 0));
+	const y1 = [];
+	for (const { l, k } of sortedIn) {
+		const t = byId.get(l.target);
+		y1[k] = (placed[t]?.y ?? 0) + inOff[t];
+		inOff[t] = inOff[t] + l.value * ky;
+	}
+	const placedLinks = order.map(({ l, k }, index) => ({
+		index,
+		source: placed[byId.get(l.source)],
+		target: placed[byId.get(l.target)],
+		value: l.value,
+		w: l.value * ky,
+		y0: y0[k] ?? 0,
+		y1: y1[k] ?? 0
+	}));
+	return {
+		nodes: placed.filter((n) => n !== void 0),
+		links: placedLinks,
+		columns
+	};
+}
+/** Bandın yolu: kaynak sağ kenarından hedef sol kenarına yumuşak eğri. */
+function linkPath(l, nodeWidth) {
+	const x0 = l.source.x + nodeWidth;
+	const x1 = l.target.x;
+	const xm = (x0 + x1) / 2;
+	const r = (n) => Math.round(n * 100) / 100;
+	return `M${r(x0)} ${r(l.y0)}C${r(xm)} ${r(l.y0)} ${r(xm)} ${r(l.y1)} ${r(x1)} ${r(l.y1)}L${r(x1)} ${r(l.y1 + l.w)}C${r(xm)} ${r(l.y1 + l.w)} ${r(xm)} ${r(l.y0 + l.w)} ${r(x0)} ${r(l.y0 + l.w)}Z`;
+}
+/** Bandın `x`'teki üst kenarı (kübik eğrinin yaklaşığı). */
+function linkTopAt(l, x, nodeWidth) {
+	const x0 = l.source.x + nodeWidth;
+	const x1 = l.target.x;
+	if (x < x0 || x > x1 || x1 <= x0) return null;
+	const t = (x - x0) / (x1 - x0);
+	const ease = t * t * (3 - 2 * t);
+	return l.y0 + (l.y1 - l.y0) * ease;
+}
+export { linkPath, linkTopAt, sankeyLayout };

package/dist/charts/ScatterChart/ScatterChart.css

@@ -0,0 +1,20 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ScatterChart-root-67fc4 {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sti-ScatterChart-axisTitle-40bc7 {
+    fill: var(--sti-fg-muted);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    text-anchor: middle;
+  }
+
+  .sti-ScatterChart-bubble-b6841.sti-ScatterChart-bubble-b6841[data-kind] {
+    fill-opacity: .55;
+    stroke: var(--sti-chart-c);
+  }
+}

package/dist/charts/ScatterChart/ScatterChart.d.ts

@@ -0,0 +1,46 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ChartTone } from "../_internal/items.js";
+import { ReactNode, Ref } from "react";
+export interface ScatterPoint {
+  x: number;
+  y: number;
+  /** Kabarcık büyüklüğü (`bubble`'da). */
+  size?: number;
+  /** Noktanın adı ("Bahar kampanyası"): ipucu başlığı ve tablo satırı. */
+  label?: string;
+}
+export interface ScatterSeries {
+  id: string;
+  label: string;
+  points: readonly ScatterPoint[];
+  tone?: ChartTone;
+}
+export interface ScatterChartProps {
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  series: readonly ScatterSeries[];
+  /** Eksen adları (zorunlu): "Harcama", "Dönüşüm". */
+  xLabel: string;
+  yLabel: string;
+  /** Kabarcık büyüklüğünün adı (`bubble`'da). */
+  sizeLabel?: string;
+  xFormat?: ChartValueFormat;
+  yFormat?: ChartValueFormat;
+  sizeFormat?: ChartValueFormat;
+  /** Noktaların alanı `size` ile orantılı (kabarcık grafiği). */
+  bubble?: boolean;
+  showLegend?: boolean;
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  height?: number;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Saçılım (ve kabarcık) grafiği: iki sayısal değişkenin ilişkisi (harcama ile dönüşüm, süre ile
+ * puan). Seriler renk ve işaret biçimiyle ayrılır. Oklar noktalar arasında x sırasıyla gezer;
+ * ipucu ve tablo değerleri yazar.
+ */
+export declare function ScatterChart({ label, title, description, series, xLabel, yLabel, sizeLabel, xFormat, yFormat, sizeFormat, bubble, showLegend, tableToggle, isLoading, height, className, id, ref }: ScatterChartProps): import("react").JSX.Element;