tamga-ui 0.4.4 → 0.5.0

package/dist/components/avatar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
+import { toneOf } from "./tone.js";
 function initials(name, count) {
     return name
         .split(" ")
@@ -10,39 +11,54 @@ function initials(name, count) {
         .join("");
 }
 /** Square, monochrome. Identity is text — color is reserved for health. */
-export function Avatar({ name, size = 32, src, bare = false, letters = 2, ...rest }) {
+export function Avatar({ name, size = 32, src, bare = false, look = "solid", letters = 2, status, ...rest }) {
+    /* KÖŞE ÖLÇÜYLE BÜYÜYOR (4 · 5 · 7 · 8): 24 pikselde 8'lik bir köşe kareyi
+       daire yapıyor, 56'da 4'lük bir köşe onu keskin bırakıyor. */
+    const kose = size <= 28 ? "var(--radius-chip)" : size <= 36 ? "calc(var(--radius) - 1px)" : size <= 44 ? "var(--radius-btn)" : "var(--radius-card)";
+    /* TABAN YALNIZ BÜYÜKLERDE: 24 piksellik bir karo bir satırın içinde duruyor
+       ve orada bir taban, satırı kalabalıklaştırıyor. */
+    const taban = size >= 56 ? "4px 4px 0 var(--color-edge-strong)" : size >= 40 ? "3px 3px 0 var(--color-edge-strong)" : undefined;
     const box = {
         width: size,
         height: size,
+        borderRadius: bare ? undefined : kose,
+        boxShadow: bare ? undefined : taban,
         /* 0.42, not 0.34: at the old ratio a 26px avatar produced 9px initials, which read as a
            smudge next to a 16px icon glyph. Initials ARE the glyph when an avatar sits in a control. */
         fontSize: Math.max(11, Math.round(size * 0.42)),
     };
+    /* DURUM İŞARETİ KARONUN DIŞINA TAŞIYOR, ve bu yüzden saran bir kutu gerekiyor:
+       karonun kendisi `overflow`u kırpabilen bir `img` olabiliyor. */
+    if (status) {
+        const t = toneOf(status);
+        const mark = Math.max(8, Math.round(size * 0.3));
+        return (_jsxs("span", { className: "relative inline-flex shrink-0", children: [_jsx(Avatar, { name: name, size: size, src: src, bare: bare, look: look, letters: letters, ...rest }), _jsx("span", { className: "absolute rounded-[var(--radius-mark)]", style: {
+                        right: -mark / 3,
+                        bottom: -mark / 3,
+                        width: mark,
+                        height: mark,
+                        background: t.mark,
+                        /* Halka zemin renginde: onsuz işaret karonun kenarına yapışıp
+                           kenarın bir parçası gibi okunuyor. */
+                        boxShadow: "0 0 0 2px var(--color-shell)",
+                    }, "aria-hidden": true })] }));
+    }
     if (src) {
-        return (_jsx("img", { src: src, alt: name, width: size, height: size, className: cn("shrink-0 object-cover", !bare && "rounded-[var(--radius-mark)] border border-edge"), style: box }));
+        return (_jsx("img", { src: src, alt: name, width: size, height: size, className: cn("shrink-0 object-cover", !bare && "tamga-avatar"), style: box }));
     }
-    return (_jsx("span", { ...dataProps(rest), className: cn("inline-flex shrink-0 items-center justify-center font-semibold text-ink", !bare && "rounded-[var(--radius-mark)] border border-edge bg-hover"), style: box, "aria-hidden": true, children: initials(name, letters) }));
+    return (_jsx("span", { ...dataProps(rest), className: cn(
+        /* ÇIPLAK AVATAR RENGİNİ DE AĞIRLIĞINI DA MİRAS ALIYOR, ve önceden
+           `text-ink font-semibold` basıyordu. Çıplak olmasının anlamı kendi
+           zemini olmaması · yani üstünde durduğu şeyin rengini bilmiyor, ve
+           mürekkebi sabitlemek onu renkli bir zeminde okunmaz yapıyordu. */
+        "inline-flex shrink-0 items-center justify-center", !bare && "tamga-avatar font-display font-extrabold"), "data-look": bare ? undefined : look, style: box, "aria-hidden": true, children: initials(name, letters) }));
 }
 /**
- * Üst üste binen ekip.
- *
- * İKİ ŞEY AYRI AYRI YANLIŞTI ve ikisi de aynı sonucu veriyordu: karolar
- * birbirine yapışıp tek bir karışık blok olarak okunuyordu.
- *
- * Birincisi ÖRTÜŞME SABİTTİ — her boyutta 8px. Bir 24px karoda bu üçte bir
- * demek, ve iki baş harften biri kapanıyor. Şimdi boyuna oranlı: dörtte bir,
- * yani karo büyüdükçe örtüşme de büyüyor ama oran sabit kalıyor.
- *
- * İkincisi AYIRICI HALKA YOKTU. Avatarın kendi 1px kenarı yeterli sanılmıştı
- * ve değildi: iki karo bitişince o kenarlar tek bir çizgi oluyor, ve
- * hangisinin önde olduğu okunmuyor. Üstteki karonun etrafına ARKA PLAN
- * RENGİNDE bir halka koyunca, üstteki alttakini gerçekten kesiyor.
+ * Üst üste binen ekip · örtüşme boyuna ORANLI (dörtte bir), ve üstteki karonun
+ * etrafında arka plan renginde bir AYIRICI HALKA var: onsuz bitişen 1px kenarlar
+ * tek çizgi oluyor. `surface` bu yüzden prop, halka zeminin rengi olmalı.
  *
- * `surface` bu yüzden bir prop: halka, yığının ÜSTÜNDE DURDUĞU zeminin rengi
- * olmalı. Varsayılan kart zemini (`--color-shell`), çünkü bir ekip listesi
- * neredeyse her zaman bir kartın içindedir — ama sayfa zemininde duracaksa
- * çağıran onu söyler. Bulanıklık yok: `0 0 0` yayılımsız bir halka, gölge
- * değil.
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
 export function AvatarStack({ names, extra, size = 24, surface = "var(--color-shell)", ...rest }) {
     const overlap = Math.round(size / 4);
@@ -51,5 +67,13 @@ export function AvatarStack({ names, extra, size = 24, surface = "var(--color-sh
        okuyucuda anlamsız bir dizi olurdu. Adlar bir kez, düz metin olarak
        veriliyor: "Berika Sultan, Deniz Kara ve 7 kişi daha". */
     const spoken = [...names, extra ? `+${extra}` : null].filter(Boolean).join(", ");
-    return (_jsxs("div", { ...dataProps(rest), className: "flex items-center", role: "img", "aria-label": spoken, children: [names.map((n, i) => (_jsx("span", { className: "rounded-[var(--radius-mark)]", style: { marginLeft: i === 0 ? 0 : -overlap, ...ring }, children: _jsx(Avatar, { name: n, size: size, letters: 1 }) }, n + i))), extra ? (_jsxs("span", { className: "inline-flex items-center justify-center rounded-[var(--radius-mark)] border border-edge bg-shell font-mono text-caption font-bold text-ink", style: { width: size, height: size, marginLeft: -overlap, ...ring }, children: ["+", extra] })) : null] }));
+    return (_jsxs("div", { ...dataProps(rest), className: "flex items-center", role: "img", "aria-label": spoken, children: [names.map((n, i) => (_jsx("span", { className: "rounded-[var(--radius-mark)]", style: { marginLeft: i === 0 ? 0 : -overlap, ...ring }, children: _jsx(Avatar, { name: n, size: size, letters: 1 }) }, n + i))), extra ? (_jsxs("span", { className: "inline-flex items-center justify-center rounded-[var(--radius-mark)] border-[1.5px] border-edge-strong bg-shell font-mono text-caption font-bold text-ink", style: {
+                    width: size,
+                    height: size,
+                    marginLeft: -overlap,
+                    /* Taban komşularıyla AYNI renkte: avatar karoları `--color-edge-strong`
+                       ile yükseliyor, özet karosu soluk bir gölgeyle onların arasında
+                       başka bir malzemeden yapılmış gibi duruyordu. */
+                    boxShadow: `0 0 0 2px ${surface}, 3px 3px 0 var(--color-edge-strong)`,
+                }, children: ["+", extra] })) : null] }));
 }

package/dist/components/badge.d.ts

@@ -1,8 +1,39 @@
 import type { Tone } from "./tone.js";
-export declare function StatusChip({ label, state, dot, live, mono, severity, ...rest }: {
+import type { IconGlyph } from "./icons.js";
+export declare function StatusChip({ label, state, look, dot, icon, live, mono, severity, ...rest }: {
     label: string;
     state: Tone;
+    /**
+     * `wash` the tone's own ground with no edge · the default, and what a table of thirty rows
+     * wants: an edge on each chip turns a column of states into a column of BOXES. `outline` the
+     * surface with the tone as a line, for a chip standing alone in a header. `solid` the tone's
+     * plate with its own ink, for a TERMINAL state ("delivered", "returned") that ends the row's
+     * story. TR: `wash` tonun kendi zemini, kenarsız · varsayılan, ve otuz satırlık bir tablonun
+     * istediği: her çipe kenar koymak durum sütununu KUTU sütununa çeviriyor. `outline` yüzeyin
+     * üstünde ton bir çizgi olarak, bir başlıkta tek başına duran çip için. `solid` tonun
+     * plakası ve kendi mürekkebi, satırın hikâyesini bitiren SON durum için ("teslim edildi",
+     * "iade").
+     *
+     * `solid` Yasa 2 ile ("dolgu eylemdir") gerilimde ve bu yüzden opt-in: varsayılan `wash`
+     * kalıyor. TR: `solid` Yasa 2 ile gerilimde, o yüzden isteğe bağlı: varsayılan `wash`.
+     */
+    look?: "wash" | "outline" | "solid";
     dot?: boolean;
+    /**
+     * A glyph in place of the dot. TR: Noktanın yerine bir glif.
+     *
+     * The dot says WHICH state; a glyph says what KIND of reading this is, and
+     * some chips need the second. A duration ("16 days 10 hours") is not a state:
+     * a coloured dot beside it claims there is a status to read, when the colour
+     * is really saying the number crossed a threshold. A clock says the number is
+     * a clock. Given, it replaces the dot rather than joining it · two marks in
+     * one chip leave nothing leading. TR: Nokta HANGİ durum olduğunu söylüyor,
+     * glif ise okumanın NE TÜR olduğunu. Bir süre ("16 gün 10 saat") bir durum
+     * değil: yanındaki renkli nokta okunacak bir durum varmış gibi yapıyor, oysa
+     * renk sayının bir eşiği geçtiğini söylüyor. Saat, sayının bir saat olduğunu
+     * söylüyor. Verilirse noktanın YERİNE geçiyor.
+     */
+    icon?: IconGlyph;
     live?: boolean;
     /**
      * identifier-shaped labels (codes, short keys) keep the mono face TR: tanımlayıcı biçimli
@@ -17,10 +48,21 @@ export declare function StatusChip({ label, state, dot, live, mono, severity, ..
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
-export declare function Delta({ value, better, mono, ...rest }: {
+/**
+ * Değişim çipi · yön oku + yüzde, tonun kendi dolgusunda.
+ *
+ * Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
+ */
+export declare function Delta({ value, better, ...rest }: {
+    /** The change, written by the caller: "+12,4%", "-3,1%", "0,0%". TR: Değişim, çağıranın yazdığı biçimde. */
     value: string;
+    /**
+     * Whether this movement is the GOOD news. It is not a taste but a MEANING: a rise is good for
+     * revenue and bad for response time, and the same green would say two different things on two
+     * screens. TR: Bu hareketin İYİ haber olup olmadığı. Bir tercih değil bir ANLAM: artış ciroda
+     * iyi, yanıt süresinde kötü · aynı yeşil iki ekranda iki farklı şey söylerdi.
+     */
     better: boolean;
-    mono?: boolean;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
@@ -29,9 +71,17 @@ export declare function Delta({ value, better, mono, ...rest }: {
  * so a single 10px square still reads at rest — bars can afford to be quieter,
  * a lone dot cannot.
  */
-export declare function Dot({ state, live, severity, ...rest }: {
+export declare function Dot({ state, live, size, severity, ...rest }: {
     state: Tone;
     live?: boolean;
+    /**
+     * `sm` inside a dense table cell, `base` beside a line of text, `lg` a mark that stands on
+     * its own · the large one takes an edge and a base, because at that size a flat square reads
+     * as a swatch rather than a status. TR: `sm` sıkışık bir tablo hücresinde, `base` bir metin
+     * satırının yanında, `lg` tek başına duran işaret · büyüğü kenar ve taban alıyor, çünkü o
+     * boyda düz bir kare bir durumdan çok bir renk örneği gibi okunuyor.
+     */
+    size?: "sm" | "base" | "lg";
     /**
      * explicit rank, once the API carries one; otherwise derived from state TR: API bir sıra
      * taşıdığında açık sıra; yoksa durumdan türetiliyor

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAStC,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,GAAU,EACV,IAAY,EACZ,IAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAkBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,MAAM,EACN,IAAW,EACX,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAgBA;AAED;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,IAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAWA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAItC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAO5C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,IAAa,EACb,GAAU,EACV,IAAI,EACJ,IAAY,EACZ,IAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC;IACZ;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAmCA;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,MAAM,EACN,GAAG,IAAI,EACR,EAAE;IACD,4GAA4G;IAC5G,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAsCA;AAED;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,IAAY,EACZ,IAAa,EACb,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAeA"}

package/dist/components/badge.js

@@ -3,28 +3,61 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { dataProps } from "../lib/data-props.js";
 import { toneOf, rankOf } from "./tone.js";
 import { useLiveClaim } from "./live-scope.js";
+import { Icon } from "./icon.js";
 /* `live` is a REQUEST, not a decision. The element asks the nearest LiveScope
    to pulse and only the most severe asker wins — see live-scope.tsx. Call sites
    keep writing `live={m.health === "down"}` exactly as before; the counting is
    no longer their problem. */
-export function StatusChip({ label, state, dot = true, live = false, mono = false, severity, ...rest }) {
+export function StatusChip({ label, state, look = "wash", dot = true, icon, live = false, mono = false, severity, ...rest }) {
     const h = toneOf(state);
     const pulses = useLiveClaim(live ? rankOf(state, severity) : null);
-    return (_jsxs("span", { ...dataProps(rest), className: `tamga-chip ${mono ? "tamga-chip-mono" : ""}`, style: { background: h.bg, color: h.fg }, children: [dot && (_jsx("span", { className: `inline-block size-[var(--mark-dot)] ${pulses ? "tamga-live" : ""}`, style: { background: h.mark } })), label] }));
+    /* Sınıf adları açık yazılıyor, şablonla üretilmiyor: `check-kit-class`
+       şablon içindeki adı çözemiyor ve tanımsız sanıyor. */
+    const kilik = look === "outline" ? "tamga-chip-outline" : look === "solid" ? "tamga-chip-solid" : "";
+    const boya = look === "solid"
+        ? { background: h.mark, color: h.markInk }
+        : look === "outline"
+            ? { color: h.fg, borderColor: h.fg }
+            : { background: h.bg, color: h.fg };
+    return (_jsxs("span", { ...dataProps(rest), className: `tamga-chip ${kilik} ${mono ? "tamga-chip-mono" : ""}`, style: boya, children: [icon ? (_jsx(Icon, { icon: icon, size: "xs", className: pulses ? "tamga-live" : undefined })) : dot ? (_jsx("span", { className: `tamga-mark inline-block ${pulses ? "tamga-live" : ""}`, 
+                /* DOLU ÇİPTE NOKTA METNİN RENGİNDE: plakanın üstünde plakanın kendi
+                   rengiyle çizilen bir nokta görünmez. */
+                style: { background: look === "solid" ? "currentColor" : h.mark } })) : null, label] }));
 }
-export function Delta({ value, better, mono = true, ...rest }) {
-    /* good movement stays neutral — color is reserved for deviation */
-    const color = better ? "var(--color-ink-faint)" : "var(--color-critical)";
-    const rising = !value.trimStart().startsWith("-");
-    return (_jsxs("span", { ...dataProps(rest), className: `inline-flex items-center gap-1 text-small font-bold ${mono ? "font-mono" : ""}`, style: { color }, children: [_jsx("svg", { width: "9", height: "9", viewBox: "0 0 10 10", "aria-hidden": true, children: _jsx("path", { d: rising ? "M5 1L9 8H1Z" : "M5 9L1 2H9Z", style: { fill: color } }) }), value] }));
+/**
+ * Değişim çipi · yön oku + yüzde, tonun kendi dolgusunda.
+ *
+ * Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
+ */
+export function Delta({ value, better, ...rest }) {
+    const sayi = value.replace(/[^0-9.,-]/g, "");
+    const duran = /^0([.,]0+)?$/.test(sayi);
+    const yukselen = !value.trimStart().startsWith("-") && !value.trimStart().startsWith("\u2212");
+    /* İYİ HABER VURGU RENGİNDE, yeşilde değil: `positive` yeşili bir DURUM
+       rengi ("çözüldü"), oysa yükselen bir ciro bir durum değil bir hareket ·
+       tasarım da değişimi markanın kendi mavisiyle söylüyor. Kötü haber `danger`
+       kalıyor: kırmızı zaten "burada bir sorun var" diyor.
+       DURAN DEĞİŞİM RENKSİZ: sıfır ne iyi ne kötü. */
+    const dolgu = duran
+        ? undefined
+        : better
+            ? { background: "var(--color-accent)", color: "var(--color-accent-ink)" }
+            /* Kötü haberin mürekkebi `--color-critical-ink`: dolgunun üstünde okunan
+               mürekkep TEMAYLA birlikte dönüyor · sayfanın mürekkebi koyu temada
+               kırmızı dolgunun üstünde 2.96'ya düşüyordu. */
+            : { background: "var(--color-critical)", color: "var(--color-critical-ink)" };
+    return (_jsxs("span", { ...dataProps(rest), className: "tamga-delta", style: dolgu, children: [_jsx("svg", { width: "11", height: "11", viewBox: "0 0 12 12", "aria-hidden": true, children: duran ? (_jsx("path", { d: "M2 6h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })) : (_jsx("path", { d: yukselen ? "M2 9L6 4l2 2 3-4" : "M2 3l4 5 2-2 3 4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })) }), value] }));
 }
 /**
  * Solid square status mark used in dense tables. Uses `fg` rather than `mark`
  * so a single 10px square still reads at rest — bars can afford to be quieter,
  * a lone dot cannot.
  */
-export function Dot({ state, live = false, severity, ...rest }) {
+export function Dot({ state, live = false, size = "base", severity, ...rest }) {
     const h = toneOf(state);
     const pulses = useLiveClaim(live ? rankOf(state, severity) : null);
-    return (_jsx("span", { ...dataProps(rest), className: `inline-block size-2.5 shrink-0 ${pulses ? "tamga-live" : ""}`, style: { background: h.fg }, "aria-hidden": true }));
+    /* Sınıf adları açık yazılıyor, şablonla üretilmiyor: `check-kit-class`
+       şablon içindeki adı çözemiyor ve tanımsız sanıyor. */
+    const olcu = size === "sm" ? "tamga-dot-sm" : size === "lg" ? "tamga-dot-lg" : "tamga-dot-base";
+    return (_jsx("span", { ...dataProps(rest), className: `tamga-dot ${olcu} ${pulses ? "tamga-live" : ""}`, style: { background: h.fg }, "aria-hidden": true }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/components/bar.tsx"],"names":[],"mappings":"AAMA;;;;GAIG;AAEH,MAAM,MAAM,GAAG,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AASF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4DA"}
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/components/bar.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AAEH,MAAM,MAAM,GAAG,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AASF,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,WAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA8BA"}

package/dist/components/bar.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
 /** Sayıyı ızgara çizgisine yuvarlar: 87 → 100, 412 → 500. */
@@ -12,23 +11,8 @@ function niceMax(v) {
 }
 export function BarChart({ bars, formatValue = String, labelWidth = "10rem", className, ...rest }) {
     const enBuyuk = niceMax(Math.max(0, ...bars.map((b) => b.value)));
-    /* SATIRIN TAMAMI VURGULANIYOR, yalnız çubuk değil: uzun bir listede gözün
-       kaydığı şey satır. Ad solda, sayı sağda, arada bir metre uzunluğunda
-       çubuk var; hangi adın hangi sayıya ait olduğunu takip etmek zorlaşıyor ve
-       satır zemini o izi tutuyor. */
-    const [uzerinde, setUzerinde] = useState(null);
-    return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-col gap-0.5", className), onMouseLeave: () => setUzerinde(null), children: [bars.map((b) => {
-                const oran = enBuyuk > 0 ? b.value / enBuyuk : 0;
-                const secili = uzerinde === b.label;
-                return (_jsxs("div", { className: "grid cursor-default items-center gap-3 rounded-(--radius-mark) px-1.5 py-1 transition-[background] duration-(--duration-press)", style: {
-                        gridTemplateColumns: `${labelWidth} minmax(0,1fr) auto`,
-                        background: secili ? "var(--color-hover)" : undefined,
-                    }, onMouseEnter: () => setUzerinde(b.label), children: [_jsx("span", { className: "truncate text-right text-small", style: { color: secili ? "var(--color-ink)" : "var(--color-ink-soft)" }, title: b.label, children: b.label }), _jsx("span", { className: "relative block h-4 rounded-(--radius-mark) bg-[var(--color-chart-fill)]", children: _jsx("span", { className: "absolute inset-y-0 left-0 rounded-(--radius-mark) transition-[background] duration-(--duration-press)", style: {
-                                    width: `${Math.max(oran * 100, b.value > 0 ? 1.5 : 0)}%`,
-                                    /* Üzerine gelinen çubuk bir kademe koyu: aynı hue, farklı
-                                       ton. Renk değiştirmek çubuğu başka bir seriye ait
-                                       gösterirdi. */
-                                    background: secili ? "var(--color-accent-line)" : "var(--color-chart-3)",
-                                } }) }), _jsxs("span", { className: "tabular-nums text-small", style: { color: secili ? "var(--color-ink)" : "var(--color-ink-soft)" }, children: [formatValue(b.value), b.note && _jsx("span", { className: "ml-1.5 text-ink-faint", children: b.note })] })] }, b.label));
-            }), bars.length === 0 && _jsx("p", { className: "text-ink-faint", children: "G\u00F6sterilecek veri yok." })] }));
+    return (_jsx("div", { ...dataProps(rest), className: cn("tamga-bar", className), children: bars.map((b) => {
+            const oran = enBuyuk > 0 ? b.value / enBuyuk : 0;
+            return (_jsxs("div", { className: "tamga-bar-row", style: { gridTemplateColumns: `${labelWidth} minmax(0,1fr) auto` }, children: [_jsx("span", { className: "tamga-bar-ad", title: b.label, children: b.label }), _jsx("span", { className: "tamga-bar-yol", children: _jsx("span", { className: "tamga-bar-dolgu", style: { width: `${Math.max(oran * 100, b.value > 0 ? 2 : 0)}%` } }) }), _jsxs("span", { className: "tamga-bar-deger", children: [formatValue(b.value), b.note && _jsx("span", { className: "tamga-bar-not", children: b.note })] })] }, b.label));
+        }) }));
 }

package/dist/components/button.d.ts

@@ -5,8 +5,8 @@ import { type VariantProps } from "class-variance-authority";
  * Gerekçe: docs/gerekce/06-isaret-ve-ton.md
  */
 export declare const buttonVariants: (props?: ({
-    variant?: "danger" | "ghost" | "link" | "primary" | "secondary" | "success" | null | undefined;
-    size?: "base" | "sm" | null | undefined;
+    variant?: "danger" | "ghost" | "link" | "primary" | "quiet" | "secondary" | "soft" | "success" | null | undefined;
+    size?: "base" | "lg" | "sm" | null | undefined;
     full?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -32,14 +32,22 @@ export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof b
 };
 export declare function Button({ className, variant, size, full, busy, busyLabel, children, disabled, ...props }: ButtonProps): import("react").JSX.Element;
 export declare const iconButtonVariants: (props?: ({
-    size?: "base" | "sm" | null | undefined;
+    size?: "base" | "lg" | "sm" | null | undefined;
+    variant?: "danger" | "ghost" | "primary" | "secondary" | "soft" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-/** 40px square. Always needs an aria-label — there is no text to read. */
-export declare function IconButton({ className, size, "aria-label": label, ...props }: React.ComponentProps<"button"> & VariantProps<typeof iconButtonVariants> & {
+/**
+ * Kare ikon düğmesi · üç boy, ve köşe boyla birlikte büyüyor.
+ *
+ * `aria-label` ZORUNLU: okunacak metin yok.
+ */
+export declare function IconButton({ className, size, variant, "aria-label": label, ...props }: React.ComponentProps<"button"> & VariantProps<typeof iconButtonVariants> & {
     "aria-label": string;
 }): import("react").JSX.Element;
-/** The densest member: 1px at rest, 2px on hover, and its edge turns accent. */
-export declare function MiniButton({ className, "aria-label": label, ...props }: React.ComponentProps<"button"> & {
+export declare const miniButtonVariants: (props?: ({
+    variant?: "primary" | "quiet" | "secondary" | "soft" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Ailenin en sıkı üyesi: 28px, 2px taban, ve hover'da kenarı vurguya dönüyor. */
+export declare function MiniButton({ className, variant, "aria-label": label, ...props }: React.ComponentProps<"button"> & VariantProps<typeof miniButtonVariants> & {
     "aria-label": string;
 }): import("react").JSX.Element;
 //# sourceMappingURL=button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AAEH,eAAO,MAAM,cAAc;;;;8EA2BzB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAY,EACZ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA2Bb;AAID,eAAO,MAAM,kBAAkB;;8EAG7B,CAAC;AAEH,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE;AAED,gFAAgF;AAChF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BAS3D"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;GAIG;AAEH,eAAO,MAAM,cAAc;;;;8EAwCzB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACtD,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEJ,wBAAgB,MAAM,CAAC,EACrB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAY,EACZ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA2Bb;AAID,eAAO,MAAM,kBAAkB;;;8EAoB7B,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,IAAI,EACJ,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE;AAED,eAAO,MAAM,kBAAkB;;8EAW7B,CAAC;AAEH,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,OAAO,EACP,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,kBAAkB,CAAC,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,+BASnE"}

package/dist/components/button.js

@@ -14,6 +14,10 @@ export const buttonVariants = cva("tamga-btn", {
             secondary: "",
             /* the one filled thing on a page */
             primary: "tamga-btn-primary",
+            /* BİRİNCİL İLE İKİNCİL ARASINDA BİR BASAMAK: vurgunun açık tonunda dolu.
+               "Bunu da yapabilirsin" diyen ama sayfanın tek dolu düğmesiyle
+               yarışmayan eylem · bir kartın içindeki ikinci eylem. */
+            soft: "tamga-btn-soft",
             /* confirming: status colour as an edge, never a fill */
             success: "tamga-btn-success",
             /* destructive: findable and deliberate, not loud */
@@ -25,11 +29,20 @@ export const buttonVariants = cva("tamga-btn", {
                anchor with .tamga-link instead — a fake link cannot be middle-clicked
                and misreports itself to a screen reader. */
             link: "tamga-btn-link",
+            /* SESSİZ SATIR EYLEMİ: duruşta yazı, üstüne gelince katmanlı düğme.
+               `ghost` ile aynı değil · ghost duruşta da hover'da da bir düğme, yalnız
+               kenarsız. Bu ise bir LİSTEDE yaşıyor: otuz satırın her birinde bir
+               düğme varsa otuz düğme ekranı yönetiyor ve asıl içerik (kaydın kendisi)
+               onların arasında kayboluyor. Sessiz hâlde metin gibi duruyor, imleç
+               geldiğinde ne olduğunu söylüyor. */
+            quiet: "tamga-btn-quiet",
         },
         size: {
             base: "",
             /* 32px, for card headers and dense toolbars */
             sm: "tamga-btn-sm",
+            /* 52px · a screen's ONE action: an empty state's call, a wizard's next */
+            lg: "tamga-btn-lg",
         },
         full: { true: "w-full", false: "" },
     },
@@ -43,14 +56,47 @@ export function Button({ className, variant, size, full, busy = false, busyLabel
 }
 /* --------------------------- icon button -------------------------- */
 export const iconButtonVariants = cva("tamga-icon-btn", {
-    variants: { size: { base: "", sm: "size-8" } },
-    defaultVariants: { size: "base" },
+    variants: {
+        size: {
+            /* 30px · bir tablo satırında, bir çip şeridinde */
+            sm: "tamga-icon-btn-sm",
+            /* 40px · şeridin ölçüsü: girdi, düğme ve ikon düğmesi aynı satırda */
+            base: "",
+            /* 50px · tek başına duran bir eylem (boş durum, bir tuvalin köşesi) */
+            lg: "tamga-icon-btn-lg",
+        },
+        variant: {
+            secondary: "",
+            primary: "tamga-icon-btn-primary",
+            soft: "tamga-icon-btn-soft",
+            danger: "tamga-icon-btn-danger",
+            /* duruşta nesne DEĞİL, üstüne gelince oluyor */
+            ghost: "tamga-icon-btn-ghost",
+        },
+    },
+    defaultVariants: { size: "base", variant: "secondary" },
 });
-/** 40px square. Always needs an aria-label — there is no text to read. */
-export function IconButton({ className, size, "aria-label": label, ...props }) {
-    return (_jsx("button", { "data-slot": "icon-button", "aria-label": label, className: cn(iconButtonVariants({ size }), className), ...props }));
+/**
+ * Kare ikon düğmesi · üç boy, ve köşe boyla birlikte büyüyor.
+ *
+ * `aria-label` ZORUNLU: okunacak metin yok.
+ */
+export function IconButton({ className, size, variant, "aria-label": label, ...props }) {
+    return (_jsx("button", { "data-slot": "icon-button", "aria-label": label, className: cn(iconButtonVariants({ size, variant }), className), ...props }));
 }
-/** The densest member: 1px at rest, 2px on hover, and its edge turns accent. */
-export function MiniButton({ className, "aria-label": label, ...props }) {
-    return (_jsx("button", { "data-slot": "mini-button", "aria-label": label, className: cn("tamga-mini-btn", className), ...props }));
+export const miniButtonVariants = cva("tamga-mini-btn", {
+    variants: {
+        variant: {
+            secondary: "",
+            primary: "tamga-mini-btn-primary",
+            soft: "tamga-mini-btn-soft",
+            /* bir satırda üç eylem varsa üçü birden nesne olamaz */
+            quiet: "tamga-mini-btn-quiet",
+        },
+    },
+    defaultVariants: { variant: "secondary" },
+});
+/** Ailenin en sıkı üyesi: 28px, 2px taban, ve hover'da kenarı vurguya dönüyor. */
+export function MiniButton({ className, variant, "aria-label": label, ...props }) {
+    return (_jsx("button", { "data-slot": "mini-button", "aria-label": label, className: cn(miniButtonVariants({ variant }), className), ...props }));
 }

package/dist/components/chart.d.ts

@@ -24,6 +24,11 @@ export type Series = {
      * KATEGORİDİR (ürün, mağaza, kanal), ve kategorinin rengi paletten gelir.
      */
     tone?: Tone;
+    /**
+     * Draw it as a dashed line: the comparison period, not a series of its own. TR: Kesik çizgiyle
+     * çiz: kendi başına bir seri değil, KARŞILAŞTIRMA dönemi.
+     */
+    dashed?: boolean;
 };
 export declare function LineChart({ series, labels, height, formatValue, className, ...rest }: {
     series: readonly Series[];

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

@@ -1 +1 @@
-{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AAEH,MAAM,MAAM,MAAM,GAAG;IACnB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAcF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,MAAM,EACN,MAAY,EACZ,WAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA+HA"}
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../src/components/chart.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,IAAI,EAAY,MAAM,WAAW,CAAC;AAExD;;;;GAIG;AAEH,MAAM,MAAM,MAAM,GAAG;IACnB;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAcF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,MAAM,EACN,MAAY,EACZ,WAAoB,EACpB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B;;;OAGG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA0KA"}

package/dist/components/chart.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
-import { toneOf } from "./tone.js";
+import { toneOf, seriRenk } from "./tone.js";
 /** Ton verilmemiş serinin rengi: sırayla kategorik palet. */
 function seriRengi(s, i) {
-    return s.tone ? toneOf(s.tone).mark : `var(--color-chart-${(i % 5) + 1})`;
+    return s.tone ? toneOf(s.tone).mark : seriRenk(i);
 }
 /** Sayıyı ızgara çizgisine yuvarlar: 87 → 100, 412 → 500. */
 function niceMax(v) {
@@ -16,8 +16,10 @@ function niceMax(v) {
     return Math.ceil(v / mag) * mag;
 }
 export function LineChart({ series, labels, height = 200, formatValue = String, className, ...rest }) {
-    const id = useId();
     const [hover, setHover] = useState(null);
+    const ad = series
+        .map((s) => `${s.name}: ${formatValue(s.values[s.values.length - 1] ?? 0)}`)
+        .join(" · ");
     const all = series.flatMap((s) => [...s.values]);
     const max = niceMax(Math.max(1, ...all));
     const count = Math.max(...series.map((s) => s.values.length), 1);
@@ -30,13 +32,18 @@ export function LineChart({ series, labels, height = 200, formatValue = String,
     /* Dört ızgara çizgisi: daha azı okumayı zorlaştırır, daha çoğu grafiği
        kafese çevirir. */
     const ticks = [0, 0.25, 0.5, 0.75, 1].map((f) => max * f);
-    return (_jsxs("figure", { className: cn("tamga-surface p-4", className), children: [_jsxs("div", { ...dataProps(rest), className: "flex gap-3", children: [_jsx("div", { className: "flex shrink-0 flex-col justify-between text-right font-mono text-caption text-ink-faint tabular-nums", style: { height }, "aria-hidden": true, children: [...ticks].reverse().map((t) => (_jsx("span", { children: formatValue(Math.round(t)) }, t))) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("svg", { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", style: { height, width: "100%" }, role: "img", "aria-labelledby": id, onMouseLeave: () => setHover(null), children: [_jsx("title", { id: id, children: series.map((s) => `${s.name}: ${formatValue(s.values[s.values.length - 1] ?? 0)}`).join(" · ") }), ticks.map((t) => (_jsx("line", { x1: 0, x2: W, y1: y(t), y2: y(t), stroke: "var(--color-line)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, t))), series.map((s, si) => {
-                                        const renk = seriRengi(s, si);
-                                        const d = s.values.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)} ${y(v)}`).join(" ");
-                                        return (_jsx("path", { d: d, fill: "none", stroke: renk, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }, s.name));
-                                    }), Array.from({ length: count }, (_, i) => (_jsx("rect", { x: x(i) - W / count / 2, y: 0, width: W / count, height: H, fill: "transparent", onMouseEnter: () => setHover(i) }, i))), hover !== null ? (_jsx("line", { x1: x(hover), x2: x(hover), y1: 0, y2: H, stroke: "var(--color-ink-faint)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" })) : null] }), _jsx("div", { className: "mt-1 flex justify-between font-mono text-caption text-ink-faint", "aria-hidden": true, children: labels.map((l) => (_jsx("span", { children: l }, l))) })] })] }), _jsx("figcaption", { className: "mt-3 flex flex-wrap gap-x-5 gap-y-1", children: series.map((s, si) => {
+    return (_jsxs("figure", { className: cn("tamga-surface p-4", className), children: [_jsxs("div", { ...dataProps(rest), className: "flex gap-3", children: [_jsx("div", { className: "flex shrink-0 flex-col justify-between text-right font-mono text-caption text-ink-faint tabular-nums", style: { height }, "aria-hidden": true, children: [...ticks].reverse().map((t) => (_jsx("span", { children: formatValue(Math.round(t)) }, t))) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "relative block", style: { height }, children: [_jsxs("svg", { viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "none", style: { height, width: "100%" }, role: "img", "aria-label": ad, onMouseLeave: () => setHover(null), children: [ticks.map((t, i) => (_jsx("line", { x1: 0, x2: W, y1: y(t), y2: y(t), stroke: i === 0 ? "var(--color-line)" : "var(--color-div)", strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, t))), series[0] && !series[0].dashed ? (_jsx("polygon", { points: `0,${H} ${series[0].values.map((v, i) => `${x(i)},${y(v)}`).join(" ")} ${W},${H}`, fill: "var(--color-accent-soft)", opacity: 0.35 })) : null, series.map((s, si) => {
+                                                const renk = seriRengi(s, si);
+                                                const d = s.values.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)} ${y(v)}`).join(" ");
+                                                return (_jsx("path", { d: d, fill: "none", stroke: s.dashed ? "var(--color-ink-faint)" : renk, strokeWidth: s.dashed ? 2 : 3, strokeDasharray: s.dashed ? "6 5" : undefined, strokeLinejoin: "round", strokeLinecap: "round", vectorEffect: "non-scaling-stroke" }, s.name));
+                                            }), Array.from({ length: count }, (_, i) => (_jsx("rect", { x: x(i) - W / count / 2, y: 0, width: W / count, height: H, fill: "transparent", onMouseEnter: () => setHover(i) }, i))), hover !== null ? (_jsx(_Fragment, { children: _jsx("line", { x1: x(hover), x2: x(hover), y1: 0, y2: H, stroke: "var(--color-edge-strong)", strokeWidth: 1.5, strokeDasharray: "5 4", vectorEffect: "non-scaling-stroke" }) })) : null] }), hover !== null && series[0]?.values[hover] !== undefined ? (_jsx("span", { className: "tamga-chart-mark", style: {
+                                            left: `${x(hover)}%`,
+                                            top: `${y(series[0].values[hover] ?? 0)}%`,
+                                        }, "aria-hidden": true })) : null] }), _jsx("div", { className: "mt-1 flex justify-between font-mono text-caption text-ink-faint", "aria-hidden": true, children: labels.map((l) => (_jsx("span", { children: l }, l))) })] })] }), _jsx("figcaption", { className: "mt-3 flex flex-wrap gap-x-5 gap-y-1", children: series.map((s, si) => {
                     const renk = seriRengi(s, si);
                     const v = hover !== null ? s.values[hover] : s.values[s.values.length - 1];
-                    return (_jsxs("span", { className: "flex items-center gap-2 text-small text-ink-soft", children: [_jsx("span", { "aria-hidden": true, className: "h-0.5 w-4", style: { background: renk } }), s.name, _jsx("span", { className: "font-mono text-ink tabular-nums", children: formatValue(v ?? 0) })] }, s.name));
+                    return (_jsxs("span", { className: "flex items-center gap-2 text-small text-ink-soft", children: [_jsx("span", { "aria-hidden": true, className: "w-4", style: s.dashed
+                                    ? { borderTop: "2px dashed var(--color-ink-faint)" }
+                                    : { height: 3, background: renk } }), s.name, _jsx("span", { className: "font-mono text-ink tabular-nums", children: formatValue(v ?? 0) })] }, s.name));
                 }) })] }));
 }

package/dist/components/checkbox.d.ts

@@ -1,14 +1,36 @@
 import type { ReactNode } from "react";
-export declare function Checkbox({ label, checked, onChange, disabled, className, ...rest }: {
+export declare function Checkbox({ label, checked, indeterminate, onChange, disabled, className, compact, ...rest }: {
     /**
      * The visible label. The kit does not translate; the caller passes ready text. TR: Görünen
      * etiket. Kit çeviri yapmaz; hazır metni çağıran geçer.
      */
     label: ReactNode;
     checked: boolean;
+    /**
+     * The third state: SOME of what this box stands for is checked, not all. A tree's parent row
+     * wears it. Visible as a dash, announced as "mixed"; clicking still hands the caller a plain
+     * true/false. TR: Üçüncü hâl: bu kutunun temsil ettiği şeyin BİR KISMI işaretli, hepsi değil.
+     * Bir ağacın üst satırı bunu giyiyor. Görünüşü tire, ekran okuyucuya "mixed"; tıklanınca
+     * çağırana yine düz bir true/false gidiyor.
+     */
+    indeterminate?: boolean;
     onChange?: (next: boolean) => void;
     disabled?: boolean;
     className?: string;
+    /**
+     * The box a TABLE row wears. TR: Bir TABLO satırının giydiği kutu.
+     *
+     * Smaller and flat. A form checkbox is a control someone walks up to and
+     * answers, so it is a raised object; a table checkbox is one of twenty-five
+     * down a column, and twenty-five raised boxes turn a list into a grid of
+     * buttons. The size drops too · the form box stands beside a sentence, this
+     * one beside a row. TR: Daha küçük ve düz. Form onay kutusu, birinin karşısına
+     * geçip yanıtladığı bir kontrol · o yüzden yükselmiş bir nesne. Tablo kutusu
+     * ise bir sütunda yirmi beş taneden biri, ve yirmi beş yükselmiş kutu listeyi
+     * bir düğme ızgarasına çeviriyor. Ölçü de düşüyor · form kutusu bir cümlenin
+     * yanında duruyor, bu bir satırın.
+     */
+    compact?: boolean;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAcvC,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAmBA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/components/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAavC,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAO,EACP,aAAqB,EACrB,QAAQ,EACR,QAAgB,EAChB,SAAS,EACT,OAAe,EACf,GAAG,IAAI,EACR,EAAE;IACD;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;OAYG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4BA"}

package/dist/components/checkbox.js

@@ -3,8 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
-import { Check } from "./icons.js";
-import { OFF } from "./control-base.js";
+import { Check, Minus } from "./icons.js";
 /* ---------------------------------------------------------------- *
  * Checkbox — bir DEĞER, bir hedef değil.
  *
@@ -12,6 +11,6 @@ import { OFF } from "./control-base.js";
  * seçildi" demiyor, "bu değer açık" diyor. Mini butonun 1px kenarını ve 1px
  * offsetini taşır, böylece kontrol ailesinin bir üyesi gibi okunur.
  * ---------------------------------------------------------------- */
-export function Checkbox({ label, checked, onChange, disabled = false, className, ...rest }) {
-    return (_jsxs("button", { ...dataProps(rest), type: "button", role: "checkbox", "aria-checked": checked, "aria-disabled": disabled || undefined, disabled: disabled, onClick: () => !disabled && onChange?.(!checked), className: cn("flex items-center gap-2 text-body", className), style: disabled ? OFF : undefined, children: [_jsx("span", { className: "tamga-check", "data-checked": checked, children: checked ? _jsx(Icon, { icon: Check, size: "xs", weight: "bold" }) : null }), label] }));
+export function Checkbox({ label, checked, indeterminate = false, onChange, disabled = false, className, compact = false, ...rest }) {
+    return (_jsxs("button", { ...dataProps(rest), type: "button", role: "checkbox", "aria-checked": indeterminate ? "mixed" : checked, "aria-disabled": disabled || undefined, disabled: disabled, onClick: () => !disabled && onChange?.(!checked), className: cn("flex items-center gap-2 text-body", disabled && "text-ink-faint", className), children: [_jsx("span", { className: cn("tamga-check", compact && "tamga-check-sm"), "data-checked": (checked || indeterminate) && !disabled, "data-off": disabled || undefined, children: indeterminate ? (_jsx(Icon, { icon: Minus, size: "xs", weight: "bold" })) : checked ? (_jsx(Icon, { icon: Check, size: "xs", weight: "bold" })) : null }), label] }));
 }