@stisocial/ui 0.2.1 → 0.3.0

package/dist/charts/GeoChart/GeoChart.css

@@ -0,0 +1,208 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-GeoChart-root-d1b5e {
+    gap: var(--sti-space-3);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    margin: 0;
+    display: grid;
+    container: sti-geo / inline-size;
+  }
+
+  .sti-GeoChart-header-f568d {
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--sti-space-2) var(--sti-space-4);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-GeoChart-heading-735e4 {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-GeoChart-title-5f20c {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+  }
+
+  .sti-GeoChart-description-41f17 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-GeoChart-body-3f986 {
+    align-items: start;
+    gap: var(--sti-space-6);
+    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
+    display: grid;
+  }
+
+  @container sti-geo (width <= 44rem) {
+    .sti-GeoChart-body-3f986 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .sti-GeoChart-map-3b0a7 {
+    min-inline-size: 0;
+  }
+
+  .sti-GeoChart-top-ac23e {
+    gap: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-GeoChart-topTitle-35487 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-label);
+    margin: 0;
+  }
+
+  .sti-GeoChart-topList-dff24 {
+    gap: var(--sti-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-GeoChart-topItem-249ed {
+    align-items: center;
+    gap: 2px var(--sti-space-2);
+    font-size: var(--sti-font-size-sm);
+    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .sti-GeoChart-rank-63623 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+
+  .sti-GeoChart-topName-69817 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-GeoChart-topValue-a13b1 {
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-GeoChart-topBar-71ab5 {
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface-hover);
+    grid-column: 2 / -1;
+    block-size: 4px;
+    overflow: hidden;
+  }
+
+  .sti-GeoChart-topFill-12054 {
+    border-radius: inherit;
+    background: var(--sti-fill-accent);
+    block-size: 100%;
+    display: block;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="0"] {
+    inline-size: 0%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="5"] {
+    inline-size: 5%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="10"] {
+    inline-size: 10%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="15"] {
+    inline-size: 15%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="20"] {
+    inline-size: 20%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="25"] {
+    inline-size: 25%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="30"] {
+    inline-size: 30%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="35"] {
+    inline-size: 35%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="40"] {
+    inline-size: 40%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="45"] {
+    inline-size: 45%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="50"] {
+    inline-size: 50%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="55"] {
+    inline-size: 55%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="60"] {
+    inline-size: 60%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="65"] {
+    inline-size: 65%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="70"] {
+    inline-size: 70%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="75"] {
+    inline-size: 75%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="80"] {
+    inline-size: 80%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="85"] {
+    inline-size: 85%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="90"] {
+    inline-size: 90%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="95"] {
+    inline-size: 95%;
+  }
+
+  .sti-GeoChart-topFill-12054[data-pct="100"] {
+    inline-size: 100%;
+  }
+
+  @media (forced-colors: active) {
+    .sti-GeoChart-topFill-12054 {
+      background: highlight;
+    }
+  }
+}

package/dist/charts/GeoChart/GeoChart.d.ts

@@ -0,0 +1,25 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ReactNode, Ref } from "react";
+export interface GeoChartProps {
+  /** Grafiğin erişilebilir adı (zorunlu). */
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** İl başına değer, plaka koduyla: `{ "34": 1820, "06": 940 }`. */
+  values: Readonly<Record<string, number>>;
+  valueFormat?: ChartValueFormat;
+  /** Haritanın yanında en yüksek değerli N il (0 gizler). */
+  showTop?: number;
+  tableToggle?: boolean;
+  /** Harita boyu: en büyük genişlik 320 / 480 / 720 piksel. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Türkiye il haritası grafiği: il başına değer (müşteri, satış, başvuru) beş basamaklı tonla.
+ * Harita eşit kareli kartogramdır (`TurkeyMap`): küçük iller de görünür. Yanında en yüksek iller
+ * sıralı listedir; tablo görünümü bütün illeri değere göre sıralar. Ekran okuyucu tabloyu okur.
+ */
+export declare function GeoChart({ label, title, description, values, valueFormat, showTop, tableToggle, size, className, id, ref }: GeoChartProps): import("react").JSX.Element;

package/dist/charts/GeoChart/GeoChart.js

@@ -0,0 +1,120 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { TR_PROVINCES } from "../../components/ProvinceSelect/provinces.js";
+import { SegmentedControl, SegmentedControlItem } from "../../components/SegmentedControl/SegmentedControl.js";
+import { isNum } from "../_internal/math.js";
+import { useValueFormat } from "../_internal/format.js";
+import { ChartTable } from "../ChartTable/ChartTable.js";
+import { TurkeyMap } from "../../maps/TurkeyMap/TurkeyMap.js";
+import GeoChart_module_default from "./GeoChart.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+// src/charts/GeoChart/GeoChart.tsx
+/**
+* Türkiye il haritası grafiği: il başına değer (müşteri, satış, başvuru) beş basamaklı tonla.
+* Harita eşit kareli kartogramdır (`TurkeyMap`): küçük iller de görünür. Yanında en yüksek iller
+* sıralı listedir; tablo görünümü bütün illeri değere göre sıralar. Ekran okuyucu tabloyu okur.
+*/
+function GeoChart({ label, title, description, values, valueFormat, showTop = 5, tableToggle = false, size = "lg", className, id, ref }) {
+	const t = useMessages();
+	const fmt = useValueFormat(valueFormat);
+	const [view, setView] = useState("chart");
+	const topId = useId();
+	const ranked = TR_PROVINCES.filter((p) => isNum(values[p.code])).map((p) => ({
+		...p,
+		value: values[p.code]
+	})).sort((a, b) => b.value - a.value);
+	const top = ranked.slice(0, Math.max(0, showTop));
+	return /* @__PURE__ */ jsxs("figure", {
+		ref,
+		id,
+		className: [GeoChart_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		children: [title || description || tableToggle ? /* @__PURE__ */ jsxs("div", {
+			className: GeoChart_module_default.header,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: GeoChart_module_default.heading,
+				children: [title ? /* @__PURE__ */ jsx("figcaption", {
+					className: GeoChart_module_default.title,
+					children: title
+				}) : null, description ? /* @__PURE__ */ jsx("p", {
+					className: GeoChart_module_default.description,
+					children: description
+				}) : null]
+			}), tableToggle ? /* @__PURE__ */ jsxs(SegmentedControl, {
+				label: t.chartViewLabel,
+				size: "sm",
+				value: view,
+				onChange: (v) => setView(v === "table" ? "table" : "chart"),
+				children: [/* @__PURE__ */ jsx(SegmentedControlItem, {
+					value: "chart",
+					children: t.chartViewChart
+				}), /* @__PURE__ */ jsx(SegmentedControlItem, {
+					value: "table",
+					children: t.chartViewTable
+				})]
+			}) : null]
+		}) : null, view === "table" ? /* @__PURE__ */ jsx(ChartTable, {
+			caption: label,
+			size: "sm",
+			rowHeaderLabel: t.chartGeoProvince,
+			columns: [{
+				id: "value",
+				label: t.chartValue
+			}],
+			rows: ranked.map((p) => ({
+				id: p.code,
+				header: p.name,
+				cells: [fmt(p.value)]
+			}))
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: GeoChart_module_default.body,
+			children: [/* @__PURE__ */ jsx(TurkeyMap, {
+				label,
+				selectionMode: "none",
+				values,
+				formatValue: (v) => fmt(v),
+				size,
+				className: GeoChart_module_default.map
+			}), top.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: GeoChart_module_default.top,
+				children: [/* @__PURE__ */ jsx("h3", {
+					id: topId,
+					className: GeoChart_module_default.topTitle,
+					children: template(t.chartGeoTop, { count: top.length })
+				}), /* @__PURE__ */ jsx("ol", {
+					className: GeoChart_module_default.topList,
+					"aria-labelledby": topId,
+					children: top.map((p, i) => /* @__PURE__ */ jsxs("li", {
+						className: GeoChart_module_default.topItem,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: GeoChart_module_default.rank,
+								"aria-hidden": "true",
+								children: i + 1
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: GeoChart_module_default.topName,
+								children: p.name
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: GeoChart_module_default.topValue,
+								children: fmt(p.value)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: GeoChart_module_default.topBar,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("span", {
+									className: GeoChart_module_default.topFill,
+									"data-pct": Math.round(p.value / (top[0]?.value || 1) * 20) * 5
+								})
+							})
+						]
+					}, p.code))
+				})]
+			}) : null]
+		})]
+	});
+}
+export { GeoChart };

