tamga-ui 0.1.0

package/dist/components/combobox.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Icon } from "./icon.js";
+import { CaretDown, Close, Search } from "./icons.js";
+export function Combobox({ options, value, onChange, onSearch, placeholder, labels, disabled = false, invalid = false, className, }) {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(0);
+    const box = useRef(null);
+    const selected = options.find((o) => o.value === value);
+    const shown = useMemo(() => {
+        if (onSearch || query.trim() === "")
+            return options;
+        const q = query.trim().toLocaleLowerCase();
+        return options.filter((o) => o.label.toLocaleLowerCase().includes(q) || o.hint?.toLocaleLowerCase().includes(q));
+    }, [options, query, onSearch]);
+    /* Dışarı tıklamak kapatır — bir combobox karar istemez, bilgi verir. */
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (!box.current?.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDown);
+        return () => document.removeEventListener("mousedown", onDown);
+    }, [open]);
+    useEffect(() => setActive(0), [query, open]);
+    function commit(o) {
+        onChange?.(o.value);
+        setQuery("");
+        setOpen(false);
+    }
+    return (_jsxs("div", { ref: box, className: cn("relative", className), children: [_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", className: "pointer-events-none absolute left-3 text-ink-faint" }), _jsx("input", { type: "text", role: "combobox", "aria-expanded": open, "aria-controls": `${id}-list`, "aria-autocomplete": "list", "aria-activedescendant": open && shown[active] ? `${id}-opt-${active}` : undefined, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: selected ? selected.label : placeholder, value: query, onFocus: () => setOpen(true), onChange: (e) => {
+                            setQuery(e.target.value);
+                            setOpen(true);
+                            onSearch?.(e.target.value);
+                        }, onKeyDown: (e) => {
+                            if (e.key === "ArrowDown") {
+                                e.preventDefault();
+                                setOpen(true);
+                                setActive((i) => Math.min(i + 1, shown.length - 1));
+                            }
+                            else if (e.key === "ArrowUp") {
+                                e.preventDefault();
+                                setActive((i) => Math.max(i - 1, 0));
+                            }
+                            else if (e.key === "Enter" && open && shown[active]) {
+                                e.preventDefault();
+                                commit(shown[active]);
+                            }
+                            else if (e.key === "Escape") {
+                                setOpen(false);
+                            }
+                        }, className: cn("tamga-input w-full pl-9", invalid && "tamga-input-invalid", selected && !query && "text-ink") }), _jsxs("span", { className: "absolute right-1.5 flex items-center gap-0.5", children: [selected ? (_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.clear, onClick: () => {
+                                    onChange?.(undefined);
+                                    setQuery("");
+                                }, children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null, _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.open, "aria-expanded": open, onClick: () => setOpen((v) => !v), children: _jsx(Icon, { icon: CaretDown, size: "xs" }) })] })] }), open ? (_jsx("div", { id: `${id}-list`, role: "listbox", className: "tamga-overlay absolute z-30 mt-2 max-h-72 w-full overflow-y-auto py-1", children: shown.length === 0 ? (_jsx("p", { className: "px-3 py-2.5 text-body text-ink-faint", children: labels.empty })) : (shown.map((o, i) => (_jsxs("button", { id: `${id}-opt-${i}`, type: "button", role: "option", "aria-selected": o.value === value, "data-selected": o.value === value, "data-active": i === active, className: "tamga-option w-full text-left", onMouseEnter: () => setActive(i), onClick: () => commit(o), children: [_jsx("span", { className: "block truncate", children: o.label }), o.hint ? (_jsx("span", { className: "block truncate font-mono text-caption text-ink-faint", children: o.hint })) : null] }, o.value)))) })) : null] }));
+}

package/dist/components/control-base.d.ts

@@ -0,0 +1,7 @@
+/** Etiketli kontrollerin ortak devre-dışı görünümü. */
+declare const OFF: {
+    readonly opacity: 0.45;
+    readonly cursor: "not-allowed";
+};
+export { OFF };
+//# sourceMappingURL=control-base.d.ts.map

