tamga-ui 0.1.0

package/dist/components/a11y.js

@@ -0,0 +1,159 @@
+"use client";
+import { useEffect, useRef } from "react";
+/**
+ * The keyboard behaviour Radix would have given us for free.
+ *
+ * We hand-rolled the overlays, so we owe the keyboard the same contract a
+ * library would have honoured. Two hooks, used by every overlay, so the
+ * behaviour cannot drift between them.
+ */
+const FOCUSABLE = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+].join(",");
+/**
+ * Visibility is judged by `hidden` and `aria-hidden`, deliberately not by
+ * `offsetParent`. offsetParent is null for anything inside a fixed-position
+ * ancestor in some engines — and always null under jsdom — so a trap built on
+ * it collapses to an empty list and silently stops trapping. The selector
+ * already excludes disabled controls and tabindex="-1".
+ */
+function focusable(root) {
+    return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => !el.hasAttribute("hidden") && el.getAttribute("aria-hidden") !== "true");
+}
+/**
+ * Traps Tab inside a modal surface and gives it back on close.
+ *
+ * Without this a dialog looks modal and is not: Tab walks straight out into
+ * the page behind the scrim, where a keyboard user is stuck operating a page
+ * they cannot see. The scrim only stops the mouse.
+ */
+export function useFocusTrap(open) {
+    const ref = useRef(null);
+    const restoreTo = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const root = ref.current;
+        if (!root)
+            return;
+        restoreTo.current = document.activeElement;
+        /* İLK KONTROL, ya da AÇIKÇA İSTENEN kontrol.
+         *
+         * Varsayılan olarak ilk odaklanabilir eleman odağı alıyor ve çoğu panelde
+         * doğrusu bu. Ama bir onay diyaloğunda ilk kontrol kapatma çarpısı, ikinci
+         * sıradaki ise "Sil": Enter'a basan biri kaydı siliyor. Yıkıcı bir
+         * diyalogda güvenli olan varsayılan olmalı.
+         *
+         * `autoFocus` NİTELİĞİ BURADA ÇALIŞMIYOR: React onu bağlarken bu etki
+         * henüz koşmamış oluyor, sonra trap odağı ilk elemana çekiyor ve niteliğin
+         * etkisi siliniyor. O yüzden mekanizma DOM üzerinden: panelin içinde
+         * `data-autofocus` taşıyan bir eleman varsa odak onun.
+         *
+         * `focusable` listesinden seçiliyor ki gizli ya da devre dışı bir elemana
+         * odak verilmesin: kapalı bir düğmeye odaklanmak, odağı hiç vermemekle
+         * aynı şey ama sessizce. */
+        const adaylar = focusable(root);
+        const istenen = adaylar.find((el) => el.hasAttribute("data-autofocus"));
+        const first = istenen ?? adaylar[0];
+        if (first)
+            first.focus();
+        else {
+            root.setAttribute("tabindex", "-1");
+            root.focus();
+        }
+        const onKey = (e) => {
+            if (e.key !== "Tab")
+                return;
+            const items = focusable(root);
+            if (items.length === 0) {
+                e.preventDefault();
+                return;
+            }
+            const first = items[0];
+            const last = items[items.length - 1];
+            const active = document.activeElement;
+            /* v5 compiles with noUncheckedIndexedAccess, which the prototype did not. The guards below
+               are not ceremony: `focusable()` genuinely returns [] when a dialog opens with everything
+               inside it still disabled, and the old code would have thrown on the first Tab. */
+            if (!first || !last)
+                return;
+            /* wrap at both ends, and pull focus back if it escaped some other way */
+            if (e.shiftKey && (active === first || !root.contains(active))) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && (active === last || !root.contains(active))) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            /* give focus back to whatever opened this, not to the top of the page */
+            restoreTo.current?.focus?.();
+        };
+    }, [open]);
+    return ref;
+}
+/**
+ * Roving focus for a list of options — menus and selects.
+ *
+ * Arrow keys move, Home/End jump, Enter and Space choose, Escape closes.
+ * `data-tamga-option` marks the items so separators and labels are skipped
+ * without the hook needing to know what a separator is.
+ */
+export function useListKeys({ open, containerRef, onClose, }) {
+    useEffect(() => {
+        if (!open)
+            return;
+        const root = containerRef.current;
+        if (!root)
+            return;
+        const items = () => Array.from(root.querySelectorAll("[data-tamga-option]:not([disabled])"));
+        /* focus the first option on open, so the arrows have somewhere to start */
+        const initial = items();
+        initial[0]?.focus();
+        const onKey = (e) => {
+            const list = items();
+            if (list.length === 0)
+                return;
+            const i = list.indexOf(document.activeElement);
+            switch (e.key) {
+                case "ArrowDown":
+                    e.preventDefault();
+                    list[i < 0 || i === list.length - 1 ? 0 : i + 1]?.focus();
+                    break;
+                case "ArrowUp":
+                    e.preventDefault();
+                    list[i <= 0 ? list.length - 1 : i - 1]?.focus();
+                    break;
+                case "Home":
+                    e.preventDefault();
+                    list[0]?.focus();
+                    break;
+                case "End":
+                    e.preventDefault();
+                    list[list.length - 1]?.focus();
+                    break;
+                case "Escape":
+                    e.preventDefault();
+                    onClose();
+                    break;
+                case " ":
+                    /* Enter fires a button natively; Space on a button does too, but only
+                       on keyup — pre-empting it here keeps the two keys identical. */
+                    e.preventDefault();
+                    document.activeElement?.click?.();
+                    break;
+            }
+        };
+        root.addEventListener("keydown", onKey);
+        return () => root.removeEventListener("keydown", onKey);
+    }, [open, containerRef, onClose]);
+}

