@stisocial/ui 0.1.0 → 0.2.0

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

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

package/dist/charts/ChartLegend/ChartLegend.css

@@ -0,0 +1,110 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ChartLegend-root-d31f0 {
+    --sti-chart-legend-gap: var(--sti-space-1) var(--sti-space-4);
+    --sti-chart-legend-font-size: var(--sti-font-size-sm);
+    --sti-chart-legend-line-height: var(--sti-line-height-sm);
+    gap: var(--sti-chart-legend-gap);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-chart-legend-font-size);
+    line-height: var(--sti-chart-legend-line-height);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-ChartLegend-root-d31f0[data-orientation="vertical"] {
+    gap: var(--sti-space-1);
+    flex-flow: column;
+  }
+
+  .sti-ChartLegend-item-2d0a6 {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sti-ChartLegend-static-b7e56, .sti-ChartLegend-button-2c6b3 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    min-width: 0;
+    max-width: 100%;
+    min-height: var(--sti-space-6);
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    background: none;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .sti-ChartLegend-button-2c6b3 {
+    padding-inline: var(--sti-space-2);
+    border-radius: var(--sti-radius-sm);
+    cursor: pointer;
+    transition-property: background-color, color;
+    transition-duration: var(--sti-duration-fast);
+    transition-timing-function: var(--sti-ease-out);
+    outline: none;
+  }
+
+  .sti-ChartLegend-label-aae87 {
+    overflow-wrap: anywhere;
+    min-width: 0;
+  }
+
+  .sti-ChartLegend-value-e5ab2 {
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .sti-ChartLegend-label-aae87[data-hidden] {
+    color: var(--sti-fg-muted);
+    text-decoration: line-through;
+  }
+
+  .sti-ChartLegend-button-2c6b3[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  @media (hover: hover) {
+    .sti-ChartLegend-button-2c6b3[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-ChartLegend-button-2c6b3[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  @media (pointer: coarse) {
+    .sti-ChartLegend-button-2c6b3 {
+      min-height: var(--sti-control-h-md);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ChartLegend-button-2c6b3 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ChartLegend-button-2c6b3[data-focus-visible] {
+      outline-color: highlight;
+    }
+
+    .sti-ChartLegend-label-aae87[data-hidden] {
+      color: graytext;
+    }
+  }
+}

package/dist/charts/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode, Ref } from "react";
+export interface ChartLegendItem {
+  /** Benzersiz kimlik (`onToggle`'a bu verilir). */
+  id: string;
+  /** Serinin ya da dilimin adı. */
+  label: ReactNode;
+  /** Seri sırası (0–7): renk ve işaret biçimini belirler. */
+  series: number;
+  /** Anahtarın biçimi; varsayılan `bar`. */
+  kind?: "line" | "bar" | "area" | "dot";
+  /** Adın yanında değer ("%42", "1.240"). */
+  value?: ReactNode;
+  /** Gizli serinin anahtarı soluk, adı üstü çizili görünür. */
+  isHidden?: boolean;
+}
+export interface ChartLegendProps {
+  items: readonly ChartLegendItem[];
+  /**
+   * Verilirse her öğe bir açma/kapama düğmesidir (`aria-pressed`): seriyi gösterir ya da gizler.
+   * Verilmezse gösterge yalnız okunur bir listedir.
+   */
+  onToggle?: (id: string) => void;
+  /** Dizilim: `horizontal` satırlara sarar (varsayılan), `vertical` alt alta. */
+  orientation?: "horizontal" | "vertical";
+  /** Listenin erişilebilir adı; varsayılan "Gösterge". */
+  label?: string;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLUListElement>;
+}
+/**
+ * Grafik göstergesi: her serinin renk ve biçim anahtarını adıyla verir. Seri yalnız renkle değil
+ * işaret biçimiyle de ayırt edilir. `onToggle` ile seri gösterme/gizleme düğmelerine dönüşür
+ * (WAI-ARIA APG "Button", `aria-pressed`; her düğme sekme durağıdır).
+ */
+export declare function ChartLegend({ items, onToggle, orientation, label, className, id, ref }: ChartLegendProps): import("react").JSX.Element;

package/dist/charts/ChartLegend/ChartLegend.js

@@ -0,0 +1,55 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Swatch } from "../_internal/marks/marks.js";
+import ChartLegend_module_default from "./ChartLegend.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ToggleButton } from "react-aria-components";
+// src/charts/ChartLegend/ChartLegend.tsx
+/**
+* Grafik göstergesi: her serinin renk ve biçim anahtarını adıyla verir. Seri yalnız renkle değil
+* işaret biçimiyle de ayırt edilir. `onToggle` ile seri gösterme/gizleme düğmelerine dönüşür
+* (WAI-ARIA APG "Button", `aria-pressed`; her düğme sekme durağıdır).
+*/
+function ChartLegend({ items, onToggle, orientation = "horizontal", label, className, id, ref }) {
+	const t = useMessages();
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		id,
+		"aria-label": label ?? t.chartLegend,
+		className: [ChartLegend_module_default.root, className].filter(Boolean).join(" "),
+		"data-orientation": orientation,
+		children: items.map((item) => {
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Swatch, {
+					s: item.series,
+					kind: item.kind ?? "bar",
+					dim: item.isHidden
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: ChartLegend_module_default.label,
+					"data-hidden": item.isHidden ? "" : void 0,
+					children: item.label
+				}),
+				item.value === void 0 ? null : /* @__PURE__ */ jsx("span", {
+					className: ChartLegend_module_default.value,
+					children: item.value
+				})
+			] });
+			return /* @__PURE__ */ jsx("li", {
+				className: ChartLegend_module_default.item,
+				children: onToggle ? /* @__PURE__ */ jsx(ToggleButton, {
+					className: ChartLegend_module_default.button,
+					isSelected: !item.isHidden,
+					onChange: () => onToggle(item.id),
+					"data-hidden": item.isHidden ? "" : void 0,
+					children: content
+				}) : /* @__PURE__ */ jsx("span", {
+					className: ChartLegend_module_default.static,
+					"data-hidden": item.isHidden ? "" : void 0,
+					children: content
+				})
+			}, item.id);
+		})
+	});
+}
+export { ChartLegend };