package/dist/charts/GeoChart/GeoChart.module.js

@@ -0,0 +1,21 @@
+import './GeoChart.css';
+// src/charts/GeoChart/GeoChart.module.css
+var GeoChart_module_default = {
+	"root": "sti-GeoChart-root-d1b5e",
+	"header": "sti-GeoChart-header-f568d",
+	"heading": "sti-GeoChart-heading-735e4",
+	"title": "sti-GeoChart-title-5f20c",
+	"description": "sti-GeoChart-description-41f17",
+	"body": "sti-GeoChart-body-3f986",
+	"map": "sti-GeoChart-map-3b0a7",
+	"top": "sti-GeoChart-top-ac23e",
+	"topTitle": "sti-GeoChart-topTitle-35487",
+	"topList": "sti-GeoChart-topList-dff24",
+	"topItem": "sti-GeoChart-topItem-249ed",
+	"rank": "sti-GeoChart-rank-63623",
+	"topName": "sti-GeoChart-topName-69817",
+	"topValue": "sti-GeoChart-topValue-a13b1",
+	"topBar": "sti-GeoChart-topBar-71ab5",
+	"topFill": "sti-GeoChart-topFill-12054"
+};
+export { GeoChart_module_default as default };

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

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

package/dist/charts/Heatmap/Heatmap.css

