tamga-ui 0.1.0

package/dist/components/display.js

@@ -0,0 +1,190 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Icon } from "./icon.js";
+import { PlainLink as PlainAnchor } from "./link.js";
+import { Check, Customize } 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ı.
+ * ------------------------------------------------------------------ */
+/**
+ * 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, }) {
+    return (_jsx("dl", { 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((it) => (_jsxs("div", { className: "contents", children: [_jsx("dt", { className: "text-small text-ink-faint", children: it.term }), _jsx("dd", { className: cn("min-w-0 text-body text-ink", it.mono && "font-mono tabular-nums"), children: it.value })] }, it.term))) }));
+}
+/**
+ * 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.
+ *
+ * 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.
+ */
+export function Kpi({ label, value, unit, icon, note, delta, better = "up", chart, href, onClick, pressed, linkComponent: Link = PlainAnchor, className, }) {
+    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", { 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);
+    if (href) {
+        return (_jsx(Link, { href: href, className: sinif, children: govde }));
+    }
+    if (onClick) {
+        return (_jsx("button", { type: "button", onClick: onClick, "aria-pressed": pressed, "data-pressed": pressed || undefined, className: sinif, children: govde }));
+    }
+    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.
+ *
+ * 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.
+ */
+export function KpiGrid({ children, className }) {
+    const sayi = Math.min(Children.count(children), 6);
+    return (_jsx("div", { className: cn("tamga-kpi-grid", className), style: { "--tamga-kpi-cols": sayi }, children: children }));
+}
+/**
+ * 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.
+ *
+ * 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.
+ */
+export function Code({ children, labels, className, }) {
+    const [state, setState] = useState("idle");
+    const timer = useRef(undefined);
+    /* Zamanlayıcı bir ref'te tutuluyor ve her tıklamada sıfırlanıyor.
+  
+       Öncesi çıplak bir `setTimeout`'tu ve iki şeyi birden bozuyordu: art arda
+       iki tıklamada ilk zamanlayıcı hâlâ çalıştığı için etiket erken geri
+       dönüyordu, ve bileşen 1.6 saniye içinde sökülürse zamanlayıcı ölü bir
+       bileşene yazmaya çalışıyordu. */
+    useEffect(() => () => window.clearTimeout(timer.current), []);
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(children);
+            setState("done");
+        }
+        catch {
+            setState("failed");
+        }
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => setState("idle"), 1600);
+    }
+    return (_jsxs("div", { 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 })] })] }));
+}
+/**
+ * Klavye tuşu.
+ *
+ * `<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 }));
+}
+/**
+ * Sayaç rozeti — bir ikonun köşesindeki rakam.
+ *
+ * `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.
+ *
+ * `max` üstünde "+" ile kesiliyor. Kesilmezse dört haneli bir sayı rozetin
+ * kutusunu şişirir ve altındaki ikonu ezer.
+ *
+ * Sıfır GÖSTERİLMEZ: "0 bildirim" bir bilgi değil, gürültüdür.
+ */
+export function Badge({ count, max = 99, tone = "danger", label, className, children, }) {
+    if (count <= 0)
+        return _jsx(_Fragment, { children: children });
+    const c = toneOf(tone);
+    const shown = count > max ? `${max}+` : String(count);
+    const dot = (_jsxs("span", { 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] })] }));
+    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 })] }));
+}
+/**
+ * Adım göstergesi.
+ *
+ * Üründe bir sihirbaz şablonu vardı ve adım göstergesi yoktu — yani kullanıcı
+ * kaçıncı adımda olduğunu ve kaç adım kaldığını bilmiyordu. Bir 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.
+ */
+export function Steps({ steps, current, className, }) {
+    return (_jsx("ol", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-2", className), children: steps.map((s, i) => {
+            const done = i < current;
+            const active = i === current;
+            return (_jsxs("li", { 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: s }), i < steps.length - 1 ? (_jsx("span", { "aria-hidden": true, className: "tamga-step-line", "data-done": done ? "true" : "false" })) : null] }, s));
+        }) }));
+}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,150 @@
+import type { ReactNode } from "react";
+/**
+ * BOŞ DURUM SİSTEMİ — dört slot, ve hiçbiri neyin eksik olduğunu bilmez.
+ *
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
+ */
+/**
+ * Çizimi çizen fonksiyon. Slot boyutu ve süzülme durumunu verir; ne çizildiği
+ * çağıranın işi.
+ */
+export type Art = (opts: {
+    size: number;
+    float: boolean;
+}) => ReactNode;
+/**
+ * The speech bubble — the answer to "and the figure says …".
+ *
+ * It is the one part of the mascot that IS in the system: 1px edge plus a 2px
+ * hard offset, exactly like every other raised object. That pairing is the
+ * whole trick — it lets pixel art sit inside a strict interface without either
+ * one looking lost.
+ *
+ * The line is real text, not decoration, so it is readable. Keep it to one
+ * short sentence: the bubble is a voice, not a paragraph.
+ */
+export declare function SaysBubble({ children, art, size, float, className, }: {
+    children: React.ReactNode;
+    art: Art;
+    size?: number;
+    float?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * A row that has nothing in it.
+ *
+ * The action goes hard right, on the row's own baseline — that is where every
+ * other row in the product keeps its control, and an empty row that puts its
+ * button somewhere else stops looking like part of the list.
+ *
+ * No border of its own: it drops into a table body or a list that already has
+ * one, and it inherits that list's row rhythm.
+ */
+export declare function EmptyNote({ art, title, children, action, className, }: {
+    art: Art;
+    title: string;
+    children?: React.ReactNode;
+    action?: React.ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export type EmptyLayout = "banner" | "ticket" | "routes";
+export type EmptyRoute = {
+    label: string;
+    note?: string;
+    onClick?: () => void;
+};
+/**
+ * A surface that has nothing in it.
+ *
+ * Three layouts, one set of content. They are NOT three styles of the same
+ * picture — each answers a different question about the screen underneath:
+ *
+ *   banner  wide and horizontal: art left, words centre, action at the far
+ *           right edge, numbered base plate underneath. Reads as a strip
+ *           across the top of a working screen.
+ *   ticket  a narrow tag pinned to a big surface, with a perforation and one
+ *           full-width action. For a single unambiguous next step.
+ *   routes  the words and the figure on the left, a list of ways in on the right.
+ *           Two buttons ask a yes/no question; a list answers "what can I even
+ *           do here", which is what somebody arriving actually wants to know.
+ *
+ * Each one also wants a different drawing. The layout decides the shape; the
+ * drawing decides what the emptiness FEELS like, and those are two choices,
+ * not one.
+ */
+export declare function EmptyState({ layout, art, kicker, title, children, action, note, says, steps, routes, size, className, }: {
+    layout?: EmptyLayout;
+    art: Art;
+    /** what KIND of nothing this is: "no records", "no results" TR: bunun NE TÜR bir hiçlik olduğu: "kayıt yok", "sonuç yok" */
+    kicker?: string;
+    title: string;
+    /** why it is empty, in the instrument's voice TR: neden boş olduğu, göstergenin diliyle */
+    children?: React.ReactNode;
+    action?: React.ReactNode;
+    /** the quiet second line: what happens next TR: sessiz ikinci satır: bundan sonra ne olacağı */
+    note?: string;
+    /**
+     * one short line in a bubble over the figure's head TR: figürün başının üstündeki balonda tek
+     * kısa satır
+     */
+    says?: React.ReactNode;
+    /**
+     * banner only: what happens after the click, on a seated base plate TR: yalnız afişte:
+     * tıklamadan sonra ne olacağı, oturmuş bir taban plakasında
+     */
+    steps?: string[];
+    /** routes only: the ways in TR: yalnız rotalar: içeri giden yollar */
+    routes?: EmptyRoute[];
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * A whole body with nothing in it — and no box drawn around the nothing.
+ *
+ * This is the one that goes straight onto the page, not inside a card. A
+ * bordered panel needs content to bound; when the entire screen is empty there
+ * is nothing to bound, and the border becomes a frame around a void. So there
+ * is no border, no ground, no offset. The only structure is a hard floor rule
+ * as wide as the figure — enough to say he is standing somewhere, not enough to be a
+ * box.
+ *
+ * Reach for it when somebody lands on a section they have never used. For an
+ * empty area INSIDE a working screen, use EmptyState instead: that one has a
+ * card around it because the rest of the screen does too.
+ */
+export declare function EmptyBlank({ art, kicker, title, children, action, says, size, className, }: {
+    art: Art;
+    kicker?: string;
+    title: string;
+    children?: React.ReactNode;
+    action?: React.ReactNode;
+    says?: React.ReactNode;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * A choice you are offering — a template, a starting point, a preset.
+ *
+ * It is a real button, so it obeys raised physics: 1px edge, 2px offset, lifts
+ * under the cursor, presses flat when clicked. A template you cannot pick has
+ * no business looking like a card.
+ *
+ * The category colour is a 3px SPINE under the art rather than a coloured
+ * banner behind it. A wall of coloured banners would out-shout a real event
+ * (Yasa 3); a rule carries the same grouping and outranks nothing.
+ */
+export declare function EmptyTile({ art, kicker, title, children, tone, onClick, className, }: {
+    art: Art;
+    /** the identifier-shaped line above the title TR: başlığın üstündeki tanımlayıcı biçimli satır */
+    kicker?: string;
+    title: string;
+    children?: React.ReactNode;
+    /**
+     * 1–5, the categorical series tones, deliberately not status colours TR: 1–5, kategorik seri
+     * tonları, bilerek durum renkleri değil
+     */
+    tone?: 1 | 2 | 3 | 4 | 5;
+    onClick?: () => void;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state.d.ts.map

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

package/dist/components/empty-state.js

@@ -0,0 +1,113 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "./icon.js";
+import { cn } from "../lib/cn.js";
+import { CaretRight } from "./icons.js";
+/**
+ * The drawing standing on the ground.
+ *
+ * `ground` adds the hard cast shadow — a BAR, deliberately, not a copy of his
+ * silhouette: a body-shaped offset is the pressable-object signature, and the figure
+ * is not pressable. A bar reads as ground, not as affordance. It lands down and
+ * to the right because that is where every other shadow in the kit lands.
+ */
+function ArtFigure({ art, size, float, ground = true, }) {
+    return (_jsx("span", { className: "tamga-art-fig", "data-ground": ground, children: art({ size, float: Boolean(float) }) }));
+}
+/**
+ * The speech bubble — the answer to "and the figure says …".
+ *
+ * It is the one part of the mascot that IS in the system: 1px edge plus a 2px
+ * hard offset, exactly like every other raised object. That pairing is the
+ * whole trick — it lets pixel art sit inside a strict interface without either
+ * one looking lost.
+ *
+ * The line is real text, not decoration, so it is readable. Keep it to one
+ * short sentence: the bubble is a voice, not a paragraph.
+ */
+export function SaysBubble({ children, art, size = 168, float = true, className, }) {
+    return (_jsxs("div", { className: cn("relative shrink-0 pt-11", float && "tamga-float", className), children: [_jsxs("div", { className: "absolute top-0 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap", children: [_jsx("div", { className: "px-3 py-1.5 text-small font-medium text-ink", style: {
+                            background: "var(--color-shell)",
+                            border: "1px solid var(--color-edge)",
+                            borderRadius: "var(--radius-card)",
+                            boxShadow: "2px 2px 0 var(--color-edge)",
+                        }, children: children }), _jsx("span", { "aria-hidden": true, className: "absolute top-full left-1/2 block h-2 w-2 -translate-x-1/2 -translate-y-px rotate-45", style: {
+                            background: "var(--color-shell)",
+                            borderRight: "1px solid var(--color-edge)",
+                            borderBottom: "1px solid var(--color-edge)",
+                        } })] }), _jsx(ArtFigure, { art: art, size: size })] }));
+}
+/**
+ * A row that has nothing in it.
+ *
+ * The action goes hard right, on the row's own baseline — that is where every
+ * other row in the product keeps its control, and an empty row that puts its
+ * button somewhere else stops looking like part of the list.
+ *
+ * No border of its own: it drops into a table body or a list that already has
+ * one, and it inherits that list's row rhythm.
+ */
+export function EmptyNote({ art, title, children, action, className, }) {
+    return (_jsxs("div", { className: cn("tamga-gutter flex items-center gap-4 py-6", className), children: [_jsx("span", { className: "tamga-art-port tamga-art-well", children: _jsx(ArtFigure, { art: art, size: 56, ground: false }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-body font-medium text-ink", children: title }), children ? (_jsx("p", { className: "mt-1 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: children })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
+}
+/**
+ * A surface that has nothing in it.
+ *
+ * Three layouts, one set of content. They are NOT three styles of the same
+ * picture — each answers a different question about the screen underneath:
+ *
+ *   banner  wide and horizontal: art left, words centre, action at the far
+ *           right edge, numbered base plate underneath. Reads as a strip
+ *           across the top of a working screen.
+ *   ticket  a narrow tag pinned to a big surface, with a perforation and one
+ *           full-width action. For a single unambiguous next step.
+ *   routes  the words and the figure on the left, a list of ways in on the right.
+ *           Two buttons ask a yes/no question; a list answers "what can I even
+ *           do here", which is what somebody arriving actually wants to know.
+ *
+ * Each one also wants a different drawing. The layout decides the shape; the
+ * drawing decides what the emptiness FEELS like, and those are two choices,
+ * not one.
+ */
+export function EmptyState({ layout = "banner", art, kicker, title, children, action, note, says, steps, routes, size = 150, className, }) {
+    const figure = says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true }));
+    const words = (_jsxs(_Fragment, { children: [kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { className: "text-display-sm font-semibold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-control leading-relaxed text-ink-soft", children: children })) : null, note ? (_jsx("p", { className: "mt-2 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: note })) : null] }));
+    if (layout === "banner") {
+        return (_jsxs("div", { className: cn("flex flex-col overflow-hidden", className), children: [_jsxs("div", { className: "flex flex-1 flex-col sm:flex-row sm:items-stretch", children: [_jsx("div", { className: "tamga-art-well tamga-art-stage tamga-art-floor sm:border-b-0", children: figure }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-7 px-6 py-7 sm:flex-row sm:items-center sm:justify-between sm:gap-10 sm:px-9 sm:py-9", children: [_jsx("div", { className: "min-w-0", children: words }), action ? (_jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-3", children: action })) : null] })] }), steps?.length ? (_jsx("ol", { className: "tamga-art-steps tamga-art-well", children: steps.map((step, i) => (_jsxs("li", { className: "tamga-art-step", children: [_jsx("span", { className: "tamga-art-step-n", children: String(i + 1).padStart(2, "0") }), _jsx("span", { className: "text-small leading-relaxed text-ink-soft", children: step })] }, step))) })) : null] }));
+    }
+    if (layout === "ticket") {
+        return (_jsx("div", { className: cn("flex justify-center px-6 py-10", className), children: _jsxs("div", { className: "tamga-card w-full max-w-90 overflow-hidden", children: [_jsx("div", { className: "tamga-art-well tamga-art-band", children: figure }), _jsx("div", { className: "px-6 pt-6 pb-7 text-center [&_p]:mx-auto", children: words }), _jsx("div", { className: "tamga-art-divider" }), action ? (_jsx("div", { className: "flex flex-col gap-2 p-4 [&>*]:w-full [&>*]:justify-center", children: action })) : null] }) }));
+    }
+    /* routes — three columns on one line: the figure, the words, the ways in */
+    return (_jsxs("div", { className: cn("flex flex-col gap-8 px-6 py-9 sm:flex-row sm:items-center sm:gap-10 sm:px-10 sm:py-10", className), children: [_jsx("div", { className: "flex shrink-0 items-end", children: says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [words, action ? _jsx("div", { className: "mt-6 flex flex-wrap gap-3", children: action }) : null] }), _jsxs("div", { className: "flex w-full shrink-0 flex-col gap-2.5 sm:max-w-76", children: [_jsx("p", { className: "tamga-kicker mb-0.5", children: "ways in" }), routes?.map((r) => (_jsxs("button", { type: "button", onClick: r.onClick, className: "tamga-art-route", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-body font-medium text-ink", children: r.label }), r.note ? _jsx("span", { className: "block text-small text-ink-faint", children: r.note }) : null] }), _jsx(Icon, { icon: CaretRight, size: "sm" })] }, r.label)))] })] }));
+}
+/**
+ * A whole body with nothing in it — and no box drawn around the nothing.
+ *
+ * This is the one that goes straight onto the page, not inside a card. A
+ * bordered panel needs content to bound; when the entire screen is empty there
+ * is nothing to bound, and the border becomes a frame around a void. So there
+ * is no border, no ground, no offset. The only structure is a hard floor rule
+ * as wide as the figure — enough to say he is standing somewhere, not enough to be a
+ * box.
+ *
+ * Reach for it when somebody lands on a section they have never used. For an
+ * empty area INSIDE a working screen, use EmptyState instead: that one has a
+ * card around it because the rest of the screen does too.
+ */
+export function EmptyBlank({ art, kicker, title, children, action, says, size = 230, className, }) {
+    return (_jsxs("div", { className: cn("flex w-full flex-col items-center justify-center px-6 py-16 text-center", className), children: [says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true, ground: false })), _jsx("span", { className: "tamga-art-blank-floor mt-1 mb-8", style: { width: size * 0.72 } }), kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { className: "text-display-sm font-semibold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-control leading-relaxed text-ink-soft", children: children })) : null, action ? (_jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: action })) : null] }));
+}
+/**
+ * A choice you are offering — a template, a starting point, a preset.
+ *
+ * It is a real button, so it obeys raised physics: 1px edge, 2px offset, lifts
+ * under the cursor, presses flat when clicked. A template you cannot pick has
+ * no business looking like a card.
+ *
+ * The category colour is a 3px SPINE under the art rather than a coloured
+ * banner behind it. A wall of coloured banners would out-shout a real event
+ * (Yasa 3); a rule carries the same grouping and outranks nothing.
+ */
+export function EmptyTile({ art, kicker, title, children, tone = 1, onClick, className, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: cn("tamga-art-tile", className), children: [_jsx("span", { className: "tamga-art-well flex h-28 items-end justify-center pt-4", children: _jsx(ArtFigure, { art: art, size: 86 }) }), _jsx("span", { className: "tamga-art-spine", "data-tone": tone }), _jsxs("span", { className: "tamga-gutter flex min-w-0 flex-1 flex-col py-4", children: [kicker ? _jsx("span", { className: "tamga-kicker mb-1.5", children: kicker }) : null, _jsx("span", { className: "text-body font-semibold text-ink", children: title }), children ? (_jsx("span", { className: "mt-1 text-small leading-relaxed text-ink-faint", children: children })) : null] })] }));
+}

package/dist/components/error-state.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The third state, and the one the kit was missing.
+ *
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
+ */
+export declare function ErrorState({ title, description, detail, onRetry, retryLabel, compact, }: {
+    title?: string;
+    /**
+     * plain words: what the person cannot do right now TR: düz sözcüklerle: kişinin şu an ne
+     * yapamadığı
+     */
+    description?: string;
+    /**
+     * The technical line. SETTLED 2026-08-19 (Ercüment, open question 5) by the locked envelope
+     * (api-kontrati.html A4): print `code` and `meta.request_id`, in that order, e.g.
+     * `quota_exceeded · req_8f2a…`. Why those two and not the HTTP status: `code` is the stable
+     * machine name for what went wrong (it never localises, and it is what support and the
+     * programmatic client both branch on), and `request_id` is what matches this failure to a
+     * server log; the contract makes it mandatory on 500 and mirrors it in `X-Request-Id`. The
+     * human sentence belongs in `description`, from the envelope's already-localised `message`.
+     * TR: Teknik satır. 2026-08-19'da KARARA BAĞLANDI (Ercüment, açık soru 5): kilitli zarf
+     * (api-kontrati.html A4) uyarınca `code` ve `meta.request_id`, bu sırayla, örneğin
+     * `quota_exceeded · req_8f2a…`. Neden bu ikisi ve HTTP durumu değil: `code` neyin
+     * bozulduğunun kararlı makine adı (hiç yerelleşmiyor, ve hem destek hem programatik istemci
+     * ona bakarak dallanıyor), `request_id` ise bu hatayı bir sunucu kaydıyla eşleştiren şey;
+     * kontrat onu 500'de zorunlu kılıyor ve `X-Request-Id` başlığında aynalıyor. İnsan cümlesi
+     * zarfın zaten yerelleşmiş `message` alanından `description`'a ait.
+     */
+    detail?: string;
+    onRetry?: () => void;
+    retryLabel?: string;
+    /**
+     * inside a card or a panel rather than a whole page TR: bütün bir sayfa yerine bir kartın ya
+     * da panelin içinde
+     */
+    compact?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=error-state.d.ts.map

package/dist/components/error-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../src/components/error-state.tsx"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAA6B,EAC7B,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAwB,EACxB,OAAe,GAChB,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,+BAuCA"}

package/dist/components/error-state.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "./icon.js";
+import { Refresh, Warning } from "./icons.js";
+import { Button } from "./button.js";
+/**
+ * The third state, and the one the kit was missing.
+ *
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
+ */
+export function ErrorState({ title = "Could not load this", description, detail, onRetry, retryLabel = "Try again", compact = false, }) {
+    return (_jsxs("div", { role: "alert", "aria-live": "polite", className: `tamga-gutter flex flex-col items-start gap-4 ${compact ? "py-6" : "py-12"}`, children: [_jsx("span", { className: "flex size-10 items-center justify-center border", style: {
+                    borderRadius: "var(--radius-ctl)",
+                    borderColor: "var(--color-critical)",
+                    color: "var(--color-critical)",
+                }, children: _jsx(Icon, { icon: Warning, size: "base" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-body font-medium text-ink", children: title }), description ? (_jsx("p", { className: "mt-1 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: description })) : null, detail ? (_jsx("p", { className: "mt-2 max-w-[var(--measure)] break-words font-mono text-caption text-ink-faint", children: detail })) : null] }), onRetry ? (_jsxs(Button, { onClick: onRetry, children: [_jsx(Icon, { icon: Refresh, size: "sm" }), " ", retryLabel] })) : null] }));
+}

package/dist/components/file-upload.d.ts

@@ -0,0 +1,34 @@
+/**
+ * FileUpload — ürün görselleri.
+ *
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
+ */
+export type UploadItem = {
+    id: string;
+    /**
+     * The preview address: `URL.createObjectURL(file)` or a URL from the server. TR: Önizleme
+     * adresi: `URL.createObjectURL(file)` ya da sunucudan gelen URL.
+     */
+    url: string;
+    name: string;
+};
+export declare function FileUpload({ items, onAdd, onRemove, onReorder, accept, multiple, disabled, labels, className, }: {
+    items: readonly UploadItem[];
+    onAdd?: (files: File[]) => void;
+    onRemove?: (id: string) => void;
+    onReorder?: (id: string, direction: -1 | 1) => void;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    labels: {
+        drop: string;
+        browse: string;
+        remove: string;
+        moveLeft: string;
+        moveRight: string;
+        /** The badge the first image carries: "kapak", "cover" TR: İlk görselin taşıdığı rozet: "kapak", "cover" */
+        primary: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AAOA;;;;GAIG;AAEH,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAkB,EAClB,QAAe,EACf,QAAgB,EAChB,MAAM,EACN,SAAS,GACV,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,4GAA4G;QAC5G,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA0GA"}

package/dist/components/file-upload.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Icon } from "./icon.js";
+import { Upload, Close, CaretLeft, CaretRight } from "./icons.js";
+export function FileUpload({ items, onAdd, onRemove, onReorder, accept = "image/*", multiple = true, disabled = false, labels, className, }) {
+    const id = useId();
+    const input = useRef(null);
+    const [over, setOver] = useState(false);
+    function take(list) {
+        if (!list || disabled)
+            return;
+        onAdd?.(Array.from(list));
+    }
+    function onDrop(e) {
+        e.preventDefault();
+        setOver(false);
+        take(e.dataTransfer.files);
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-4", className), children: [_jsxs("div", { onDragOver: (e) => {
+                    e.preventDefault();
+                    if (!disabled)
+                        setOver(true);
+                }, onDragLeave: () => setOver(false), onDrop: onDrop, "data-over": over, className: "tamga-art-well flex flex-col items-center gap-3 px-6 py-10 text-center", style: {
+                    borderStyle: "dashed",
+                    borderColor: over ? "var(--color-accent-line)" : undefined,
+                }, children: [_jsx(Icon, { icon: Upload, size: "md", className: "text-ink-faint" }), _jsx("p", { className: "text-body text-ink-faint", children: labels.drop }), _jsx("button", { type: "button", className: "tamga-btn tamga-btn-sm", disabled: disabled, onClick: () => input.current?.click(), children: labels.browse }), _jsx("input", { ref: input, id: id, type: "file", accept: accept, multiple: multiple, disabled: disabled, className: "sr-only", onChange: (e) => {
+                            take(e.target.files);
+                            /* Aynı dosyayı ikinci kez seçebilmek için: aksi hâlde `change`
+                               tetiklenmez ve kullanıcı "çalışmıyor" der. */
+                            e.target.value = "";
+                        } })] }), items.length > 0 ? (_jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: items.map((it, i) => (_jsxs("li", { className: "tamga-card relative overflow-hidden", children: [_jsx("img", { src: it.url, alt: it.name, className: "aspect-square w-full object-cover" }), i === 0 ? (_jsx("span", { className: "tamga-chip absolute top-1.5 left-1.5", children: labels.primary })) : null, _jsxs("span", { className: "tamga-gutter flex items-center gap-1 py-1.5", children: [_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.moveLeft, disabled: i === 0, onClick: () => onReorder?.(it.id, -1), children: _jsx(Icon, { icon: CaretLeft, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.moveRight, disabled: i === items.length - 1, onClick: () => onReorder?.(it.id, 1), children: _jsx(Icon, { icon: CaretRight, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn ml-auto", "aria-label": labels.remove, onClick: () => onRemove?.(it.id), children: _jsx(Icon, { icon: Close, size: "xs" }) })] })] }, it.id))) })) : null] }));
+}