@stisocial/ui 0.1.0 → 0.2.0

package/dist/charts/_internal/category.js

@@ -0,0 +1,139 @@
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { bandIndexAt, bandScale, clamp, isNum, linear, niceScale, textWidth } from "./math.js";
+import { useValueFormat } from "./format.js";
+import { useCallback, useMemo, useState } from "react";
+// src/charts/_internal/category.ts
+const TONE_COLOR = {
+	accent: 0,
+	warning: 1,
+	success: 2,
+	danger: 3,
+	neutral: 7
+};
+/** Serinin renk sırası: ton verilmişse tonun, yoksa serinin kendi sırası. */
+const colorOf = (s, i) => s.tone ? TONE_COLOR[s.tone] : i;
+/** Kategorik grafiğin durumu: gizlenen seriler, biçimli satırlar, tablo, gösterge ve özet. */
+function useCategoryModel(opts) {
+	const { categories, series, kindOf = () => "line", formatOf } = opts;
+	const t = useMessages();
+	const fmt = useValueFormat(opts.valueFormat);
+	const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+	const toggle = useCallback((id) => setHidden((prev) => {
+		const next = new Set(prev);
+		if (next.has(id)) next.delete(id);
+		else if (series.filter((s) => !prev.has(s.id)).length > 1) next.add(id);
+		return next;
+	}), [series]);
+	const visible = useMemo(() => series.map((s, i) => ({
+		s: i,
+		c: colorOf(s, i),
+		series: s
+	})).filter((v) => !hidden.has(v.series.id)), [series, hidden]);
+	const valueText = (s, v) => isNum(v) ? (formatOf?.(s) ?? fmt)(v) : "–";
+	const rowsAt = (i) => visible.filter((v) => isNum(v.series.data[i])).map((v) => ({
+		label: v.series.label,
+		value: valueText(v.s, v.series.data[i]),
+		series: v.c,
+		kind: kindOf(v.s)
+	}));
+	const announceAt = (i) => `${categories[i] ?? ""}: ${rowsAt(i).map((r) => `${r.label} ${r.value}`).join(", ")}`;
+	return {
+		t,
+		fmt,
+		hidden,
+		toggle,
+		visible,
+		rowsAt,
+		announceAt,
+		legendItems: series.map((s, i) => ({
+			id: s.id,
+			label: s.label,
+			series: colorOf(s, i),
+			kind: kindOf(i),
+			isHidden: hidden.has(s.id)
+		})),
+		table: {
+			rowHeaderLabel: t.chartCategory,
+			columns: series.map((s) => ({
+				id: s.id,
+				label: s.label
+			})),
+			rows: categories.map((c, i) => ({
+				id: `c${i}`,
+				header: c,
+				cells: series.map((s, k) => isNum(s.data[i]) ? valueText(k, s.data[i]) : null)
+			}))
+		},
+		summary: template(t.chartSummaryCategories, {
+			categories: categories.length,
+			series: series.length
+		}),
+		valueText
+	};
+}
+/** Kategori sırasıyla klavye gezinmesi (`c0`, `c1`, …). */
+function categoryNav(n) {
+	return (activeId, key) => {
+		if (n === 0) return null;
+		const i = activeId ? Number(activeId.slice(1)) : -1;
+		switch (key) {
+			case "left":
+			case "up": return `c${clamp(i < 0 ? 0 : i - 1, 0, n - 1)}`;
+			case "right":
+			case "down": return `c${clamp(i + 1, 0, n - 1)}`;
+			case "home": return "c0";
+			case "end": return `c${n - 1}`;
+		}
+	};
+}
+/** Kartezyen çizim alanı yerleşimi: boşluklar, eksenler, kategori bandı ve etiket seyreltme. */
+function cartesianLayout(inp) {
+	const { width, height, categories, format } = inp;
+	const count = clamp(Math.round(height / 56), 3, 6);
+	const ns = niceScale(inp.domain[0], inp.domain[1], count);
+	const rns = inp.right ? niceScale(inp.right.domain[0], inp.right.domain[1], count) : void 0;
+	const labelW = (ticks, f) => Math.max(...ticks.map((t) => textWidth(f(t))), 0);
+	const left = Math.ceil(labelW(ns.ticks, format)) + 12;
+	const right = rns && inp.right ? Math.ceil(labelW(rns.ticks, inp.right.format)) + 12 : 8;
+	const top = inp.top ?? 8;
+	const bottom = inp.bottom ?? 28;
+	const plotW = Math.max(0, width - left - right);
+	const plotH = Math.max(0, height - top - bottom);
+	const y = linear(ns.min, ns.max, top + plotH, top);
+	const band = bandScale(categories.length, left, left + plotW, inp.inner ?? .2);
+	const widest = Math.max(...categories.map((c) => textWidth(c)), 0) + 8;
+	const every = Math.max(1, Math.ceil(widest / Math.max(1, band.step)));
+	const xLabels = categories.map((text, i) => ({
+		text,
+		x: band.center(i),
+		i
+	})).filter((l) => l.i % every === 0).map(({ text, x }) => ({
+		text,
+		x
+	}));
+	return {
+		left,
+		right,
+		top,
+		bottom,
+		plotW,
+		plotH,
+		y,
+		ticks: ns.ticks,
+		rightTicks: rns?.ticks,
+		yRight: rns ? linear(rns.min, rns.max, top + plotH, top) : void 0,
+		band,
+		xLabels,
+		indexAt: (x) => bandIndexAt(x, categories.length, left, left + plotW)
+	};
+}
+/** Çizim alanının yatay sınırları içindeki işaretçi için kategori kimliği. */
+function categoryHit(layout, n) {
+	return (x, y) => {
+		if (n === 0 || x < layout.left || x > layout.left + layout.plotW) return null;
+		if (y < 0 || y > layout.top + layout.plotH + layout.bottom) return null;
+		return `c${layout.indexAt(x)}`;
+	};
+}
+export { cartesianLayout, categoryHit, categoryNav, colorOf, useCategoryModel };

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