package/dist/components/control-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-base.d.ts","sourceRoot":"","sources":["../../src/components/control-base.ts"],"names":[],"mappings":"AAGA,uDAAuD;AACvD,QAAA,MAAM,GAAG;aAAK,OAAO,EAAE,IAAI;aAAE,MAAM,EAAE,aAAa;CAAW,CAAC;AAE9D,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/control-base.js

@@ -0,0 +1,6 @@
+/* Seçim kontrollerinin paylaştığı tek değer. Beşi ayrı dosyada yaşıyor —
+   guard'ın modeli "bir dosya = bir primitive" ve o model doğru: bir primitive
+   kendi dosyasında olmazsa, durum story'sinin neyi kanıtladığı belirsizleşir. */
+/** Etiketli kontrollerin ortak devre-dışı görünümü. */
+const OFF = { opacity: 0.45, cursor: "not-allowed" };
+export { OFF };

package/dist/components/data-table.d.ts

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+/**
+ * DATA TABLE — ve neden tek bir `<DataTable data={…} />` DEĞİL.
+ *
+ * Gerekçe: docs/gerekce/02-veri-ve-liste.md
+ */
+export type SortDirection = "asc" | "desc";
+/**
+ * Sıralanabilir sütun başlığı.
+ *
+ * `<th>` içinde bir `<button>`: başlığın kendisini tıklanabilir yapmak,
+ * ekran okuyucuya sütunun aynı zamanda bir kontrol olduğunu söylemez.
+ * `aria-sort` da `<th>`de olmak zorunda — okuyucu sıralama durumunu oradan alır.
+ */
+export declare function SortHeader({ children, direction, onSort, align, className, ...rest }: {
+    children: ReactNode;
+    /** `undefined` when this column is not sorted. TR: Bu sütun sıralı değilse `undefined`. */
+    direction?: SortDirection;
+    onSort?: (next: SortDirection) => void;
+    align?: "left" | "right";
+    className?: string;
+} & Omit<React.ComponentProps<"th">, "children" | "onClick">): import("react").JSX.Element;
+/**
+ * Baş onay kutusu — ve `indeterminate` neden önemli.
+ *
+ * Beş satırın ikisi seçiliyse baş kutu ne işaretli ne boştur; üçüncü bir
+ * durumdadır. Boş göstermek "hiçbiri seçili değil" der ve yalandır; işaretli
+ * göstermek "hepsi seçili" der ve daha kötüdür — kullanıcı silmeye basar.
+ */
+export declare function SelectAll({ checked, indeterminate, onChange, label, }: {
+    checked: boolean;
+    indeterminate: boolean;
+    onChange?: (next: boolean) => void;
+    label: string;
+}): import("react").JSX.Element;
+/** Satır seçim kutusu — baş kutunun küçük kardeşi. */
+export declare function SelectRow({ checked, onChange, label, }: {
+    checked: boolean;
+    onChange?: (next: boolean) => void;
+    label: string;
+}): import("react").JSX.Element;
+/**
+ * Seçim çubuğu — "3 kayıt seçildi" ve yanındaki toplu eylemler.
+ *
+ * Tablonun ÜSTÜNDE durur, altında değil: seçim yukarıdan yapılır ve eylem
+ * gözün gittiği yerde olmalı. Ve seçim boşken hiç render edilmez — boş bir
+ * çubuk yer kaplar, bilgi vermez.
+ */
+export declare function SelectionBar({ count, onClear, children, labels, className, }: {
+    count: number;
+    onClear?: () => void;
+    /**
+     * The bulk actions, usually a few `<Button size="sm">`. TR: Toplu eylemler, genelde birkaç
+     * `<Button size="sm">`.
+     */
+    children?: ReactNode;
+    /**
+     * `selected` may return a ReactNode: in "3 records selected" the bold number is the only
+     * thing that makes the sentence scannable. TR: `selected` ReactNode döndürebiliyor: "3 kayıt
+     * seçili" cümlesinde sayının kalın olması, cümleyi taranabilir kılan tek şey.
+     */
+    labels: {
+        selected: (n: number) => ReactNode;
+        clear: string;
+    };
+    className?: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/components/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC;;;;GAIG;AAEH,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,KAAc,EACd,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,+BA+B3D;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,aAAa,EACb,QAAQ,EACR,KAAK,GACN,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf,+BA2BA;AAED,sDAAsD;AACtD,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf,+BAEA;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,MAAM,EAAE;QAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sCAuBA"}

package/dist/components/data-table.js

@@ -0,0 +1,50 @@
+"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 { CaretDown, Close } from "./icons.js";
+import { Checkbox } from "./checkbox.js";
+/**
+ * Sıralanabilir sütun başlığı.
+ *
+ * `<th>` içinde bir `<button>`: başlığın kendisini tıklanabilir yapmak,
+ * ekran okuyucuya sütunun aynı zamanda bir kontrol olduğunu söylemez.
+ * `aria-sort` da `<th>`de olmak zorunda — okuyucu sıralama durumunu oradan alır.
+ */
+export function SortHeader({ children, direction, onSort, align = "left", className, ...rest }) {
+    const next = direction === "asc" ? "desc" : "asc";
+    return (_jsx("th", { scope: "col", "aria-sort": direction ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...rest, children: _jsxs("button", { type: "button", onClick: () => onSort?.(next), className: cn("inline-flex items-center gap-1.5", align === "right" && "flex-row-reverse", direction ? "text-ink" : undefined), children: [children, direction ? (_jsx(Icon, { icon: CaretDown, size: "xs", className: direction === "asc" ? "rotate-180" : undefined })) : null] }) }));
+}
+/**
+ * Baş onay kutusu — ve `indeterminate` neden önemli.
+ *
+ * Beş satırın ikisi seçiliyse baş kutu ne işaretli ne boştur; üçüncü bir
+ * durumdadır. Boş göstermek "hiçbiri seçili değil" der ve yalandır; işaretli
+ * göstermek "hepsi seçili" der ve daha kötüdür — kullanıcı silmeye basar.
+ */
+export function SelectAll({ checked, indeterminate, onChange, label, }) {
+    return (_jsx("span", { 
+        /* `aria-checked="mixed"` üçüncü durumun standart karşılığı. */
+        role: "checkbox", "aria-checked": indeterminate ? "mixed" : checked, "aria-label": label, tabIndex: 0, onClick: () => onChange?.(!checked), onKeyDown: (e) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                onChange?.(!checked);
+            }
+        }, className: "inline-flex cursor-pointer", children: _jsxs("span", { className: "tamga-check", "data-checked": checked || indeterminate, children: [indeterminate ? (_jsx("span", { className: "block h-0.5 w-2 bg-current", "aria-hidden": true })) : checked ? (_jsx(Icon, { icon: CaretDown, size: "xs", className: "hidden" })) : null, checked && !indeterminate ? _jsx("span", { className: "block h-2 w-2 bg-current", "aria-hidden": true }) : null] }) }));
+}
+/** Satır seçim kutusu — baş kutunun küçük kardeşi. */
+export function SelectRow({ checked, onChange, label, }) {
+    return _jsx(Checkbox, { label: _jsx("span", { className: "sr-only", children: label }), checked: checked, onChange: onChange });
+}
+/**
+ * Seçim çubuğu — "3 kayıt seçildi" ve yanındaki toplu eylemler.
+ *
+ * Tablonun ÜSTÜNDE durur, altında değil: seçim yukarıdan yapılır ve eylem
+ * gözün gittiği yerde olmalı. Ve seçim boşken hiç render edilmez — boş bir
+ * çubuk yer kaplar, bilgi vermez.
+ */
+export function SelectionBar({ count, onClear, children, labels, className, }) {
+    if (count === 0)
+        return null;
+    return (_jsxs("div", { role: "status", className: cn("tamga-gutter flex flex-wrap items-center gap-3 border-b border-[var(--color-line)] py-3", className), style: { background: "var(--color-accent-bg)" }, children: [_jsx("span", { className: "text-body font-medium text-ink tabular-nums", children: labels.selected(count) }), children ? _jsx("span", { className: "flex flex-wrap items-center gap-2", children: children }) : null, _jsx("button", { type: "button", className: "tamga-icon-btn ml-auto", "aria-label": labels.clear, onClick: onClear, children: _jsx(Icon, { icon: Close, size: "xs" }) })] }));
+}