package/dist/charts/ChartLegend/ChartLegend.module.js

@@ -0,0 +1,11 @@
+import './ChartLegend.css';
+// src/charts/ChartLegend/ChartLegend.module.css
+var ChartLegend_module_default = {
+	"root": "sti-ChartLegend-root-d31f0",
+	"item": "sti-ChartLegend-item-2d0a6",
+	"static": "sti-ChartLegend-static-b7e56",
+	"button": "sti-ChartLegend-button-2c6b3",
+	"label": "sti-ChartLegend-label-aae87",
+	"value": "sti-ChartLegend-value-e5ab2"
+};
+export { ChartLegend_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ChartLegend, ChartLegendItem, ChartLegendProps } from "./ChartLegend.js";
+export { ChartLegend, ChartLegendItem, ChartLegendProps };

package/dist/charts/ChartTable/ChartTable.css

@@ -0,0 +1,109 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ChartTable-root-85570 {
+    --sti-chart-table-row-h: var(--sti-control-h-md);
+    --sti-chart-table-px: var(--sti-space-2);
+    --sti-chart-table-font-size: var(--sti-font-size-sm);
+    --sti-chart-table-line-height: var(--sti-line-height-sm);
+    border-collapse: collapse;
+    width: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-chart-table-font-size);
+    line-height: var(--sti-chart-table-line-height);
+    table-layout: auto;
+  }
+
+  .sti-ChartTable-root-85570[data-size="sm"] {
+    --sti-chart-table-row-h: var(--sti-control-h-sm);
+    --sti-chart-table-px: var(--sti-space-2);
+    --sti-chart-table-font-size: var(--sti-font-size-xs);
+    --sti-chart-table-line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-ChartTable-caption-e1b78 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .sti-ChartTable-caption-e1b78[data-visible] {
+    width: auto;
+    height: auto;
+    clip-path: none;
+    color: var(--sti-fg-muted);
+    text-align: start;
+    white-space: normal;
+    margin: 0;
+    padding-block-end: var(--sti-space-2);
+    position: static;
+    overflow: visible;
+  }
+
+  .sti-ChartTable-head-48af5 {
+    height: var(--sti-chart-table-row-h);
+    padding-inline: var(--sti-chart-table-px);
+    color: var(--sti-fg-muted);
+    font-weight: var(--sti-font-weight-medium);
+    text-align: start;
+    vertical-align: middle;
+    border-block-end: var(--sti-border-width) solid var(--sti-border);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-ChartTable-head-48af5[data-numeric] {
+    text-align: end;
+  }
+
+  .sti-ChartTable-row-7716a {
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-ChartTable-rowHead-58a63, .sti-ChartTable-cell-f115e {
+    height: var(--sti-chart-table-row-h);
+    padding-inline: var(--sti-chart-table-px);
+    vertical-align: middle;
+    overflow-wrap: anywhere;
+  }
+
+  .sti-ChartTable-rowHead-58a63 {
+    color: var(--sti-fg);
+    font-weight: var(--sti-font-weight-medium);
+    text-align: start;
+  }
+
+  .sti-ChartTable-cell-f115e {
+    color: var(--sti-fg);
+  }
+
+  .sti-ChartTable-cell-f115e[data-numeric] {
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    white-space: nowrap;
+  }
+
+  .sti-ChartTable-empty-a62e5 {
+    height: var(--sti-chart-table-row-h);
+    padding-inline: var(--sti-chart-table-px);
+    color: var(--sti-fg-muted);
+    text-align: center;
+  }
+
+  @media (hover: hover) {
+    .sti-ChartTable-row-7716a:hover {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ChartTable-head-48af5, .sti-ChartTable-row-7716a {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/charts/ChartTable/ChartTable.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode, Ref } from "react";
+export interface ChartTableColumn {
+  id: string;
+  /** Sütun başlığı (seri adı). */
+  label: ReactNode;
+  /** Sayısal sütun: sağa yaslı, eşit genişlikli rakam. Varsayılan `true`. */
+  numeric?: boolean;
+}
+export interface ChartTableRow {
+  id: string;
+  /** Satır başlığı (kategori adı). */
+  header: ReactNode;
+  /** Sütunlara karşılık gelen hücreler; `null` boş değerdir ("–" yazılır). */
+  cells: readonly ReactNode[];
+}
+export interface ChartTableProps {
+  /** Tablonun adı (zorunlu): hangi grafiğin verisi olduğunu söyler. */
+  caption: ReactNode;
+  /** Başlığı görünür kılar; varsayılan gizli (yalnız ekran okuyucuya). */
+  showCaption?: boolean;
+  /** İlk sütunun başlığı ("Kategori", "Ay"). */
+  rowHeaderLabel: ReactNode;
+  columns: readonly ChartTableColumn[];
+  rows: readonly ChartTableRow[];
+  /** Son satır (toplam): başlığı ve hücreleri. */
+  footer?: {
+    header: ReactNode;
+    cells: readonly ReactNode[];
+  };
+  /** Satır yoğunluğu. */
+  size?: "sm" | "md";
+  /** Satır yoksa gösterilecek metin. */
+  emptyText?: ReactNode;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLTableElement>;
+}
+/**
+ * Bir grafiğin tablo görünümü: aynı veriyi satır ve sütunlarla verir (renge ve görüntüye bağlı
+ * olmayan, ekran okuyucu ve yazdırma için en güvenilir sunum). Her grafik `tableToggle` ile bu
+ * görünüme geçirilebilir; bileşen ayrıca tek başına da kullanılır. Sunucu bileşenidir.
+ */
+export declare function ChartTable({ caption, showCaption, rowHeaderLabel, columns, rows, footer, size, emptyText, className, id, ref }: ChartTableProps): import("react").JSX.Element;

package/dist/charts/ChartTable/ChartTable.js

@@ -0,0 +1,60 @@
+import ChartTable_module_default from "./ChartTable.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/ChartTable/ChartTable.tsx
+/**
+* Bir grafiğin tablo görünümü: aynı veriyi satır ve sütunlarla verir (renge ve görüntüye bağlı
+* olmayan, ekran okuyucu ve yazdırma için en güvenilir sunum). Her grafik `tableToggle` ile bu
+* görünüme geçirilebilir; bileşen ayrıca tek başına da kullanılır. Sunucu bileşenidir.
+*/
+function ChartTable({ caption, showCaption = false, rowHeaderLabel, columns, rows, footer, size = "md", emptyText, className, id, ref }) {
+	const cell = (v) => v === null || v === void 0 || v === "" ? "–" : v;
+	return /* @__PURE__ */ jsxs("table", {
+		ref,
+		id,
+		className: [ChartTable_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		children: [
+			/* @__PURE__ */ jsx("caption", {
+				className: ChartTable_module_default.caption,
+				"data-visible": showCaption ? "" : void 0,
+				children: caption
+			}),
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "col",
+				className: ChartTable_module_default.head,
+				children: rowHeaderLabel
+			}), columns.map((c) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				className: ChartTable_module_default.head,
+				"data-numeric": c.numeric === false ? void 0 : "",
+				children: c.label
+			}, c.id))] }) }),
+			/* @__PURE__ */ jsx("tbody", { children: rows.length === 0 && emptyText ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				className: ChartTable_module_default.empty,
+				colSpan: columns.length + 1,
+				children: emptyText
+			}) }) : rows.map((r) => /* @__PURE__ */ jsxs("tr", {
+				className: ChartTable_module_default.row,
+				children: [/* @__PURE__ */ jsx("th", {
+					scope: "row",
+					className: ChartTable_module_default.rowHead,
+					children: r.header
+				}), columns.map((c, i) => /* @__PURE__ */ jsx("td", {
+					className: ChartTable_module_default.cell,
+					"data-numeric": c.numeric === false ? void 0 : "",
+					children: cell(r.cells[i] ?? null)
+				}, c.id))]
+			}, r.id)) }),
+			footer ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "row",
+				className: ChartTable_module_default.rowHead,
+				children: footer.header
+			}), columns.map((c, i) => /* @__PURE__ */ jsx("td", {
+				className: ChartTable_module_default.cell,
+				"data-numeric": c.numeric === false ? void 0 : "",
+				children: cell(footer.cells[i] ?? null)
+			}, c.id))] }) }) : null
+		]
+	});
+}
+export { ChartTable };