package/dist/components/advanced-input.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Parola alanı — göster/gizle düğmesiyle.
+ *
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
+ */
+export declare function PasswordInput({ labels, className, ...props }: Omit<React.ComponentProps<"input">, "type"> & {
+    labels: {
+        show: string;
+        hide: string;
+    };
+}): import("react").JSX.Element;
+/**
+ * Maskeli sır — API anahtarı, webhook secret.
+ *
+ * `PasswordInput`'un kardeşi ama İŞİ TERS: parola alanına bir şey YAZILIR,
+ * buraya yazılmaz — okunur ve kopyalanır. O yüzden salt-okunur, ve asıl
+ * düğmesi kopyalama.
+ *
+ * Maske ilk ve son birkaç karakteri bırakıyor. Tamamen gizlemek, kullanıcının
+ * "hangi anahtar bu" sorusunu cevapsız bırakır; üç anahtarı olan biri
+ * hangisine baktığını bilemez.
+ */
+export declare function SecretField({ value, labels, visibleChars, className, }: {
+    value: string;
+    labels: {
+        reveal: string;
+        hide: string;
+        copy: string;
+        copied: string;
+        failed: string;
+    };
+    /**
+     * How many characters stay visible at each end. TR: Baştan ve sondan açıkta kalan karakter
+     * sayısı.
+     */
+    visibleChars?: number;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Etiket girdisi.
+ *
+ * Enter ya da virgül bir etiketi kapatıyor; boşken Backspace sonuncuyu siliyor.
+ * İkincisi küçük görünür ama en çok kullanılan yoldur — yanlış yazılan bir
+ * etiketi silmek için fareye uzanmak, akışı kesen tek şeydir.
+ *
+ * Yinelenen ETİKET SESSİZCE YUTULUYOR, hata verilmiyor: aynı etiketi iki kez
+ * yazmak bir hata değil, bir tekrardır, ve kullanıcı zaten istediğini almış
+ * olur.
+ */
+export declare function TagsInput({ value, onChange, placeholder, labels, max, className, }: {
+    value: readonly string[];
+    onChange: (next: string[]) => void;
+    placeholder: string;
+    labels: {
+        remove: (tag: string) => string;
+    };
+    /** The ceiling; the input closes once it is full. TR: Üst sınır; dolduğunda girdi kapanır. */
+    max?: number;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Çoklu seçim — aranabilir.
+ *
+ * `Combobox` tek seçim yapar; bu birden çok. Ayrı bileşen olmasının sebebi
+ * görünüm değil DAVRANIŞ: tek seçimde liste seçince kapanır, çoklu seçimde
+ * KAPANMAZ — üç şey seçecek biri listeyi üç kez açmak zorunda kalmamalı.
+ *
+ * Seçilenler girdinin İÇİNDE çip olarak duruyor, altında ayrı bir listede
+ * değil: seçim ile seçilenler arasındaki mesafe arttıkça, kullanıcı neyi
+ * seçtiğini görmek için gözünü iki yere birden koymak zorunda kalır.
+ */
+export declare function MultiSelect({ options, value, onChange, placeholder, labels, className, }: {
+    options: readonly {
+        value: string;
+        label: string;
+        hint?: string;
+    }[];
+    value: readonly string[];
+    onChange: (next: string[]) => void;
+    placeholder: string;
+    labels: {
+        empty: string;
+        remove: (label: string) => string;
+        open: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Zamanlama girdisi — "her N dakikada bir".
+ *
+ * NEDEN CRON DEĞİL. Bir cron ifadesi (yıldız-eğik-beş biçimi) bir geliştirici
+ * için okunur, bir panel
+ * kullanıcısı için değildir — ve yanlış yazılan bir cron ifadesi hata
+ * vermez, sadece yanlış zamanda çalışır. Bu bileşen kürasyonlu bir liste
+ * sunuyor: kürasyonlu seçenek, serbestlik değil.
+ *
+ * Aralıklar dakika olarak veriliyor, çevirisi çağıranın: "5 dakika" ile
+ * "5 minutes" arasındaki farkı kit bilemez.
+ */
+export declare function ScheduleInput({ value, onChange, options, label, className, }: {
+    /** The interval, in minutes. TR: Dakika cinsinden aralık. */
+    value: number;
+    onChange: (minutes: number) => void;
+    /**
+     * `[{ minutes: 5, label: "5 minutes" }, …]`: ordered and curated. TR: `[{ minutes: 5, label:
+     * "5 dakika" }, …]`: sıralı ve kürasyonlu.
+     */
+    options: readonly {
+        minutes: number;
+        label: string;
+    }[];
+    label: string;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=advanced-input.d.ts.map

package/dist/components/advanced-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-input.d.ts","sourceRoot":"","sources":["../../src/components/advanced-input.tsx"],"names":[],"mappings":"AAcA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACxC,+BAwBA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,YAAgB,EAChB,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACvF;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4DA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,GAAG,EACH,SAAS,GACV,EAAE;IACD,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;KAAE,CAAC;IAC5C,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgDA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACpE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAuJA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,OAAO,EAAE,SAAS;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAeA"}

package/dist/components/advanced-input.js

@@ -0,0 +1,189 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Icon } from "./icon.js";
+import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
+/* ------------------------------------------------------------------ *
+ * Gelişmiş girdiler.
+ *
+ * Hepsinin ortak yanı: bir `<input>` ile yapılabilir GÖRÜNMESİ, ve
+ * yapılamaması. Her biri tek bir somut hatanın karşılığı.
+ * ------------------------------------------------------------------ */
+/**
+ * Parola alanı — göster/gizle düğmesiyle.
+ *
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
+ */
+export function PasswordInput({ labels, className, ...props }) {
+    const [shown, setShown] = useState(false);
+    return (_jsxs("span", { className: "relative flex items-center", children: [_jsx("input", { ...props, type: shown ? "text" : "password", className: cn("tamga-input w-full pr-10", className) }), _jsx("button", { type: "button", className: "tamga-mini-btn absolute right-1.5", "aria-label": shown ? labels.hide : labels.show, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) })] }));
+}
+/**
+ * Maskeli sır — API anahtarı, webhook secret.
+ *
+ * `PasswordInput`'un kardeşi ama İŞİ TERS: parola alanına bir şey YAZILIR,
+ * buraya yazılmaz — okunur ve kopyalanır. O yüzden salt-okunur, ve asıl
+ * düğmesi kopyalama.
+ *
+ * Maske ilk ve son birkaç karakteri bırakıyor. Tamamen gizlemek, kullanıcının
+ * "hangi anahtar bu" sorusunu cevapsız bırakır; üç anahtarı olan biri
+ * hangisine baktığını bilemez.
+ */
+export function SecretField({ value, labels, visibleChars = 4, className, }) {
+    const [shown, setShown] = useState(false);
+    const [copied, setCopied] = 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), []);
+    const masked = value.length <= visibleChars * 2
+        ? "•".repeat(value.length)
+        : `${value.slice(0, visibleChars)}${"•".repeat(8)}${value.slice(-visibleChars)}`;
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied("done");
+        }
+        catch {
+            setCopied("failed");
+        }
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => setCopied("idle"), 1600);
+    }
+    return (_jsxs("span", { className: cn("relative flex items-center", className), children: [_jsx("input", { readOnly: true, value: shown ? value : masked, className: "tamga-input w-full pr-18 font-mono", 
+                /* Salt-okunur bir alan yine de odaklanabilir olmalı: kullanıcı onu
+                   seçip elle kopyalayabilsin. `disabled` bunu imkânsız kılardı. */
+                onFocus: (e) => e.currentTarget.select() }), _jsxs("span", { className: "absolute right-1.5 flex gap-0.5", children: [_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": shown ? labels.hide : labels.reveal, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": copied === "done" ? labels.copied : copied === "failed" ? labels.failed : labels.copy, onClick: copy, children: _jsx(Icon, { icon: copied === "done" ? Check : Customize, size: "xs" }) })] })] }));
+}
+/**
+ * Etiket girdisi.
+ *
+ * Enter ya da virgül bir etiketi kapatıyor; boşken Backspace sonuncuyu siliyor.
+ * İkincisi küçük görünür ama en çok kullanılan yoldur — yanlış yazılan bir
+ * etiketi silmek için fareye uzanmak, akışı kesen tek şeydir.
+ *
+ * Yinelenen ETİKET SESSİZCE YUTULUYOR, hata verilmiyor: aynı etiketi iki kez
+ * yazmak bir hata değil, bir tekrardır, ve kullanıcı zaten istediğini almış
+ * olur.
+ */
+export function TagsInput({ value, onChange, placeholder, labels, max, className, }) {
+    const [draft, setDraft] = useState("");
+    const full = max !== undefined && value.length >= max;
+    function commit() {
+        const tag = draft.trim();
+        setDraft("");
+        if (!tag || value.includes(tag) || full)
+            return;
+        onChange([...value, tag]);
+    }
+    return (_jsxs("span", { className: cn("tamga-input h-auto min-h-10 w-full flex-wrap items-center gap-1.5 py-1.5", className), style: { display: "flex" }, children: [value.map((tag) => (_jsxs("span", { className: "tamga-chip gap-1", children: [tag, _jsx("button", { type: "button", "aria-label": labels.remove(tag), onClick: () => onChange(value.filter((x) => x !== tag)), className: "-mr-1 inline-flex items-center", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, tag))), !full ? (_jsx("input", { value: draft, placeholder: value.length === 0 ? placeholder : undefined, onChange: (e) => setDraft(e.target.value), onBlur: commit, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === ",") {
+                        e.preventDefault();
+                        commit();
+                    }
+                    else if (e.key === "Backspace" && draft === "" && value.length > 0) {
+                        onChange(value.slice(0, -1));
+                    }
+                }, className: "min-w-24 flex-1 bg-transparent text-body text-ink outline-none" })) : null] }));
+}
+/**
+ * Çoklu seçim — aranabilir.
+ *
+ * `Combobox` tek seçim yapar; bu birden çok. Ayrı bileşen olmasının sebebi
+ * görünüm değil DAVRANIŞ: tek seçimde liste seçince kapanır, çoklu seçimde
+ * KAPANMAZ — üç şey seçecek biri listeyi üç kez açmak zorunda kalmamalı.
+ *
+ * Seçilenler girdinin İÇİNDE çip olarak duruyor, altında ayrı bir listede
+ * değil: seçim ile seçilenler arasındaki mesafe arttıkça, kullanıcı neyi
+ * seçtiğini görmek için gözünü iki yere birden koymak zorunda kalır.
+ */
+export function MultiSelect({ options, value, onChange, placeholder, labels, className, }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const box = useRef(null);
+    const [active, setActive] = useState(0);
+    const shown = options.filter((o) => !query || o.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
+    const chosen = options.filter((o) => value.includes(o.value));
+    function toggle(v) {
+        onChange(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);
+    }
+    /**
+     * KLAVYE, ve onsuz bu kontrol yarım.
+     *
+     * Etiket eklemenin doğal yolu YAZIP ENTER'A BASMAK: kullanıcı "adidas" yazıp
+     * Enter, "nike" yazıp Enter diyor ve iki çip ekliyor. Önce yalnız fareyle
+     * çalışıyordu; yazdıktan sonra listeye uzanıp tıklamak gerekiyordu, ve
+     * klavyeyle gezen biri seçim yapamıyordu.
+     *
+     *   Enter       vurgulanan seçeneği ekler/çıkarır, ve kutuyu boşaltır
+     *   Ok tuşları  vurguyu gezdirir
+     *   Backspace   kutu BOŞKEN son çipi kaldırır (yazarken silmeye karışmaz)
+     *   Escape      listeyi kapatır
+     */
+    function tus(e) {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setOpen(true);
+            setActive((i) => Math.min(i + 1, shown.length - 1));
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActive((i) => Math.max(i - 1, 0));
+            return;
+        }
+        if (e.key === "Enter") {
+            const o = shown[active] ?? shown[0];
+            if (!o)
+                return;
+            e.preventDefault();
+            toggle(o.value);
+            setQuery("");
+            setActive(0);
+            return;
+        }
+        if (e.key === "Backspace" && query === "" && value.length > 0) {
+            /* Yazarken Backspace harf siler; yalnız kutu boşken çipe dokunuyor. */
+            e.preventDefault();
+            onChange(value.slice(0, -1));
+            return;
+        }
+        if (e.key === "Escape")
+            setOpen(false);
+    }
+    return (_jsxs("div", { ref: box, className: cn("relative", className), 
+        /* Odak kutunun DIŞINA çıkınca kapanıyor — tıklama dinleyicisiyle değil.
+           Dışarı tıklamayı dinlemek klavyeyle çıkanı görmez ve liste açık kalır. */
+        onBlur: (e) => {
+            if (!box.current?.contains(e.relatedTarget))
+                setOpen(false);
+        }, children: [_jsxs("span", { className: "tamga-input relative h-auto min-h-10 w-full flex-wrap items-center gap-1.5 py-1.5", "data-leading": "true", style: { display: "flex" }, children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-3 top-3 text-ink-faint" }), chosen.map((o) => (_jsxs("span", { className: "tamga-chip gap-1", children: [o.label, _jsx("button", { type: "button", "aria-label": labels.remove(o.label), onClick: () => toggle(o.value), className: "-mr-1 inline-flex items-center", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, o.value))), _jsx("input", { value: query, placeholder: chosen.length === 0 ? placeholder : undefined, onChange: (e) => {
+                            setQuery(e.target.value);
+                            setActive(0);
+                            setOpen(true);
+                        }, onKeyDown: tus, onFocus: () => setOpen(true), role: "combobox", "aria-expanded": open, "aria-controls": id, "aria-label": labels.open, className: "min-w-24 flex-1 bg-transparent text-body text-ink outline-none" })] }), open ? (_jsx("div", { id: id, role: "listbox", "aria-multiselectable": true, className: "tamga-overlay absolute z-30 mt-2 max-h-64 w-full overflow-y-auto py-1", children: shown.length === 0 ? (_jsx("p", { className: "px-4 py-3 text-small text-ink-faint", children: labels.empty })) : (shown.map((o, i) => {
+                    const on = value.includes(o.value);
+                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": on, "data-selected": on, "data-active": i === active || undefined, className: "tamga-option w-full", onMouseEnter: () => setActive(i), onClick: () => toggle(o.value), children: [_jsx("span", { className: "flex-1 text-left", children: o.label }), o.hint ? _jsx("span", { className: "font-mono text-caption text-ink-faint", children: o.hint }) : null, on ? _jsx(Icon, { icon: Check, size: "xs" }) : null] }, o.value));
+                })) })) : null] }));
+}
+/**
+ * Zamanlama girdisi — "her N dakikada bir".
+ *
+ * NEDEN CRON DEĞİL. Bir cron ifadesi (yıldız-eğik-beş biçimi) bir geliştirici
+ * için okunur, bir panel
+ * kullanıcısı için değildir — ve yanlış yazılan bir cron ifadesi hata
+ * vermez, sadece yanlış zamanda çalışır. Bu bileşen kürasyonlu bir liste
+ * sunuyor: kürasyonlu seçenek, serbestlik değil.
+ *
+ * Aralıklar dakika olarak veriliyor, çevirisi çağıranın: "5 dakika" ile
+ * "5 minutes" arasındaki farkı kit bilemez.
+ */
+export function ScheduleInput({ value, onChange, options, label, className, }) {
+    return (_jsx("select", { className: cn("tamga-input w-full", className), "aria-label": label, value: value, onChange: (e) => onChange(Number(e.target.value)), children: options.map((o) => (_jsx("option", { value: o.minutes, children: o.label }, o.minutes))) }));
+}

