tamga-ui 0.4.3 → 0.5.0

package/dist/components/advanced-input.js

@@ -5,7 +5,7 @@ import { cn } from "../lib/cn.js";
 import { inputVariants } from "./input.js";
 import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
-import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
+import { Check, Clock, Close, Copy, Customize, Eye, EyeSlash, Key, Search } from "./icons.js";
 /* ------------------------------------------------------------------ *
  * Gelişmiş girdiler.
  *
@@ -17,20 +17,21 @@ import { Check, Close, Customize, Eye, EyeSlash, Search } from "./icons.js";
  *
  * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
-export function PasswordInput({ labels, invalid = false, className, ...props }) {
+export function PasswordInput({ labels, strength, invalid = false, className, ...props }) {
     const [shown, setShown] = useState(false);
-    return (_jsxs("span", { className: "relative flex items-center", children: [_jsx("input", { type: shown ? "text" : "password", "aria-invalid": invalid || undefined, className: cn(inputVariants({ invalid }), "w-full pr-11", className), ...props }), _jsx("button", { type: "button", className: "tamga-field-btn", "aria-label": shown ? labels.hide : labels.show, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) })] }));
+    const alan = (_jsxs("span", { className: "relative flex items-center", children: [_jsx("input", { type: shown ? "text" : "password", "aria-invalid": invalid || undefined, className: cn(inputVariants({ invalid }), "w-full pr-11", className), ...props }), _jsx("button", { type: "button", className: "tamga-field-btn", "aria-label": shown ? labels.hide : labels.show, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "xs" }) })] }));
+    if (!strength)
+        return alan;
+    const toplam = strength.of ?? 4;
+    const yanan = Math.max(0, Math.min(toplam, strength.value));
+    return (_jsxs("span", { className: "flex flex-col gap-2.5", children: [alan, _jsx("span", { className: "tamga-guc", style: { gridTemplateColumns: `repeat(${toplam}, 1fr)` }, children: Array.from({ length: toplam }, (_, i) => (_jsx("span", { "data-dolu": i < yanan || undefined }, i))) }), strength.note ? _jsx("span", { className: "text-small text-ink-faint", children: strength.note }) : null] }));
 }
 /**
- * Maskeli sır — API anahtarı, webhook secret.
+ * Maskeli sır · API anahtarı, webhook secret. `PasswordInput`un kardeşi ama işi
+ * TERS: buraya yazılmıyor, okunup kopyalanıyor, o yüzden salt-okunur. Maske ilk
+ * ve son birkaç karakteri bırakıyor.
  *
- * `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.
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
 export function SecretField({ value, labels, visibleChars = 4, className, ...rest }) {
     const [shown, setShown] = useState(false);
@@ -57,24 +58,17 @@ export function SecretField({ value, labels, visibleChars = 4, className, ...res
         window.clearTimeout(timer.current);
         timer.current = window.setTimeout(() => setCopied("idle"), 1600);
     }
-    return (_jsxs("span", { ...dataProps(rest), 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" }) })] })] }));
+    return (_jsxs("span", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-2.5", className), children: [_jsxs("span", { className: "tamga-secret", children: [_jsx(Icon, { icon: Key, size: "xs", className: "shrink-0 text-ink-faint" }), _jsx("input", { readOnly: true, value: shown ? value : masked, onFocus: (e) => e.currentTarget.select() })] }), _jsx("button", { type: "button", className: "tamga-icon-btn", "aria-label": shown ? labels.hide : labels.reveal, "aria-pressed": shown, onClick: () => setShown((v) => !v), children: _jsx(Icon, { icon: shown ? EyeSlash : Eye, size: "sm" }) }), _jsxs("button", { type: "button", className: "tamga-btn", onClick: copy, children: [_jsx(Icon, { icon: copied === "done" ? Check : Copy, size: "xs" }), copied === "done" ? labels.copied : copied === "failed" ? labels.failed : labels.copy] })] }));
 }
 /**
- * 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.
+ * Etiket girdisi · Enter ya da virgül bir etiketi kapatıyor, boşken Backspace
+ * sonuncuyu siliyor. Yinelenen etiket SESSİZCE yutuluyor, hata verilmiyor.
  *
- * 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.
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
 export function TagsInput({ value, onChange, placeholder, labels, max, className, ...rest }) {
     const [draft, setDraft] = useState("");
+    const [silinecek, setSilinecek] = useState(null);
     const full = max !== undefined && value.length >= max;
     function commit() {
         const tag = draft.trim();
@@ -83,27 +77,42 @@ export function TagsInput({ value, onChange, placeholder, labels, max, className
             return;
         onChange([...value, tag]);
     }
-    return (_jsxs("span", { ...dataProps(rest), 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) => {
+    return (_jsxs("span", { ...dataProps(rest), 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, i) => (_jsxs("span", { className: "tamga-token", "data-silinecek": i === silinecek || undefined, children: [tag, _jsx("button", { type: "button", "aria-label": labels.remove(tag), onClick: () => onChange(value.filter((x) => x !== tag)), className: "tamga-token-x", 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);
+                    setSilinecek(null);
+                }, 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));
+                        /* İKİ ADIM: ilk Backspace son etiketi İŞARETLİYOR, ikincisi
+                           siliyor. Tek adımlı hâlinde bir tuş fazla basan kişi
+                           yazdığı etiketi silip fark etmiyordu; işaretli hâl o bir
+                           karelik duraklamayı veriyor. Başka bir tuş işareti kaldırıyor. */
+                        if (silinecek === value.length - 1) {
+                            onChange(value.slice(0, -1));
+                            setSilinecek(null);
+                        }
+                        else {
+                            setSilinecek(value.length - 1);
+                        }
+                    }
+                    else {
+                        setSilinecek(null);
                     }
                 }, className: "min-w-24 flex-1 bg-transparent text-body text-ink outline-none" })) : null] }));
 }
 /**
- * Çoklu seçim — aranabilir.
+ * Çoklu seçim · aranabilir. `Combobox`tan ayrı olmasının sebebi görünüm değil
+ * DAVRANIŞ: çoklu seçimde liste seçince KAPANMIYOR. Seçilenler girdinin içinde
+ * çip olarak duruyor.
  *
- * `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.
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
+/* Kutuda yazıyla duran çip sayısı. Dördüncüden sonrası "+N": bir filtre
+   kutusunun iki satırı geçmemesi gerekiyor. */
+const GORUNEN_CIP = 4;
 export function MultiSelect({ options, value, onChange, placeholder, labels, className, ...rest }) {
     const id = useId();
     const [open, setOpen] = useState(false);
@@ -115,19 +124,11 @@ export function MultiSelect({ options, value, onChange, placeholder, labels, cla
     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
-     */
+    /* KLAVYE, ve onsuz bu kontrol yarım:
+         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();
@@ -165,27 +166,31 @@ export function MultiSelect({ options, value, onChange, placeholder, labels, cla
         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) => {
+        }, 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.slice(0, GORUNEN_CIP).map((o) => (_jsxs("span", { className: "tamga-token", children: [o.label, _jsx("button", { type: "button", "aria-label": labels.remove(o.label), onClick: () => toggle(o.value), className: "tamga-token-x", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, o.value))), chosen.length > GORUNEN_CIP ? (_jsxs("span", { className: "tamga-token", "aria-hidden": true, children: ["+", chosen.length - GORUNEN_CIP] })) : null, _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(({ value: v, label: etiket, hint, ...rest }, i) => {
+                        }, 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 tamga-menu absolute z-30 mt-2 max-h-64 w-full overflow-y-auto", children: shown.length === 0 ? (_jsx("p", { className: "px-4 py-3 text-small text-ink-faint", children: labels.empty })) : (shown.map(({ value: v, label: etiket, hint, ...rest }, i) => {
                     const on = value.includes(v);
                     return (_jsxs("button", { ...rest, 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(v), children: [_jsx("span", { className: "flex-1 text-left", children: etiket }), hint ? _jsx("span", { className: "font-mono text-caption text-ink-faint", children: hint }) : null, on ? _jsx(Icon, { icon: Check, size: "xs" }) : null] }, v));
                 })) })) : null] }));
 }
 /**
- * Zamanlama girdisi — "her N dakikada bir".
+ * Zamanlama girdisi · "her N dakikada bir". NEDEN CRON DEĞİL: kürasyonlu
+ * seçenek, serbestlik değil. Aralıklar dakika olarak veriliyor, çevirisi
+ * çağıranın.
  *
- * 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.
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
-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(({ minutes, label: etiket, ...rest }) => (_jsx("option", { ...rest, value: minutes, children: etiket }, minutes))) }));
+export function ScheduleInput({ days, onDaysChange, from, to, onFromChange, onToChange, labels, summary, className, ...rest }) {
+    const secili = new Set(days);
+    const cevir = (g) => {
+        const next = new Set(secili);
+        if (next.has(g))
+            next.delete(g);
+        else
+            next.add(g);
+        onDaysChange([...next].sort((a, b) => a - b));
+    };
+    return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-col gap-4", className), children: [_jsx("div", { role: "group", "aria-label": labels.days, className: "flex flex-wrap gap-2", children: labels.dayNames.map((ad, g) => (_jsx("button", { type: "button", "aria-pressed": secili.has(g), onClick: () => cevir(g), className: "tamga-gun-btn", "data-on": secili.has(g) || undefined, children: ad }, ad))) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2.5 text-body", children: [_jsx("span", { className: "font-semibold text-ink", children: labels.hours }), _jsx("input", { type: "time", value: from, onChange: (e) => onFromChange(e.target.value), "aria-label": labels.hours, className: "tamga-input tamga-sayi w-auto" }), _jsx("span", { className: "text-ink-faint", children: labels.between }), _jsx("input", { type: "time", value: to, onChange: (e) => onToChange(e.target.value), "aria-label": labels.between, className: "tamga-input tamga-sayi w-auto" }), labels.zone ? _jsx("span", { className: "text-ink-faint", children: labels.zone }) : null] }), _jsxs("p", { className: "tamga-ozet", children: [_jsx(Icon, { icon: Clock, size: "xs", weight: "bold", className: "text-accent" }), summary] })] }));
 }

package/dist/components/announcement.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+import type { IconGlyph } from "./icons.js";
+/**
+ * Duyuru şeridi · sayfanın en üstünde, tüm genişlikte.
+ *
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
+ */
+export declare function Announcement({ look, icon, tag, title, children, action, className, ...rest }: {
+    /**
+     * `loud` the filled accent strip, for something the reader should ACT on (a campaign, a
+     * deadline). `quiet` the washed strip, for a standing condition that only needs to be READ
+     * ("you are in test mode"). TR: `loud` dolu vurgu şeridi · okuyanın bir şey YAPMASI gereken
+     * durum için (kampanya, son tarih). `quiet` yıkanmış şerit · yalnız OKUNMASI yeten, duran bir
+     * koşul için ("test modundasın").
+     */
+    look?: "loud" | "quiet";
+    /** The glyph at the head of the strip. TR: Şeridin başındaki glif. */
+    icon?: IconGlyph;
+    /**
+     * A short word in a dark plate before the text, for the quiet strip: "TEST MODE", "BETA".
+     * It is the one place a mode names itself. TR: Sessiz şeritte metinden önce, koyu bir plaka
+     * içinde kısa bir sözcük: "TEST MODU", "BETA". Bir kipin kendi adını söylediği tek yer.
+     */
+    tag?: string;
+    /** TR: Kalın ilk satır. Sessiz şeritte yok: orada tek bir cümle var. */
+    title?: string;
+    children: ReactNode;
+    /** The button or link at the end. TR: Sondaki düğme ya da bağlantı. */
+    action?: ReactNode;
+    className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
+}): import("react").JSX.Element;
+//# sourceMappingURL=announcement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"announcement.d.ts","sourceRoot":"","sources":["../../src/components/announcement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAa,EACb,IAAI,EACJ,GAAG,EACH,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAoBA"}

package/dist/components/announcement.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { dataProps } from "../lib/data-props.js";
+import { Icon } from "./icon.js";
+/**
+ * Duyuru şeridi · sayfanın en üstünde, tüm genişlikte.
+ *
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
+ */
+export function Announcement({ look = "loud", icon, tag, title, children, action, className, ...rest }) {
+    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-announce", look === "loud" && "tamga-announce-loud", look === "quiet" && "tamga-announce-quiet", className), children: [icon ? _jsx(Icon, { icon: icon, size: "md", weight: "fill" }) : null, tag ? _jsx("span", { className: "tamga-announce-tag", children: tag }) : null, _jsxs("div", { className: "flex min-w-0 flex-1 basis-55 flex-col gap-0.5", children: [title ? _jsx("strong", { className: "font-display text-subhead", children: title }) : null, _jsx("span", { className: "text-small", children: children })] }), action] }));
+}

package/dist/components/appearance.d.ts

@@ -36,12 +36,44 @@ export type ThemeChoice = "light" | "dark" | "system";
 export declare function ThemeCards({ value, onChange, labels, className, ...rest }: {
     value: ThemeChoice;
     onChange: (next: ThemeChoice) => void;
-    /** The three names and the group's accessible name. TR: Üç ad ve kümenin erişilebilir adı. */
+    /** The three names, a one-line note under each, and the group's accessible name. TR: Üç ad, her birinin altındaki tek satır, ve kümenin erişilebilir adı. */
     labels: {
         light: string;
         dark: string;
         system: string;
         group: string;
+        lightNote?: string;
+        darkNote?: string;
+        systemNote?: string;
+    };
+    className?: string;
+    /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
+    [k: `data-${string}`]: unknown;
+}): import("react").JSX.Element;
+export type RailChoice = "narrow" | "wide" | "free";
+/**
+ * Sidebar width picked from three little pictures of the panel.
+ * TR: Panelin üç küçük resminden seçilen kenar çubuğu genişliği.
+ *
+ * This was a `Segmented` of three words. On the same screen the theme was
+ * asked with pictures and this with words, and how much room a menu takes is
+ * the kind of thing you see rather than read.
+ * TR: Bu üç kelimelik bir `Segmented` idi. Aynı ekranda tema resimle, bu
+ * kelimeyle soruluyordu; oysa bir menünün ne kadar yer kapladığı okunacak
+ * değil görülecek bir şey.
+ */
+export declare function RailCards({ value, onChange, labels, className, ...rest }: {
+    value: RailChoice;
+    onChange: (next: RailChoice) => void;
+    /** The three names, a one-line note under each, and the group's accessible name. TR: Üç ad, her birinin altındaki tek satır, ve kümenin erişilebilir adı. */
+    labels: {
+        narrow: string;
+        wide: string;
+        free: string;
+        group: string;
+        narrowNote?: string;
+        wideNote?: string;
+        freeNote?: string;
     };
     className?: string;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */

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

@@ -1 +1 @@
-{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/components/appearance.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAehE,MAAM,MAAM,YAAY,GAAG;IACzB,8DAA8D;IAC9D,GAAG,EAAE,MAAM,CAAC;IACZ,kHAAkH;IAClH,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,uGAAuG;IACvG,WAAW,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAsCA;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAoBtD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,8FAA8F;IAC9F,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA6BA;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,iGAAiG;IACjG,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE;QACN,gGAAgG;QAChG,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,+HAA+H;IAC/H,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IACpC,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAoDA"}
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/components/appearance.tsx"],"names":[],"mappings":"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"}

package/dist/components/appearance.js

@@ -2,10 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { makePalette } from "../lib/palette.js";
 import { dataProps } from "../lib/data-props.js";
 import { IMAGE_ACCEPT, prepareImage } from "../lib/image.js";
 import { Alert } from "./primitives.js";
 import { Button } from "./button.js";
+import { Icon } from "./icon.js";
+import { Check, Eyedropper } from "./icons.js";
 /**
  * Brand colour chosen from a few squares, or written by hand.
  * TR: Birkaç kareden seçilen ya da elle yazılan marka rengi.
@@ -13,10 +16,59 @@ import { Button } from "./button.js";
 export function ColorSwatches({ options, value, onChange, customLabel, custom = true, className, ...rest }) {
     const secili = (hex) => hex.toLowerCase() === value.toLowerCase();
     const hazirMi = options.some((o) => secili(o.hex));
-    return (_jsxs("span", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-3", className), children: [options.map(({ hex, label: etiket, ...rest }) => (_jsx("button", { ...rest, type: "button", className: "tamga-swatch", "data-selected": secili(hex), "aria-label": etiket, title: etiket, onClick: () => onChange(hex), children: _jsx("span", { "aria-hidden": true, style: { background: hex } }) }, hex))), custom ? (_jsxs("label", { className: "tamga-swatch", "data-selected": !hazirMi, title: customLabel, children: [_jsx("span", { className: "sr-only", children: customLabel }), _jsx("input", { type: "color", value: hazirMi ? options[0].hex : value, onChange: (e) => onChange(e.target.value), className: "tamga-color-input", "aria-label": customLabel })] })) : null] }));
+    return (_jsxs("span", { ...dataProps(rest), className: cn("flex flex-wrap items-center gap-3", className), children: [options.map(({ hex, label: etiket, ...rest }) => (_jsx("button", { ...rest, type: "button", className: "tamga-swatch", style: { background: hex, color: mürekkep(hex) }, "data-selected": secili(hex), "aria-pressed": secili(hex), "aria-label": etiket, title: etiket, onClick: () => onChange(hex), children: secili(hex) ? _jsx(Icon, { icon: Check, size: "base", weight: "bold" }) : null }, hex))), custom ? (_jsxs("label", { className: "tamga-swatch tamga-swatch-custom", "data-selected": !hazirMi, title: customLabel, style: hazirMi
+                    ? /* Hiçbir hazır renk seçili değilken kutu o rengi giyiyor;
+                         seçiliyken damalı zemin "burada henüz bir renk yok" diyor. */
+                        { background: DAMA }
+                    : { background: value, color: mürekkep(value) }, children: [_jsx("span", { className: "sr-only", children: customLabel }), _jsx(Icon, { icon: hazirMi ? Eyedropper : Check, size: "base", weight: "bold", style: hazirMi ? { color: "var(--color-ink)" } : undefined }), _jsx("input", { type: "color", value: hazirMi ? options[0].hex : value, onChange: (e) => onChange(e.target.value), className: "tamga-color-input", "aria-label": customLabel })] })) : null] }));
 }