package/dist/charts/ChartTable/ChartTable.module.js

@@ -0,0 +1,12 @@
+import './ChartTable.css';
+// src/charts/ChartTable/ChartTable.module.css
+var ChartTable_module_default = {
+	"root": "sti-ChartTable-root-85570",
+	"caption": "sti-ChartTable-caption-e1b78",
+	"head": "sti-ChartTable-head-48af5",
+	"row": "sti-ChartTable-row-7716a",
+	"rowHead": "sti-ChartTable-rowHead-58a63",
+	"cell": "sti-ChartTable-cell-f115e",
+	"empty": "sti-ChartTable-empty-a62e5"
+};
+export { ChartTable_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ChartTable, ChartTableColumn, ChartTableProps, ChartTableRow } from "./ChartTable.js";
+export { ChartTable, ChartTableColumn, ChartTableProps, ChartTableRow };

package/dist/charts/ChartTooltip/ChartTooltip.css

@@ -0,0 +1,77 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ChartTooltip-root-23286 {
+    --sti-chart-tooltip-bg: var(--sti-bg-surface);
+    --sti-chart-tooltip-border: var(--sti-border);
+    --sti-chart-tooltip-radius: var(--sti-radius-md);
+    --sti-chart-tooltip-padding: var(--sti-space-3);
+    --sti-chart-tooltip-max-w: calc(var(--sti-space-32) * 2);
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    width: max-content;
+    max-width: min(100%, var(--sti-chart-tooltip-max-w));
+    padding: var(--sti-chart-tooltip-padding);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    background: var(--sti-chart-tooltip-bg);
+    border: var(--sti-border-width) solid var(--sti-chart-tooltip-border);
+    border-radius: var(--sti-chart-tooltip-radius);
+    box-shadow: var(--sti-shadow-md);
+    display: grid;
+  }
+
+  .sti-ChartTooltip-title-14254 {
+    font-weight: var(--sti-font-weight-semibold);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-ChartTooltip-list-0fff6 {
+    gap: var(--sti-space-1);
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-ChartTooltip-row-4c4be {
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-width: 0;
+    display: flex;
+  }
+
+  .sti-ChartTooltip-label-162d8 {
+    min-width: 0;
+    color: var(--sti-fg-muted);
+    overflow-wrap: anywhere;
+    flex: 1;
+    margin: 0;
+  }
+
+  .sti-ChartTooltip-value-aed65 {
+    margin: 0;
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-medium);
+    white-space: nowrap;
+    flex: none;
+    margin-inline-start: auto;
+    padding-inline-start: var(--sti-space-3);
+  }
+
+  .sti-ChartTooltip-footer-dba5a {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    margin: 0;
+    padding-block-start: var(--sti-space-2);
+  }
+
+  @media (forced-colors: active) {
+    .sti-ChartTooltip-root-23286 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/charts/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode, Ref } from "react";
+export interface ChartTooltipItem {
+  /** Satırın adı (seri ya da dilim adı). */
+  label: ReactNode;
+  /** Biçimlenmiş değer. */
+  value: ReactNode;
+  /** Seri sırası (0–7): verilirse satırın başına serinin renk ve biçim anahtarı konur. */
+  series?: number;
+  /** Anahtarın biçimi; varsayılan `bar`. */
+  kind?: "line" | "bar" | "area" | "dot";
+}
+export interface ChartTooltipProps {
+  /** Üst başlık: kategori, tarih ya da düğüm adı. */
+  title?: ReactNode;
+  /** Değer satırları. */
+  items: readonly ChartTooltipItem[];
+  /** Alt not ("Önceki aşamaya oranı: %42"). */
+  footer?: ReactNode;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLDivElement>;
+}
+/**
+ * Grafik veri ipucu: bir veri noktasının başlığını ve seri değerlerini küçük bir kartta gösterir.
+ * Grafikler kendi ipuçlarını bununla çizer; ayrı kullanımda (rapor kartı, örnek katalog) da yer
+ * alabilir. Sunucu bileşenidir. Etkileşimli değildir ve odak almaz: grafiğin ekran okuyucu
+ * duyurusu ayrıca yapılır.
+ */
+export declare function ChartTooltip({ title, items, footer, className, id, ref }: ChartTooltipProps): import("react").JSX.Element;

package/dist/charts/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,48 @@
+import { Swatch } from "../_internal/marks/marks.js";
+import ChartTooltip_module_default from "./ChartTooltip.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/charts/ChartTooltip/ChartTooltip.tsx
+/**
+* Grafik veri ipucu: bir veri noktasının başlığını ve seri değerlerini küçük bir kartta gösterir.
+* Grafikler kendi ipuçlarını bununla çizer; ayrı kullanımda (rapor kartı, örnek katalog) da yer
+* alabilir. Sunucu bileşenidir. Etkileşimli değildir ve odak almaz: grafiğin ekran okuyucu
+* duyurusu ayrıca yapılır.
+*/
+function ChartTooltip({ title, items, footer, className, id, ref }) {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		id,
+		className: [ChartTooltip_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			title ? /* @__PURE__ */ jsx("p", {
+				className: ChartTooltip_module_default.title,
+				children: title
+			}) : null,
+			/* @__PURE__ */ jsx("dl", {
+				className: ChartTooltip_module_default.list,
+				children: items.map((item, i) => /* @__PURE__ */ jsxs("div", {
+					className: ChartTooltip_module_default.row,
+					children: [
+						item.series === void 0 ? null : /* @__PURE__ */ jsx(Swatch, {
+							s: item.series,
+							kind: item.kind ?? "bar"
+						}),
+						/* @__PURE__ */ jsx("dt", {
+							className: ChartTooltip_module_default.label,
+							children: item.label
+						}),
+						/* @__PURE__ */ jsx("dd", {
+							className: ChartTooltip_module_default.value,
+							children: item.value
+						})
+					]
+				}, i))
+			}),
+			footer ? /* @__PURE__ */ jsx("p", {
+				className: ChartTooltip_module_default.footer,
+				children: footer
+			}) : null
+		]
+	});
+}
+export { ChartTooltip };

