tamga-ui 0.4.4 → 0.5.0

package/dist/components/display.d.ts

@@ -7,7 +7,7 @@ import { type Tone } from "./tone.js";
  *
  * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
-export declare function Descriptions({ items, layout, className, ...rest }: {
+export declare function Descriptions({ items, layout, split, className, ...rest }: {
     items: readonly ({
         term: string;
         value: ReactNode;
@@ -18,58 +18,27 @@ export declare function Descriptions({ items, layout, className, ...rest }: {
      * kartın içinde.
      */
     layout?: "wide" | "compact";
+    /**
+     * Break the list into as many columns as fit. A six-row list at page width leaves the right
+     * half empty; split, it reads as two short lists rather than one long one. Each column keeps
+     * its own label column, so the values still line up. TR: Listeyi sığdığı kadar sütuna böl.
+     * Sayfa genişliğinde altı satırlık bir liste sağ yarıyı boş bırakıyor; bölününce uzun bir
+     * liste değil iki kısa liste okunuyor. Her sütun kendi etiket sütununu koruyor, yani değerler
+     * yine hizalı.
+     */
+    split?: boolean;
     className?: string;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
- * Tek bir sayı, büyük. Sektörde adı "stat" ya da "KPI kartı".
- *
- * `SkeletonKpi` kitte YILLARCA vardı ve yerini tuttuğu bileşen yoktu — bir
- * iskelet, var olmayan bir şeyin yerini tutuyordu. Kitin en tuhaf açığıydı.
- *
- * TIKLANABİLİR OLMASI SONRADAN GELDİ, ve gelmek zorundaydı. İlk hâli yalnız
- * okunuyordu; oysa bir panodaki sayı neredeyse hiçbir zaman salt okunur
- * değildir. Ölçüldü: bir ürün panelinde bu karo iki kez elle yeniden yazılmış,
- * çünkü biri bir EKRAN AÇIYOR ("37 iade bekliyor" → iade listesi), öteki bir
- * FİLTRE UYGULUYOR (aynı listeyi o adıma indiriyor). Kitin karosu ikisini de
- * yapamadığı için iki kopya doğdu ve ikisi birbirine benzemez oldu. Yeteneği
- * eksik bir bileşen, olmayan bir bileşenden daha çok kopya üretiyor.
- *
- * ÜÇ HÂL, VE SEMANTİK ELEMAN HER BİRİNDE FARKLI:
- *
- *   okunur   `<div>`     — sayı bir bilgi
- *   `href`   `<a>`       — sayı bir yere gidiyor
- *   `onClick` `<button>` — sayı bir şeyi değiştiriyor, `pressed` ile açık/kapalı
+ * Tek bir sayı, büyük. Üç hâl, üç ayrı eleman: okunur `<div>`, `href` ile
+ * `<a>`, `onClick` ile `<button>`. Yönlendiren bir karo bir EKRAN açıyor,
+ * `pressed` olan bir FİLTRE uyguluyor; ikisi ayrı sözleşme.
  *
- * Üçünü tek elemanla yapmak (her şey `<div onClick>`) klavyeyle gezilemeyen
- * ve ekran okuyucunun hiç duyurmadığı bir kart üretir.
- *
- * FİZİK YALNIZ TIKLANABİLİR HÂLDE. Kitin 1. yasası (kenar + kaymış gölge,
- * hover'da yükselme, basınca oturma) tıklanan şeyler içindir; okunan bir
- * karonun hover'da oynaması, tıklanabilir olduğu yalanını söyler.
- *
- * Sayı `tabular-nums`: değişen bir sayaç, rakam genişlikleri eşit olmadığı
- * sürece her güncellemede yatay olarak zıplar.
- *
- * `delta` bir yön taşır ama İYİ/KÖTÜ taşımaz — artan bir hata oranı da
- * artıştır. Anlamı `better` veriyor: yükselmesi mi iyi, düşmesi mi.
- *
- * SAYI HER ZAMAN MÜREKKEP RENGİNDE. Bir süre `attention` diye bir bayrak
- * vardı ve sayıyı kritik renge boyuyordu; kaldırıldı. Tek tüketicisinde beş
- * karonun üçü kırmızıydı, ve üç kırmızı hiçbir şeyi öne çıkarmıyor — yalnız
- * paneli alarm hâlinde gösteriyor. Bir sayının kötü olduğunu söylemenin yeri
- * `delta` (yönü ve anlamı olan bir değişim) ya da karonun açtığı ekranın
- * kendisi; karonun rengi değil.
- *
- * `accent` DENENDİ VE KALDIRILDI. Karonun sol kenarında verinin kendi rengini
- * (bir iade adımının rengi) taşıyan ince bir şerit vardı. Tek tüketicisi vardı
- * ve o tüketici reddetti: renk zaten listedeki rozette ve çiplerde duruyordu,
- * kartın kenarında üçüncü kez söylenince aynı bileşen iki ekranda farklı
- * görünüyordu. Tüketicisi olmayan bir prop, `SkeletonKpi`ın yıllarca yaşadığı
- * boşluğun aynısı: duruyor, belgeleniyor, hiçbir şeyin yerini tutmuyor.
+ * Doküman: /docs/kpi
  */
-export declare function Kpi({ label, value, unit, icon, note, delta, better, chart, href, onClick, pressed, linkComponent: Link, className, ...rest }: {
+export declare function Kpi({ label, value, unit, icon, note, delta, better, chart, look, href, onClick, pressed, iconTone, linkComponent: Link, className, ...rest }: {
     label: string;
     value: string | number;
     unit?: string;
@@ -83,12 +52,33 @@ export declare function Kpi({ label, value, unit, icon, note, delta, better, cha
     better?: "up" | "down";
     /** An inline chart, such as a `Sparkline`. TR: Satır içi grafik, `Sparkline` gibi. */
     chart?: ReactNode;
+    /**
+     * `tile` the shape a KPI grid is built from: icon tile on the left, label over the number.
+     * `detail` the taller card, for a number that carries a curve and a change beside it: icon and
+     * label on top, the number and the chart side by side, the delta in a chip underneath. TR:
+     * `tile`, bir KPI ızgarasının kurulduğu biçim: solda ikon karosu, sayının üstünde etiket.
+     * `detail`, yanında bir eğri ve bir değişim taşıyan sayı için daha uzun kart: ikon ve etiket
+     * üstte, sayı ile grafik yan yana, değişim altta bir çipte.
+     */
+    look?: "tile" | "detail";
     /** Where the number leads. Makes the tile a link. TR: Sayının götürdüğü yer. Karoyu bağlantı yapar. */
     href?: string;
     /** What the number toggles. Makes the tile a button. TR: Sayının açıp kapadığı şey. Karoyu düğme yapar. */
     onClick?: () => void;
     /** Whether that toggle is currently on. TR: O anahtarın şu an açık olup olmadığı. */
     pressed?: boolean;
+    /**
+     * The tone the icon box wears. TR: İkon kutusunun giydiği ton.
+     *
+     * It says what KIND of queue this tile counts, not whether the number is
+     * good: a row of four tiles all in the same grey reads as one block, and the
+     * eye has to read every label to tell them apart. Left out, the box stays
+     * transparent. TR: Bu karonun NE TÜR bir kuyruğu saydığını söylüyor, sayının
+     * iyi olup olmadığını değil: aynı gride duran dört karo tek bir blok gibi
+     * okunuyor ve göz ayırt etmek için her etiketi okumak zorunda kalıyor.
+     * Verilmezse kutu şeffaf kalıyor.
+     */
+    iconTone?: Tone;
     /** The router's link, so the tile does not force a full page load. TR: Yönlendiricinin bağlantısı, karo tam sayfa yüklemeye zorlamasın diye. */
     linkComponent?: LinkComponent;
     className?: string;
@@ -96,16 +86,12 @@ export declare function Kpi({ label, value, unit, icon, note, delta, better, cha
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
- * KPI karolarının ızgarası.
+ * KPI karolarının ızgarası. Sütun sayısını KAP veriyor: karo 210 pikselin
+ * altına inmiyor, sığmayan alt satıra geçiyor. Sayılan bir sütun sayısı bir
+ * süre buradaydı ve kabı değil EKRANI ölçüyordu · dar bir sütunun içinde dört
+ * karo açıp sayıları kırpıyordu.
  *
- * NEDEN AYRI BİR BİLEŞEN: karoların dizilişi her ekranda elle yazılıyordu
- * (`grid gap-4 sm:grid-cols-2 xl:grid-cols-5`) ve ekrandan ekrana tutmuyordu —
- * biri dörtlü, öteki beşli, bir üçüncüsü boşluğu 3 veriyordu. Izgara karonun
- * kendi işi değil ama karo KÜMESİNİN işi, ve tek yerde durunca hepsi tutuyor.
- *
- * SÜTUN SAYISI VERİLMİYOR, SAYILIYOR: kaç karo varsa o kadar sütun (en çok
- * altı). Elle verilen bir sütun sayısı, karo eklenince yalnız o ekranda
- * güncelleniyor ve tek başına kalan bir karo tam satırı kaplıyor.
+ * Doküman: /docs/kpi
  */
 export declare function KpiGrid({ children, className, ...rest }: {
     children: ReactNode;
@@ -113,19 +99,21 @@ export declare function KpiGrid({ children, className, ...rest }: {
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
- * Kod bloğu, kopyalanabilir.
- *
- * Bir panelde bu her zaman aynı üç şeydir: API anahtarı, webhook adresi,
- * kurulum komutu. Üçünde de kullanıcının yaptığı tek şey KOPYALAMAK — o yüzden
- * kopyalama düğmesi bir seçenek değil, bileşenin kendisi.
+ * Kod bloğu, kopyalanabilir. Kopyalama panosu her yerde çalışmıyor (HTTPS
+ * olmayan kaynak, izin verilmemiş); başarısızlık SESSİZ olmamalı, yoksa
+ * kullanıcı kopyalandığını sanıp boş yapıştırıyor.
  *
- * Kopyalama panosu her yerde çalışmaz (HTTPS olmayan bir kaynakta, ya da
- * izin verilmemişse). Başarısızlık SESSİZ olmamalı: düğme metni değişmezse
- * kullanıcı kopyalandığını sanır ve boş yapıştırır.
+ * Doküman: /docs/code
  */
-export declare function Code({ children, labels, className, ...rest }: {
+export declare function Code({ children, filename, labels, className, ...rest }: {
     /** The text to be copied itself. TR: Kopyalanacak metnin kendisi. */
     children: string;
+    /**
+     * The name on the strip: "webhook.js", "docker-compose.yml". Left out, the strip still stands
+     * and holds the copy button. TR: Şeritteki ad. Verilmezse şerit yine duruyor ve kopyala
+     * düğmesini taşıyor.
+     */
+    filename?: string;
     labels: {
         copy: string;
         copied: string;
@@ -141,23 +129,56 @@ export declare function Code({ children, labels, className, ...rest }: {
  * `<kbd>` KULLANILIYOR, `<span>` değil: bir ekran okuyucu için "Ctrl" ile
  * "bir tuşa basılacak" arasındaki fark bu elemanda yaşıyor.
  */
-export declare function Kbd({ children, className }: {
+export declare function Kbd({ children, inline, className, }: {
     children: ReactNode;
+    /**
+     * The quieter key, for a row in a shortcut list. Twenty layered boxes down a list turn it into
+     * a keypad. TR: Daha sessiz tuş, bir kısayol listesinin satırı için. Bir listede yirmi katmanlı
+     * kutu, listeyi bir tuş takımına çeviriyor.
+     */
+    inline?: boolean;
     className?: string;
 }): import("react").JSX.Element;
 /**
- * Sayaç rozeti — bir ikonun köşesindeki rakam.
+ * Sayaç rozeti: bir ikonun köşesindeki SAYI (`StatusChip` bir DURUM taşır).
+ * `max` üstünde "+" ile kesiliyor, yoksa dört hane kutuyu şişirip altındaki
+ * ikonu eziyor. Sıfır gösterilmiyor.
  *
- * `StatusChip` bir DURUM taşır ("Yayında"), bu bir SAYI taşır ("3"). İkisi
- * ayrı bileşen çünkü ayrı şeyler: durum okunur, sayı sayılır.
+ * Doküman: /docs/badge
+ */
+/**
+ * Etiket rozeti · bir özelliğin durumu: BETA, YENİ, PRO.
  *
- * `max` üstünde "+" ile kesiliyor. Kesilmezse dört haneli bir sayı rozetin
- * kutusunu şişirir ve altındaki ikonu ezer.
+ * SAYACIN (`Badge`) KARDEŞİ AMA AYNI ŞEY DEĞİL: sayaç bir MİKTAR taşıyor ve
+ * okunduktan sonra kayboluyor; etiket bir DURUM taşıyor ve yerinde duruyor.
+ * İkisini tek bileşene koymak, "sayı verilmemişse etiket" gibi bir kural
+ * demekti.
  *
- * Sıfır GÖSTERİLMEZ: "0 bildirim" bir bilgi değil, gürültüdür.
+ * Gerekçe: docs/gerekce/06-isaret-ve-ton.md
  */
-export declare function Badge({ count, max, tone, label, className, children, ...rest }: {
-    count: number;
+export declare function Tag({ children, look, className, ...rest }: {
+    children: ReactNode;
+    /**
+     * `dashed` not real yet (beta, coming), `solid` the loudest one, for what is new right now,
+     * `outline` the quiet standing fact (a plan name, a tier). TR: `dashed` henüz gerçek değil
+     * (beta, yakında), `solid` en yükseği · şu anda yeni olan için, `outline` ise sessiz duran
+     * gerçek (bir plan adı, bir kademe).
+     */
+    look?: "dashed" | "solid" | "outline";
+    className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
+}): import("react").JSX.Element;
+export declare function Badge({ count, max, tone, dot, label, className, children, ...rest }: {
+    /** The number. Not needed when `dot` is set. TR: Sayı. `dot` verildiğinde gerekmiyor. */
+    count?: number;
+    /**
+     * Show a mark with NO number. Use it when the answer is "there is something new" rather than
+     * "there are four": a number nobody will act on is a number nobody reads. TR: Sayısız bir
+     * işaret göster. Cevap &quot;dört tane var&quot; değil &quot;yeni bir şey var&quot; olduğunda:
+     * kimsenin üzerine hareket etmeyeceği bir sayı, kimsenin okumadığı bir sayıdır.
+     */
+    dot?: boolean;
     max?: number;
     tone?: Tone;
     /**
@@ -175,34 +196,19 @@ export declare function Badge({ count, max, tone, label, className, children, ..
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
- * Bir adım: kimliği ve çevrilmiş etiketi.
- *
- * KİMLİK ETİKETTEN AYRI, ve bu bir kolaylık değil bir düzeltme. Adım listesi
- * bir zamanlar düz `string[]` idi: kimlik yoktu, React anahtarı ÇEVRİLMİŞ
- * ETİKETTİ, ve iki adım aynı etiketi taşıdığında ya da dil değiştiğinde
- * düğümler yeniden kuruluyordu. Kitin kendi kuralı bunu zaten söylüyor:
- * bir öğenin adı etiketi değildir, çünkü etiket çevrilir ve değişir.
- *
- * `key` ve `label` DIŞINDAKİ her şey o adımın `<li>`sine iniyor, yani bir
- * adım testin ya da stilin ihtiyaç duyduğu kancayı taşıyabiliyor. Kardeşi
- * `Segmented` ile aynı sözleşme; ikisinin farklı olması bir asimetriydi.
+ * Bir adım: kimliği ve çevrilmiş etiketi. Kimlik etiketten AYRI, çünkü etiket
+ * çevriliyor; React anahtarı olarak kullanılırsa dil değişince düğümler
+ * yeniden kuruluyor. `key`/`label` dışındaki her şey adımın `<li>`sine iniyor.
  */
 export type Step = {
     key: string;
     label: string;
 } & Record<string, unknown>;
 /**
- * Adım göstergesi.
+ * Adım göstergesi. `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor;
+ * `<div>`lerle ekran okuyucu "öğe 2 / 3" diyemiyor.
  *
- * Bir sihirbazın adım göstergesi yoksa kullanıcı kaçıncı adımda olduğunu ve
- * kaç adım kaldığını bilmiyor; sihirbazın varlık sebebi tam olarak budur.
- *
- * `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor. Ekran okuyucu
- * "3 öğeli liste, öğe 2" der; `<div>`'lerle bu bilgi kaybolur.
- *
- * Tamamlanan adım bir onay işareti alıyor, aktif olan aksan kenarı, gelecek
- * olan sönük. Üç durum üç ayrı görsel dil — çünkü "neredeyim" ve "ne kaldı"
- * ayrı iki soru.
+ * Doküman: /docs/steps
  */
 export declare function Steps({ steps, current, className, ...rest }: {
     /**
@@ -218,4 +224,23 @@ export declare function Steps({ steps, current, className, ...rest }: {
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
+/**
+ * Rise — sayı sıfırdan hedefe YÜKSELEREK geliyor.
+ *
+ * Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
+ */
+export declare function Rise({ value, format, duration, className, ...rest }: {
+    value: number;
+    /**
+     * How the number is written on the way up, not only at the end: the kit knows no currency and
+     * no thousands separator. TR: Sayının yolda nasıl yazıldığı, yalnız sonunda değil: kit ne para
+     * birimi bilir ne binlik ayracı.
+     */
+    format?: (n: number) => string;
+    /** How long the climb takes, in ms. TR: Tırmanışın süresi, ms. */
+    duration?: number;
+    className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
+}): import("react").JSX.Element;
 //# sourceMappingURL=display.d.ts.map

package/dist/components/display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/components/display.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/components/display.tsx"],"names":[],"mappings":"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"}

package/dist/components/display.js

@@ -1,88 +1,51 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { Children, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
 import { PlainLink as PlainAnchor } from "./link.js";
-import { Check, Customize } from "./icons.js";
+import { Check, Copy } from "./icons.js";
 import { toneOf } from "./tone.js";
-/* ------------------------------------------------------------------ *
- * Okunacak şeyler: anahtar/değer, sayı, kod, adım, sayaç, tuş.
- *
- * Beşi de üründe HAM yazılmış hâlde duruyordu — `<dl>` beş dosyada, `<code>`
- * sekiz dosyada, KPI karosu kendi 28 satırında. Yani tasarımları zaten
- * verilmişti; eksik olan tek şey, o tasarımın bir kez yazılmış olmasıydı.
- * ------------------------------------------------------------------ */
+/* Okunacak şeyler: anahtar/değer, sayı, kod, adım, sayaç, tuş.
+   Gerekçeler: docs/gerekce/02-veri-ve-liste.md */
 /**
  * Anahtar/değer listesi — detay sayfalarının omurgası.
  *
  * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
-export function Descriptions({ items, layout = "wide", className, ...rest }) {
-    return (_jsx("dl", { ...dataProps(rest), className: cn("grid", layout === "wide"
-            ? "gap-x-8 gap-y-4 sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)]"
-            : "gap-x-4 gap-y-2.5 sm:grid-cols-[minmax(0,8rem)_minmax(0,1fr)]", className), children: items.map(({ term, value: deger, mono, ...rest }) => (_createElement("div", { ...rest, key: term, className: "contents" },
+export function Descriptions({ items, layout = "wide", split = false, className, ...rest }) {
+    return (_jsx("dl", { ...dataProps(rest), className: cn("grid", split && "tamga-desc-split", layout === "wide"
+            ? "gap-x-8 sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)]"
+            : "gap-x-4 sm:grid-cols-[minmax(0,8rem)_minmax(0,1fr)]", className), children: items.map(({ term, value: deger, mono, ...rest }) => (_createElement("div", { ...rest, key: term, className: "col-span-full grid grid-cols-subgrid items-baseline gap-y-1 border-b border-dashed border-line py-3 last:border-b-0" },
             _jsx("dt", { className: "text-small text-ink-faint", children: term }),
-            _jsx("dd", { className: cn("min-w-0 text-body text-ink", mono && "font-mono tabular-nums"), children: deger })))) }));
+            _jsx("dd", { className: cn("min-w-0 text-body font-semibold text-ink", mono && "font-mono tabular-nums"), children: deger })))) }));
 }
 /**
- * Tek bir sayı, büyük. Sektörde adı "stat" ya da "KPI kartı".
- *
- * `SkeletonKpi` kitte YILLARCA vardı ve yerini tuttuğu bileşen yoktu — bir
- * iskelet, var olmayan bir şeyin yerini tutuyordu. Kitin en tuhaf açığıydı.
- *
- * TIKLANABİLİR OLMASI SONRADAN GELDİ, ve gelmek zorundaydı. İlk hâli yalnız
- * okunuyordu; oysa bir panodaki sayı neredeyse hiçbir zaman salt okunur
- * değildir. Ölçüldü: bir ürün panelinde bu karo iki kez elle yeniden yazılmış,
- * çünkü biri bir EKRAN AÇIYOR ("37 iade bekliyor" → iade listesi), öteki bir
- * FİLTRE UYGULUYOR (aynı listeyi o adıma indiriyor). Kitin karosu ikisini de
- * yapamadığı için iki kopya doğdu ve ikisi birbirine benzemez oldu. Yeteneği
- * eksik bir bileşen, olmayan bir bileşenden daha çok kopya üretiyor.
- *
- * ÜÇ HÂL, VE SEMANTİK ELEMAN HER BİRİNDE FARKLI:
- *
- *   okunur   `<div>`     — sayı bir bilgi
- *   `href`   `<a>`       — sayı bir yere gidiyor
- *   `onClick` `<button>` — sayı bir şeyi değiştiriyor, `pressed` ile açık/kapalı
- *
- * Üçünü tek elemanla yapmak (her şey `<div onClick>`) klavyeyle gezilemeyen
- * ve ekran okuyucunun hiç duyurmadığı bir kart üretir.
+ * Tek bir sayı, büyük. Üç hâl, üç ayrı eleman: okunur `<div>`, `href` ile
+ * `<a>`, `onClick` ile `<button>`. Yönlendiren bir karo bir EKRAN açıyor,
+ * `pressed` olan bir FİLTRE uyguluyor; ikisi ayrı sözleşme.
  *
- * FİZİK YALNIZ TIKLANABİLİR HÂLDE. Kitin 1. yasası (kenar + kaymış gölge,
- * hover'da yükselme, basınca oturma) tıklanan şeyler içindir; okunan bir
- * karonun hover'da oynaması, tıklanabilir olduğu yalanını söyler.
- *
- * Sayı `tabular-nums`: değişen bir sayaç, rakam genişlikleri eşit olmadığı
- * sürece her güncellemede yatay olarak zıplar.
- *
- * `delta` bir yön taşır ama İYİ/KÖTÜ taşımaz — artan bir hata oranı da
- * artıştır. Anlamı `better` veriyor: yükselmesi mi iyi, düşmesi mi.
- *
- * SAYI HER ZAMAN MÜREKKEP RENGİNDE. Bir süre `attention` diye bir bayrak
- * vardı ve sayıyı kritik renge boyuyordu; kaldırıldı. Tek tüketicisinde beş
- * karonun üçü kırmızıydı, ve üç kırmızı hiçbir şeyi öne çıkarmıyor — yalnız
- * paneli alarm hâlinde gösteriyor. Bir sayının kötü olduğunu söylemenin yeri
- * `delta` (yönü ve anlamı olan bir değişim) ya da karonun açtığı ekranın
- * kendisi; karonun rengi değil.
- *
- * `accent` DENENDİ VE KALDIRILDI. Karonun sol kenarında verinin kendi rengini
- * (bir iade adımının rengi) taşıyan ince bir şerit vardı. Tek tüketicisi vardı
- * ve o tüketici reddetti: renk zaten listedeki rozette ve çiplerde duruyordu,
- * kartın kenarında üçüncü kez söylenince aynı bileşen iki ekranda farklı
- * görünüyordu. Tüketicisi olmayan bir prop, `SkeletonKpi`ın yıllarca yaşadığı
- * boşluğun aynısı: duruyor, belgeleniyor, hiçbir şeyin yerini tutmuyor.
+ * Doküman: /docs/kpi
  */
-export function Kpi({ label, value, unit, icon, note, delta, better = "up", chart, href, onClick, pressed, linkComponent: Link = PlainAnchor, className, ...rest }) {
+export function Kpi({ label, value, unit, icon, note, delta, better = "up", chart, look = "tile", href, onClick, pressed, iconTone, linkComponent: Link = PlainAnchor, className, ...rest }) {
     const tone = delta === undefined || delta === 0
         ? "neutral"
         : (delta > 0) === (better === "up")
             ? "positive"
             : "danger";
     const c = toneOf(tone);
-    const govde = (_jsxs(_Fragment, { children: [icon ? (_jsx("span", { ...dataProps(rest), className: "tamga-kpi-tile", "aria-hidden": true, children: _jsx(Icon, { icon: icon, size: "base" }) })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "tamga-label", children: label }), _jsxs("span", { className: "mt-1 flex items-end gap-2", children: [_jsx("span", { className: "font-mono text-display-sm leading-none font-bold tabular-nums text-ink", children: value }), unit ? (_jsx("span", { className: "font-mono text-small font-medium text-ink-faint", children: unit })) : null, delta !== undefined ? (_jsxs("span", { className: "ml-auto font-mono text-small tabular-nums", style: { color: c.mark }, children: [delta > 0 ? "+" : "", delta, "%"] })) : null] }), note ? _jsx("span", { className: "mt-1 text-caption text-ink-faint", children: note }) : null, chart ? _jsx("span", { className: "mt-4 block", children: chart }) : null] })] }));
-    const sinif = cn("tamga-kpi", (href || onClick) && "tamga-kpi-live", className);
+    const karo = icon ? (_jsx("span", { ...dataProps(rest), className: "tamga-kpi-tile", style: iconTone ? { background: toneOf(iconTone).bg, color: toneOf(iconTone).fg } : undefined, "aria-hidden": true, children: _jsx(Icon, { icon: icon, size: look === "detail" ? "sm" : "base" }) })) : null;
+    /* DEĞER MONO DEĞİL DISPLAY YÜZÜNDE, ve ağırlığı en üst basamakta. Mono, bir
+       SÜTUNDA okunan sayılar için: orada rakam genişliğinin eşit olması hizayı
+       kuruyor. Bir KPI karosunda sütun yok, tek bir sayı var ve işi okunmak
+       değil ÇARPMAK. */
+    const sayi = (_jsx("span", { className: cn("font-display leading-none font-extrabold tabular-nums text-ink", look === "detail" ? "text-display" : "text-display-sm"), children: value }));
+    const birim = unit ? (_jsx("span", { className: "font-mono text-small font-medium text-ink-faint", children: unit })) : null;
+    const degisim = delta !== undefined ? (_jsxs("span", { className: "tamga-kpi-delta", style: { background: c.bg, color: c.fg, borderColor: c.fg }, children: [delta > 0 ? "+" : "", delta, "%"] })) : null;
+    const govde = look === "detail" ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "tamga-kpi-ust", children: [karo, label] }), _jsxs("span", { className: "tamga-kpi-orta", children: [_jsxs("span", { className: "flex items-end gap-2", children: [sayi, birim] }), chart ? _jsx("span", { className: "shrink-0", children: chart }) : null] }), note ? _jsx("span", { className: "text-caption text-ink-faint", children: note }) : null, degisim] })) : (_jsxs(_Fragment, { children: [karo, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "tamga-kpi-etiket", children: label }), _jsxs("span", { className: "flex items-end gap-2", children: [sayi, birim, degisim ? _jsx("span", { className: "ml-auto", children: degisim }) : null] }), note ? _jsx("span", { className: "text-caption text-ink-faint", children: note }) : null, chart ? _jsx("span", { className: "mt-3 block", children: chart }) : null] })] }));
+    const sinif = cn("tamga-kpi", look === "detail" && "tamga-kpi-detay", (href || onClick) && "tamga-kpi-live", className);
     if (href) {
         return (_jsx(Link, { href: href, className: sinif, children: govde }));
     }
@@ -92,33 +55,24 @@ export function Kpi({ label, value, unit, icon, note, delta, better = "up", char
     return _jsx("div", { className: sinif, children: govde });
 }
 /**
- * KPI karolarının ızgarası.
- *
- * NEDEN AYRI BİR BİLEŞEN: karoların dizilişi her ekranda elle yazılıyordu
- * (`grid gap-4 sm:grid-cols-2 xl:grid-cols-5`) ve ekrandan ekrana tutmuyordu —
- * biri dörtlü, öteki beşli, bir üçüncüsü boşluğu 3 veriyordu. Izgara karonun
- * kendi işi değil ama karo KÜMESİNİN işi, ve tek yerde durunca hepsi tutuyor.
+ * KPI karolarının ızgarası. Sütun sayısını KAP veriyor: karo 210 pikselin
+ * altına inmiyor, sığmayan alt satıra geçiyor. Sayılan bir sütun sayısı bir
+ * süre buradaydı ve kabı değil EKRANI ölçüyordu · dar bir sütunun içinde dört
+ * karo açıp sayıları kırpıyordu.
  *
- * SÜTUN SAYISI VERİLMİYOR, SAYILIYOR: kaç karo varsa o kadar sütun (en çok
- * altı). Elle verilen bir sütun sayısı, karo eklenince yalnız o ekranda
- * güncelleniyor ve tek başına kalan bir karo tam satırı kaplıyor.
+ * Doküman: /docs/kpi
  */
 export function KpiGrid({ children, className, ...rest }) {
-    const sayi = Math.min(Children.count(children), 6);
-    return (_jsx("div", { ...dataProps(rest), className: cn("tamga-kpi-grid", className), style: { "--tamga-kpi-cols": sayi }, children: children }));
+    return (_jsx("div", { ...dataProps(rest), className: cn("tamga-kpi-grid", className), children: children }));
 }
 /**
- * Kod bloğu, kopyalanabilir.
+ * Kod bloğu, kopyalanabilir. Kopyalama panosu her yerde çalışmıyor (HTTPS
+ * olmayan kaynak, izin verilmemiş); başarısızlık SESSİZ olmamalı, yoksa
+ * kullanıcı kopyalandığını sanıp boş yapıştırıyor.
  *
- * Bir panelde bu her zaman aynı üç şeydir: API anahtarı, webhook adresi,
- * kurulum komutu. Üçünde de kullanıcının yaptığı tek şey KOPYALAMAK — o yüzden
- * kopyalama düğmesi bir seçenek değil, bileşenin kendisi.
- *
- * Kopyalama panosu her yerde çalışmaz (HTTPS olmayan bir kaynakta, ya da
- * izin verilmemişse). Başarısızlık SESSİZ olmamalı: düğme metni değişmezse
- * kullanıcı kopyalandığını sanır ve boş yapıştırır.
+ * Doküman: /docs/code
  */
-export function Code({ children, labels, className, ...rest }) {
+export function Code({ children, filename, labels, className, ...rest }) {
     const [state, setState] = useState("idle");
     const timer = useRef(undefined);
     /* Zamanlayıcı bir ref'te tutuluyor ve her tıklamada sıfırlanıyor.
@@ -139,7 +93,8 @@ export function Code({ children, labels, className, ...rest }) {
         window.clearTimeout(timer.current);
         timer.current = window.setTimeout(() => setState("idle"), 1600);
     }
-    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-code-block tamga-surface relative overflow-hidden", className), children: [_jsx("pre", { className: "tamga-scroll-x px-4 py-3 font-mono text-caption text-ink", children: children }), _jsxs("button", { type: "button", onClick: copy, className: "tamga-mini-btn absolute top-2 right-2 w-auto gap-1 px-2", "aria-label": labels.copy, children: [_jsx(Icon, { icon: state === "done" ? Check : Customize, size: "xs" }), _jsx("span", { className: "text-caption", children: state === "done" ? labels.copied : state === "failed" ? labels.failed : labels.copy })] })] }));
+    const satirlar = children.replace(/\n$/, "").split("\n");
+    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-code", className), children: [_jsxs("div", { className: "tamga-code-bar", children: [_jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-caption", children: filename }), _jsxs("button", { type: "button", onClick: copy, className: "tamga-code-copy", "aria-label": labels.copy, children: [_jsx(Icon, { icon: state === "done" ? Check : Copy, size: "xs", weight: "bold" }), state === "done" ? labels.copied : state === "failed" ? labels.failed : labels.copy] })] }), _jsx("pre", { className: "tamga-code-pre", children: satirlar.map((satir, i) => (_jsxs("span", { className: "tamga-code-line", children: [_jsx("span", { className: "tamga-code-no", "aria-hidden": true, children: i + 1 }), _jsx("span", { className: "tamga-code-text", children: satir })] }, i))) })] }));
 }
 /**
  * Klavye tuşu.
@@ -147,42 +102,47 @@ export function Code({ children, labels, className, ...rest }) {
  * `<kbd>` KULLANILIYOR, `<span>` değil: bir ekran okuyucu için "Ctrl" ile
  * "bir tuşa basılacak" arasındaki fark bu elemanda yaşıyor.
  */
-export function Kbd({ children, className }) {
-    return (_jsx("kbd", { className: cn("tamga-surface inline-flex h-5 min-w-5 items-center justify-center px-1.5 font-mono text-caption text-ink-soft", className), children: children }));
+export function Kbd({ children, inline = false, className, }) {
+    return _jsx("kbd", { className: cn("tamga-kbd", inline && "tamga-kbd-inline", className), children: children });
 }
 /**
- * Sayaç rozeti — bir ikonun köşesindeki rakam.
+ * Sayaç rozeti: bir ikonun köşesindeki SAYI (`StatusChip` bir DURUM taşır).
+ * `max` üstünde "+" ile kesiliyor, yoksa dört hane kutuyu şişirip altındaki
+ * ikonu eziyor. Sıfır gösterilmiyor.
  *
- * `StatusChip` bir DURUM taşır ("Yayında"), bu bir SAYI taşır ("3"). İkisi
- * ayrı bileşen çünkü ayrı şeyler: durum okunur, sayı sayılır.
+ * Doküman: /docs/badge
+ */
+/**
+ * Etiket rozeti · bir özelliğin durumu: BETA, YENİ, PRO.
  *
- * `max` üstünde "+" ile kesiliyor. Kesilmezse dört haneli bir sayı rozetin
- * kutusunu şişirir ve altındaki ikonu ezer.
+ * SAYACIN (`Badge`) KARDEŞİ AMA AYNI ŞEY DEĞİL: sayaç bir MİKTAR taşıyor ve
+ * okunduktan sonra kayboluyor; etiket bir DURUM taşıyor ve yerinde duruyor.
+ * İkisini tek bileşene koymak, "sayı verilmemişse etiket" gibi bir kural
+ * demekti.
  *
- * Sıfır GÖSTERİLMEZ: "0 bildirim" bir bilgi değil, gürültüdür.
+ * Gerekçe: docs/gerekce/06-isaret-ve-ton.md
  */
-export function Badge({ count, max = 99, tone = "danger", label, className, children, ...rest }) {
-    if (count <= 0)
+export function Tag({ children, look = "outline", className, ...rest }) {
+    return (_jsx("span", { ...dataProps(rest), className: cn("tamga-tag", look === "dashed" && "tamga-tag-dashed", look === "solid" && "tamga-tag-solid", look === "outline" && "tamga-tag-outline", className), children: children }));
+}
+export function Badge({ count, max = 99, tone = "danger", dot = false, label, className, children, ...rest }) {
+    if (!dot && (count ?? 0) <= 0)
         return _jsx(_Fragment, { children: children });
     const c = toneOf(tone);
-    const shown = count > max ? `${max}+` : String(count);
-    const dot = (_jsxs("span", { ...dataProps(rest), className: "inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 font-mono text-micro leading-none font-semibold tabular-nums", style: { background: c.mark, color: "var(--color-page)" }, children: [_jsx("span", { "aria-hidden": true, children: shown }), _jsxs("span", { className: "sr-only", children: [count, " ", label] })] }));
+    const shown = (count ?? 0) > max ? `${max}+` : String(count ?? 0);
+    const isaret = dot ? (_jsx("span", { ...dataProps(rest), className: "tamga-count-dot", style: { background: c.mark }, role: "status", "aria-label": label })) : (_jsxs("span", { ...dataProps(rest), className: "tamga-count tabular-nums", style: { background: c.bg, color: c.fg, borderColor: c.fg }, children: [_jsx("span", { "aria-hidden": true, children: shown }), _jsxs("span", { className: "sr-only", children: [count, " ", label] })] }));
     if (!children)
-        return dot;
-    return (_jsxs("span", { className: cn("relative inline-flex", className), children: [children, _jsx("span", { className: "absolute -top-1 -right-1", children: dot })] }));
+        return isaret;
+    /* Rozet, üstüne oturduğu şeyin KARDEŞİ: çocuğu yapmak mümkün değil, çünkü
+       `children` herhangi bir eleman olabilir. Hover'da onunla birlikte gitmesini
+       `.tamga-count-yuva` sağlıyor (kit.css, düğmenin kaymalarıyla aynı). */
+    return (_jsxs("span", { className: cn("tamga-badge-wrap relative inline-flex", className), children: [children, _jsx("span", { className: "tamga-count-yuva", children: isaret })] }));
 }
 /**
- * Adım göstergesi.
- *
- * Bir sihirbazın adım göstergesi yoksa kullanıcı kaçıncı adımda olduğunu ve
- * kaç adım kaldığını bilmiyor; sihirbazın varlık sebebi tam olarak budur.
- *
- * `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor. Ekran okuyucu
- * "3 öğeli liste, öğe 2" der; `<div>`'lerle bu bilgi kaybolur.
+ * Adım göstergesi. `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor;
+ * `<div>`lerle ekran okuyucu "öğe 2 / 3" diyemiyor.
  *
- * Tamamlanan adım bir onay işareti alıyor, aktif olan aksan kenarı, gelecek
- * olan sönük. Üç durum üç ayrı görsel dil — çünkü "neredeyim" ve "ne kaldı"
- * ayrı iki soru.
+ * Doküman: /docs/steps
  */
 export function Steps({ steps, current, className, ...rest }) {
     return (_jsx("ol", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-x-3 gap-y-2", className), children: steps.map(({ key, label, ...adimRest }, i) => {
@@ -191,3 +151,40 @@ export function Steps({ steps, current, className, ...rest }) {
             return (_jsxs("li", { ...adimRest, className: "flex items-center gap-3", children: [_jsx("span", { className: "tamga-step-mark font-mono text-caption", "data-state": done ? "done" : active ? "current" : "todo", "aria-hidden": true, children: done ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold" }) : i + 1 }), _jsx("span", { className: cn("text-small", active ? "font-medium text-ink" : "text-ink-faint"), "aria-current": active ? "step" : undefined, children: label }), i < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "tamga-step-line", "data-done": done ? "true" : "false" })) : null] }, key));
         }) }));
 }
+/**
+ * Rise — sayı sıfırdan hedefe YÜKSELEREK geliyor.
+ *
+ * Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
+ */
+export function Rise({ value, format = (n) => String(Math.round(n)), duration = 900, className, ...rest }) {
+    const [n, setN] = useState(value);
+    const kare = useRef(null);
+    useEffect(() => {
+        /* AZALTILMIŞ HAREKETTE TIRMANIŞ YOK: sayı hedefinde beliriyor. Hareket
+           duyarlılığı olan biri için değişen bir sayı, kayan bir sayfadan daha
+           yorucu · göz onu okumaya çalışıyor. */
+        const durgun = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (durgun || duration <= 0) {
+            setN(value);
+            return;
+        }
+        const bas = performance.now();
+        const adim = (t) => {
+            const o = Math.min(1, (t - bas) / duration);
+            /* Yavaşlayarak varıyor (`1-(1-o)³`): sabit hızla artan bir sayaç sayı
+               durduğunda "kesildi" gibi duruyor. */
+            setN(value * (1 - (1 - o) ** 3));
+            if (o < 1)
+                kare.current = requestAnimationFrame(adim);
+        };
+        kare.current = requestAnimationFrame(adim);
+        return () => {
+            if (kare.current !== null)
+                cancelAnimationFrame(kare.current);
+        };
+    }, [value, duration]);
+    return (_jsx("span", { ...dataProps(rest), 
+        /* Sayı DEĞİŞİRKEN duyurulmuyor: `aria-live` olsaydı ekran okuyucu her
+           karede yeni bir sayı okurdu. Son değer zaten metinde. */
+        className: cn("font-display leading-none font-black tabular-nums text-ink", className), children: format(n) }));
+}