@@ -0,0 +1,61 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Heatmap-root-81206 {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sti-Heatmap-cell-603a9 {
+    fill: var(--sti-heat, var(--sti-bg-surface-hover));
+    stroke: none;
+  }
+
+  .sti-Heatmap-cell-603a9[data-active] {
+    stroke: var(--sti-fg);
+    stroke-width: 2px;
+  }
+
+  .sti-Heatmap-rowLabel-7f3cf, .sti-Heatmap-colLabel-9c66a {
+    fill: var(--sti-fg-muted);
+    font-family: var(--sti-font-text);
+    dominant-baseline: central;
+    font-size: 11px;
+  }
+
+  .sti-Heatmap-rowLabel-7f3cf {
+    text-anchor: end;
+  }
+
+  .sti-Heatmap-colLabel-9c66a {
+    text-anchor: middle;
+  }
+
+  .sti-Heatmap-value-d275c {
+    fill: var(--sti-fg);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    text-anchor: middle;
+    dominant-baseline: central;
+    font-size: 11px;
+  }
+
+  .sti-Heatmap-value-d275c[data-level="4"] {
+    fill: var(--sti-fg-on-accent);
+  }
+
+  .sti-Heatmap-value-d275c[data-level="5"] {
+    fill: var(--sti-bg-canvas);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Heatmap-cell-603a9 {
+      stroke: canvastext;
+      stroke-width: 1px;
+    }
+
+    .sti-Heatmap-cell-603a9[data-active] {
+      stroke: highlight;
+      stroke-width: 3px;
+    }
+  }
+}

package/dist/charts/Heatmap/Heatmap.d.ts