package/dist/charts/ChartTooltip/ChartTooltip.module.js

@@ -0,0 +1,12 @@
+import './ChartTooltip.css';
+// src/charts/ChartTooltip/ChartTooltip.module.css
+var ChartTooltip_module_default = {
+	"root": "sti-ChartTooltip-root-23286",
+	"title": "sti-ChartTooltip-title-14254",
+	"list": "sti-ChartTooltip-list-0fff6",
+	"row": "sti-ChartTooltip-row-4c4be",
+	"label": "sti-ChartTooltip-label-162d8",
+	"value": "sti-ChartTooltip-value-aed65",
+	"footer": "sti-ChartTooltip-footer-dba5a"
+};
+export { ChartTooltip_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ChartTooltip, ChartTooltipItem, ChartTooltipProps } from "./ChartTooltip.js";
+export { ChartTooltip, ChartTooltipItem, ChartTooltipProps };

package/dist/charts/ComboChart/ComboChart.css

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

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

@@ -0,0 +1,21 @@
+import { ChartValueFormat } from "../_internal/format.js";
+import { Curve } from "../_internal/shapes.js";
+import { BarSeries, BarsCommonProps } from "../_internal/Bars.js";
+export interface ComboChartProps extends BarsCommonProps {
+  /** Her seri `type: "bar" | "line"` taşır; çizgi serisi `axis: "right"` ile ikinci eksene bağlanır. */
+  series: readonly BarSeries[];
+  /** İkinci (sağ) eksenin ve o eksendeki serilerin değer biçimi; varsayılan `valueFormat`. */
+  rightValueFormat?: ChartValueFormat;
+  /** Çubuk serilerini üst üste dizer. */
+  stacked?: boolean;
+  /** Çizgi serilerinin eğrisi. */
+  curve?: Curve;
+}
+/**
+ * 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.
+ */
+export declare function ComboChart({ className, stacked, series, ...rest }: ComboChartProps): import("react").JSX.Element;
+export type { BarSeries as ComboSeries };