@@ -0,0 +1,14 @@
+/**
+ * Grafik değerlerinin biçimi. Düz nesnedir (sunucudan istemciye geçebilir; işlev değildir):
+ * - `number`: sayı ayraçlarıyla (varsayılan);
+ * - `compact`: "1,2 B", "3,4 Mn";
+ * - `percent`: değer 0–1 arası orandır ("%42");
+ * - `currency`: para ("₺1.234"; `currency` ISO 4217 kodu, varsayılan TRY; kuruşsuz).
+ * `unit` değerin arkasına eklenir ("ms", "GB"); `digits` en çok ondalık basamaktır.
+ */
+export interface ChartValueFormat {
+  style?: "number" | "compact" | "percent" | "currency";
+  currency?: string;
+  digits?: number;
+  unit?: string;
+}

package/dist/charts/_internal/format.js

@@ -0,0 +1,41 @@
+import { useFormatter } from "../../provider/UIProvider.js";
+import { useMemo } from "react";
+// src/charts/_internal/format.ts
+/** Biçim tanımından değer yazan işlev (sunucuda `createFormatter` ile de kullanılabilir). */
+function makeValueFormat(f, spec = {}) {
+	const { style = "number", currency, digits, unit } = spec;
+	const suffix = unit ? ` ${unit}` : "";
+	return (v) => {
+		switch (style) {
+			case "compact": return `${f.compact(v)}${suffix}`;
+			case "percent": return f.number(v, {
+				style: "percent",
+				minimumFractionDigits: digits ?? 0,
+				maximumFractionDigits: digits ?? 0
+			});
+			case "currency": return f.currency(v, {
+				currency,
+				whole: digits === void 0 || digits === 0
+			});
+			default: return `${f.number(v, { maximumFractionDigits: digits ?? 2 })}${suffix}`;
+		}
+	};
+}
+/** Sağlayıcının diliyle değer biçimleyicisi. */
+function useValueFormat(spec) {
+	const f = useFormatter();
+	const { style, currency, digits, unit } = spec ?? {};
+	return useMemo(() => makeValueFormat(f, {
+		style,
+		currency,
+		digits,
+		unit
+	}), [
+		f,
+		style,
+		currency,
+		digits,
+		unit
+	]);
+}
+export { makeValueFormat, useValueFormat };

package/dist/charts/_internal/frame/ChartFrame.css