@@ -0,0 +1,27 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ReactNode, Ref } from "react";
+export interface HeatmapProps {
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Satır adları ("Pazartesi"). */
+  rows: readonly string[];
+  /** Sütun adları ("09:00"). */
+  columns: readonly string[];
+  /** `values[satır][sütun]`; `null` veri yok. */
+  values: readonly (readonly (number | null)[])[];
+  valueFormat?: ChartValueFormat;
+  /** Değeri hücreye yazar (hücre yeterince genişse). */
+  showValues?: boolean;
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Isı haritası: iki kategorinin kesişimindeki yoğunluk (gün × saat etkileşim, kanal × ay
+ * dönüşüm). Hücreler beş basamakta turkuaz tonlanır; değer ipucunda, isteğe bağlı hücrede ve
+ * tablo görünümünde yazılıdır. Oklar hücreler arasında satır ve sütunla gezer.
+ */
+export declare function Heatmap({ label, title, description, rows, columns, values, valueFormat, showValues, tableToggle, isLoading, className, id, ref }: HeatmapProps): import("react").JSX.Element;

package/dist/charts/Heatmap/Heatmap.js

@@ -0,0 +1,138 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { clamp, extentOf, isNum, r2, textWidth } from "../_internal/math.js";
+import { useValueFormat } from "../_internal/format.js";
+import { ChartFrame } from "../_internal/frame/ChartFrame.js";
+import { gridNav, step5 } from "../_internal/items.js";
+import { ScaleLegend, heatClass } from "../_internal/ScaleLegend.js";
+import Heatmap_module_default from "./Heatmap.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/Heatmap/Heatmap.tsx
+/**
+* Isı haritası: iki kategorinin kesişimindeki yoğunluk (gün × saat etkileşim, kanal × ay
+* dönüşüm). Hücreler beş basamakta turkuaz tonlanır; değer ipucunda, isteğe bağlı hücrede ve
+* tablo görünümünde yazılıdır. Oklar hücreler arasında satır ve sütunla gezer.
+*/
+function Heatmap({ label, title, description, rows, columns, values, valueFormat, showValues = false, tableToggle = false, isLoading = false, className, id, ref }) {
+	const t = useMessages();
+	const fmt = useValueFormat(valueFormat);
+	const [lo, hi] = extentOf(values.flat());
+	const cellH = 30;
+	const top = 22;
+	const height = top + rows.length * cellH;
+	const valueAt = (r, c) => values[r]?.[c] ?? null;
+	const layout = (ctx) => {
+		const left = Math.min(ctx.width * .35, Math.ceil(Math.max(...rows.map((r) => textWidth(r)), 0)) + 12);
+		const cellW = Math.max(4, (ctx.width - left) / Math.max(1, columns.length));
+		const widest = Math.max(...columns.map((c) => textWidth(c, 11)), 0) + 6;
+		return {
+			left,
+			cellW,
+			every: Math.max(1, Math.ceil(widest / cellW))
+		};
+	};
+	const cellText = (r, c) => {
+		const v = valueAt(r, c);
+		return isNum(v) ? fmt(v) : t.chartGeoNoData;
+	};
+	const data = (ctx) => {
+		const l = layout(ctx);
+		return rows.flatMap((row, r) => columns.map((col, c) => ({
+			id: `r${r}c${c}`,
+			x: l.left + (c + 1) * l.cellW - 2,
+			y: top + r * cellH + cellH / 2,
+			title: template(t.chartHeatmapCell, {
+				row,
+				column: col
+			}),
+			rows: [{
+				label: t.chartValue,
+				value: cellText(r, c)
+			}],
+			announce: `${template(t.chartHeatmapCell, {
+				row,
+				column: col
+			})}: ${cellText(r, c)}`
+		})));
+	};
+	const hit = (x, y, ctx) => {
+		const l = layout(ctx);
+		if (x < l.left || y < top) return null;
+		const c = Math.floor((x - l.left) / l.cellW);
+		const r = Math.floor((y - top) / cellH);
+		if (r >= rows.length || c >= columns.length) return null;
+		return `r${clamp(r, 0, rows.length - 1)}c${clamp(c, 0, columns.length - 1)}`;
+	};
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		ref,
+		id,
+		className: [Heatmap_module_default.root, className].filter(Boolean).join(" "),
+		label,
+		title,
+		description,
+		summary: template(t.chartSummaryPoints, { count: rows.length * columns.length }),
+		height,
+		data,
+		nav: gridNav(rows.length, columns.length),
+		hit,
+		legend: /* @__PURE__ */ jsx(ScaleLegend, {
+			low: fmt(lo),
+			high: fmt(hi)
+		}),
+		table: {
+			rowHeaderLabel: t.chartCategory,
+			columns: columns.map((c, i) => ({
+				id: `c${i}`,
+				label: c
+			})),
+			rows: rows.map((r, i) => ({
+				id: `r${i}`,
+				header: r,
+				cells: columns.map((_, c) => {
+					const v = valueAt(i, c);
+					return isNum(v) ? fmt(v) : null;
+				})
+			}))
+		},
+		tableToggle,
+		isEmpty: rows.length === 0 || columns.length === 0,
+		isLoading,
+		children: (ctx) => {
+			const l = layout(ctx);
+			const fits = showValues && l.cellW >= 40;
+			return /* @__PURE__ */ jsxs("g", { children: [columns.map((col, c) => c % l.every === 0 ? /* @__PURE__ */ jsx("text", {
+				className: Heatmap_module_default.colLabel,
+				x: r2(l.left + (c + .5) * l.cellW),
+				y: 14,
+				children: col
+			}, col) : null), rows.map((row, r) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("text", {
+				className: Heatmap_module_default.rowLabel,
+				x: l.left - 8,
+				y: top + r * cellH + cellH / 2,
+				children: row
+			}), columns.map((col, c) => {
+				const v = valueAt(r, c);
+				const level = step5(v, lo, hi);
+				const active = ctx.activeId === `r${r}c${c}`;
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+					className: `${Heatmap_module_default.cell} ${heatClass}`,
+					"data-level": level ?? 0,
+					"data-active": active ? "" : void 0,
+					x: r2(l.left + c * l.cellW + 1),
+					y: top + r * cellH + 1,
+					width: r2(Math.max(0, l.cellW - 2)),
+					height: 28,
+					rx: 3
+				}), fits && isNum(v) ? /* @__PURE__ */ jsx("text", {
+					className: Heatmap_module_default.value,
+					"data-level": level,
+					x: r2(l.left + (c + .5) * l.cellW),
+					y: top + r * cellH + cellH / 2,
+					children: fmt(v)
+				}) : null] }, col);
+			})] }, row))] });
+		}
+	});
+}
+export { Heatmap };

