@mesgflow/ui-kit 0.6.0

package/types/mesgflow-ui-kit-dropzone.d.ts

@@ -0,0 +1,47 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface DropzoneRejection {
+    file: File;
+    reason: 'size' | 'type';
+}
+/**
+ * `<mf-dropzone accept="image/*" [maxSizeBytes]="5_000_000" (filesSelected)="upload($event)" />`
+ *
+ * Görsel/dosya yükleme — sürükle-bırak + tıkla-seç, boyut/tip doğrulaması.
+ * Yükleme İLERLEMESİNİ TAŞIMAZ (bkz. `Progress` primitifi — tüketici kendi
+ * yükleme state'ini `DropzoneRejection`/`filesSelected`'tan sonra ayrı
+ * yönetir, bu component sadece "hangi dosyalar seçildi/reddedildi"yi bildirir).
+ */
+declare class Dropzone {
+    readonly accept: _angular_core.InputSignal<string>;
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    readonly maxSizeBytes: _angular_core.InputSignal<number | null>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly filesSelected: _angular_core.OutputEmitterRef<File[]>;
+    readonly rejected: _angular_core.OutputEmitterRef<DropzoneRejection[]>;
+    private readonly dropzoneLabels;
+    protected readonly effectiveLabel: _angular_core.Signal<string>;
+    protected readonly dragOver: _angular_core.WritableSignal<boolean>;
+    protected readonly fileInput: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected onDragOver(event: DragEvent): void;
+    protected onDragLeave(): void;
+    protected onDrop(event: DragEvent): void;
+    protected onFileInputChange(event: Event): void;
+    protected browse(): void;
+    private handleFiles;
+    private matchesAccept;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dropzone, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dropzone, "mf-dropzone", ["mfDropzone"], { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSizeBytes": { "alias": "maxSizeBytes"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "filesSelected": "filesSelected"; "rejected": "rejected"; }, never, never, true, never>;
+}
+
+declare const dropzoneVariants: (props?: ({
+    dragOver?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+export { Dropzone, dropzoneVariants };
+export type { DropzoneRejection };

package/types/mesgflow-ui-kit-empty-state.d.ts

@@ -0,0 +1,18 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * `<mf-empty-state title="..." description="...">`
+ *   `<svg illustration>...</svg>` (opsiyonel, BÜYÜK bir çizim/grafik slotu —
+ *   `icon`'un yerine geçer, ikisi BİRLİKTE kullanılmaz)
+ *   `<span icon mfIcon>inbox</span>` (opsiyonel küçük ikon slotu)
+ *   `<button mfButton action>...</button>` (opsiyonel aksiyon slotu)
+ * `</mf-empty-state>`
+ */
+declare class EmptyState {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyState, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyState, "mf-empty-state", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, ["[illustration]", "[icon]", "[action]"], true, never>;
+}
+
+export { EmptyState };

package/types/mesgflow-ui-kit-field.d.ts

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * `<mf-field label="E-posta" [error]="emailError()">
+ *    <input mfInput type="email" [id]="..." />
+ *  </mf-field>`
+ * `for`/`id` eşleşmesi (a11y) ÇAĞIRAN ekranın sorumluluğunda — bu component
+ * label'ı otomatik bir input'a bağlamıyor (projected content'in id'sini bilmiyor).
+ *
+ * `error`, `string | undefined` kabul eder (sadece `string` DEĞİL) — çağıran
+ * genelde `shared/forms/http-error.ts`'teki `resolveFieldError()`'ı doğrudan
+ * bağlar, o da hata yokken `undefined` döner (boş string'e zorlamaya gerek yok).
+ */
+declare class Field {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly for: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly error: _angular_core.InputSignal<string | undefined>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    /** `true` ise kalan yüksekliği doldurur (`flex-1 min-h-0`) — projected içeriğin kendi tek scroll alanı olduğu durumlar için (ör. uzun bir liste içeren form, bkz. `Dialog.fillBody`). */
+    readonly grow: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Field, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Field, "mf-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "for": { "alias": "for"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "grow": { "alias": "grow"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { Field };

package/types/mesgflow-ui-kit-hover-card.d.ts

@@ -0,0 +1,52 @@
+import * as _angular_core from '@angular/core';
+import * as i1 from '@angular/cdk/overlay';
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { PopoverPlacement } from '@mesgflow/ui-kit/popover';
+
+/**
+ * `<a href="/u/ayse" [mfHoverCardTrigger]="card">@ayse</a>
+ *  <mf-hover-card #card>…profil önizlemesi…</mf-hover-card>`
+ *
+ * Bir bağlantının üzerine gelince açılan zengin önizleme (profil, bağlantı özeti). Tooltip'ten
+ * farkı: içerik etkileşimli olabilir (imleç karta geçince açık kalır) ve daha geniştir.
+ *
+ * Erişilebilirlik sınırı (Radix/GitHub ile aynı): kart GÖREN kullanıcılar için EK bilgidir —
+ * tetikleyiciye klavye odağı gelince de açılır, Esc kapatır, ama odak karta taşınmaz ve içerik
+ * ekran okuyucuya duyurulmaz. Karttaki bilgi/eylem sayfada başka bir yoldan erişilebilir
+ * olmalı (tetikleyici bağlantının kendisi gibi). Dokunmatikte açılmaz (hover yok).
+ */
+declare class HoverCard {
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly placement: _angular_core.InputSignal<PopoverPlacement>;
+    /** Üzerine gelindikten sonra açılma gecikmesi (ms) — imleç geçip giderken kart fırlamasın. */
+    readonly openDelay: _angular_core.InputSignal<number>;
+    /** Ayrıldıktan sonra kapanma gecikmesi (ms) — tetikleyiciden karta geçiş boşluğu için. */
+    readonly closeDelay: _angular_core.InputSignal<number>;
+    readonly panelClass: _angular_core.InputSignal<string>;
+    protected readonly origin: _angular_core.WritableSignal<CdkOverlayOrigin | null>;
+    private openTimer?;
+    private closeTimer?;
+    constructor();
+    /** Tetikleyici kendini kaydeder — kart birden çok tetikleyiciyle paylaşılabilir (son etkin olan). */
+    attach(origin: CdkOverlayOrigin): void;
+    scheduleOpen(immediate?: boolean): void;
+    scheduleClose(): void;
+    cancelClose(): void;
+    close(): void;
+    private clearTimers;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HoverCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HoverCard, "mf-hover-card", ["mfHoverCard"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "openDelay": { "alias": "openDelay"; "required": false; "isSignal": true; }; "closeDelay": { "alias": "closeDelay"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+}
+/** `[mfHoverCardTrigger]="card"` — bkz. `HoverCard`. CDK overlay kökü olarak kendini kaydeder. */
+declare class HoverCardTrigger {
+    readonly card: _angular_core.InputSignal<HoverCard>;
+    private readonly origin;
+    protected onPointerEnter(event: PointerEvent): void;
+    protected onPointerLeave(event: PointerEvent): void;
+    /** Yalnızca klavye odağı (`:focus-visible`) — fareyle tıklayıp odaklanmak kartı ayrıca açmasın. */
+    protected onFocus(event: FocusEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HoverCardTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HoverCardTrigger, "[mfHoverCardTrigger]", ["mfHoverCardTrigger"], { "card": { "alias": "mfHoverCardTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkOverlayOrigin; inputs: {}; outputs: {}; }]>;
+}
+
+export { HoverCard, HoverCardTrigger };

package/types/mesgflow-ui-kit-i18n-tr.d.ts

@@ -0,0 +1,14 @@
+import { MfLabels } from '@mesgflow/ui-kit/core';
+
+/**
+ * `provideMesgflowUi({ labels: mfLabelsTr, dateLocale: tr })` ile sağlanan
+ * Türkçe çeviri kümesi — kitin İngilizce varsayılanının (`mfLabelsEn`, bkz.
+ * `@mesgflow/ui-kit/core`) AYNI şeklini taşır, sadece değerleri Türkçe. AYRI bir
+ * ikincil giriş noktası (`@mesgflow/ui-kit/i18n/tr`) olmasının sebebi: birincil
+ * barrel'a (`@mesgflow/ui-kit`) dahil OLMAMASI — Türkçe metin isteyen tüketici
+ * BİLEREK import eder, İngilizce varsayılanı tercih eden tüketicinin bundle'ına
+ * hiç girmez.
+ */
+declare const mfLabelsTr: MfLabels;
+
+export { mfLabelsTr };

package/types/mesgflow-ui-kit-icon.d.ts

@@ -0,0 +1,76 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, EnvironmentProviders, AfterContentChecked } from '@angular/core';
+
+/** SVG alt öğesi — Lucide'ın `IconNode` biçimiyle aynı: `['path', { d: '…' }]`. */
+type MfIconNode = readonly [tag: string, attrs: Readonly<Record<string, string | number>>];
+interface MfSvgIcon {
+    /** Varsayılan `'0 0 24 24'` (Material Symbols 24px ızgarası, Lucide). */
+    viewBox?: string;
+    nodes: readonly MfIconNode[];
+    /** `[filled]="true"` iken kullanılacak dolu varyant (verilmezse `nodes`). */
+    filledNodes?: readonly MfIconNode[];
+    /**
+     * `'fill'` (varsayılan — Material Symbols gibi dolgulu glifler) ya da `'stroke'` (Lucide gibi
+     * çizgi ikonlar: `fill="none"`, `stroke="currentColor"`, yuvarlak uçlar).
+     */
+    mode?: 'fill' | 'stroke';
+    /** `mode: 'stroke'` iken çizgi kalınlığı (varsayılan 2). */
+    strokeWidth?: number;
+}
+type MfIconSet = Readonly<Record<string, MfSvgIcon>>;
+/**
+ * Birleştirilmiş SVG ikon kaydı — `provideMfIcons()` uygulama kökünde birden çok kez çağrılabilir
+ * (ör. temel set + marka ikonları), sonra gelen aynı adı ezer. Kök tekildir: tembel rota
+ * injector'larındaki kayıtlar görülmez. Kayıt yoksa boş — `mfIcon` Material Symbols fontuna düşer.
+ */
+declare const MF_ICON_REGISTRY: InjectionToken<ReadonlyMap<string, MfSvgIcon>>;
+/**
+ * `providers: [provideMfIcons({ mail: { nodes: [['path', { d: 'M…' }]] } })]`
+ *
+ * İsteğe bağlı SVG ikon kaydı. Kayıtlı bir ad `<span mfIcon>mail</span>` içinde geçtiğinde font
+ * ligature'ı yerine satır içi SVG çizilir — FOUT'ta ham "mail" metni görünmez, yalnızca kullanılan
+ * glifler pakete girer (tree-shake), özel/marka ikonları eklenebilir. Kaydedilmeyen adlar fontla
+ * çalışmaya devam eder, yani geçiş kademeli ve kırıcı DEĞİL; tüm adlar kayıtlıysa
+ * `@material-symbols/font-400` importu tamamen kaldırılabilir.
+ *
+ * Güvenlik: işaretleme dizgesi (innerHTML) kabul edilmez; SVG yapısal veriden
+ * `createElementNS` ile kurulur, yalnızca şekil etiketleri ve sunum öznitelikleri geçer
+ * (bkz. `icon.ts` `ALLOWED_TAGS`) — kayıt verisi dış kaynaktan gelse bile betik çalıştıramaz.
+ */
+declare function provideMfIcons(icons: MfIconSet): EnvironmentProviders;
+
+/**
+ * `<span mfIcon>mail</span>` — içerik ikonun İNGİLİZCE adı; renk `text-*` ile, boyut `size`
+ * (px) ile. `aria-hidden` zorunlu — ad metni ("mail") ekran okuyucuya SIZMAMALI.
+ *
+ * İki çizim yolu, aynı şablon:
+ * - **Font** (varsayılan): Material Symbols Outlined ligature'ı (weight 400 — BİLEREK 300 değil,
+ *   ince ağırlık Inter gövde metninin yanında soluk duruyordu; bkz. preset.css).
+ * - **SVG**: ad `provideMfIcons()` ile kaydedildiyse satır içi SVG çizilir, ad metni yerinde
+ *   kalır ama `font-size: 0` ile görünmez (Angular'ın metin düğümüne ve `@if`/`@switch`
+ *   çapalarına dokunulmaz — düğüm taşımak denetim akışını bozardı). Font sınıfı hiç eklenmez;
+ *   tüm kullanılan adlar kayıtlıysa font dosyası HİÇ indirilmez.
+ *
+ * Ad, ilk değişiklik algılama turunda (`ngAfterContentChecked` — içerik bağlamaları o anda
+ * güncel) okunur; `{{ item.icon }}` gibi dinamik adlar her turda yeniden karşılaştırılır.
+ * Kayıt boşsa bu kanca hemen döner (fontla çalışan uygulamalar için sıfır maliyet).
+ */
+declare class Icon implements AfterContentChecked {
+    readonly size: _angular_core.InputSignal<number>;
+    readonly filled: _angular_core.InputSignal<boolean>;
+    private readonly registry;
+    private readonly host;
+    private readonly name;
+    private svg;
+    private renderedKey;
+    protected readonly svgIcon: _angular_core.Signal<MfSvgIcon | null>;
+    protected readonly variationSettings: _angular_core.Signal<string>;
+    ngAfterContentChecked(): void;
+    private buildSvg;
+    private buildNode;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Icon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Icon, "span[mfIcon]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Icon, MF_ICON_REGISTRY, provideMfIcons };
+export type { MfIconNode, MfIconSet, MfSvgIcon };

package/types/mesgflow-ui-kit-input.d.ts

@@ -0,0 +1,186 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+import { MfSize } from '@mesgflow/ui-kit/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * `<textarea mfInput #bio maxlength="280"></textarea>
+ *  <mf-character-count [for]="bio" />`
+ *
+ * Görünen metin `12 / 280` (sınır yoksa yalnızca `12`) ekran okuyucudan GİZLİ. Bunun yerine:
+ * - hedef alanın `aria-describedby`'ına eklenen gizli bir açıklama ("268 characters remaining"),
+ *   alana odaklanınca okunur;
+ * - sınıra yaklaşınca (`warnAt`, varsayılan %90) bir `aria-live` bölgesi, her tuşta DEĞİL
+ *   5'in katlarında, son 5 karakterde ise her tuşta duyurur — gevezelik etmeden haber verir.
+ *
+ * Sınır: `max` verilirse YUMUŞAK sınır (yazmaya izin verir, aşım `danger` ve negatif gösterilir —
+ * tüketici alanı ayrıca `hasError` ile işaretler); verilmezse hedefin `maxlength`'i (tarayıcı
+ * zaten engeller). Sayım `value.length` — tarayıcının `maxlength` sayımıyla (UTF-16) birebir.
+ * Programatik değer değişimleri (form reset, `writeValue`) her render'dan sonra yakalanır.
+ */
+declare class CharacterCount {
+    readonly for: _angular_core.InputSignal<HTMLInputElement | HTMLTextAreaElement>;
+    /** Yumuşak sınır. Verilmezse hedefin `maxlength` özniteliği kullanılır. */
+    readonly max: _angular_core.InputSignal<number | undefined>;
+    /** Uyarı tonunun başladığı doluluk oranı (0–1). */
+    readonly warnAt: _angular_core.InputSignal<number>;
+    private readonly labels;
+    private readonly renderer;
+    protected readonly descriptionId: string;
+    protected readonly length: _angular_core.WritableSignal<number>;
+    protected readonly limit: _angular_core.Signal<number | null>;
+    protected readonly remaining: _angular_core.Signal<number | null>;
+    protected readonly tone: _angular_core.Signal<"muted" | "warning" | "danger">;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly display: _angular_core.Signal<string>;
+    protected readonly description: _angular_core.Signal<string>;
+    /** Yalnızca uyarı bölgesinde ve kilometre taşlarında güncellenir; aradaki tuşlarda son metin kalır. */
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CharacterCount, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CharacterCount, "mf-character-count", ["mfCharacterCount"], { "for": { "alias": "for"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "warnAt": { "alias": "warnAt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `field-sizing: content` desteği — içerik boyunda büyüyen native kontrol (Chromium 123+;
+ * desteklemeyen tarayıcıda JS yedeği). Token olarak: testler iki yolu da açıkça seçebilsin.
+ */
+declare const MF_FIELD_SIZING_SUPPORTED: InjectionToken<boolean>;
+/**
+ * `<input mfInput>` / `<textarea mfInput>` — checkbox/radio hariç (bkz.
+ * `Checkbox`, `@mesgflow/ui-kit/checkbox`). Karakter sayacı için `<mf-character-count>`.
+ *
+ * `autosize`/`minRows`/`maxRows` SADECE `textarea[mfInput]`'ta anlamlı — içerik büyüdükçe
+ * yükseklik artar, `maxRows`'ta durup kaydırmaya geçer. İki yol:
+ * - **`field-sizing: content` destekleniyorsa** büyüme tamamen CSS'te — yazma, yapıştırma,
+ *   programatik değer (form reset) ve genişlik değişimi tarayıcının kendi yerleşiminde;
+ *   JS yalnızca `min/max-height`'ı satır sayısından bir kez hesaplar.
+ * - **Değilse** ölçerek: `input` olayı + her render sonrası değer karşılaştırması (olay atmayan
+ *   programatik değişimler) + `ResizeObserver` ile genişlik değişimi (satır kırılımı değişir).
+ *
+ * Satır yüksekliğine dolgu VE kenarlık eklenir (`box-sizing: border-box`) — eskiden yalnızca
+ * `rows × line-height` alınıyordu; `minRows=2` alan iki satırdan kısa, son satır kırpık çıkıyordu.
+ */
+declare class Input {
+    readonly size: _angular_core.InputSignal<MfSize>;
+    /** Field'ın `error` input'u dolu olduğunda çağıran ekran bunu true geçer. */
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly autosize: _angular_core.InputSignal<boolean>;
+    readonly minRows: _angular_core.InputSignal<number>;
+    readonly maxRows: _angular_core.InputSignal<number | null>;
+    private readonly elementRef;
+    private readonly nativeSizing;
+    private lastValue;
+    private lastWidth;
+    protected readonly classes: _angular_core.Signal<string>;
+    constructor();
+    protected onInput(): void;
+    private resize;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Input, "input[mfInput]:not([type=checkbox]):not([type=radio]), textarea[mfInput]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "autosize": { "alias": "autosize"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `<mf-input-group>
+ *    <span mfInputPrefix><span mfIcon>search</span></span>
+ *    <input mfInput class="border-0 bg-transparent shadow-none focus-visible:outline-none" />
+ *    <span mfInputSuffix><button type="button">×</button></span>
+ *  </mf-input-group>`
+ *
+ * `SearchInput`/`NumberInput`/`DateRangePicker`'ın HER BİRİNİN kendi elle
+ * yazdığı "kabuk" reçetesini (bkz. plan Faz 2 P0) `core/recipes.ts`'in
+ * `controlSurface`/`controlSize`'ına indirger — üç ayrı kopya yerine TEK
+ * kaynak. İçindeki `input[mfInput]` KENDİ border/shadow/outline'ını
+ * KAPATMALI (yukarıdaki örnekteki class'lar) — kabuk artık bunları BURADAN
+ * sağlıyor, "çift kenarlık" olmasın diye (bkz. `DateRangePicker`'ın eski
+ * `wrapperClasses` notu, aynı gerekçe).
+ *
+ * Odak halkası `has-[:focus-visible]:outline` ile İÇ elemanlardan HERHANGİ
+ * biri klavye-odaklandığında TÜM kabuğun etrafında TEK bir halka çizer
+ * (`DateRangePicker`'ın iki input'u arasında geçişte "zıplayan" iki ayrı
+ * halka yerine) — `input[mfInput]`'un KENDİ `focus-visible:outline`'ı
+ * BİLEREK kapatılmalı (yukarıdaki örnek), aksi halde İKİ halka üst üste biner.
+ */
+declare class InputGroup {
+    readonly size: _angular_core.InputSignal<MfSize>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    /**
+     * `false` → iç dolgu/aralık (`px-*`/`gap-*`) KALKAR, çocuklar `items-stretch`
+     * ile TAM yüksekliği doldurur — kenardan kenara oturan (dış kabuğun
+     * `rounded-*`sini birebir paylaşan) düğmeler için (ör. `NumberInput`'un
+     * azalt/artır düğmeleri). Varsayılan `true` — ikon/metin gibi "nefes payı"
+     * isteyen eklerin (ör. `DateRangePicker`'ın takvim ikonu) olağan hali.
+     */
+    readonly padded: _angular_core.InputSignal<boolean>;
+    /**
+     * `true` → sabit `h-control-*` yerine `h-auto` + `flex-wrap` — içerik
+     * (ör. `TagInput`'un çoğalan Chip'leri) tek satıra sığmadığında kabuk
+     * BÜYÜR, taşırmaz. Varsayılan `false` (tek satırlık kontroller — ESKİ
+     * davranış birebir korunur).
+     */
+    readonly wrap: _angular_core.InputSignal<boolean>;
+    /** `controlSize`'ın `px-*` değerleriyle birebir (sm 2.5 · md 3 · lg 3.5). */
+    protected readonly edgePadding: _angular_core.Signal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputGroup, "mf-input-group", ["mfInputGroup"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "padded": { "alias": "padded"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, ["[mfInputPrefix]", "*", "[mfInputSuffix]"], true, never>;
+}
+
+/**
+ * `<span mfInputPrefix><span mfIcon>search</span></span>` — bkz. `input-group.ts`'in JSDoc'u.
+ *
+ * `addon`: metin/seçim eki (`https://`, `₺`, alan kodu) kabuğun sol kenarına BİTİŞİK bir bölüm
+ * olur — sönük zemin + ayırıcı çizgi, kabuğun dolgusu `--mf-input-group-px` ile geri alınır.
+ */
+declare class InputPrefix {
+    readonly addon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputPrefix, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InputPrefix, "[mfInputPrefix]", never, { "addon": { "alias": "addon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `<span mfInputSuffix><button ...>×</button></span>` — bkz. `input-group.ts`'in JSDoc'u.
+ * `addon`: sağ kenara bitişik bölüm (`.com`, `kg`, birim seçimi) — bkz. `InputPrefix.addon`.
+ */
+declare class InputSuffix {
+    readonly addon: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputSuffix, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<InputSuffix, "[mfInputSuffix]", never, { "addon": { "alias": "addon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Bkz. `core/recipes.ts` `controlSurface`/`focusRecipe`/`disabledRecipe`/
+ * `errorRecipe` — bu dosya onların TEK tüketicisi değil (Select/NumberInput/
+ * ... aynı reçeteleri paylaşır), form kontrolleri genelinde tek kaynak.
+ *
+ * `size` ekseni `min-h-*` KULLANIR, `h-control-*` (sabit yükseklik) DEĞİL:
+ * selector `textarea[mfInput]`'ı da kapsıyor (bkz. input.ts), sabit yükseklik
+ * çok satırlı `rows` kullanan bir textarea'yı sıkıştırırdı. Tek satırlık
+ * `<input>`'ta `py-*` ile birlikte tam kontrol yüksekliğine oturuyor,
+ * textarea `rows` arttıkça bu tabanın üstüne doğal büyüyor. `min-h-(--control-h-*)`
+ * — Tailwind v4'ün parantezli kısayolu, `--control-h-*` token'ına (radius.css)
+ * doğrudan referans, ayrı bir `min-h-control-*` utility'si tanımlamaya gerek yok.
+ *
+ * `hasError` (invalid DEĞİL): `@angular/forms/signals`'ın `[formField]`
+ * directive'i, AYNI native elemandaki başka bir directive'in `invalid`/
+ * `disabled`/`required`/`pattern`/... adlı input'larını (bkz. signals.mjs
+ * `FIELD_STATE_KEY_TO_CONTROL_BINDING`) OTOMATİK olarak alanın ham validity
+ * durumuyla dolduruyor — henüz dokunulmamış (untouched) zorunlu bir alan bile
+ * anında "invalid" oluyor ve kırmızı görünüyordu (gerçek bug, tarayıcıda
+ * yakalandı). `hasError` bu rezerve isim listesinde YOK, çakışmıyor —
+ * çağıran ekran görünürlüğü kendi `touched()/errors()` mantığıyla kontrol
+ * etmeye devam ediyor.
+ */
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    hasError?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputSize = VariantProps<typeof inputVariants>['size'];
+type InputHasError = VariantProps<typeof inputVariants>['hasError'];
+
+export { CharacterCount, Input, InputGroup, InputPrefix, InputSuffix, MF_FIELD_SIZING_SUPPORTED, inputVariants };
+export type { InputHasError, InputSize };

package/types/mesgflow-ui-kit-kbd.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from '@angular/core';
+
+/** `<kbd mfKbd>Ctrl</kbd>` — tek bir tuş/kısayol parçasının görsel yongası (chip). Birden fazla tuş için ardışık kullan: `<kbd mfKbd>Ctrl</kbd>+<kbd mfKbd>K</kbd>`. */
+declare class Kbd {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Kbd, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Kbd, "kbd[mfKbd]", never, {}, {}, never, never, true, never>;
+}
+
+export { Kbd };

package/types/mesgflow-ui-kit-link.d.ts

@@ -0,0 +1,20 @@
+import * as _angular_core from '@angular/core';
+import { MfTone } from '@mesgflow/ui-kit/core';
+
+type LinkUnderline = 'always' | 'hover' | 'none';
+/**
+ * `<a mfLink href="/ayarlar">Ayarlar</a>` — düz metin içine gömülü bağlantılar
+ * için (ör. "Zaten hesabınız var mı? Giriş yapın"). Navigasyon bağlantıları
+ * (sidebar, tabs, breadcrumb) KENDİ bileşenlerinin stilini taşır, bu
+ * directive'i KULLANMAZ — `Link` SADECE metin akışı içindeki bağlantılar için.
+ */
+declare class Link {
+    readonly tone: _angular_core.InputSignal<MfTone>;
+    readonly underline: _angular_core.InputSignal<LinkUnderline>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Link, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Link, "a[mfLink]", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "underline": { "alias": "underline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Link };
+export type { LinkUnderline };

package/types/mesgflow-ui-kit-menu.d.ts

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@angular/aria/menu';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * `<mf-menu #menu="ngMenu" (itemSelected)="onSelect($event)"><button mfMenuItem value="a">A</button></mf-menu>`
+ * — genelde bir `mf-popover` içine konur, tetikleyici için `mfMenuTrigger`
+ * kullanılır (bkz. `menu-trigger.ts`). ARIA/klavye (ok tuşu navigasyonu,
+ * typeahead, alt-menü açma) `@angular/aria/menu`'nün `Menu` pattern'inden
+ * `hostDirectives` ile geliyor — `Select`'in listbox'ıyla AYNI görsel dil
+ * (rounded-lg, shadow-2, bg-overlay).
+ *
+ * `hostDirectives` uygulanan bir directive'in KENDİ `exportAs`'ı (`ngMenu`)
+ * host elemanda hâlâ kullanılabilir (Angular directive composition API'sinin
+ * dokümante edilmiş davranışı) — bu yüzden `MenuTrigger`'ın `[menu]`
+ * girdisine doğrudan `#menu="ngMenu"` verilebiliyor, ayrı bir forward'a
+ * gerek yok.
+ */
+declare class Menu {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Menu, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Menu, "mf-menu", ["mfMenu"], {}, {}, never, ["*"], true, [{ directive: typeof i1.Menu; inputs: { "wrap": "wrap"; "disabled": "disabled"; "typeaheadDelay": "typeaheadDelay"; }; outputs: { "itemSelected": "itemSelected"; }; }]>;
+}
+
+/** `<button mfMenuItem value="delete">Sil</button>` — `mf-menu` içine konur. */
+declare class MenuItem<V> {
+    private readonly ariaMenuItem;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuItem<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuItem<any>, "button[mfMenuItem], div[mfMenuItem]", never, {}, {}, never, never, true, [{ directive: typeof i1.MenuItem; inputs: { "value": "value"; "disabled": "disabled"; "id": "id"; }; outputs: {}; }]>;
+}
+
+/**
+ * `<button mfMenuTrigger [menu]="menuRef" cdkOverlayOrigin #origin="cdkOverlayOrigin">Aç</button>`
+ * — `[menu]`'ye `mf-menu`'nün `#ref="ngMenu"` template referansını ver.
+ * Pozisyonlama (floating panel) bu directive'in İŞİ DEĞİL — `@angular/aria/menu`
+ * headless, konum bilgisi taşımıyor; `mf-popover`'ın `[open]="trigger.expanded()"`
+ * ile beslenmesi gerekiyor (bkz. playground'daki Menu demosu, `(closed)`
+ * çıktısında `trigger.close()` çağırarak iki state'i senkron tutma deseni).
+ */
+declare class MenuTrigger {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MenuTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuTrigger, "[mfMenuTrigger]", ["mfMenuTrigger"], {}, {}, never, never, true, [{ directive: typeof i1.MenuTrigger; inputs: { "menu": "menu"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+declare const menuItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type MenuItemActive = VariantProps<typeof menuItemVariants>['active'];
+
+export { Menu, MenuItem, MenuTrigger, menuItemVariants };
+export type { MenuItemActive };

package/types/mesgflow-ui-kit-number-input.d.ts

@@ -0,0 +1,55 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * `<mf-number-input [(value)]="padding" [min]="0" [max]="64" [step]="4" unit="px" />`
+ *
+ * `Select`'in `ControlValueAccessor` deseni tekrarlanıyor (bkz. select.ts
+ * üstündeki not) — native değil, `NG_VALUE_ACCESSOR`'ı KENDİSİ sağlamak
+ * zorunda. Klavye (yukarı/aşağı ok, PageUp/PageDown ±10×step) + stepper
+ * butonları (mouse-only, `tabindex="-1"` — gerçek `spinbutton` semantiği
+ * input'un kendisinde) HER ZAMAN TAM işlevsellik sağlıyor.
+ *
+ * Sürükleyerek değiştirme (Kademe 12 paket BV — önceden "v1 kapsamı dışı"
+ * bırakılmıştı) — SADECE `unit()` VERİLMİŞSE (`px` etiketi gibi) o etiket
+ * yatay sürüklenebilir bir "scrubber" olur (`pointerdown`+`setPointerCapture`
+ * ile sürükleme YAKALANIR, imleç `ew-resize` olur). `unit` YOKSA (boş
+ * string) sürükleme EKLENMEDİ — dekoratif bir tutamaç elementi olmadan
+ * kullanıcının "burayı sürükleyebilirim" sezgisi YOK, YENİ bir görsel
+ * eleman eklemek gerekirdi (kapsam dışı). Bu, ERİŞİLEBİLİRLİK açısından
+ * bir GERİLEME DEĞİL — klavye ZATEN aynı işlevselliği (yukarı/aşağı ok)
+ * tam olarak sağlıyor, sürükleme SADECE mouse kullanıcıları için EK bir
+ * kısayol (stepper butonlarının `tabindex="-1"` olmasıyla AYNI ilke).
+ */
+declare class NumberInput implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<number | null>;
+    readonly min: _angular_core.InputSignal<number | null>;
+    readonly max: _angular_core.InputSignal<number | null>;
+    readonly step: _angular_core.InputSignal<number>;
+    readonly unit: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private onChange;
+    private onTouched;
+    protected readonly canDecrement: _angular_core.Signal<boolean>;
+    protected readonly canIncrement: _angular_core.Signal<boolean>;
+    protected readonly dragging: _angular_core.WritableSignal<boolean>;
+    private dragStartClientX;
+    private dragStartValue;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    protected clamp(next: number): number;
+    protected adjust(delta: number): void;
+    protected onInputChange(raw: string): void;
+    protected onBlur(): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onUnitPointerDown(event: PointerEvent): void;
+    protected onUnitPointerMove(event: PointerEvent): void;
+    protected onUnitPointerUp(event: PointerEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NumberInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NumberInput, "mf-number-input", ["mfNumberInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { NumberInput };

package/types/mesgflow-ui-kit-otp-input.d.ts

@@ -0,0 +1,44 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+
+/**
+ * `<mf-otp-input [(value)]="code" [length]="6" />` — her biri TEK bir
+ * hane taşıyan `length()` kadar kutu. Değer İÇSEL olarak `length()`
+ * uzunluğa boşlukla ("henüz doldurulmadı") doldurulur, SADECE SONDAKİ
+ * boşluklar `value` model'ine yazılırken kesilir — ARADAKİ bir boşluk
+ * (ör. kullanıcı 3. kutuya tıklayıp DOĞRUDAN yazarsa, 1-2 boş kalır)
+ * teknik olarak MÜMKÜN ama normal sıralı doldurma/yapıştırma akışında
+ * hiç OLUŞMAZ.
+ *
+ * Çoklu karakter TEK bir kutuya girerse (mobil SMS OTP otomatik doldurma
+ * — işletim sistemi TÜM kodu ilk kutunun `input` event'ine basar) VEYA
+ * yapıştırılırsa, `fillFrom(0, ...)` TÜM kutuları doldurur — ikisi de
+ * AYNI yardımcıyı paylaşıyor.
+ */
+declare class OtpInput extends ValueAccessorBase<string> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<string>;
+    readonly length: _angular_core.InputSignal<number>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    private readonly otpLabels;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    protected readonly indexes: _angular_core.Signal<number[]>;
+    private readonly boxes;
+    writeValue(value: string): void;
+    protected digitAt(i: number): string;
+    protected onInput(i: number, event: Event): void;
+    protected onKeydown(i: number, event: KeyboardEvent): void;
+    protected onPaste(event: ClipboardEvent): void;
+    /** Odaklanınca mevcut haneyi SEÇER — yazmak EKLEMEK yerine DEĞİŞTİRİR (standart OTP kutusu davranışı). */
+    protected onFocus(event: FocusEvent): void;
+    private setDigit;
+    private fillFrom;
+    private commit;
+    private focusBox;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OtpInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OtpInput, "mf-otp-input", ["mfOtpInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { OtpInput };