-function Yarim({ theme }) {
-    return (_jsxs("span", { className: "tamga-theme-half", "data-theme": theme, "aria-hidden": true, children: [_jsxs("span", { className: "tamga-theme-rail", children: [_jsx("span", { className: "tamga-theme-dot", "data-accent": "true" }), _jsx("span", { className: "tamga-theme-dot" }), _jsx("span", { className: "tamga-theme-dot" })] }), _jsxs("span", { className: "tamga-theme-body", children: [_jsx("span", { className: "tamga-theme-line", style: { width: "70%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "45%" } }), _jsx("span", { className: "tamga-theme-line", "data-accent": "true", style: { width: "30%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "60%" } })] })] }));
+/* Damalı zemin: "burada renk yok". Kutunun kendisi bir renk olduğu için boş
+   hâlin de bir zemini olmak zorunda, ve düz bir gri yedinci bir renk gibi
+   okunuyordu. */
+const DAMA = "repeating-linear-gradient(135deg, var(--color-hover) 0 6px, var(--color-sunk) 6px 12px)";
+/**
+ * Ink that stays readable on a given fill.
+ * TR: Verilen dolgunun üstünde okunur kalan mürekkep.
+ *
+ * TOKEN DEĞİL, HESAP · ve önce token'dı: `--color-accent-ink`. Kusuru
+ * tarayıcıda göründü. Kutular SEÇİLEN ham rengi gösteriyor, token ise o an
+ * YÜRÜRLÜKTEKİ paletin mürekkebi; koyu temada antrasit marka seçilince palet
+ * vurguyu açıyor (#838c9d) ve mürekkebini koyulaştırıyor (#222326), oysa
+ * kutunun zemini hâlâ ham #3f4756. Sonuç koyunun üstünde koyu çentik: 1.4
+ * kontrast, yani görünmez.
+ *
+ * Cevap paletin kendisinde: o rengin PALETİ hangi mürekkebi seçiyorsa kutu da
+ * onu giyiyor. Eşik uydurmuyoruz, üreteci ikinci kez yazmıyoruz.
+ */
+const MUREKKEP = new Map();
+function mürekkep(hex) {
+    const anahtar = hex.toLowerCase();
+    let m = MUREKKEP.get(anahtar);
+    if (m === undefined) {
+        m = makePalette(anahtar).light.accentInk;
+        MUREKKEP.set(anahtar, m);
+    }
+    return m;
+}
+/* Panelin yarısı: ray ve gövde. Bir tema kartı bunu bir kez çiziyor,
+   "Sistem" kartı iki kez · ikincisi çapraz kesilerek üstüne biniyor.
+
+   MİNYATÜR SABİT RENKLERLE, ve kitin tek istisnası bu. Seçenekler o an
+   yürürlükteki temayı değil SEÇİLİRSE ne olacağını gösteriyor; token
+   kullanılsaydı üçü de aynı görünürdü. Tek token: marka vurgusu, çünkü
+   önizlemenin yarısı o. */
+function Yarim({ theme, clip = false }) {
+    return (_jsxs("span", { className: "tamga-theme-half", "data-theme": theme, "data-clip": clip || undefined, "aria-hidden": true, children: [_jsxs("span", { className: "tamga-theme-rail", children: [_jsx("span", { className: "tamga-theme-dot", "data-accent": "true", style: { width: "80%" } }), _jsx("span", { className: "tamga-theme-dot", style: { width: "100%" } }), _jsx("span", { className: "tamga-theme-dot", style: { width: "70%" } }), _jsx("span", { className: "tamga-theme-dot", style: { width: "60%" } })] }), _jsxs("span", { className: "tamga-theme-body", children: [_jsx("span", { className: "tamga-theme-line", "data-accent": "true", style: { width: "50%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "100%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "70%" } })] })] }));
+}
+/**
+ * A miniature of the panel with a radio and a name under it.
+ * TR: Altında bir radyo ve bir ad duran panel minyatürü.
+ *
+ * Tema ve kenar çubuğu aynı soruyu soruyor ("hangisi olsun") ve ayrı
+ * çizilmişlerdi; ortak olan kap, farklı olan yalnız minyatürün içi.
+ */
+function OnizlemeKarti({ selected, onSelect, label, sub, children, }) {
+    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": selected, tabIndex: selected ? 0 : -1, "data-selected": selected, className: "tamga-preview-card", onClick: onSelect, children: [_jsx("span", { className: "tamga-preview-box", children: children }), _jsxs("span", { className: "tamga-preview-foot", children: [_jsx("span", { className: "tamga-radio", "data-checked": selected, "aria-hidden": true }), _jsxs("span", { className: "tamga-preview-text", children: [_jsx("strong", { children: label }), sub ? _jsx("span", { children: sub }) : null] })] })] }));
 }
 /**
  * Theme picked from three little pictures of the panel.
@@ -31,11 +83,30 @@ function Yarim({ theme }) {
  */
 export function ThemeCards({ value, onChange, labels, className, ...rest }) {
     const secenekler = [
-        { deger: "light", ad: labels.light },
-        { deger: "dark", ad: labels.dark },
-        { deger: "system", ad: labels.system },
+        { deger: "light", ad: labels.light, alt: labels.lightNote },
+        { deger: "dark", ad: labels.dark, alt: labels.darkNote },
+        { deger: "system", ad: labels.system, alt: labels.systemNote },
+    ];
+    return (_jsx("div", { ...dataProps(rest), role: "radiogroup", "aria-label": labels.group, className: cn("tamga-preview-grid", className), children: secenekler.map((s) => (_jsx(OnizlemeKarti, { selected: value === s.deger, onSelect: () => onChange(s.deger), label: s.ad, sub: s.alt, children: _jsxs("span", { className: "tamga-theme-box", children: [_jsx(Yarim, { theme: s.deger === "dark" ? "dark" : "light" }), s.deger === "system" ? _jsx(Yarim, { theme: "dark", clip: true }) : null] }) }, s.deger))) }));
+}
+/**
+ * Sidebar width picked from three little pictures of the panel.
+ * TR: Panelin üç küçük resminden seçilen kenar çubuğu genişliği.
+ *
+ * This was a `Segmented` of three words. On the same screen the theme was
+ * asked with pictures and this with words, and how much room a menu takes is
+ * the kind of thing you see rather than read.
+ * TR: Bu üç kelimelik bir `Segmented` idi. Aynı ekranda tema resimle, bu
+ * kelimeyle soruluyordu; oysa bir menünün ne kadar yer kapladığı okunacak
+ * değil görülecek bir şey.
+ */
+export function RailCards({ value, onChange, labels, className, ...rest }) {
+    const secenekler = [
+        { deger: "wide", ad: labels.wide, alt: labels.wideNote },
+        { deger: "narrow", ad: labels.narrow, alt: labels.narrowNote },
+        { deger: "free", ad: labels.free, alt: labels.freeNote },
     ];
-    return (_jsx("div", { ...dataProps(rest), role: "radiogroup", "aria-label": labels.group, className: cn("flex flex-wrap gap-3", className), children: secenekler.map((s) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === s.deger, tabIndex: value === s.deger ? 0 : -1, "data-selected": value === s.deger, className: "tamga-theme-card", onClick: () => onChange(s.deger), children: [_jsxs("span", { className: "tamga-theme-box", children: [s.deger === "dark" ? _jsx(Yarim, { theme: "dark" }) : _jsx(Yarim, { theme: "light" }), s.deger === "system" ? _jsx(Yarim, { theme: "dark" }) : null] }), _jsx("span", { className: "tamga-theme-name", children: s.ad })] }, s.deger))) }));
+    return (_jsx("div", { ...dataProps(rest), role: "radiogroup", "aria-label": labels.group, className: cn("tamga-preview-grid", className), children: secenekler.map((s) => (_jsx(OnizlemeKarti, { selected: value === s.deger, onSelect: () => onChange(s.deger), label: s.ad, sub: s.alt, children: _jsxs("span", { className: "tamga-rail-mini", "data-mode": s.deger, "aria-hidden": true, children: [_jsxs("span", { className: "tamga-rail-mini-rail", children: [_jsx("span", { "data-accent": "true" }), _jsx("span", {}), _jsx("span", {}), _jsx("span", {}), s.deger === "free" ? _jsx("span", { className: "tamga-rail-mini-toggle" }) : null] }), _jsxs("span", { className: "tamga-rail-mini-body", children: [_jsx("span", {}), _jsx("span", {})] })] }) }, s.deger))) }));
 }
 /**
  * One image with a preview, a replace and a remove.

package/dist/components/avatar.d.ts

@@ -1,10 +1,13 @@
+import type { Tone } from "./tone.js";
 /** Square, monochrome. Identity is text — color is reserved for health. */
