tamga-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mantıksal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,172 @@
+# tamga-ui
+
+Mantıksal'ın ortak arayüz kütüphanesi: token'lar, fizik ve bileşenler.
+
+Framework değil **kütüphane** — ekranları sen kurarsın, kit parçaları verir. Kit hiçbir ürünün
+adını, sözlüğünü ya da kimliğini bilmez.
+
+- **Bileşenler** `tamga-ui`
+- **İkonlar** `tamga-ui/icons`
+- **Bloklar** `tamga-ui/blocks` — bir bileşenden büyük, bir ekrandan küçük
+- **Şablonlar** `tamga-ui/patterns` — ekranların şekli (liste, detay, ayar, oturum, kabuk)
+
+Doküman sitesi: depoyu klonlayıp `pnpm install && pnpm --filter tamga-docs dev` (port **6070**).
+
+---
+
+## Kurulum
+
+### Henüz npm'de değil
+
+Paket yayınlanmadı. Bugün üç yol var, üçü de çalışıyor:
+
+**1 · Tarball (en temiz).** Kit deposunda:
+
+```bash
+pnpm install
+pnpm --filter tamga-ui pack     # tamga-ui-0.1.0.tgz üretir
+```
+
+Kendi projende:
+
+```bash
+npm install ../tamga/packages/ui/tamga-ui-0.1.0.tgz
+```
+
+**2 · Yerel yol.** Aynı makinede duruyorsa:
+
+```bash
+npm install file:../tamga/packages/ui
+```
+
+> **Dikkat:** `file:` bir SEMBOLİK BAĞ kuruyor, ve Tailwind v4 `@source` taramasını sembolik
+> bağın ardına götürmüyor. Sonuç sinsi: tipler çözülür, importlar çalışır, ama utility sınıfları
+> üretilmediği için bileşenler yarı çıplak çıkar. Geliştirirken hızlı, teslim ederken tarball.
+
+**3 · Git.** npm bir monorepo'nun alt klasörünü doğrudan kuramıyor, o yüzden depoyu klonlayıp
+1 ya da 2'yi kullan.
+
+Üçünde de `prepare` betiği `dist/`i kurulum anında üretiyor; ayrıca bir build adımı gerekmiyor.
+
+### Gerekenler
+
+| | |
+| --- | --- |
+| React | **19** (peer dependency) |
+| Tailwind | **v4** |
+| Node | 20+ |
+
+Tailwind v4 bir tercih değil şart: bileşenler utility sınıfı kullanıyor ve o sınıfları **senin**
+build'in üretiyor.
+
+### CSS
+
+```css
+@import "tailwindcss";
+@import "tamga-ui/styles.css";
+
+@source "../../node_modules/tamga-ui/dist";
+```
+
+**`@source` satırını atlama.** Onsuz Tailwind kitin `dist/`i içindeki sınıfları taramaz, üretmez,
+ve bileşenler **stilsiz** çıkar. Yol senin CSS dosyandan `node_modules`a göre; derinliğe göre
+`../` sayısı değişir.
+
+### Kullanım
+
+```tsx
+import { Button, StatusChip } from "tamga-ui";
+import { Plus } from "tamga-ui/icons";
+
+<Button variant="primary">
+  <Icon icon={Plus} size="xs" />
+  Yeni kayıt
+</Button>;
+```
+
+---
+
+## Kurulum anketi
+
+**Bu bölüm kiti kuran kişi ya da ajan içindir.** Kit kurulduğunda proje çalışır ama KİMSESİZDİR:
+mavi bir vurgu, baş harften bir karo, adsız bir kullanıcı. Aşağıdaki yedi sorunun cevabı
+alınmadan kurulum bitmiş sayılmaz.
+
+Her satırın son sütunu önemli: **cevap bir kere sorulup koda gömülmez, bir ayar ekranına da
+konur.** Kurulumda sorulan her şey projenin üçüncü ayında da değiştirilebilir olmalı; yoksa
+müşteri rengini değiştirmek istediğinde tek yol bir geliştiricinin CSS yazıp yeniden yayın
+alması olur.
+
+| # | Sorulacak | Nereye gider | Ayar ekranında |
+| --- | --- | --- | --- |
+| 1 | Ürünün adı | Kabuk, sekme başlığı, oturum ekranı | hayır, ürünün kimliği |
+| 2 | **Marka rengi (tek hex)** | `paletUret()` → token'lar (aşağıda) | **evet** |
+| 3 | Logo (geniş, yatay) | Oturum ekranı, geniş kenar çubuğu | **evet** |
+| 4 | Amblem (kare) | Dar kenar çubuğu, sekme ikonu | **evet** |
+| 5 | Varsayılan tema | `açık` · `koyu` · `sistem` | **evet** |
+| 6 | Kenar çubuğu davranışı | `hep dar` · `hep geniş` · `kullanıcı seçsin` | **evet** |
+| 7 | Arayüz dili / dilleri | Bütün `labels` prop'ları | duruma göre |
+
+**2, 3 ve 4 birbirinden bağımsız sorulur.** Yüklenen bir logodan amblem OTOMATİK çıkarılamaz:
+bir görsel dosyasında "amblem" diye işaretli bir şey yoktur, konumu sabit değildir (solda, üstte,
+yazının içinde ya da hiç yok), ve yanlış kesim sessizdir. Yarım bir harf panelin her sayfasının
+sol üstünde durur ve kimse bunun otomatik kesildiğini bilmez. Amblemi ya ayrı bir dosya olarak
+iste, ya kullanıcıya logo üzerinde kare bir alan seçtir, ya da hiç isteme: amblem yoksa
+`LogoTile` baş harften bir karo üretir ve bu çalışan bir cevaptır.
+
+Sorulacakların ekranı `SettingsTemplate` ile kuruluyor; adım adım anlatımı doküman sitesinde
+`/docs/yeni-panel` sayfasında.
+
+---
+
+## Renkleri değiştirmek
+
+Bir bileşen hiçbir yerde sabit renk taşımıyor; hepsi token okuyor.
+
+### Tek hex'ten bütün palet
+
+`tamga-ui/palette` bir marka renginden iki temanın tamamını üretiyor. Elle üç token yazmaktan
+daha güvenli, çünkü üreteç kontrastı ARAYARAK buluyor: yüzün açıklığını, üstündeki mürekkebin
+AA eşiğini geçene kadar adım adım kaydırıyor. Kırk ton ve iki tema, bir kapının sürekli ölçtüğü
+880 ölçüm.
+
+```ts
+import { paletUret, paletCss } from "tamga-ui/palette";
+
+const cift = paletUret("#e02938");   // { light, dark }
+document.documentElement.setAttribute("style", paletCss(cift));
+```
+
+Renk çalışma zamanında değişebiliyorsa (ayar ekranı) yol budur: token'lar kök elemana yazılıyor
+ve kitin 87 sınıfı onları okuduğu için bütün panel tek satırda dönüyor, hiçbir CSS yeniden
+derlenmeden.
+
+### Ya da elle
+
+Rengin sabit olduğu ve derleme zamanında bilindiği projelerde token'ları doğrudan geçersiz
+kılabilirsin:
+
+```css
+@import "tamga-ui/styles.css";
+
+:root {
+  --color-accent: #2069c9;        /* birincil yüz */
+  --color-accent-shadow: #12245c; /* yüzün altındaki taban */
+  --color-accent-ink: #fdfcfa;    /* yüzün üstündeki mürekkep */
+}
+```
+
+Bu yolda kontrastı kendin doğrulamak zorundasın: üreteç yok, kapı yok.
+
+Bu yüzden **kendi bileşenlerinde de sabit renk yazma**: `text-ink`, `bg-shell`,
+`var(--color-critical)` yaz. Palet değiştiğinde ekranların onunla birlikte döner; sabit yazılmış
+her renk elle bulunup düzeltilir.
+
+Token'ların tamamı doküman sitesinde (`/docs/tokens`), temayı değiştirmenin adımları
+`/docs/tema` sayfasında.
+
+---
+
+## Lisans
+
+MIT — [LICENSE](./LICENSE)