@@ -0,0 +1,113 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ChartFrame-root-8f562 {
+    --sti-chart-bg: var(--sti-bg-surface);
+    gap: var(--sti-space-3);
+    min-width: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    grid-template-columns: minmax(0, 1fr);
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-ChartFrame-header-4fe1a {
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--sti-space-2) var(--sti-space-4);
+    flex-wrap: wrap;
+    min-width: 0;
+    display: flex;
+  }
+
+  .sti-ChartFrame-heading-fc66d {
+    flex: auto;
+    min-width: 0;
+  }
+
+  .sti-ChartFrame-title-f58da {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-ChartFrame-description-b63a5 {
+    color: var(--sti-fg-muted);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-ChartFrame-plot-fd21a {
+    min-width: 0;
+    position: relative;
+  }
+
+  .sti-ChartFrame-surface-2a2e7 {
+    border-radius: var(--sti-radius-sm);
+    touch-action: pan-y;
+    outline: none;
+    min-width: 0;
+    display: block;
+  }
+
+  .sti-ChartFrame-surface-2a2e7:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ChartFrame-svg-00192 {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    overflow: visible;
+  }
+
+  .sti-ChartFrame-tip-b85ca {
+    z-index: var(--sti-z-raised);
+    transform: translate(var(--sti-chart-tip-x, 0), var(--sti-chart-tip-y, 0));
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .sti-ChartFrame-state-187ff {
+    padding: var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    text-align: center;
+    border: var(--sti-border-width) dashed var(--sti-border);
+    border-radius: var(--sti-radius-md);
+    place-items: center;
+    margin: 0;
+    display: grid;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-ChartFrame-legend-ef52c {
+    min-width: 0;
+  }
+
+  .sti-ChartFrame-hidden-36a1a {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ChartFrame-surface-2a2e7:focus-visible {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/charts/_internal/frame/ChartFrame.d.ts

@@ -0,0 +1,3 @@
+import "../../ChartTooltip/ChartTooltip.js";
+import "../../ChartTable/ChartTable.js";
+import { ReactNode, Ref } from "react";

package/dist/charts/_internal/frame/ChartFrame.js

@@ -0,0 +1,217 @@
+"use client";
+import { useMessages } from "../../../provider/UIProvider.js";
+import { SegmentedControl, SegmentedControlItem } from "../../../components/SegmentedControl/SegmentedControl.js";
+import { clamp } from "../math.js";
+import { ChartTable } from "../../ChartTable/ChartTable.js";
+import { ChartTooltip } from "../../ChartTooltip/ChartTooltip.js";
+import ChartFrame_module_default from "./ChartFrame.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+// src/charts/_internal/frame/ChartFrame.tsx
+const KEYS = {
+	ArrowLeft: "left",
+	ArrowRight: "right",
+	ArrowUp: "up",
+	ArrowDown: "down",
+	Home: "home",
+	End: "end"
+};
+/**
+* Grafiklerin ortak çerçevesi (dışa açılmaz): genişliği ölçer, başlık/gösterge/tablo geçişini ve
+* boş/yükleniyor durumunu çizer; çizim alanını tek odak durağı yapar (oklar, Home, End veri
+* noktaları arasında gezinir, Escape bırakır), işaretçi ve klavye için veri ipucunu konumlar, klavye
+* gezinmesini ekran okuyucuya duyurur. Dinamik konum CSSOM ile yazılır (CSP).
+*/
+function ChartFrame(props) {
+	const { label, title, description, summary, height, data, nav, hit, legend, table, tableToggle = false, isEmpty = false, isLoading = false, initialWidth = 560, className, id, ref, children } = props;
+	const t = useMessages();
+	const ids = useId();
+	const summaryId = `${ids}-summary`;
+	const descId = `${ids}-description`;
+	const [width, setWidth] = useState(initialWidth);
+	const [view, setView] = useState("chart");
+	const [active, setActive] = useState(null);
+	const plotRef = useRef(null);
+	const surfaceRef = useRef(null);
+	const tipRef = useRef(null);
+	const showTable = view === "table" && table !== void 0;
+	useLayoutEffect(() => {
+		const el = plotRef.current;
+		if (!el) return;
+		const measure = () => {
+			const w = Math.floor(el.getBoundingClientRect().width);
+			if (w > 0) setWidth(w);
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	const ctx = {
+		width,
+		height,
+		compact: width < 480,
+		activeId: active?.id ?? null
+	};
+	const list = data(ctx);
+	const datum = active ? list.find((d) => d.id === active.id) : void 0;
+	useLayoutEffect(() => {
+		const tip = tipRef.current;
+		if (!tip || !datum) return;
+		const w = tip.offsetWidth;
+		const h = tip.offsetHeight;
+		let left = datum.x + 14;
+		if (left + w > width) left = datum.x - 14 - w;
+		left = clamp(left, 0, Math.max(0, width - w));
+		const top = clamp(datum.y - h / 2, 0, Math.max(0, height - h));
+		tip.style.setProperty("--sti-chart-tip-x", `${Math.round(left)}px`);
+		tip.style.setProperty("--sti-chart-tip-y", `${Math.round(top)}px`);
+	}, [
+		datum,
+		width,
+		height
+	]);
+	const point = (e) => {
+		const rect = (surfaceRef.current ?? e.currentTarget).getBoundingClientRect();
+		return {
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		};
+	};
+	const onPointer = (e) => {
+		if (!hit || list.length === 0) return;
+		const { x, y } = point(e);
+		const next = hit(x, y, ctx);
+		setActive((prev) => next ? {
+			id: next,
+			via: "pointer"
+		} : prev?.via === "keyboard" ? prev : null);
+	};
+	const onKeyDown = (e) => {
+		if (e.altKey || e.ctrlKey || e.metaKey) return;
+		if (e.key === "Escape") {
+			setActive(null);
+			return;
+		}
+		let key = KEYS[e.key];
+		if (!key) return;
+		e.preventDefault();
+		if (getComputedStyle(e.currentTarget).direction === "rtl") key = key === "left" ? "right" : key === "right" ? "left" : key;
+		const next = nav(active?.id ?? null, key);
+		if (next) setActive({
+			id: next,
+			via: "keyboard"
+		});
+	};
+	const empty = isEmpty && !isLoading;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref,
+		id,
+		className: [ChartFrame_module_default.root, className].filter(Boolean).join(" "),
+		"data-view": showTable ? "table" : "chart",
+		"aria-busy": isLoading ? true : void 0,
+		children: [
+			title || description || table && tableToggle ? /* @__PURE__ */ jsxs("header", {
+				className: ChartFrame_module_default.header,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: ChartFrame_module_default.heading,
+					children: [title ? /* @__PURE__ */ jsx("figcaption", {
+						className: ChartFrame_module_default.title,
+						children: title
+					}) : null, description ? /* @__PURE__ */ jsx("p", {
+						id: descId,
+						className: ChartFrame_module_default.description,
+						children: description
+					}) : null]
+				}), table && 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,
+			showTable && table ? /* @__PURE__ */ jsx(ChartTable, {
+				caption: label,
+				size: "sm",
+				...table
+			}) : /* @__PURE__ */ jsxs("div", {
+				ref: plotRef,
+				className: ChartFrame_module_default.plot,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						ref: surfaceRef,
+						className: ChartFrame_module_default.surface,
+						role: "group",
+						"aria-label": label,
+						"aria-describedby": description ? `${summaryId} ${descId}` : summaryId,
+						tabIndex: empty || isLoading || list.length === 0 ? void 0 : 0,
+						onKeyDown,
+						onFocus: (e) => {
+							if (e.target !== e.currentTarget || active) return;
+							if (e.currentTarget.matches(":focus-visible")) {
+								const first = nav(null, "home");
+								if (first) setActive({
+									id: first,
+									via: "keyboard"
+								});
+							}
+						},
+						onBlur: () => setActive(null),
+						onPointerMove: onPointer,
+						onPointerDown: onPointer,
+						onPointerLeave: (e) => {
+							if (e.pointerType === "mouse") setActive((p) => p?.via === "keyboard" ? p : null);
+						},
+						children: /* @__PURE__ */ jsx("svg", {
+							className: ChartFrame_module_default.svg,
+							width,
+							height,
+							viewBox: `0 0 ${width} ${height}`,
+							"aria-hidden": "true",
+							focusable: "false",
+							children: empty || isLoading ? null : children(ctx)
+						})
+					}),
+					empty || isLoading ? /* @__PURE__ */ jsx("p", {
+						className: ChartFrame_module_default.state,
+						role: "status",
+						children: isLoading ? t.loading : t.chartEmpty
+					}) : null,
+					datum && !empty && !isLoading ? /* @__PURE__ */ jsx("div", {
+						ref: tipRef,
+						className: ChartFrame_module_default.tip,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(ChartTooltip, {
+							title: datum.title,
+							items: datum.rows,
+							footer: datum.footer
+						})
+					}) : null,
+					/* @__PURE__ */ jsx("span", {
+						id: summaryId,
+						className: ChartFrame_module_default.hidden,
+						children: summary
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: ChartFrame_module_default.hidden,
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						children: active?.via === "keyboard" && datum ? datum.announce : ""
+					})
+				]
+			}),
+			legend && !showTable ? /* @__PURE__ */ jsx("div", {
+				className: ChartFrame_module_default.legend,
+				children: legend
+			}) : null
+		]
+	});
+}
+export { ChartFrame };

package/dist/charts/_internal/frame/ChartFrame.module.js

@@ -0,0 +1,17 @@
+import './ChartFrame.css';
+// src/charts/_internal/frame/ChartFrame.module.css
+var ChartFrame_module_default = {
+	"root": "sti-ChartFrame-root-8f562",
+	"header": "sti-ChartFrame-header-4fe1a",
+	"heading": "sti-ChartFrame-heading-fc66d",
+	"title": "sti-ChartFrame-title-f58da",
+	"description": "sti-ChartFrame-description-b63a5",
+	"plot": "sti-ChartFrame-plot-fd21a",
+	"surface": "sti-ChartFrame-surface-2a2e7",
+	"svg": "sti-ChartFrame-svg-00192",
+	"tip": "sti-ChartFrame-tip-b85ca",
+	"state": "sti-ChartFrame-state-187ff",
+	"legend": "sti-ChartFrame-legend-ef52c",
+	"hidden": "sti-ChartFrame-hidden-36a1a"
+};
+export { ChartFrame_module_default as default };