tamga-ui 0.1.0

package/dist/components/overlay.js

@@ -0,0 +1,276 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toneOf } from "./tone.js";
+import { Icon } from "./icon.js";
+import { cn } from "../lib/cn.js";
+import { Close } from "./icons.js";
+import { SkeletonOptions, SkeletonPanel } from "./skeleton.js";
+import { Button } from "./button.js";
+import { useFocusTrap, useListKeys } from "./a11y.js";
+import { MiniButton } from "./button.js";
+import { useScrollLock } from "../lib/scroll-lock.js";
+/* ------------------------------------------------------------------ *
+ * The overlay plane. Everything here sits at 6px — past the 4px the
+ * page can reach — which is the whole "this is floating" signal.
+ * Only Dialog and Sheet add a scrim. Tooltip is the one exception:
+ * it is a label, not a surface you act on, so it never lifts.
+ * ------------------------------------------------------------------ */
+function useDismiss(open, close) {
+    const box = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const away = (e) => {
+            if (box.current && !box.current.contains(e.target))
+                close();
+        };
+        const esc = (e) => e.key === "Escape" && close();
+        document.addEventListener("mousedown", away);
+        document.addEventListener("keydown", esc);
+        return () => {
+            document.removeEventListener("mousedown", away);
+            document.removeEventListener("keydown", esc);
+        };
+    }, [open, close]);
+    return box;
+}
+export function DropdownMenu({ trigger, items, align = "start", width = 200, loading = false, loadingRows = 4, openOnHover = false, }) {
+    const [open, setOpen] = useState(false);
+    const box = useDismiss(open, () => setOpen(false));
+    const close = useCallback(() => setOpen(false), []);
+    const panel = useRef(null);
+    useListKeys({ open: open && !loading, containerRef: panel, onClose: close });
+    /* KAPANIŞ GECİKMELİ, ANINDA DEĞİL. Tetikleyici ile panel arasında birkaç
+       piksellik bir boşluk var ve işaretçi oradan geçerken `pointerleave`
+       tetikleniyor: menü tam üstüne gidilirken kapanıyordu. 120ms, o boşluğu
+       geçmeye yeten ve "takılı kaldı" hissi vermeyen aralık. */
+    const kapatmaSayaci = useRef(null);
+    const gecikmeliKapat = useCallback(() => {
+        if (!openOnHover)
+            return;
+        kapatmaSayaci.current = window.setTimeout(() => setOpen(false), 120);
+    }, [openOnHover]);
+    const kapatmayiIptal = useCallback(() => {
+        if (kapatmaSayaci.current !== null) {
+            window.clearTimeout(kapatmaSayaci.current);
+            kapatmaSayaci.current = null;
+        }
+    }, []);
+    useEffect(() => () => kapatmayiIptal(), [kapatmayiIptal]);
+    return (_jsxs("div", { ref: box, className: "relative inline-flex", onPointerEnter: openOnHover
+            ? (e) => {
+                /* YALNIZ FARE. Dokunmatik bir ekranda `pointerenter` dokunmayla
+                   birlikte geliyor ve hemen ardından gelen `click` menüyü kapatıyor:
+                   kullanıcı dokunuyor, menü açılıp anında kapanıyor. */
+                if (e.pointerType !== "mouse")
+                    return;
+                kapatmayiIptal();
+                setOpen(true);
+            }
+            : undefined, onPointerLeave: openOnHover ? gecikmeliKapat : undefined, children: [_jsx("span", { onClick: () => setOpen((o) => !o), children: trigger }), open && (_jsxs("div", { ref: panel, role: "menu", className: "tamga-overlay absolute top-[var(--overlay-below)] z-40 overflow-hidden py-1", style: { width, [align === "end" ? "right" : "left"]: 0 }, "aria-busy": loading || undefined, children: [loading && _jsx(SkeletonOptions, { rows: loadingRows }), !loading && items.map((item, i) => {
+                        if (item.kind === "separator") {
+                            return _jsx("span", { className: "my-1 block border-t border-line" }, i);
+                        }
+                        if (item.kind === "label") {
+                            return (_jsx("span", { className: "tamga-label block px-4 py-2", children: item.label }, i));
+                        }
+                        return (_jsxs("button", { role: item.checked === undefined ? "menuitem" : "menuitemradio", "aria-checked": item.checked, "data-selected": item.checked || undefined, "data-tamga-option": true, className: "tamga-option", disabled: item.disabled, style: {
+                                color: item.state ? toneOf(item.state).fg : undefined,
+                                opacity: item.disabled ? 0.45 : undefined,
+                                cursor: item.disabled ? "not-allowed" : undefined,
+                            }, onClick: () => {
+                                item.onSelect?.();
+                                setOpen(false);
+                            }, children: [item.icon, item.label] }, i));
+                    })] }))] }));
+}
+/* --------------------------- popover --------------------------- */
+export function Popover({ trigger, title, children, footer, width = 288, align = "start", loading = false, loadingBlock, closeLabel, }) {
+    const [open, setOpen] = useState(false);
+    const box = useDismiss(open, () => setOpen(false));
+    return (_jsxs("div", { ref: box, className: "relative inline-flex", children: [_jsx("span", { onClick: () => setOpen((o) => !o), children: trigger }), open && (_jsxs("div", { className: "tamga-overlay absolute top-[var(--overlay-below)] z-40", style: { width, [align === "end" ? "right" : "left"]: 0 }, "aria-busy": loading || undefined, children: [title ? (_jsxs("div", { className: "tamga-head tamga-gutter tamga-section", children: [_jsx("h4", { className: "text-control font-semibold", children: title }), _jsx(MiniButton, { className: "ml-auto", "aria-label": closeLabel, onClick: () => setOpen(false), children: _jsx(Icon, { icon: Close, size: "xs" }) })] })) : null, _jsx("div", { className: "tamga-gutter py-4 text-small leading-relaxed", children: loading ? _jsx(SkeletonPanel, { lines: 3, block: loadingBlock }) : children }), footer ? (_jsx("div", { className: "tamga-gutter flex justify-end gap-2 border-t border-line py-3", children: footer })) : null] }))] }));
+}
+/* --------------------------- tooltip --------------------------- */
+const placements = {
+    top: "bottom-[var(--overlay-above)] left-1/2 -translate-x-1/2",
+    bottom: "top-[var(--overlay-below)] left-1/2 -translate-x-1/2",
+    left: "right-[var(--overlay-below)] top-1/2 -translate-y-1/2",
+    right: "left-[var(--overlay-below)] top-1/2 -translate-y-1/2",
+};
+/* A hard triangle cut with clip-path — no rotated square, no border to line up.
+   Solid ink, square corners, same as the bubble it belongs to.
+
+   The BOX turns with the arrow. It used to be 12×6 for all four placements, so the sideways ones
+   were a 12-long spike where the vertical ones were a 12-wide wedge — the same clip-path in a box
+   that had not been rotated with it. Every arrow is now a 12 base and a 6 rise, whichever way it
+   points. */
+const arrows = {
+    top: {
+        left: "50%", top: "100%", marginLeft: -6, width: 12, height: 6,
+        clipPath: "polygon(0 0, 100% 0, 50% 100%)",
+    },
+    bottom: {
+        left: "50%", bottom: "100%", marginLeft: -6, width: 12, height: 6,
+        clipPath: "polygon(50% 0, 0 100%, 100% 100%)",
+    },
+    left: {
+        top: "50%", left: "100%", marginTop: -6, width: 6, height: 12,
+        clipPath: "polygon(0 0, 100% 50%, 0 100%)",
+    },
+    right: {
+        top: "50%", right: "100%", marginTop: -6, width: 6, height: 12,
+        clipPath: "polygon(100% 0, 0 50%, 100% 100%)",
+    },
+};
+/**
+ * KABARCIK `fixed`, `absolute` DEĞİL.
+ *
+ * Ölçülen hata: dar bir kenar çubuğunda ipucu hiç görünmüyordu. Sebep
+ * `overflow`du — menü kaydırılabilir olduğu için (`overflow-y: auto`, ki yatayı
+ * da `auto` yapıyor) ipucu doğuyor, çiziliyor ve kabın dışında kaldığı için
+ * tamamen kırpılıyordu. Bu, kitin üç kez karşılaştığı aynı tuzağın üçüncü yüzü
+ * (kart, ray, şimdi ipucu).
+ *
+ * Z-index çözmüyor: hiçbir yığın sırası bir `overflow` kırpmasını aşamaz.
+ * Çözüm kabarcığı akıştan çıkarmak. `fixed` bir eleman en yakın kaydırma
+ * kabına değil GÖRÜNTÜ ALANINA göre yerleşiyor, yani hiçbir kap onu kesemiyor.
+ *
+ * KONUM HOVER'DA ÖLÇÜLÜYOR, çünkü `fixed` bir elemanın CSS ile tetikleyiciye
+ * hizalanmasının yolu yok. Ölçüm yalnız ipucu açılırken yapılıyor: kapalıyken
+ * hiçbir maliyeti yok.
+ */
+export function Tooltip({ label, placement = "bottom", children, }) {
+    const sarmal = useRef(null);
+    const [konum, setKonum] = useState(null);
+    const olc = useCallback(() => {
+        const el = sarmal.current;
+        if (!el)
+            return;
+        const r = el.getBoundingClientRect();
+        const bosluk = 8;
+        const yerler = {
+            top: { left: r.left + r.width / 2, top: r.top - bosluk },
+            bottom: { left: r.left + r.width / 2, top: r.bottom + bosluk },
+            left: { left: r.left - bosluk, top: r.top + r.height / 2 },
+            right: { left: r.right + bosluk, top: r.top + r.height / 2 },
+        };
+        setKonum(yerler[placement]);
+    }, [placement]);
+    const kapat = useCallback(() => setKonum(null), []);
+    /* Kaydırma ya da yeniden boyutlanma ipucunun altından tetikleyiciyi çekiyor;
+       o an kapanması, yanlış yerde durmasından iyi. */
+    useEffect(() => {
+        if (!konum)
+            return;
+        window.addEventListener("scroll", kapat, true);
+        window.addEventListener("resize", kapat);
+        return () => {
+            window.removeEventListener("scroll", kapat, true);
+            window.removeEventListener("resize", kapat);
+        };
+    }, [konum, kapat]);
+    const kaydirma = {
+        top: "translate(-50%, -100%)",
+        bottom: "translate(-50%, 0)",
+        left: "translate(-100%, -50%)",
+        right: "translate(0, -50%)",
+    };
+    return (_jsxs("span", { ref: sarmal, className: "relative inline-flex", onPointerEnter: olc, onPointerLeave: kapat, onFocusCapture: olc, onBlurCapture: kapat, children: [children, konum && (_jsxs("span", { role: "tooltip", className: "pointer-events-none fixed z-40 whitespace-nowrap px-2 py-1 text-small", style: {
+                    left: konum.left,
+                    top: konum.top,
+                    transform: kaydirma[placement],
+                    background: "var(--color-ink)",
+                    color: "var(--color-page)",
+                    borderRadius: "var(--radius-ctl)",
+                }, children: [label, _jsx("span", { "aria-hidden": true, className: "absolute block", style: { background: "var(--color-ink)", ...arrows[placement] } })] }))] }));
+}
+export function Toast({ tone = "neutral", title, description, action, onDismiss, dismissLabel, }) {
+    const mark = tone === "neutral" ? "var(--color-ink)" : toneOf(tone).mark;
+    return (_jsxs("div", { role: "status", className: "tamga-toast tamga-overlay flex w-80 items-start gap-4 p-4", style: { animation: "tamga-toast-in var(--duration-base) var(--ease-standard) both" }, children: [_jsx("span", { className: "mt-1 size-2.5 shrink-0", style: { background: mark } }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-body font-medium text-ink", children: title }), description ? (_jsx("p", { className: "mt-1 text-small leading-relaxed text-ink-faint", children: description })) : null, action ? _jsx("div", { className: "mt-3", children: action }) : null] }), onDismiss ? (_jsx(MiniButton, { onClick: onDismiss, "aria-label": dismissLabel, children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null] }));
+}
+/**
+ * Where toasts land. Top-right is the default: it is the one corner that
+ * never covers a table's actions column or a form's footer buttons.
+ */
+const corners = {
+    "top-right": "top-6 right-6 items-end",
+    "top-left": "top-6 left-6 items-start",
+    "bottom-right": "bottom-6 right-6 items-end",
+    "bottom-left": "bottom-6 left-6 items-start",
+};
+export function ToastViewport({ position = "top-right", children, }) {
+    return (_jsx("div", { className: `pointer-events-none fixed z-50 flex flex-col gap-2 ${corners[position]}`, children: _jsx("div", { className: "pointer-events-auto flex flex-col gap-2", children: children }) }));
+}
+/* ---------------------------- dialog --------------------------- */
+/**
+ * The modal shell. Hooks cannot run behind an early return, so the trap lives
+ * here and the surface below stays a plain component.
+ */
+/**
+ * Diyalog genişliği. Bir VARYANT, ayrı bir bileşen değil (kitin kuralı: adı
+ * bölünen şey bileşen, ayarlanan şey prop).
+ *
+ * `wide` bir ÖNİZLEME için var: bir bloğu ya da tam bir ekran şablonunu 448
+ * pikselde göstermek, gösterdiğini gizlemek olur. `md` hâlâ varsayılan, çünkü
+ * bir diyaloğun asıl işi bir KARAR sormak ve geniş bir karar kutusu, kararı
+ * daha kolay yapmıyor.
+ *
+ * `full` BİR ÇALIŞMA YÜZEYİ için: bir görsel düzenleyici, bir tuval, bir harita
+ * seçici. Bunlar bir karar kutusu değil bir EKRAN, ve `wide` bile onlara az
+ * geliyor — kalan kenar boşluğu tuvalden çalınan alan. Bu boyutta panelin
+ * kenarı, yarıçapı ve kaydırma gölgesi de kalkıyor: yükseltilecek bir zemin
+ * kalmadığında yükselme işareti de anlamsız. Nadir olması gerekiyor; bir formu
+ * tam ekran açmak, formu daha kolay doldurmuyor.
+ */
+const DIALOG_GENISLIK = {
+    md: "max-w-md",
+    lg: "max-w-3xl",
+    wide: "max-w-(--dialog-wide)",
+    full: "max-w-none",
+};
+function DialogShell({ open, onClose, loading, label, size = "md", children, }) {
+    const panel = useFocusTrap(open);
+    /* Aynı kaçak `Dialog`da da vardı: odak hapsediliyor ama arkadaki sayfa
+       kayıyordu. Kullanıcı etkileşemediği bir şeyi kaydırabiliyordu. */
+    useScrollLock(open);
+    useEffect(() => {
+        if (!open)
+            return;
+        const esc = (e) => e.key === "Escape" && onClose();
+        document.addEventListener("keydown", esc);
+        return () => document.removeEventListener("keydown", esc);
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    /* Tam ekranda dış kenar boşluğu YOK: 24 piksel, bir tuvalden çalınan 24
+       pikseldir. Panel de yüzeyi kaplıyor ve dikey bir akış oluyor, ki gövde
+       kendi içinde kaysın ve başlık ile ayak yerinde kalsın. */
+    const tam = size === "full";
+    return (_jsxs("div", { className: cn("fixed inset-0 z-50 flex items-center justify-center", tam ? "p-0" : "p-6"), role: "dialog", "aria-modal": true, "aria-label": label, children: [_jsx("div", { className: "tamga-scrim absolute inset-0", "aria-hidden": true, onClick: onClose }), _jsx("div", { ref: panel, className: cn("tamga-overlay relative z-10 w-full", tam && "tamga-overlay-full", DIALOG_GENISLIK[size]), "aria-busy": loading || undefined, children: children })] }));
+}
+/**
+ * Yıkıcı bir eylemin önündeki kapı.
+ *
+ * NEDEN AYRI BİR BİLEŞEN. `Dialog` zaten var ve bu onun üstüne kurulu; ama
+ * "emin misin" diyaloğu her seferinde elle kurulduğunda üç şey kayıyor ve
+ * üçü de güvenlikle ilgili:
+ *
+ *   1. ONAY DÜĞMESİ FİİLİ TAŞIR, "Tamam"ı değil. Bir kullanıcı diyaloğun
+ *      metnini okumadan düğmeye basar; okuduğu tek şey düğmenin üstündeki
+ *      kelimedir. "Tamam" hiçbir şey söylemez, "Sil" söyler.
+ *   2. ODAK VAZGEÇ'TE AÇILIR. Yıkıcı bir diyalogda odağın onay düğmesinde
+ *      olması, Enter'a basan birinin kaydı silmesi demek. Güvenli olan
+ *      varsayılan olmalı.
+ *   3. GERİ ALINAMAZLIK YAZILIR. Gövde metni ne olacağını değil NEYİN GERİ
+ *      GELMEYECEĞİNİ söyler; kullanıcının kararı buna bağlı.
+ *
+ * KELİMELER ÇAĞIRANIN. Kit hiçbir dil bilmiyor: başlık, gövde ve iki düğmenin
+ * etiketi dışarıdan geliyor.
+ */
+export function ConfirmDialog({ open, onClose, onConfirm, title, children, confirmLabel, cancelLabel, closeLabel, tone = "danger", busy = false, confirmDisabled = false, }) {
+    return (_jsx(Dialog, { open: open, onClose: onClose, title: title, closeLabel: closeLabel, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: onClose, disabled: busy, "data-autofocus": true, children: cancelLabel }), _jsx(Button, { variant: tone, onClick: onConfirm, disabled: busy || confirmDisabled, children: confirmLabel })] }), children: children }));
+}
+export function Dialog({ open, onClose, title, children, footer, loading = false, closeLabel, size = "md", }) {
+    return (_jsxs(DialogShell, { open: open, onClose: onClose, loading: loading, label: title, size: size, children: [_jsxs("div", { className: "tamga-head tamga-gutter tamga-section", children: [_jsx("h3", { className: "text-subhead font-semibold", children: title }), _jsx(MiniButton, { onClick: onClose, "aria-label": closeLabel, className: "ml-auto", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }), _jsx("div", { className: cn("tamga-gutter py-6 text-body leading-relaxed", size === "full" && "min-h-0 flex-1 overflow-y-auto"), children: loading ? _jsx(SkeletonPanel, { lines: 4 }) : children }), footer ? (_jsx("div", { className: "tamga-gutter flex justify-end gap-2 border-t border-line py-4", children: footer })) : null] }));
+}

package/dist/components/pagination.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Pagination.
+ *
+ * Gerekçe: docs/gerekce/02-veri-ve-liste.md
+ */
+/** Gösterilecek numaraları hesaplar. `null` = kısaltma. */
+export declare function pageWindow(page: number, pages: number, span?: number): (number | null)[];
+export declare function Pagination({ page, pageSize, total, onChange, labels, span, className, }: {
+    /** Starts at 1. TR: 1'den başlar. */
+    page: number;
+    pageSize: number;
+    /**
+     * Total records. Unknown, the numbers are hidden. TR: Toplam kayıt. Bilinmiyorsa numaralar
+     * gizlenir.
+     */
+    total?: number;
+    onChange?: (next: number) => void;
+    /**
+     * How many numbers show on each side of the active page. The window is `2·span + 5`: seven
+     * numbers at the default 1, nine at 2. TR: Aktif sayfanın her iki yanında kaç numara
+     * görünsün. Pencere genişliği `2·span + 5`: varsayılan 1 ile yedi, 2 ile dokuz numara.
+     */
+    span?: number;
+    /**
+     * Every visible string. The kit pulls no translations. `summary` is a function: languages
+     * place numbers differently ("1-25 / 240" · "1–25 of 240"), so the caller builds the
+     * template. TR: Görünen her metin. Kit çeviri çekmez. `summary` bir fonksiyon: dillerin sayı
+     * yerleşimi farklı ("1-25 / 240" · "1–25 of 240"), şablonu çağıran kurar.
+     */
+    labels: {
+        previous: string;
+        next: string;
+        page: (n: number) => string;
+        summary?: (from: number, to: number, total: number) => string;
+    };
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AAMA;;;;GAIG;AAEH,2DAA2D;AAC3D,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,SAAI,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAiBnF;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAQ,EACR,SAAS,GACV,EAAE;IACD,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;QAC5B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;KAC/D,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA8DA"}

package/dist/components/pagination.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Icon } from "./icon.js";
+import { CaretLeft, CaretRight } from "./icons.js";
+/**
+ * Pagination.
+ *
+ * Gerekçe: docs/gerekce/02-veri-ve-liste.md
+ */
+/** Gösterilecek numaraları hesaplar. `null` = kısaltma. */
+export function pageWindow(page, pages, span = 1) {
+    /* Kısaltmasız sığan sayfa adedi `span`den TÜRETİLİYOR, sabit 7 değil:
+       pencere ilk + [kısaltma] + (2·span+1) + [kısaltma] + son, yani 2·span+5.
+       Sabit 7 yazılıydı ve `span` büyütüldüğünde sekiz sayfalık bir liste
+       gereksiz yere kısaltılıyordu. */
+    const sigan = span * 2 + 5;
+    if (pages <= sigan)
+        return Array.from({ length: pages }, (_, i) => i + 1);
+    const out = [1];
+    const from = Math.max(2, page - span);
+    const to = Math.min(pages - 1, page + span);
+    if (from > 2)
+        out.push(null);
+    for (let i = from; i <= to; i++)
+        out.push(i);
+    if (to < pages - 1)
+        out.push(null);
+    out.push(pages);
+    return out;
+}
+export function Pagination({ page, pageSize, total, onChange, labels, span = 1, className, }) {
+    const pages = total !== undefined ? Math.max(1, Math.ceil(total / pageSize)) : undefined;
+    const canPrev = page > 1;
+    const canNext = pages === undefined ? true : page < pages;
+    const from = (page - 1) * pageSize + 1;
+    const to = total !== undefined ? Math.min(page * pageSize, total) : page * pageSize;
+    return (_jsxs("nav", { className: cn("flex flex-wrap items-center gap-3", className), "aria-label": labels.page(page), children: [total !== undefined && labels.summary ? (_jsx("span", { className: "tamga-label tabular-nums", children: labels.summary(from, to, total) })) : null, _jsxs("span", { className: "ml-auto flex items-center gap-1.5", children: [_jsx("button", { type: "button", className: "tamga-icon-btn shrink-0", "aria-label": labels.previous, disabled: !canPrev, onClick: () => canPrev && onChange?.(page - 1), children: _jsx(Icon, { icon: CaretLeft, size: "sm" }) }), pages !== undefined
+                        ? pageWindow(page, pages, span).map((n, i) => n === null ? (_jsx("span", { className: "px-1 text-small text-ink-faint", "aria-hidden": true, children: "\u2026" }, `gap-${i}`)) : (_jsx("button", { type: "button", 
+                            /* Seçili sayfa DOLGU almaz: "buradasın" bir eylem değildir
+                               (Yasa 2). Gerekçesi `.tamga-page`'in üstünde — bu satır
+                               bir zamanlar `.tamga-option` diyordu ve yorumun tersini
+                               yapıyordu. */
+                            className: "tamga-page tabular-nums", "aria-current": n === page ? "page" : undefined, "aria-label": labels.page(n), onClick: () => onChange?.(n), children: n }, n)))
+                        : null, _jsx("button", { type: "button", className: "tamga-icon-btn shrink-0", "aria-label": labels.next, disabled: !canNext, onClick: () => canNext && onChange?.(page + 1), children: _jsx(Icon, { icon: CaretRight, size: "sm" }) })] })] }));
+}

package/dist/components/pie.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Pasta / halka grafik — PARÇA-BÜTÜN, ve yalnız o.
+ *
+ * Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
+ */
+export type PieSlice = {
+    label: string;
+    value: number;
+};
+export declare function PieChart({ slices, total, totalLabel, formatValue, inner, size, className, }: {
+    /**
+     * Five slices at most: more does not read, and a chart that does not read is wrong
+     * information. TR: En çok beş dilim: fazlası okunmuyor, ve okunmayan bir grafik yanlış
+     * bilgidir.
+     */
+    slices: readonly PieSlice[];
+    /**
+     * The denominator. Left out, the sum of the slices; but it MUST be givable, because the
+     * slices do not always cover the whole: if a query leaves out customers with no gender, the
+     * percentages are percentages of that smaller set, and only the caller knows it. TR: Payda.
+     * Verilmezse dilimlerin toplamı; ama VERİLEBİLMESİ şart, çünkü dilimler her zaman bütünü
+     * kapsamıyor: bir sorgu cinsiyeti boş olan müşterileri dışarıda bırakıyorsa yüzdeler o eksik
+     * kümenin yüzdesidir ve bunu ancak çağıran bilir.
+     */
+    total?: number;
+    /**
+     * The name of the total in the middle of the ring: "members", "orders". TR: Halkanın
+     * ortasındaki toplamın adı: "üye", "sipariş".
+     */
+    totalLabel?: string;
+    formatValue?: (v: number) => string;
+    /**
+     * 0 a full pie, between 0 and 1 the ring's thickness. TR: 0 tam pasta, 0 ile 1 arası halka
+     * kalınlığı.
+     */
+    inner?: number;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=pie.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie.d.ts","sourceRoot":"","sources":["../../src/components/pie.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAUF,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,UAAU,EACV,WAAoB,EACpB,KAAY,EACZ,IAAU,EACV,SAAS,GACV,EAAE;IACD;;;;OAIG;IACH,MAAM,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC5B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAwJA"}

package/dist/components/pie.js

@@ -0,0 +1,74 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "../lib/cn.js";
+const R = 100;
+/** Kutup koordinatından kartezyene; 0° saat 12 yönü. */
+function nokta(aci, yaricap) {
+    const rad = ((aci - 90) * Math.PI) / 180;
+    return [R + yaricap * Math.cos(rad), R + yaricap * Math.sin(rad)];
+}
+export function PieChart({ slices, total, totalLabel, formatValue = String, inner = 0.58, size = 200, className, }) {
+    const id = useId();
+    /* Üzerinde durulan dilimin indeksi. Grafik ile legend AYNI durumu paylaşıyor:
+       legend satırına gelmek dilimi, dilime gelmek legend satırını vurguluyor.
+       İkisi ayrı olsaydı kullanıcı hangi satırın hangi dilim olduğunu yine gözle
+       eşleştirmek zorunda kalırdı, ki bu tam da legend'ın çözdüğü sorun. */
+    const [uzerinde, setUzerinde] = useState(null);
+    const toplam = total ?? slices.reduce((n, s) => n + s.value, 0);
+    const ic = R * inner;
+    let aci = 0;
+    const parcalar = slices.map((s, i) => {
+        const pay = toplam > 0 ? s.value / toplam : 0;
+        const bas = aci;
+        const son = aci + pay * 360;
+        aci = son;
+        return { ...s, pay, bas, son, renk: `var(--color-chart-${(i % 5) + 1})` };
+    });
+    return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-6", className), children: [_jsxs("svg", { 
+                /* `viewBox` dilimin dışarı taşan halini de kapsıyor: üzerine gelinen
+                   dilim 6 birim dışarı kayıyor, ve kutu büyümezse kırpılıyor. */
+                viewBox: `-8 -8 ${R * 2 + 16} ${R * 2 + 16}`, width: size, height: size, className: "shrink-0 overflow-visible", role: "img", "aria-labelledby": id, onMouseLeave: () => setUzerinde(null), children: [_jsx("title", { id: id, children: parcalar
+                            .map((p) => `${p.label}: ${formatValue(p.value)} (%${(p.pay * 100).toFixed(1)})`)
+                            .join(", ") }), parcalar.map((p, i) => {
+                        if (p.pay <= 0)
+                            return null;
+                        /* TEK DİLİM %100 İSE YAY ÇİZİLEMEZ: başlangıç ve bitiş noktası
+                           çakışır ve `A` komutu hiçbir şey çizmez. Tam daire ayrı bir yol. */
+                        if (p.pay >= 0.999) {
+                            return (_jsxs("g", { children: [_jsx("circle", { cx: R, cy: R, r: R, fill: p.renk }), ic > 0 && _jsx("circle", { cx: R, cy: R, r: ic, fill: "var(--color-shell)" })] }, p.label));
+                        }
+                        const [x1, y1] = nokta(p.bas, R);
+                        const [x2, y2] = nokta(p.son, R);
+                        const [x3, y3] = nokta(p.son, ic);
+                        const [x4, y4] = nokta(p.bas, ic);
+                        const buyuk = p.son - p.bas > 180 ? 1 : 0;
+                        const d = ic > 0
+                            ? `M ${x1} ${y1} A ${R} ${R} 0 ${buyuk} 1 ${x2} ${y2} L ${x3} ${y3} A ${ic} ${ic} 0 ${buyuk} 0 ${x4} ${y4} Z`
+                            : `M ${R} ${R} L ${x1} ${y1} A ${R} ${R} 0 ${buyuk} 1 ${x2} ${y2} Z`;
+                        /* ÜZERİNE GELİNEN DİLİM DIŞARI KAYIYOR, büyümüyor.
+                           Büyütmek dilimin AÇISINI değiştirmiyor ama gözde öyle bir izlenim
+                           bırakıyor: bir oran grafiğinde en son isteyeceğin şey. Merkezden
+                           dışarı kaydırmak açıyı da yarıçapı da koruyor. */
+                        const orta = (p.bas + p.son) / 2;
+                        const [kx, ky] = nokta(orta, 6);
+                        const secili = uzerinde === i;
+                        return (_jsx("path", { d: d, fill: p.renk, 
+                            /* Dilimler arasındaki ince ayraç zemin renginde: iki komşu
+                               dilim aynı tonda olsa bile sınır görünüyor. */
+                            stroke: "var(--color-shell)", strokeWidth: 2, style: {
+                                transform: secili ? `translate(${kx - R}px, ${ky - R}px)` : undefined,
+                                /* Öteki dilimler soluyor: vurgulanan şey parlamıyor, çevresi
+                                   çekiliyor. Rengi açmak paleti bozardı. */
+                                opacity: uzerinde === null || secili ? 1 : 0.45,
+                                transition: "opacity var(--duration-press) var(--ease-standard), transform var(--duration-press) var(--ease-standard)",
+                            }, onMouseEnter: () => setUzerinde(i) }, p.label));
+                    }), ic > 0 && toplam > 0 && (_jsxs(_Fragment, { children: [_jsx("text", { x: R, y: R - 4, textAnchor: "middle", className: "fill-[var(--color-ink)] font-semibold", style: { fontSize: 26 }, children: uzerinde === null
+                                    ? formatValue(toplam)
+                                    : formatValue(parcalar[uzerinde]?.value ?? 0) }), _jsx("text", { x: R, y: R + 20, textAnchor: "middle", className: "fill-[var(--color-ink-faint)]", style: { fontSize: 14 }, children: uzerinde === null
+                                    ? (totalLabel ?? "")
+                                    : `${parcalar[uzerinde]?.label} · %${((parcalar[uzerinde]?.pay ?? 0) * 100).toFixed(1)}` })] }))] }), _jsx("dl", { className: "min-w-0 flex-1 flex-col gap-2", children: parcalar.map((p, i) => (_jsxs("div", { className: "flex cursor-default items-baseline gap-2.5 rounded-(--radius-mark) px-1.5 py-1 transition-[background] duration-(--duration-press)", style: {
+                        background: uzerinde === i ? "var(--color-hover)" : undefined,
+                        opacity: uzerinde === null || uzerinde === i ? 1 : 0.5,
+                    }, onMouseEnter: () => setUzerinde(i), onMouseLeave: () => setUzerinde(null), children: [_jsx("span", { "aria-hidden": true, className: "size-2.5 shrink-0 translate-y-px rounded-(--radius-mark)", style: { background: p.renk } }), _jsx("dt", { className: "min-w-0 flex-1 truncate text-ink", children: p.label }), _jsxs("dd", { className: "shrink-0 tabular-nums text-ink", children: [formatValue(p.value), _jsxs("span", { className: "ml-1.5 text-ink-faint", children: ["%", (p.pay * 100).toFixed(1)] })] })] }, p.label))) })] }));
+}

package/dist/components/primitives.d.ts

@@ -0,0 +1,96 @@
+import type { Tone } from "./tone.js";
+export { Spinner } from "./spinner.js";
+export declare function Separator({ vertical }: {
+    vertical?: boolean;
+}): import("react").JSX.Element;
+/** Running is not a deviation, so the live mark stays neutral — the pulse carries it. */
+export declare function Beacon({ live, label, severity, }: {
+    live?: boolean;
+    label?: string;
+    /**
+     * a bare beacon outranks nothing in particular; give it a rank to compete TR: çıplak bir
+     * işaret hiçbir şeye üstün gelmez; yarışması için ona bir sıra verin
+     */
+    severity?: number | null;
+}): import("react").JSX.Element;
+export declare function Alert({ state, title, children, action, }: {
+    state?: Tone;
+    title: string;
+    children?: React.ReactNode;
+    action?: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function Breadcrumb({ items, label, }: {
+    items: {
+        label: string;
+        href?: string;
+    }[];
+    /**
+     * The landmark's accessible name; see the note on Spinner. TR: Landmark'ın erişilebilir adı;
+     * Spinner'daki nota bakın.
+     */
+    label: string;
+}): import("react").JSX.Element;
+export declare function Field({ label, description, error, children, htmlFor, }: {
+    label: string;
+    description?: string;
+    error?: string;
+    children: React.ReactNode;
+    htmlFor?: string;
+}): import("react").JSX.Element;
+/** A plain select: the same overlay as the searchable one, without the search. */
+export declare function Select({ options, value, onChange, placeholder, loading, loadingRows, className, }: {
+    options: string[];
+    value?: string;
+    onChange?: (v: string) => void;
+    /**
+     * Visible when nothing is chosen; user-facing, so the caller supplies it translated. TR:
+     * Hiçbir şey seçilmemişken görünür; kullanıcıya gösterildiği için çevirisini çağıran veriyor.
+     */
+    placeholder: string;
+    /**
+     * options not in yet; the list holds its shape instead of showing a spinner TR: seçenekler
+     * henüz gelmedi; liste bir dönen simge göstermek yerine şeklini koruyor
+     */
+    loading?: boolean;
+    /**
+     * How many skeleton rows to hold while `loading`. SETTLED 2026-08-19 (open question 4): this
+     * is never a taste value; it is the number of records that are actually coming, because the
+     * whole point of the skeleton is that the panel does not resize when they land. Where that
+     * number comes from (api-kontrati.html A7, KİLİTLİ): · paginated list → the request's
+     * `page_size` (DRF default 25, max 100) · last page → `meta.count - (page - 1) * page_size` ·
+     * cursor list → `page_size` (no `count` is returned, by design) · known-size menu → the item
+     * count the caller already knows The default of 4 fits a menu, not a list. A list that leaves
+     * it at 4 is a bug that looks like a design choice. TR: `loading` sürerken kaç iskelet satırı
+     * tutulacağı. 2026-08-19'da KARARA BAĞLANDI (açık soru 4): bu asla bir zevk değeri değil;
+     * gerçekten gelmekte olan kayıt sayısı, çünkü iskeletin bütün amacı kayıtlar geldiğinde
+     * panelin yeniden boyutlanmaması. O sayının nereden geldiği (api-kontrati.html A7, KİLİTLİ):
+     * · sayfalı liste → isteğin `page_size` değeri (DRF varsayılanı 25, en çok 100) · son sayfa →
+     * `meta.count - (page - 1) * page_size` · imleçli liste → `page_size` (tasarım gereği `count`
+     * dönmüyor) · boyu bilinen menü → çağıranın zaten bildiği öğe sayısı Varsayılan 4 bir menüye
+     * uyuyor, bir listeye değil. 4'te bırakılmış bir liste, tasarım kararı gibi görünen bir
+     * hatadır.
+     */
+    loadingRows?: number;
+    /** Genişlik ve konum çağıranın. Varsayılan `w-56`; `w-full` verildiğinde
+     *  tailwind-merge onu ezer, yani kontrol kabına uyar. */
+    className?: string;
+}): import("react").JSX.Element;
+/** Side panel. Overlay plane, so it carries the 6px offset and a scrim. */
+export declare function Sheet({ open, onClose, title, children, footer, loading, closeLabel, }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    /**
+     * Accessible name for the close control, supplied by the caller (docs/08 rule 5). TR: Kapatma
+     * kontrolünün erişilebilir adı, çağıran veriyor (docs/08 kural 5).
+     */
+    closeLabel: string;
+    /**
+     * contents not in yet; the panel holds its shape instead of showing a spinner TR: içerik
+     * henüz gelmedi; panel bir dönen simge göstermek yerine şeklini koruyor
+     */
+    loading?: boolean;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=primitives.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/components/primitives.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAWtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAQvC,wBAAgB,SAAS,CAAC,EAAE,QAAgB,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,+BAErE;AAED,yFAAyF;AACzF,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,KAAK,EACL,QAAa,GACd,EAAE;IACD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,+BAQA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAiB,EACjB,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,+BAoBA;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,+BA0BA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,+BAgBA;AAED,kFAAkF;AAClF,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAe,EACf,WAAe,EACf,SAAS,GACV,EAAE;IACD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;6DACyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAyEA;AAED,2EAA2E;AAC3E,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAe,EACf,UAAU,GACX,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,sCA2CA"}