package/dist/charts/Heatmap/Heatmap.module.js

@@ -0,0 +1,10 @@
+import './Heatmap.css';
+// src/charts/Heatmap/Heatmap.module.css
+var Heatmap_module_default = {
+	"root": "sti-Heatmap-root-81206",
+	"cell": "sti-Heatmap-cell-603a9",
+	"rowLabel": "sti-Heatmap-rowLabel-7f3cf",
+	"colLabel": "sti-Heatmap-colLabel-9c66a",
+	"value": "sti-Heatmap-value-d275c"
+};
+export { Heatmap_module_default as default };

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

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

package/dist/charts/RadarChart/RadarChart.css

@@ -0,0 +1,39 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-RadarChart-root-60b46 {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sti-RadarChart-axisLabel-de821 {
+    fill: var(--sti-fg-muted);
+    font-family: var(--sti-font-text);
+    dominant-baseline: central;
+    font-size: 12px;
+  }
+
+  .sti-RadarChart-axisLabel-de821[data-active] {
+    fill: var(--sti-fg);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-RadarChart-axisLabel-de821[data-anchor="start"] {
+    text-anchor: start;
+  }
+
+  .sti-RadarChart-axisLabel-de821[data-anchor="middle"] {
+    text-anchor: middle;
+  }
+
+  .sti-RadarChart-axisLabel-de821[data-anchor="end"] {
+    text-anchor: end;
+  }
+
+  .sti-RadarChart-ringLabel-bc265 {
+    fill: var(--sti-fg-muted);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    dominant-baseline: central;
+    font-size: 10px;
+  }
+}

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

@@ -0,0 +1,27 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { ChartSeries } from "../_internal/category.js";
+import { ReactNode, Ref } from "react";
+export interface RadarChartProps {
+  label: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Eksenler (ölçüler): "Erişim", "Etkileşim", "Dönüşüm"… (3–8 önerilir). */
+  categories: readonly string[];
+  series: readonly ChartSeries[];
+  valueFormat?: ChartValueFormat;
+  /** Ölçeğin üst sınırı; verilmezse en büyük değerden güzel sınır. Alt sınır sıfırdır. */
+  max?: number;
+  showLegend?: boolean;
+  tableToggle?: boolean;
+  isLoading?: boolean;
+  height?: number;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * 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.
+ */
+export declare function RadarChart({ label, title, description, categories, series, valueFormat, max, showLegend, tableToggle, isLoading, height, className, id, ref }: RadarChartProps): import("react").JSX.Element;