package/dist/blocks/count-row.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+/**
+ * SAYAÇ SATIRI: tablonun tepesindeki tek satırlık okuma.
+ *
+ * KAÇ KAYIT OLDUĞU HER ZAMAN YAZIYOR. Filtre uygulandıktan sonra kaç kayda
+ * bakıldığını söylemeyen bir liste, kullanıcıya saydırıyor.
+ *
+ * SAĞ TARAF İKİ ŞEY TAŞIYABİLİR ve ikisi de isteğe bağlı: ekrana özel ikinci
+ * bir okuma (`aside` — "12 tanesi eşiği geçti" gibi) ve sayfa boyu seçimi.
+ * İkincisi verilmezse hiç çizilmiyor: sayfalanmayan bir listeye sayfa boyu
+ * sormak, olmayan bir kontrolü öğretmek.
+ */
+export declare function CountRow({ count, unit, aside, pageSize, pageSizeOptions, onPageSize, labels, }: {
+    count: number;
+    /** "sipariş", "müşteri": sayının yanında ne yazacağı. */
+    unit: string;
+    /** Ekrana özel ikinci okuma. */
+    aside?: ReactNode;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSize?: (n: number) => void;
+    /** Sayının biçimi çağıranın: binlik ayıracı dile bağlı. */
+    labels?: {
+        format?: (n: number) => string;
+        perPage?: string;
+        records?: string;
+    };
+}): import("react").JSX.Element;
+//# sourceMappingURL=count-row.d.ts.map