package/dist/components/date-picker.d.ts

@@ -0,0 +1,52 @@
+/**
+ * DatePicker — tek gün ve aralık.
+ *
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
+ */
+/** `2026-04-15` — saat yok, dilim yok. */
+export type DateISO = string;
+export type DateRange = {
+    from?: DateISO;
+    to?: DateISO;
+};
+export declare function Calendar({ locale, value, range, onSelect, labels, className, }: {
+    /**
+     * `"tr-TR"`, `"en-US"`; month names and the first day of the week come from it. TR:
+     * `"tr-TR"`, `"en-US"`; ay adları ve hafta başlangıcı buradan gelir.
+     */
+    locale: string;
+    value?: DateISO;
+    /**
+     * Given, range mode: the first click is the start, the second the end. TR: Verilirse aralık
+     * modu: ilk tıklama başlangıç, ikincisi bitiş.
+     */
+    range?: DateRange;
+    onSelect?: (date: DateISO) => void;
+    labels: {
+        previousMonth: string;
+        nextMonth: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Alan + açılan takvim.
+ *
+ * Girdi salt-okunur: elle tarih yazmak, her yerelde farklı bir ayraç ve sıra
+ * demektir (`15/04/2026` · `04/15/2026` · `2026-04-15`) ve yanlış okunan bir
+ * tarih sessizce yanlış veri üretir. Takvim tek doğru giriş yolu.
+ */
+export declare function DatePicker({ locale, value, onChange, placeholder, labels, disabled, className, }: {
+    locale: string;
+    value?: DateISO;
+    onChange?: (next: DateISO | undefined) => void;
+    placeholder: string;
+    labels: {
+        previousMonth: string;
+        nextMonth: string;
+        open: string;
+        clear: string;
+    };
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/components/date-picker.tsx"],"names":[],"mappings":"AAOA;;;;GAIG;AAEH,0CAA0C;AAC1C,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAgCzD,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA0EA;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAgB,EAChB,SAAS,GACV,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA0DA"}

package/dist/components/date-picker.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Icon } from "./icon.js";
+import { CaretLeft, CaretRight, CalendarPlus, Close } from "./icons.js";
+const iso = (y, m, d) => `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+function monthMatrix(year, month, firstDay) {
+    const first = new Date(Date.UTC(year, month, 1));
+    const days = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+    /* Hafta başına göre kaydırma: Pazartesi başlayan bir takvimde Pazar 6'dır. */
+    const lead = (first.getUTCDay() - firstDay + 7) % 7;
+    const cells = Array.from({ length: lead }, () => null);
+    for (let d = 1; d <= days; d++)
+        cells.push(d);
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    return cells;
+}
+/** Yerelin hafta başlangıcı. Tarayıcı biliyorsa ondan, bilmiyorsa Pazartesi. */
+function weekStart(locale) {
+    try {
+        const info = new Intl.Locale(locale);
+        const first = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
+        /* Intl 1=Pazartesi … 7=Pazar; Date 0=Pazar. */
+        if (first)
+            return first % 7;
+    }
+    catch {
+        /* eski tarayıcı: varsayılana düş */
+    }
+    return 1;
+}
+export function Calendar({ locale, value, range, onSelect, labels, className, }) {
+    const today = new Date();
+    const [view, setView] = useState({ y: today.getFullYear(), m: today.getMonth() });
+    const first = weekStart(locale);
+    const cells = useMemo(() => monthMatrix(view.y, view.m, first), [view, first]);
+    const monthName = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(new Date(Date.UTC(view.y, view.m, 1)));
+    const dayNames = useMemo(() => {
+        const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+        /* 2024-01-07 bir Pazar; oradan hafta başına kaydırıyoruz. */
+        return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(Date.UTC(2024, 0, 7 + ((first + i) % 7)))));
+    }, [locale, first]);
+    const inRange = (d) => range?.from && range?.to ? d >= range.from && d <= range.to : false;
+    const isEdge = (d) => d === range?.from || d === range?.to || d === value;
+    return (_jsxs("div", { className: cn("w-70", className), children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx("button", { type: "button", className: "tamga-icon-btn", "aria-label": labels.previousMonth, onClick: () => setView((v) => (v.m === 0 ? { y: v.y - 1, m: 11 } : { ...v, m: v.m - 1 })), children: _jsx(Icon, { icon: CaretLeft, size: "xs" }) }), _jsx("span", { className: "flex-1 text-center text-body font-medium text-ink", children: monthName }), _jsx("button", { type: "button", className: "tamga-icon-btn", "aria-label": labels.nextMonth, onClick: () => setView((v) => (v.m === 11 ? { y: v.y + 1, m: 0 } : { ...v, m: v.m + 1 })), children: _jsx(Icon, { icon: CaretRight, size: "xs" }) })] }), _jsxs("div", { className: "grid grid-cols-7 gap-px", children: [dayNames.map((d) => (_jsx("span", { className: "pb-1 text-center text-caption text-ink-faint", children: d }, d))), cells.map((d, i) => {
+                        if (d === null)
+                            return _jsx("span", {}, `x${i}`);
+                        const date = iso(view.y, view.m, d);
+                        return (_jsx("button", { type: "button", 
+                            /* Seçili gün DOLGU alır — bir tarih bir değerdir, bir hedef değil;
+                               checkbox ile aynı gerekçe (Yasa 2). */
+                            className: "tamga-option justify-center tabular-nums", "data-selected": isEdge(date), "data-active": inRange(date) && !isEdge(date), "aria-pressed": isEdge(date), onClick: () => onSelect?.(date), children: d }, date));
+                    })] })] }));
+}
+/**
+ * Alan + açılan takvim.
+ *
+ * Girdi salt-okunur: elle tarih yazmak, her yerelde farklı bir ayraç ve sıra
+ * demektir (`15/04/2026` · `04/15/2026` · `2026-04-15`) ve yanlış okunan bir
+ * tarih sessizce yanlış veri üretir. Takvim tek doğru giriş yolu.
+ */
+export function DatePicker({ locale, value, onChange, placeholder, labels, disabled = false, className, }) {
+    const [open, setOpen] = useState(false);
+    const shown = value
+        ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(new Date(`${value}T00:00:00Z`))
+        : "";
+    return (_jsxs("div", { className: cn("relative", className), children: [_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: CalendarPlus, size: "xs", className: "pointer-events-none absolute left-3 text-ink-faint" }), _jsx("input", { type: "text", readOnly: true, disabled: disabled, value: shown, placeholder: placeholder, onClick: () => !disabled && setOpen((v) => !v), className: "tamga-input w-full cursor-pointer pr-16 pl-9", "aria-haspopup": "dialog", "aria-expanded": open }), _jsxs("span", { className: "absolute right-1.5 flex gap-0.5", children: [value ? (_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.clear, onClick: () => onChange?.(undefined), children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null, _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.open, onClick: () => setOpen((v) => !v), children: _jsx(Icon, { icon: CalendarPlus, size: "xs" }) })] })] }), open ? (_jsx("div", { className: "tamga-overlay absolute z-30 mt-2 p-3", children: _jsx(Calendar, { locale: locale, value: value, labels: labels, onSelect: (d) => {
+                        onChange?.(d);
+                        setOpen(false);
+                    } }) })) : null] }));
+}

package/dist/components/disclosure.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+/**
+ * Açılıp kapanan bölümler.
+ *
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
+ */
+/** Tek bir açılır bölüm. */
+export declare function Collapsible({ title, defaultOpen, meta, className, children, }: {
+    title: string;
+    defaultOpen?: boolean;
+    /**
+     * The secondary text to the right of the title: a count, a state. TR: Başlığın sağındaki
+     * ikincil metin: sayı, durum.
+     */
+    meta?: ReactNode;
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Açılır bölümler grubu.
+ *
+ * Yalnız bir kap: her bölüm kendi durumunu tutuyor. "Aynı anda tek bölüm
+ * açık" davranışı BİLEREK yok — bir ayarlar sayfasında iki bölümü yan yana
+ * karşılaştırmak yaygın bir iş, ve otomatik kapanma onu imkânsız kılar.
+ * Gerekiyorsa çağıran kendi durumunu tutar.
+ */
+export declare function Accordion({ className, children }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=disclosure.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure.d.ts","sourceRoot":"","sources":["../../src/components/disclosure.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxD;;;;GAIG;AAEH,4BAA4B;AAC5B,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAmB,EACnB,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAkCA;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAE7F"}

package/dist/components/disclosure.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Icon } from "./icon.js";
+import { CaretRight } from "./icons.js";
+/**
+ * Açılıp kapanan bölümler.
+ *
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
+ */
+/** Tek bir açılır bölüm. */
+export function Collapsible({ title, defaultOpen = false, meta, className, children, }) {
+    const id = useId();
+    const [open, setOpen] = useState(defaultOpen);
+    return (_jsxs("div", { className: cn("border-b border-[var(--color-line)] last:border-b-0", className), children: [_jsxs("button", { type: "button", 
+                /* `tamga-gutter` şart: `.tamga-head` yalnız DİKEY boşluk taşıyor.
+                   Onsuz başlık kabın kenarına yapışıyordu — ve altındaki gövde
+                   gutter'lı olduğu için ikisi hizasız duruyordu. */
+                className: "tamga-head tamga-gutter w-full text-left", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((v) => !v), children: [_jsx(Icon, { icon: CaretRight, size: "xs", className: "shrink-0 transition-transform", style: { transform: open ? "rotate(90deg)" : undefined } }), _jsx("span", { className: "min-w-0 flex-1 text-body font-medium text-ink", children: title }), meta ? _jsx("span", { className: "text-small text-ink-faint", children: meta }) : null] }), _jsx("div", { id: id, hidden: !open, className: "tamga-gutter pb-4", children: children })] }));
+}
+/**
+ * Açılır bölümler grubu.
+ *
+ * Yalnız bir kap: her bölüm kendi durumunu tutuyor. "Aynı anda tek bölüm
+ * açık" davranışı BİLEREK yok — bir ayarlar sayfasında iki bölümü yan yana
+ * karşılaştırmak yaygın bir iş, ve otomatik kapanma onu imkânsız kılar.
+ * Gerekiyorsa çağıran kendi durumunu tutar.
+ */
+export function Accordion({ className, children }) {
+    return _jsx("div", { className: cn("tamga-surface overflow-hidden", className), children: children });
+}

package/dist/components/display.d.ts

@@ -0,0 +1,188 @@
+import { type ReactNode } from "react";
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type LinkComponent } from "./link.js";
+import { type Tone } from "./tone.js";
+/**
+ * Anahtar/değer listesi — detay sayfalarının omurgası.
+ *
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
+ */
+export declare function Descriptions({ items, layout, className, }: {
+    items: readonly {
+        term: string;
+        value: ReactNode;
+        mono?: boolean;
+    }[];
+    /**
+     * `wide` at page width, `compact` inside a card. TR: `wide` sayfa genişliğinde, `compact` bir
+     * kartın içinde.
+     */
+    layout?: "wide" | "compact";
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Tek bir sayı, büyük. Sektörde adı "stat" ya da "KPI kartı".
+ *
+ * `SkeletonKpi` kitte YILLARCA vardı ve yerini tuttuğu bileşen yoktu — bir
+ * iskelet, var olmayan bir şeyin yerini tutuyordu. Kitin en tuhaf açığıydı.
+ *
+ * TIKLANABİLİR OLMASI SONRADAN GELDİ, ve gelmek zorundaydı. İlk hâli yalnız
+ * okunuyordu; oysa bir panodaki sayı neredeyse hiçbir zaman salt okunur
+ * değildir. Ölçüldü: bir ürün panelinde bu karo iki kez elle yeniden yazılmış,
+ * çünkü biri bir EKRAN AÇIYOR ("37 iade bekliyor" → iade listesi), öteki bir
+ * FİLTRE UYGULUYOR (aynı listeyi o adıma indiriyor). Kitin karosu ikisini de
+ * yapamadığı için iki kopya doğdu ve ikisi birbirine benzemez oldu. Yeteneği
+ * eksik bir bileşen, olmayan bir bileşenden daha çok kopya üretiyor.
+ *
+ * ÜÇ HÂL, VE SEMANTİK ELEMAN HER BİRİNDE FARKLI:
+ *
+ *   okunur   `<div>`     — sayı bir bilgi
+ *   `href`   `<a>`       — sayı bir yere gidiyor
+ *   `onClick` `<button>` — sayı bir şeyi değiştiriyor, `pressed` ile açık/kapalı
+ *
+ * Üçünü tek elemanla yapmak (her şey `<div onClick>`) klavyeyle gezilemeyen
+ * ve ekran okuyucunun hiç duyurmadığı bir kart üretir.
+ *
+ * FİZİK YALNIZ TIKLANABİLİR HÂLDE. Kitin 1. yasası (kenar + kaymış gölge,
+ * hover'da yükselme, basınca oturma) tıklanan şeyler içindir; okunan bir
+ * karonun hover'da oynaması, tıklanabilir olduğu yalanını söyler.
+ *
+ * Sayı `tabular-nums`: değişen bir sayaç, rakam genişlikleri eşit olmadığı
+ * sürece her güncellemede yatay olarak zıplar.
+ *
+ * `delta` bir yön taşır ama İYİ/KÖTÜ taşımaz — artan bir hata oranı da
+ * artıştır. Anlamı `better` veriyor: yükselmesi mi iyi, düşmesi mi.
+ *
+ * SAYI HER ZAMAN MÜREKKEP RENGİNDE. Bir süre `attention` diye bir bayrak
+ * vardı ve sayıyı kritik renge boyuyordu; kaldırıldı. Tek tüketicisinde beş
+ * karonun üçü kırmızıydı, ve üç kırmızı hiçbir şeyi öne çıkarmıyor — yalnız
+ * paneli alarm hâlinde gösteriyor. Bir sayının kötü olduğunu söylemenin yeri
+ * `delta` (yönü ve anlamı olan bir değişim) ya da karonun açtığı ekranın
+ * kendisi; karonun rengi değil.
+ *
+ * `accent` DENENDİ VE KALDIRILDI. Karonun sol kenarında verinin kendi rengini
+ * (bir iade adımının rengi) taşıyan ince bir şerit vardı. Tek tüketicisi vardı
+ * ve o tüketici reddetti: renk zaten listedeki rozette ve çiplerde duruyordu,
+ * kartın kenarında üçüncü kez söylenince aynı bileşen iki ekranda farklı
+ * görünüyordu. Tüketicisi olmayan bir prop, `SkeletonKpi`ın yıllarca yaşadığı
+ * boşluğun aynısı: duruyor, belgeleniyor, hiçbir şeyin yerini tutmuyor.
+ */
+export declare function Kpi({ label, value, unit, icon, note, delta, better, chart, href, onClick, pressed, linkComponent: Link, className, }: {
+    label: string;
+    value: string | number;
+    unit?: string;
+    /** A glyph in a tile at the left, saying what is counted. TR: Solda bir karo içinde, neyin sayıldığını söyleyen simge. */
+    icon?: PhosphorIcon;
+    /** One quiet line under the number. TR: Sayının altında tek sessiz satır. */
+    note?: string;
+    /** The percentage change against the previous value. TR: Bir öncekine göre yüzde değişim. */
+    delta?: number;
+    /** Which direction is the good news. TR: Hangi yön iyi haber. */
+    better?: "up" | "down";
+    /** An inline chart, such as a `Sparkline`. TR: Satır içi grafik, `Sparkline` gibi. */
+    chart?: ReactNode;
+    /** Where the number leads. Makes the tile a link. TR: Sayının götürdüğü yer. Karoyu bağlantı yapar. */
+    href?: string;
+    /** What the number toggles. Makes the tile a button. TR: Sayının açıp kapadığı şey. Karoyu düğme yapar. */
+    onClick?: () => void;
+    /** Whether that toggle is currently on. TR: O anahtarın şu an açık olup olmadığı. */
+    pressed?: boolean;
+    /** The router's link, so the tile does not force a full page load. TR: Yönlendiricinin bağlantısı, karo tam sayfa yüklemeye zorlamasın diye. */
+    linkComponent?: LinkComponent;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * KPI karolarının ızgarası.
+ *
+ * NEDEN AYRI BİR BİLEŞEN: karoların dizilişi her ekranda elle yazılıyordu
+ * (`grid gap-4 sm:grid-cols-2 xl:grid-cols-5`) ve ekrandan ekrana tutmuyordu —
+ * biri dörtlü, öteki beşli, bir üçüncüsü boşluğu 3 veriyordu. Izgara karonun
+ * kendi işi değil ama karo KÜMESİNİN işi, ve tek yerde durunca hepsi tutuyor.
+ *
+ * SÜTUN SAYISI VERİLMİYOR, SAYILIYOR: kaç karo varsa o kadar sütun (en çok
+ * altı). Elle verilen bir sütun sayısı, karo eklenince yalnız o ekranda
+ * güncelleniyor ve tek başına kalan bir karo tam satırı kaplıyor.
+ */
+export declare function KpiGrid({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Kod bloğu, kopyalanabilir.
+ *
+ * Bir panelde bu her zaman aynı üç şeydir: API anahtarı, webhook adresi,
+ * kurulum komutu. Üçünde de kullanıcının yaptığı tek şey KOPYALAMAK — o yüzden
+ * kopyalama düğmesi bir seçenek değil, bileşenin kendisi.
+ *
+ * Kopyalama panosu her yerde çalışmaz (HTTPS olmayan bir kaynakta, ya da
+ * izin verilmemişse). Başarısızlık SESSİZ olmamalı: düğme metni değişmezse
+ * kullanıcı kopyalandığını sanır ve boş yapıştırır.
+ */
+export declare function Code({ children, labels, className, }: {
+    /** The text to be copied itself. TR: Kopyalanacak metnin kendisi. */
+    children: string;
+    labels: {
+        copy: string;
+        copied: string;
+        failed: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Klavye tuşu.
+ *
+ * `<kbd>` KULLANILIYOR, `<span>` değil: bir ekran okuyucu için "Ctrl" ile
+ * "bir tuşa basılacak" arasındaki fark bu elemanda yaşıyor.
+ */
+export declare function Kbd({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Sayaç rozeti — bir ikonun köşesindeki rakam.
+ *
+ * `StatusChip` bir DURUM taşır ("Yayında"), bu bir SAYI taşır ("3"). İkisi
+ * ayrı bileşen çünkü ayrı şeyler: durum okunur, sayı sayılır.
+ *
+ * `max` üstünde "+" ile kesiliyor. Kesilmezse dört haneli bir sayı rozetin
+ * kutusunu şişirir ve altındaki ikonu ezer.
+ *
+ * Sıfır GÖSTERİLMEZ: "0 bildirim" bir bilgi değil, gürültüdür.
+ */
+export declare function Badge({ count, max, tone, label, className, children, }: {
+    count: number;
+    max?: number;
+    tone?: Tone;
+    /**
+     * What the number is: "unread notifications". The screen reader reads it. TR: Sayının ne
+     * olduğu: "okunmamış bildirim". Ekran okuyucu bunu okur.
+     */
+    label: string;
+    className?: string;
+    /**
+     * What the badge sits on (an icon, an avatar). Without it the badge stands alone. TR: Rozetin
+     * üstüne oturacağı şey (ikon, avatar). Yoksa rozet tek başına durur.
+     */
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Adım göstergesi.
+ *
+ * Üründe bir sihirbaz şablonu vardı ve adım göstergesi yoktu — yani kullanıcı
+ * kaçıncı adımda olduğunu ve kaç adım kaldığını bilmiyordu. Bir sihirbazın
+ * varlık sebebi tam olarak budur.
+ *
+ * `<ol>` kullanılıyor: adımlar SIRALI ve sıra bilgi taşıyor. Ekran okuyucu
+ * "3 öğeli liste, öğe 2" der; `<div>`'lerle bu bilgi kaybolur.
+ *
+ * Tamamlanan adım bir onay işareti alıyor, aktif olan aksan kenarı, gelecek
+ * olan sönük. Üç durum üç ayrı görsel dil — çünkü "neredeyim" ve "ne kaldı"
+ * ayrı iki soru.
+ */
+export declare function Steps({ steps, current, className, }: {
+    steps: readonly string[];
+    /** The active step, counting from zero. TR: Sıfırdan sayan aktif adım. */
+    current: number;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=display.d.ts.map

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

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