-export declare function Avatar({ name, size, src, bare, letters, ...rest }: {
+export declare function Avatar({ name, size, src, bare, look, letters, status, ...rest }: {
     name: string;
     size?: number;
     /**
-     * falls back to initials when absent or broken TR: yoksa ya da yüklenemezse baş harflere
-     * düşer
+     * The photo. Without it the tile carries initials; a photo that FAILS to load is the
+     * browser's broken-image mark, not the initials. TR: Fotoğraf. Yoksa karo baş harfleri
+     * taşıyor; yüklenEMEyen bir fotoğrafta baş harfler değil tarayıcının kırık görsel işareti
+     * kalıyor.
      */
     src?: string;
     /**
@@ -16,6 +19,14 @@ export declare function Avatar({ name, size, src, bare, letters, ...rest }: {
      * düğmesi çıplak bir simge taşıyan bir araç çubuğunda tek başına farklı gösteriyordu.
      */
     bare?: boolean;
+    /**
+     * `solid` the accent tile with light initials, `soft` the light tile with dark ones. Two, not
+     * a palette: an avatar is not a status, and a wall of differently coloured tiles reads as a
+     * legend nobody wrote. TR: `solid` vurgu karosu ve açık baş harfler, `soft` açık karo ve koyu
+     * harfler. İki tane, bir palet değil: avatar bir durum değil, ve farklı renkli karolardan
+     * oluşan bir duvar, kimsenin yazmadığı bir lejant gibi okunuyor.
+     */
+    look?: "solid" | "soft";
     /**
      * 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
@@ -28,29 +39,25 @@ export declare function Avatar({ name, size, src, bare, letters, ...rest }: {
      * harf ise yarım okunamaz. `AvatarStack` bu yüzden 1 geçiyor.
      */
     letters?: 1 | 2;
+    /**
+     * A presence mark on the tile's bottom-right corner, in the tone's own colour. It is the ONE
+     * place colour is allowed on an avatar: the tile stays monochrome because identity is text,
+     * and this square is not identity but health. Absent by default · a mark on every avatar is
+     * a legend nobody wrote. TR: Karonun sağ alt köşesinde, tonun kendi rengiyle bir varlık
+     * işareti. Avatarda rengin izinli olduğu TEK yer: kimlik metin olduğu için karo tek renkli
+     * kalıyor, ve bu kare kimlik değil sağlık. Varsayılanı yok · her avatarda duran bir işaret,
+     * kimsenin yazmadığı bir lejant olurdu.
+     */
+    status?: Tone;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): 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.
+ * Üst üste binen ekip · örtüşme boyuna ORANLI (dörtte bir), ve üstteki karonun
+ * etrafında arka plan renginde bir AYIRICI HALKA var: onsuz bitişen 1px kenarlar
+ * tek çizgi oluyor. `surface` bu yüzden prop, halka zeminin rengi olmalı.
  *
- * `surface` bu yüzden bir prop: halka, yığının ÜSTÜNDE DURDUĞU zeminin rengi
- * olmalı. Varsayılan kart zemini (`--color-shell`), çünkü bir ekip listesi
- * neredeyse her zaman bir kartın içindedir — ama sayfa zemininde duracaksa
- * çağıran onu söyler. Bulanıklık yok: `0 0 0` yayılımsız bir halka, gölge
- * değil.
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
 export declare function AvatarStack({ names, extra, size, surface, ...rest }: {
     names: string[];

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAWA,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAS,EACT,GAAG,EACH,IAAY,EACZ,OAAW,EACX,GAAG,IAAI,EACR,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;IAChB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAkCA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAS,EACT,OAA8B,EAC9B,GAAG,IAAI,EACR,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;IACjB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA4BA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAWtC,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,IAAS,EACT,GAAG,EACH,IAAY,EACZ,IAAc,EACd,OAAW,EACX,MAAM,EACN,GAAG,IAAI,EACR,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA0EA;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,IAAS,EACT,OAA8B,EAC9B,GAAG,IAAI,EACR,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;IACjB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAuCA"}