package/dist/blocks/count-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"count-row.d.ts","sourceRoot":"","sources":["../../src/blocks/count-row.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,eAAe,EACf,UAAU,EACV,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,2DAA2D;IAC3D,MAAM,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjF,+BA0BA"}

package/dist/blocks/count-row.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from "../components/surface.js";
+import { Select } from "../components/primitives.js";
+/**
+ * SAYAÇ SATIRI: tablonun tepesindeki tek satırlık okuma.
+ *
+ * KAÇ KAYIT OLDUĞU HER ZAMAN YAZIYOR. Filtre uygulandıktan sonra kaç kayda
+ * bakıldığını söylemeyen bir liste, kullanıcıya saydırıyor.
+ *
+ * SAĞ TARAF İKİ ŞEY TAŞIYABİLİR ve ikisi de isteğe bağlı: ekrana özel ikinci
+ * bir okuma (`aside` — "12 tanesi eşiği geçti" gibi) ve sayfa boyu seçimi.
+ * İkincisi verilmezse hiç çizilmiyor: sayfalanmayan bir listeye sayfa boyu
+ * sormak, olmayan bir kontrolü öğretmek.
+ */
+export function CountRow({ count, unit, aside, pageSize, pageSizeOptions, onPageSize, labels, }) {
+    const format = labels?.format ?? ((n) => String(n));
+    return (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-[var(--color-line)] px-4 py-3", children: [_jsxs(Label, { children: [_jsx("strong", { className: "tabular-nums text-ink", children: format(count) }), " ", unit] }), aside, pageSizeOptions && onPageSize && pageSize !== undefined && (_jsxs("label", { className: "flex items-center gap-2 text-small text-ink-soft", children: [labels?.perPage, _jsx(Select, { className: "w-24", options: pageSizeOptions.map(String), value: String(pageSize), onChange: (v) => onPageSize(Number(v)), placeholder: String(pageSizeOptions[0]) }), labels?.records] }))] }));
+}

package/dist/blocks/filter-bar.d.ts

@@ -0,0 +1,123 @@
+import { type ReactNode } from "react";
+/**
+ * FİLTRE ÇUBUĞU.
+ *
+ * ─── NEDEN KİTTE ────────────────────────────────────────────────────────
+ * Bir süre üründe durdu ve orada "kite taşınmadı, bilinçli" diye bir not
+ * vardı: gerekçesi "Excel ile ara" ve "Tüm filtreler" gibi şeylerin bir
+ * e-ticaret paneli kalıbı olması. Not yanlış çıktı ve iki sebeple:
+ *
+ *   ① ADR-0003'ün katman şeması `tamga-ui` kutusunun içine zaten
+ *     "filtre paneli · toplu eylem çubuğu" yazıyor. Bir satır içi yorum,
+ *     kilitli bir ADR'yi geçersiz kılmaz.
+ *   ② Notun işaret ettiği sözlük SÖZCÜKLERDİ, mekanizma değil. Metinler
+ *     `labels`a çıkınca geriye kalan şey saf mekanizma: bir arama kutusu, en
+ *     çok dört alan, bir çekmece, ve uygulanan filtrelerin çipleri. Dosyayla
+ *     arama da bir alan adı değil bir yöntem; her yönetim listesi yapabilir.
+ *
+ * ─── ÜÇ MADDE, VE ÜÇÜNCÜSÜ EN ÖNEMLİSİ ──────────────────────────────────
+ * Bir yönetim panelinin filtresi otuz alanı aynı anda açık tutmaya meyleder,
+ * hepsi aynı görsel ağırlıkta. Buradaki fikir tek cümle: birkaçı üstte,
+ * gerisi çekmecede, VE çekmecede bir şey açıksa bunu görüyorsun.
+ *
+ * Gizli bir filtre açıkken kullanıcı listeyi eksik görür ve sebebini bulamaz;
+ * bu, filtreyi gizlemenin tek gerçek riski. O yüzden uygulanan her filtre
+ * tablonun üstünde bir çip olarak duruyor, tek tıkla kalkıyor, ve çekmece
+ * düğmesinde aktif sayıyı gösteren bir rozet var.
+ *
+ * ─── ENTER UYGULAR ──────────────────────────────────────────────────────
+ * Çekmecedeki alanlar bir `<form>` içinde ve "Uygula" o formun `submit`
+ * düğmesi, yani Enter tarayıcının kendi davranışıyla çalışıyor: dinlenen bir
+ * tuş değil, formun anlamı.
+ */
+/** Filtre durumunun tamamı: anahtar → dizgi. Boş dizgi "filtre yok" demek. */
+export type FilterValues = Record<string, string>;
+export type FilterFieldKind = "text" | "select"
+/** Aranabilir seçim: seçenek sayısı göz gezdirmenin ötesine geçtiğinde. */
+ | "searchable"
+/**
+ * ÇOKLU seçim, çip olarak. Tek seçimden farkı bir kolaylık değil bir ANLAM:
+ * "Nike VEYA Adidas" ile "Nike" aynı soru değil.
+ */
+ | "multi"
+/** İKİ TARİH: başlangıç ve bitiş. Tek bir kutu bir aralık soramaz. */
+ | "dateRange";
+export type FilterField = {
+    key: string;
+    label: string;
+    kind: FilterFieldKind;
+    /** Verilmezse `optionSource[key]` kullanılır; ikisi de yoksa liste boş. */
+    options?: string[];
+};
+export type FilterGroup = {
+    title: string;
+    fields: FilterField[];
+};
+export declare const rangeStart: (key: string) => string;
+export declare const rangeEnd: (key: string) => string;
+export type FilterBarLabels = {
+    /** Arama kutusunun yer tutucusu. */
+    search: string;
+    /**
+     * "Hepsi" seçeneğinin adı, ve LİSTENİN İÇİNDE bir seçenek olarak duruyor.
+     *
+     * Kullanıcı bir değer seçtikten sonra tekrar hepsini görmek istediğinde,
+     * geri dönüş yolunun GİDİŞ YOLUYLA AYNI YERDE olması gerekiyor. Kontrolün
+     * yanına bir çarpı koymak her filtreye ikinci bir düğme ekler ve ancak seçim
+     * varken görünür, yani kullanıcı onu aramayı öğrenemez.
+     */
+    all: string;
+    allFilters: string;
+    clearAll: string;
+    clear: string;
+    apply: string;
+    noMatch: string;
+    /** "<alan> seç" gibi; kontrolü açan düğmenin erişilebilir adı. */
+    open: (label: string) => string;
+    /** "<filtre> filtresini kaldır". */
+    remove: (label: string) => string;
+    rangeStart: string;
+    rangeEnd: string;
+    calendar: {
+        previousMonth: string;
+        nextMonth: string;
+        open: string;
+        clear: string;
+    };
+    /** Dosyayla arama bölümü; `fileSearchKey` verilmezse hiç çizilmiyor. */
+    fileSearch?: {
+        title: string;
+        help: ReactNode;
+        choose: string;
+        remove: string;
+        label: string;
+    };
+};
+export type FilterBarProps = {
+    values: FilterValues;
+    onChange: (next: FilterValues) => void;
+    /** Üstte duran alanlar. En çok dört tane; gerisi çekmeceye. */
+    top: readonly FilterField[];
+    /** Çekmecedeki gruplar. Düz bir yığın değil, gruplu. */
+    drawer: readonly FilterGroup[];
+    /** Seçim listelerinin kaynağı; sunucudan gelecek. */
+    optionSource?: Record<string, string[]>;
+    /**
+     * ARAMA KUTUSUNUN YAZDIĞI ANAHTAR.
+     *
+     * Prop, çünkü sunucunun beklediği ad ürünün kararı: kimi `q` diyor, kimi
+     * `ara`, kimi `search`. Blok bir süre `q`yu sabitledi ve ilk tüketicide
+     * sessizce kırdı: kutuya yazılan şey `q`ya gidiyor, ekran `ara`yı okuyor,
+     * ve arama hiçbir şey yapmıyordu. Hata vermeyen bir kırılma en pahalısı.
+     */
+    searchKey?: string;
+    /** Dosyayla arama bu ekranda varsa anahtarı; yoksa bölüm hiç çizilmiyor. */
+    fileSearchKey?: string;
+    /** Filtre satırına, "Tüm filtreler"in yanına giren ekrana özel düğme. */
+    extra?: ReactNode;
+    /** `DatePicker`ın takvimi için: "tr-TR", "en-GB". */
+    locale?: string;
+    labels: FilterBarLabels;
+};
+export declare function FilterBar({ values, onChange, top, drawer, optionSource, searchKey, fileSearchKey, extra, locale, labels, }: FilterBarProps): import("react").JSX.Element;
+//# sourceMappingURL=filter-bar.d.ts.map

package/dist/blocks/filter-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,8EAA8E;AAC9E,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,QAAQ;AACV,2EAA2E;GACzE,YAAY;AACd;;;GAGG;GACD,OAAO;AACT,sEAAsE;GACpE,WAAW,CAAC;AAEhB,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC;AAInE,eAAO,MAAM,UAAU,QAAS,MAAM,WAAkB,CAAC;AACzD,eAAO,MAAM,QAAQ,QAAS,MAAM,WAAgB,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,oCAAoC;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACpF,wEAAwE;IACxE,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChG,CAAC;AA+FF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,+DAA+D;IAC/D,GAAG,EAAE,SAAS,WAAW,EAAE,CAAC;IAC5B,wDAAwD;IACxD,MAAM,EAAE,SAAS,WAAW,EAAE,CAAC;IAC/B,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACxC;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EACN,YAAiB,EACjB,SAAe,EACf,aAAa,EACb,KAAK,EACL,MAAgB,EAChB,MAAM,GACP,EAAE,cAAc,+BA8MhB"}

package/dist/blocks/filter-bar.js

@@ -0,0 +1,74 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button, buttonVariants } from "../components/button.js";
+import { MiniButton } from "../components/button.js";
+import { Combobox } from "../components/combobox.js";
+import { MultiSelect } from "../components/advanced-input.js";
+import { DatePicker } from "../components/date-picker.js";
+import { Icon } from "../components/icon.js";
+import { Close, Customize, Search, Upload } from "../components/icons.js";
+import { Input } from "../components/input.js";
+import { Select, Sheet } from "../components/primitives.js";
+/* Tarih aralığı İKİ ANAHTAR tutuyor. Tek bir dizgeye sıkıştırmak, sunucuya iki
+   ayrı parametre giderken burada tekrar ayrıştırmak demekti. */
+export const rangeStart = (key) => `${key}Start`;
+export const rangeEnd = (key) => `${key}End`;
+function FieldControl({ field, values, write, optionSource, locale, labels, }) {
+    const options = field.options?.length ? field.options : (optionSource[field.key] ?? []);
+    if (field.kind === "dateRange") {
+        return (_jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsx(DatePicker, { locale: locale, value: values[rangeStart(field.key)] || undefined, onChange: (v) => write(rangeStart(field.key), v ?? ""), placeholder: labels.rangeStart, labels: labels.calendar }), _jsx(DatePicker, { locale: locale, value: values[rangeEnd(field.key)] || undefined, onChange: (v) => write(rangeEnd(field.key), v ?? ""), placeholder: labels.rangeEnd, labels: labels.calendar })] }));
+    }
+    if (field.kind === "multi") {
+        /* Değerler virgülle tek bir dizgede: filtre durumunun tamamı
+           `Record<string,string>` ve bir alanın tipi yüzünden o sözleşmeyi
+           değiştirmek, her ekranı ilgilendirirdi. */
+        const selected = (values[field.key] ?? "").split(",").filter(Boolean);
+        return (_jsx(MultiSelect, { className: "w-full", options: options.map((o) => ({ value: o, label: o })), value: selected, onChange: (next) => write(field.key, next.join(",")), placeholder: labels.all, labels: {
+                empty: labels.noMatch,
+                remove: labels.remove,
+                open: labels.open(field.label),
+            } }));
+    }
+    if (field.kind === "searchable") {
+        return (_jsx(Combobox, { className: "w-full", options: options.map((o) => ({ value: o, label: o })), value: values[field.key] || undefined, onChange: (v) => write(field.key, v ?? ""), placeholder: labels.all, labels: { empty: labels.noMatch, clear: labels.clear, open: labels.open(field.label) } }));
+    }
+    if (field.kind === "select") {
+        return (_jsx(Select, { className: "w-full", options: [labels.all, ...options], value: values[field.key], onChange: (v) => write(field.key, v === labels.all ? "" : v), placeholder: labels.all }));
+    }
+    return (_jsx(Input, { full: true, value: values[field.key] ?? "", onChange: (e) => write(field.key, e.target.value) }));
+}
+export function FilterBar({ values, onChange, top, drawer, optionSource = {}, searchKey = "q", fileSearchKey, extra, locale = "en-GB", labels, }) {
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const formId = useId();
+    const active = Object.entries(values).filter(([, v]) => v);
+    const drawerKeys = new Set(drawer.flatMap((g) => g.fields.map((f) => f.key)));
+    const hiddenActive = active.filter(([k]) => drawerKeys.has(k)).length;
+    function write(key, value) {
+        const next = { ...values };
+        if (value)
+            next[key] = value;
+        else
+            delete next[key];
+        onChange(next);
+    }
+    const allFields = [...top, ...drawer.flatMap((g) => g.fields)];
+    /* Aralık anahtarları (`dateStart`) alan listesinde YOK: adı, ait olduğu
+       alandan türetiliyor. Yoksa çipte ham anahtar görünüyordu. */
+    const labelFor = (key) => {
+        const direct = allFields.find((f) => f.key === key)?.label;
+        if (direct)
+            return direct;
+        const range = allFields.find((f) => f.kind === "dateRange" && (rangeStart(f.key) === key || rangeEnd(f.key) === key));
+        if (range) {
+            return `${range.label} ${rangeStart(range.key) === key ? labels.rangeStart : labels.rangeEnd}`;
+        }
+        if (key === searchKey)
+            return labels.search;
+        return key === fileSearchKey ? (labels.fileSearch?.label ?? key) : key;
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "grid items-end gap-3 grid-cols-1 md:grid-cols-2 xl:grid-cols-[minmax(10rem,1fr)_repeat(4,minmax(0,1.25fr))_auto]", children: [_jsxs("label", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("span", { className: "text-small font-medium text-ink", children: labels.search }), _jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { type: "search", full: true, leading: true, placeholder: labels.search, value: values[searchKey] ?? "", onChange: (e) => write(searchKey, e.target.value) })] })] }), top.map((field) => (_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("span", { className: "text-small font-medium text-ink", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))), _jsxs(Button, { onClick: () => setDrawerOpen(true), children: [_jsx(Icon, { icon: Customize, size: "xs" }), labels.allFilters, hiddenActive > 0 && (_jsx("span", { className: "ml-1 rounded-full bg-[var(--color-accent)] px-1.5 text-micro font-semibold text-[var(--color-accent-ink)] tabular-nums", children: hiddenActive }))] }), extra] }), active.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [active.map(([key, value]) => (_jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-(--radius-ctl) border border-[var(--color-edge)] bg-shell py-1 pl-2.5 pr-1 text-small text-ink", children: [_jsxs("span", { className: "text-ink-faint", children: [labelFor(key), ":"] }), value, _jsx(MiniButton, { "aria-label": labels.remove(labelFor(key)), onClick: () => write(key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, key))), _jsx(Button, { variant: "link", size: "sm", onClick: () => onChange({}), children: labels.clearAll })] })), _jsx(Sheet, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: labels.allFilters, closeLabel: labels.calendar.clear, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: () => onChange({}), children: labels.clear }), _jsx(Button, { type: "submit", form: formId, variant: "primary", children: labels.apply })] }), children: _jsxs("form", { id: formId, onSubmit: (e) => {
+                        e.preventDefault();
+                        setDrawerOpen(false);
+                    }, className: "flex flex-col gap-7", children: [drawer.map((group) => (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: group.title }), _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: group.fields.map((field) => (_jsxs("div", { className: `flex flex-col gap-1.5 ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: "text-small text-ink-soft", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))) })] }, group.title))), fileSearchKey && labels.fileSearch && (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: labels.fileSearch.title }), _jsx("p", { className: "mb-3 text-small leading-relaxed text-ink-soft", children: labels.fileSearch.help }), values[fileSearchKey] ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-small text-ink", children: values[fileSearchKey] }), _jsx(Button, { type: "button", size: "sm", onClick: () => write(fileSearchKey, ""), children: labels.fileSearch.remove })] })) : (_jsxs("label", { className: `${buttonVariants({})} cursor-pointer`, children: [_jsx(Icon, { icon: Upload, size: "xs" }), labels.fileSearch.choose, _jsx("input", { type: "file", accept: ".xlsx,.xls,.csv", className: "sr-only", onChange: (e) => write(fileSearchKey, e.target.files?.[0]?.name ?? "") })] }))] }))] }) })] }));
+}

package/dist/blocks/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * BLOK KATMANI — `tamga-ui/blocks`.
+ *
+ * BİR BLOK NEDİR. Bir bileşenden büyük, bir şablondan küçük: birkaç bileşenin
+ * bir araya gelip TEK BİR İŞ yaptığı bölüm. Filtre çubuğu bir düğme değil ama
+ * bir ekran da değil; bir ekranın içindeki bir bölge.
+ *
+ * ADR-0003'ün katman şeması "filtre paneli · toplu eylem çubuğu" diye ikisini
+ * de `tamga-ui` kutusunun içine yazıyor. Toplu eylem çubuğu ZATEN VARDI:
+ * `SelectionBar`, bir bileşen olarak, kendi doküman sayfasıyla. Buraya bir
+ * `BulkBar` yazıldı ve aynı propları alan ikinci bir kopyaydı; silindi.
+ *
+ * DERS BU DOSYANIN BAŞINDA DURSUN: yeni bir blok yazmadan önce kitin o işi
+ * yapan bir bileşeni var mı diye bakılır. Bir tasarım sisteminin en sinsi
+ * hatası, aynı şeyin iki adla iki yerde durmasıdır.
+ *
+ * BURAYA NE GİRMEZ. Bir ürünün sözlüğünü taşıyan hiçbir şey. Bir sipariş
+ * kartı, bir iade satırı, bir mülk özeti: bunlar e-ticaret ya da izleme
+ * katmanının işi. Blok, alanı bilmeyen bölümdür.
+ */
+export { FilterBar, rangeStart, rangeEnd, type FilterBarLabels, type FilterBarProps, type FilterField, type FilterFieldKind, type FilterGroup, type FilterValues, } from "./filter-bar.js";
+export { SaveBar } from "./save-bar.js";
+export { CountRow } from "./count-row.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/blocks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,GAClB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/blocks/index.js

@@ -0,0 +1,23 @@
+/**
+ * BLOK KATMANI — `tamga-ui/blocks`.
+ *
+ * BİR BLOK NEDİR. Bir bileşenden büyük, bir şablondan küçük: birkaç bileşenin
+ * bir araya gelip TEK BİR İŞ yaptığı bölüm. Filtre çubuğu bir düğme değil ama
+ * bir ekran da değil; bir ekranın içindeki bir bölge.
+ *
+ * ADR-0003'ün katman şeması "filtre paneli · toplu eylem çubuğu" diye ikisini
+ * de `tamga-ui` kutusunun içine yazıyor. Toplu eylem çubuğu ZATEN VARDI:
+ * `SelectionBar`, bir bileşen olarak, kendi doküman sayfasıyla. Buraya bir
+ * `BulkBar` yazıldı ve aynı propları alan ikinci bir kopyaydı; silindi.
+ *
+ * DERS BU DOSYANIN BAŞINDA DURSUN: yeni bir blok yazmadan önce kitin o işi
+ * yapan bir bileşeni var mı diye bakılır. Bir tasarım sisteminin en sinsi
+ * hatası, aynı şeyin iki adla iki yerde durmasıdır.
+ *
+ * BURAYA NE GİRMEZ. Bir ürünün sözlüğünü taşıyan hiçbir şey. Bir sipariş
+ * kartı, bir iade satırı, bir mülk özeti: bunlar e-ticaret ya da izleme
+ * katmanının işi. Blok, alanı bilmeyen bölümdür.
+ */
+export { FilterBar, rangeStart, rangeEnd, } from "./filter-bar.js";
+export { SaveBar } from "./save-bar.js";
+export { CountRow } from "./count-row.js";

package/dist/blocks/save-bar.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+/**
+ * KAYDET ŞERİDİ: kayan yüzeyin dibine yapışık.
+ *
+ * NEDEN FORMUN SONUNDA DEĞİL. Eski panellerin alışkanlığı kaydet düğmesini
+ * formun en altına koymak; yirmi alanlık bir formda üstteki bir alanı
+ * düzeltip kaydetmek için sonuna kadar kaydırmak gerekiyor. Şerit her zaman
+ * görünür, ve kaydedilecek bir şey olup olmadığını da söylüyor.
+ *
+ * FİZİĞİ BİR SINIFTA (`.tamga-save-bar`), ve orada ölçülmüş bir tuzak yazılı:
+ * `sticky bottom-0` şeridin alt kenarını yüzeyin İÇERİK kutusuna hizalıyor,
+ * ama yüzeyin kendi alt dolgusu var ve içerik o boşluktan akıp geçiyordu.
+ *
+ * DEĞİŞİKLİK YOKSA KAYDEDİLECEK BİR ŞEY DE YOK: düğme kapalı. Tıklanıp
+ * hiçbir şey olmayan bir düğme, olmayan bir düğmeden kötüdür.
+ */
+export declare function SaveBar({ changed, busy, onCancel, extra, labels, }: {
+    /** Değişiklik yoksa kaydet kapalı. */
+    changed?: boolean;
+    /** Kaydetme sürüyor: iki düğme de kilitli, kaydet spinner gösteriyor. */
+    busy?: boolean;
+    onCancel?: () => void;
+    /** Şeridin sağında duran ekrana özel şey: bir sayaç, bir uyarı satırı. */
+    extra?: ReactNode;
+    labels: {
+        save: string;
+        cancel: string;
+        saving?: string;
+    };
+}): import("react").JSX.Element;
+//# sourceMappingURL=save-bar.d.ts.map

package/dist/blocks/save-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"save-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/save-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAc,EACd,IAAY,EACZ,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE;IACD,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3D,+BAkBA"}

package/dist/blocks/save-bar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../components/button.js";
+/**
+ * KAYDET ŞERİDİ: kayan yüzeyin dibine yapışık.
+ *
+ * NEDEN FORMUN SONUNDA DEĞİL. Eski panellerin alışkanlığı kaydet düğmesini
+ * formun en altına koymak; yirmi alanlık bir formda üstteki bir alanı
+ * düzeltip kaydetmek için sonuna kadar kaydırmak gerekiyor. Şerit her zaman
+ * görünür, ve kaydedilecek bir şey olup olmadığını da söylüyor.
+ *
+ * FİZİĞİ BİR SINIFTA (`.tamga-save-bar`), ve orada ölçülmüş bir tuzak yazılı:
+ * `sticky bottom-0` şeridin alt kenarını yüzeyin İÇERİK kutusuna hizalıyor,
+ * ama yüzeyin kendi alt dolgusu var ve içerik o boşluktan akıp geçiyordu.
+ *
+ * DEĞİŞİKLİK YOKSA KAYDEDİLECEK BİR ŞEY DE YOK: düğme kapalı. Tıklanıp
+ * hiçbir şey olmayan bir düğme, olmayan bir düğmeden kötüdür.
+ */
+export function SaveBar({ changed = true, busy = false, onCancel, extra, labels, }) {
+    return (_jsxs("div", { className: "tamga-save-bar", "data-changed": changed, children: [_jsx(Button, { variant: "primary", type: "submit", disabled: !changed, busy: busy, busyLabel: labels.saving, children: labels.save }), _jsx(Button, { type: "button", onClick: onCancel, disabled: busy, children: labels.cancel }), extra && _jsx("span", { className: "ml-auto", children: extra })] }));
+}

package/dist/components/a11y.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 declare function useFocusTrap<T extends HTMLElement>(open: boolean): import("react").RefObject<T | null>;
+/**
+ * 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 declare function useListKeys({ open, containerRef, onClose, }: {
+    open: boolean;
+    containerRef: React.RefObject<HTMLElement | null>;
+    onClose: () => void;
+}): void;
+//# sourceMappingURL=a11y.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/components/a11y.ts"],"names":[],"mappings":"AAkCA;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,IAAI,EAAE,OAAO,uCAqEhE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,OAAO,GACR,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAClD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,QAmDA"}