package/dist/components/avatar.d.ts

@@ -0,0 +1,63 @@
+/** Square, monochrome. Identity is text — color is reserved for health. */
+export declare function Avatar({ name, size, src, bare, letters, }: {
+    name: string;
+    size?: number;
+    /**
+     * falls back to initials when absent or broken TR: yoksa ya da yüklenemezse baş harflere
+     * düşer
+     */
+    src?: string;
+    /**
+     * Drop the avatar's own frame. For when it sits INSIDE a control that already has one: a
+     * bordered tile inside a bordered button is a box in a box, and it made the account control
+     * the odd one out on a toolbar where every other button holds a bare glyph. TR: Avatarın
+     * kendi çerçevesini kaldır. Zaten çerçevesi olan bir kontrolün İÇİNDE duruyorsa: çerçeveli
+     * bir düğmenin içindeki çerçeveli bir karo kutu içinde kutudur, ve hesap kontrolünü her
+     * düğmesi çıplak bir simge taşıyan bir araç çubuğunda tek başına farklı gösteriyordu.
+     */
+    bare?: boolean;
+    /**
+     * How many initials to show. An avatar standing alone carries two, the least it takes to
+     * point at a person. But two do not fit in an OVERLAPPING stack: the tile above clips the
+     * right of the one below and "BS" reads as "B" plus half an "S". A photo does not have this
+     * problem, because half a face is still a face; half a letter cannot be read. `AvatarStack`
+     * passes 1 for exactly that reason. TR: Kaç baş harf gösterileceği. Tek başına duran bir
+     * avatar iki harf taşır; bir kişiyi işaret etmek için gereken en az şey o. Ama ÖRTÜŞEN bir
+     * yığında iki harf sığmaz: üstteki karo alttakinin sağını keser ve "BS", "B" ile yarım bir
+     * "S" olarak okunur. Fotoğrafta bu sorun değildir, çünkü yarım bir yüz hâlâ bir yüzdür; bir
+     * harf ise yarım okunamaz. `AvatarStack` bu yüzden 1 geçiyor.
+     */
+    letters?: 1 | 2;
+}): import("react").JSX.Element;
+/**
+ * Ü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.
+ *
+ * `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.
+ */
+export declare function AvatarStack({ names, extra, size, surface, }: {
+    names: string[];
+    extra?: number;
+    size?: number;
+    /**
+     * The colour of the ground behind the stack; the separating ring is drawn in it. TR: Yığının
+     * arkasındaki zeminin rengi; ayırıcı halka bu renkte çizilir.
+     */
+    surface?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAUA,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAS,EACT,GAAG,EACH,IAAY,EACZ,OAAW,GACZ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACjB,+BAiCA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAS,EACT,OAA8B,GAC/B,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,+BA4BA"}

package/dist/components/avatar.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+function initials(name, count) {
+    return name
+        .split(" ")
+        .filter(Boolean)
+        .slice(0, count)
+        .map((p) => p[0]?.toUpperCase())
+        .join("");
+}
+/** Square, monochrome. Identity is text — color is reserved for health. */
+export function Avatar({ name, size = 32, src, bare = false, letters = 2, }) {
+    const box = {
+        width: size,
+        height: size,
+        /* 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)),
+    };
+    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("span", { 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) }));
+}
+/**
+ * Ü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.
+ *
+ * `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.
+ */
+export function AvatarStack({ names, extra, size = 24, surface = "var(--color-shell)", }) {
+    const overlap = Math.round(size / 4);
+    const ring = { boxShadow: `0 0 0 2px ${surface}` };
+    /* Karoların kendi baş harfleri `aria-hidden` — üst üste binmiş harfler ekran
+       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", { 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] }));
+}

package/dist/components/badge.d.ts

@@ -0,0 +1,37 @@
+import type { Tone } from "./tone.js";
+export declare function StatusChip({ label, state, dot, live, mono, severity, }: {
+    label: string;
+    state: Tone;
+    dot?: boolean;
+    live?: boolean;
+    /**
+     * identifier-shaped labels (codes, short keys) keep the mono face TR: tanımlayıcı biçimli
+     * etiketler (kodlar, kısa anahtarlar) mono yüzü korur
+     */
+    mono?: boolean;
+    /**
+     * 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
+     */
+    severity?: number | null;
+}): import("react").JSX.Element;
+export declare function Delta({ value, better, mono, }: {
+    value: string;
+    better: boolean;
+    mono?: boolean;
+}): import("react").JSX.Element;
+/**
+ * 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 declare function Dot({ state, live, severity, }: {
+    state: Tone;
+    live?: boolean;
+    /**
+     * 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
+     */
+    severity?: number | null;
+}): import("react").JSX.Element;
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/components/badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAStC,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,GAAU,EACV,IAAY,EACZ,IAAY,EACZ,QAAQ,GACT,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;CAC1B,+BAiBA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,MAAM,EACN,IAAW,GACZ,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,+BAeA;AAED;;;;GAIG;AACH,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,IAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,+BAUA"}