@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,224 @@
+import * as _angular_core from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { cn } from '@mesgflow/ui-kit/core';
+
+/**
+ * Kök panel: kart değil, yapısal/kenar-kenara chrome — `shadow-*`/`rounded-*`
+ * YOK. `bg-chrome` (styles.css'te tanımlı, moda göre 975/950 basamağı arasında
+ * takas olan yüzey rolü) — dark modda uygulamanın EN KOYU tonu, "chrome her
+ * zaman içerikten koyu" kuralının kaynağı. Kenar artık `border-hairline`
+ * (border-first depth, 2026-09 Deep Emerald geçişi) — `border-e` UZUN-EL
+ * yazıldı (`border-e-hairline`, kısaltma DEĞİL) ki `appearance="brand"`'ın
+ * `border-e-transparent`'ı AYNI özgüllükte, cascade sırasına bağlı olmadan
+ * güvenle üstüne yazabilsin.
+ *
+ * `appearance: 'chrome' | 'brand' | 'brand-light'` — `group/sidebar` + kök
+ * elementteki `data-appearance` ATTRIBUTE'u (bkz. sidebar.html), alt
+ * bileşenler kendi class'larına yeni bir input EKLEMEDEN
+ * `group-data-[appearance=brand]/sidebar:`/`group-data-[appearance=brand-light]/sidebar:`
+ * varyantıyla opt-in eder — CDK overlay'e (flyout/tenant listesi) taşınan
+ * içerik bu grubun TORUNU DEĞİLDİR, bu yüzden overlay panelleri bilerek
+ * katı `chrome` kalır (istenen: aşırı marka rengi overlay'lerde yorucu olur).
+ *
+ * `brand-light` — kullanıcı isteğiyle eklendi (varsayılan HÂLÂ `chrome`,
+ * `brand`'in KENDİSİ birebir korunuyor — bu SADECE üçüncü bir seçenek):
+ * `brand`in "her adımda bir basamak açığa doğru" desenini primary rampasının
+ * AÇIK ucuna yansıtır (900→100, 800→200, 300→700, beyaz→900 gibi) — aynı
+ * "iki modda AYNI, marka her zaman sabit" felsefesi, sadece açık zeminde.
+ * `primary-100` `neutral-100` canvas'a karşı yalnızca 1.08:1 (saf L farkı) —
+ * `brand`in aksine (900 her zeminden zaten kopuyor) burada kenarlık BİLEREK
+ * KORUNUYOR (`border-e-primary-200`) ki blok net ayrışsın.
+ */
+declare const sidebarVariants: (props?: ({
+    collapsed?: boolean | null | undefined;
+    appearance?: "chrome" | "brand" | "brand-light" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Nav satırı (leaf veya parent-toggle) — `rounded-sm`(6px, menü öğesi kademesi,
+ * bkz. styles.css radius notu), panel değil kontrol. `border-s-2 border-s-
+ * transparent` BASE'te HER ZAMAN rezerve — aktif olunca sadece rengi değişir,
+ * yoksa 2px'lik ray aktifleşirken satırın geri kalanı kayardı (layout shift).
+ *
+ * Brand sınıfları (`group-data-[appearance=brand]/sidebar:…`) özgüllükte
+ * (0,2,0) — düz `text-fg-muted`/`hover:bg-surface-alt` (0,1,0) ve `dark:`
+ * (0,1,0) varyantlarının HER İKİSİNİ de cascade sırasından bağımsız yener,
+ * bu yüzden ayrı bir `dark:` ikizi yazmaya gerek yok (brand görünümü iki
+ * modda da AYNI).
+ */
+declare const sidebarNavItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+    collapsed?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SidebarCollapsedVariant = VariantProps<typeof sidebarVariants>['collapsed'];
+type SidebarAppearance = NonNullable<VariantProps<typeof sidebarVariants>['appearance']>;
+
+interface SidebarNavItem {
+    id: string;
+    label: string;
+    icon: string;
+    badge?: string | number;
+    /** İleride gerçek Router entegrasyonu için opsiyonel — ui-kit demosu kullanmıyor. */
+    routerLink?: string | unknown[];
+    /** Sadece 1 seviye render edilir — bir child'ın kendi `children`'ı yoksayılır. */
+    children?: SidebarNavItem[];
+}
+interface SidebarTenant {
+    id: string;
+    name: string;
+}
+interface SidebarUser {
+    name: string;
+    email?: string;
+    role?: string;
+}
+
+/**
+ * `<mf-sidebar [navItems]="items" [tenants]="tenants" [user]="user" [(collapsed)]="collapsed" />`
+ *
+ * Tamamen generic/yeniden kullanılabilir bir premium sidebar — Table'daki gibi,
+ * gerçek veriye değil `input()`lara bağlı (bkz. layout/shell/shell.ts'in bunu
+ * gerçek veriyle beslemesi). Üç bölge: tenant switcher (üst), navigasyon
+ * (orta, açılır gruplu), kullanıcı satırı (alt, tıklanınca `profileClick`
+ * emit eder — menü AÇMAZ) — hepsi tek bir dikey panelde.
+ */
+declare class Sidebar {
+    readonly tenants: _angular_core.InputSignal<SidebarTenant[]>;
+    readonly activeTenantId: _angular_core.ModelSignal<string | null>;
+    readonly navItems: _angular_core.InputSignal<SidebarNavItem[]>;
+    readonly activeItemId: _angular_core.ModelSignal<string | null>;
+    readonly user: _angular_core.InputSignal<SidebarUser | null>;
+    /**
+     * `false` -- kullanıcı satırı VE üstündeki ayraç HİÇ render edilmez.
+     * Varsayılan `true` (mevcut davranış korunur): `user()` `null` olsa bile
+     * `SidebarUserMenu` kendi "oturum açılmadı" boş-durumunu gösterir (bilinçli,
+     * bkz. `sidebar-user-menu.ts`) — bu, kullanıcı kavramı OLMAYAN tüketiciler
+     * (ör. salt-dokümantasyon/showcase kabukları) için YANLIŞ bir sinyal
+     * olabiliyordu (gerçek bulgu). `false` geçmek o tüketicilerin kaçış yolu.
+     */
+    readonly showUserMenu: _angular_core.InputSignal<boolean>;
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /**
+     * Sidebar'ın kendi kenarındaki yuvarlak daralt/genişlet butonu. Varsayılan
+     * `true` — tetikleyiciyi kendi navbar'ına taşıyan tüketiciler `false` geçer,
+     * aksi halde masaüstünde İKİ ayrı daraltma kontrolü olurdu.
+     */
+    readonly showCollapseToggle: _angular_core.InputSignal<boolean>;
+    /**
+     * `'chrome'` (varsayılan, mevcut nötr görünüm) | `'brand'` (kök zemini
+     * `primary-900`, nav metni/aktif ray marka tonlu — iki modda AYNI, bkz.
+     * `sidebar.variants.ts` doc'u) | `'brand-light'` (AYNI marka kimliği,
+     * kök zemini `primary-100` — koyu yerine açık bir marka bloğu, yine iki
+     * modda AYNI). CDK overlay'e taşınan flyout/tenant listesi bu grubun
+     * TORUNU olmadığından her zaman katı `chrome` kalır.
+     */
+    readonly appearance: _angular_core.InputSignal<SidebarAppearance>;
+    /** Verilmezse `MF_SIDEBAR_LABELS`'a düşer — `SidebarTenantSwitcher`/`SidebarUserMenu`'nün KENDİ etiketleri artık AYRICA buradan prop-drilling YAPILMIYOR, ikisi de `MF_SIDEBAR_LABELS`'ı doğrudan inject ediyor. */
+    readonly collapseLabel: _angular_core.InputSignal<string | undefined>;
+    readonly expandLabel: _angular_core.InputSignal<string | undefined>;
+    readonly navAriaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly tenantChange: _angular_core.OutputEmitterRef<SidebarTenant>;
+    readonly itemClick: _angular_core.OutputEmitterRef<SidebarNavItem>;
+    /** Kullanıcı satırına tıklanınca — profile navigasyonu tüketicinin sorumluluğu. */
+    readonly profileClick: _angular_core.OutputEmitterRef<void>;
+    private readonly sidebarLabels;
+    protected readonly effectiveCollapseLabel: _angular_core.Signal<string>;
+    protected readonly effectiveExpandLabel: _angular_core.Signal<string>;
+    protected readonly effectiveNavAriaLabel: _angular_core.Signal<string>;
+    protected readonly rootClasses: _angular_core.Signal<string>;
+    /** Genişkenken hangi gruplar açık — her grup BAĞIMSIZ açılır/kapanır (akordeon değil, kullanıcı kararı). `model()` — tüketici okuyabilir/yazabilir (ör. "hepsini aç" bir buton). */
+    readonly expandedIds: _angular_core.ModelSignal<ReadonlySet<string>>;
+    /**
+     * `activeItemId()` bir alt öğeye (children içinde) eşleşince o öğenin
+     * EBEVEYN grubunu otomatik açar — YALNIZCA aktif öğe DEĞİŞİNCE (kullanıcının
+     * sonradan elle kapatması korunur, tekrar zorla açılmaz). Öncesinde derin
+     * bir bağlantıya (ör. `/components/button`) DOĞRUDAN gidildiğinde tüm
+     * gruplar kapalı geliyor, aktif öğe görünmüyordu (gerçek bulgu).
+     */
+    readonly autoExpandActive: _angular_core.InputSignal<boolean>;
+    protected isExpanded(id: string): boolean;
+    protected onToggleExpand(id: string): void;
+    constructor();
+    protected onItemActivate(item: SidebarNavItem): void;
+    protected onTenantSelect(tenant: SidebarTenant): void;
+    protected toggleCollapse(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Sidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Sidebar, "mf-sidebar", ["mfSidebar"], { "tenants": { "alias": "tenants"; "required": false; "isSignal": true; }; "activeTenantId": { "alias": "activeTenantId"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": true; "isSignal": true; }; "activeItemId": { "alias": "activeItemId"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "showUserMenu": { "alias": "showUserMenu"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "showCollapseToggle": { "alias": "showCollapseToggle"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; "navAriaLabel": { "alias": "navAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; "autoExpandActive": { "alias": "autoExpandActive"; "required": false; "isSignal": true; }; }, { "activeTenantId": "activeTenantIdChange"; "activeItemId": "activeItemIdChange"; "collapsed": "collapsedChange"; "tenantChange": "tenantChange"; "itemClick": "itemClick"; "profileClick": "profileClick"; "expandedIds": "expandedIdsChange"; }, never, ["[brand]"], true, never>;
+}
+
+/**
+ * Tek nav satırı — yaprak veya çocuklu (parent). Sadece 1 seviye nesting
+ * (çocuğun çocuğu render edilmiyor, YAGNI). Genişkenken parent'a tıklayınca
+ * çocuklar CSS-only grid-rows akordeonuyla İÇERİDE açılır (her grup bağımsız,
+ * root `Sidebar`'ın `expandedIds` set'i tarafından yönetilir). Daraltılmışken
+ * aynı satıra TIKLAYINCA (hover değil — kullanıcı kararı) sağda bir `Popover`
+ * flyout paneli çocukları listeler (bkz. plan Faz 1c).
+ */
+declare class SidebarNavItemRow {
+    readonly item: _angular_core.InputSignal<SidebarNavItem>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    readonly activeItemId: _angular_core.InputSignal<string | null>;
+    /** Genişkenken akordeon açık/kapalı durumu — root Sidebar tarafından kontrol edilir. */
+    readonly expanded: _angular_core.InputSignal<boolean>;
+    readonly activate: _angular_core.OutputEmitterRef<SidebarNavItem>;
+    readonly toggleExpand: _angular_core.OutputEmitterRef<string>;
+    protected readonly hasChildren: _angular_core.Signal<boolean>;
+    protected readonly isActive: _angular_core.Signal<boolean>;
+    protected readonly rowClasses: _angular_core.Signal<string>;
+    protected readonly flyoutOpen: _angular_core.WritableSignal<boolean>;
+    protected onRowClick(): void;
+    protected childRowClasses(child: SidebarNavItem): string;
+    protected onChildClick(child: SidebarNavItem): void;
+    protected closeFlyout(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarNavItemRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarNavItemRow, "mf-sidebar-nav-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "activeItemId": { "alias": "activeItemId"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "activate": "activate"; "toggleExpand": "toggleExpand"; }, never, never, true, never>;
+}
+
+/**
+ * Sidebar'ın üst bloğu — panel iskeleti `Popover`'a devredildi (bkz. plan
+ * Faz 1c). Panel genişliği daraltılmışken trigger genişliğine değil SABİT
+ * 240px'e bağlı (`matchTriggerWidth` kapalı, `panelClass` ile `min-w-60`
+ * veriliyor) — daralmışken trigger sadece 72px, tenant adları sığmaz.
+ */
+declare class SidebarTenantSwitcher {
+    readonly tenants: _angular_core.InputSignal<SidebarTenant[]>;
+    readonly activeTenantId: _angular_core.InputSignal<string | null>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly noTenantsLabel: _angular_core.InputSignal<string | undefined>;
+    readonly tenantChange: _angular_core.OutputEmitterRef<SidebarTenant>;
+    private readonly sidebarLabels;
+    protected readonly effectiveLabel: _angular_core.Signal<string>;
+    protected readonly effectiveNoTenantsLabel: _angular_core.Signal<string>;
+    protected readonly cn: typeof cn;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly highlighted: _angular_core.WritableSignal<number>;
+    protected readonly activeTenant: _angular_core.Signal<SidebarTenant | null>;
+    protected toggle(): void;
+    protected close(): void;
+    protected select(tenant: SidebarTenant): void;
+    protected optionClasses(tenant: SidebarTenant, index: number): string;
+    protected onTriggerKeydown(event: KeyboardEvent): void;
+    protected onPanelKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarTenantSwitcher, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarTenantSwitcher, "mf-sidebar-tenant-switcher", never, { "tenants": { "alias": "tenants"; "required": false; "isSignal": true; }; "activeTenantId": { "alias": "activeTenantId"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "noTenantsLabel": { "alias": "noTenantsLabel"; "required": false; "isSignal": true; }; }, { "tenantChange": "tenantChange"; }, never, never, true, never>;
+}
+
+/**
+ * Sidebar'ın alt bloğu — menü AÇMIYOR, tek bir satır: tıklanınca `profileClick`
+ * emit ediyor, gerçek "profile git" navigasyonu tüketicinin sorumluluğu
+ * (ör. `(profileClick)="router.navigate(['/profile'])"`).
+ */
+declare class SidebarUserMenu {
+    readonly user: _angular_core.InputSignal<SidebarUser | null>;
+    readonly collapsed: _angular_core.InputSignal<boolean>;
+    readonly noUserLabel: _angular_core.InputSignal<string | undefined>;
+    readonly profileClick: _angular_core.OutputEmitterRef<void>;
+    private readonly sidebarLabels;
+    protected readonly effectiveNoUserLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarUserMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarUserMenu, "mf-sidebar-user-menu", never, { "user": { "alias": "user"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "noUserLabel": { "alias": "noUserLabel"; "required": false; "isSignal": true; }; }, { "profileClick": "profileClick"; }, never, never, true, never>;
+}
+
+export { Sidebar, SidebarNavItemRow, SidebarTenantSwitcher, SidebarUserMenu, sidebarNavItemVariants, sidebarVariants };
+export type { SidebarAppearance, SidebarCollapsedVariant, SidebarNavItem, SidebarTenant, SidebarUser };

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

@@ -0,0 +1,29 @@
+import * as _angular_core from '@angular/core';
+
+type SkeletonVariant = 'text' | 'circle' | 'rect';
+/**
+ * `<div mfSkeleton class="h-4 w-32"></div>` (varsayılan `variant="rect"` —
+ * boyutu tüketici `class` ile verir, ESKİ davranış BİREBİR korunur) veya
+ * `<div mfSkeleton variant="circle" class="h-10 w-10"></div>` (`rounded-full`
+ * eklenir) veya `<div mfSkeleton variant="text" [lines]="3"></div>`
+ * (`lines > 1` iken alt alta `lines` kadar satır render eder — SON satır
+ * bilerek `w-3/4`, bir paragrafın düzensiz son satırını taklit eder).
+ *
+ * `lines > 1` YALNIZCA `variant="text"`'te anlamlı — bu durumda host
+ * kendisi bir shimmer kutusu OLMAKTAN çıkıp satırları dikey dizen bir
+ * `flex flex-col` kabına dönüşür (directive'ten component'e yükseltilmesinin
+ * TEK sebebi — bkz. `Button`'ın aynı yükseltme deseni, `button.ts`).
+ */
+declare class Skeleton {
+    readonly variant: _angular_core.InputSignal<SkeletonVariant>;
+    readonly lines: _angular_core.InputSignal<number>;
+    protected readonly multiline: _angular_core.Signal<boolean>;
+    protected readonly lineIndexes: _angular_core.Signal<number[]>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected lineClasses(last: boolean): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Skeleton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Skeleton, "[mfSkeleton]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "lines": { "alias": "lines"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Skeleton };
+export type { SkeletonVariant };

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

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/**
+ * `<mf-slider [(value)]="opacity" [min]="0" [max]="100" [step]="5" />` —
+ * `@angular/aria`'da hazır bir slider pattern'i YOK (sadece accordion/
+ * combobox/grid/listbox/menu/tabs/toolbar/tree var), bu yüzden ARIA
+ * `role="slider"` ve klavye (ok tuşları/Home/End/PageUp/PageDown) + pointer
+ * sürükleme ELLE kuruldu — kodda hand-rolled ARIA'nın ikinci örneği
+ * (ilki `Calendar`, bkz. README "Takvim ızgarası bilerek grid KULLANMADI").
+ */
+declare class Slider extends ValueAccessorBase<number> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<number>;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly step: _angular_core.InputSignal<number>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly elementRef;
+    protected readonly percent: _angular_core.Signal<number>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    writeValue(value: number): void;
+    private clamp;
+    private setValue;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    private updateFromPointer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Slider, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Slider, "mf-slider", ["mfSlider"], { "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; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+declare const sliderHostVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+export { Slider, sliderHostVariants };

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

@@ -0,0 +1,31 @@
+import * as _angular_core from '@angular/core';
+import { MfSize, MfTone } from '@mesgflow/ui-kit/core';
+
+type SpinnerSize = 'xs' | MfSize;
+type SpinnerTone = MfTone | 'current';
+/**
+ * `<mf-spinner size="sm" />` — dönen yüklenme göstergesi. Ayrı bir SVG/CSS
+ * animasyonu ÇİZMEK yerine kitin zaten her yerde kullandığı `progress_activity`
+ * Material Symbol'ü + `animate-spin` deseni tekrar kullanılıyor (bkz.
+ * `ConfirmDialog`'un onay butonu) — tüm "yükleniyor" göstergeleri tek bir
+ * görsel dil konuşuyor.
+ *
+ * `role="status"` + `aria-label` HOST'ta (ikonun kendisi `Icon` directive'i
+ * gereği her zaman `aria-hidden` — bkz. icon.ts) — ekran okuyucu ligature
+ * kaynak metnini ("progress_activity") DEĞİL, buradaki anlamlı etiketi anons eder.
+ */
+declare class Spinner {
+    readonly size: _angular_core.InputSignal<SpinnerSize>;
+    readonly tone: _angular_core.InputSignal<SpinnerTone>;
+    /** Verilmezse `MF_COMMON_LABELS`'ın `loading`'i kullanılır (bkz. `provideMesgflowUi`). */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    private readonly commonLabels;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    protected readonly sizePx: _angular_core.Signal<number>;
+    protected readonly iconClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Spinner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Spinner, "mf-spinner", ["mfSpinner"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Spinner };
+export type { SpinnerSize, SpinnerTone };

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

@@ -0,0 +1,40 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * `<mf-splitter><div splitterPane1>Sol</div><div splitterPane2>Sağ</div></mf-splitter>`
+ *
+ * Tuvalin iki yanındaki yeniden boyutlanabilir paneller için — `@angular/aria`'da
+ * hazır bir splitter pattern'i YOK, `role="separator"` + klavye (ok tuşları/
+ * Home/End) + pointer sürükleme ELLE kuruldu (Slider'daki AYNI hand-rolled
+ * ARIA yaklaşımı). Yüzde tabanlı bölünme (`flex-basis: %`) — piksel değil,
+ * konteyner yeniden boyutlandığında oran korunur.
+ *
+ * `currentSplit` BİLEREK `linkedSignal(() => this.initialSplit())` — düz bir
+ * `signal(50)` + constructor'da `.set(this.initialSplit())` YERİNE (BULUNAN
+ * GERÇEK HATA: constructor çalıştığı anda `input()` sinyali HENÜZ bağlanan
+ * değere sahip DEĞİL, `initialSplit()` varsayılana — 50 — düşüyor ve
+ * `currentSplit` bir daha ASLA güncellenmiyordu; `[split]="20"` gibi
+ * varsayılan-DIŞI bir değer SESSİZCE yok sayılıyordu, gerçek tarayıcıda
+ * `aria-valuenow` okununca ortaya çıktı). `linkedSignal` hem `initialSplit()`
+ * değiştiğinde YENİDEN hesaplanıyor HEM DE sürükleme/klavye ile YEREL
+ * `.set()`'e izin veriyor (CLAUDE.md: "birden çok reaktif kaynaktan türeyen
+ * VE senkron kalması gereken durum için `linkedSignal()`").
+ */
+declare class Splitter {
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly initialSplit: _angular_core.InputSignal<number>;
+    private readonly elementRef;
+    protected readonly currentSplit: _angular_core.WritableSignal<number>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    private clamp;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Splitter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Splitter, "mf-splitter", ["mfSplitter"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "initialSplit": { "alias": "split"; "required": false; "isSignal": true; }; }, {}, never, ["[splitterPane1]", "[splitterPane2]"], true, never>;
+}
+
+export { Splitter };

package/types/mesgflow-ui-kit-stat-tile.d.ts

@@ -0,0 +1,54 @@
+import * as _angular_core from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+type StatTileDeltaDirection = 'up' | 'down' | 'flat';
+/**
+ * `<mf-stat-tile label="Aktif üye" value="1.284" delta="+12%" deltaDirection="up"
+ *   deltaCaption="geçen aya göre" [trend]="last12" trendLabel="Son 12 ay" />`
+ *
+ * KPI şeridinin tek birimi — dataviz "figür sözleşmesi": `label` · `value` · opsiyonel `delta`
+ * (işaretli, adı verilen bir döneme göre) · opsiyonel `trend` (sparkline, güncel dönem vurgulu).
+ *
+ * Delta rengi = YÖN × "yukarı iyi mi" (`upIsGood` — hata oranında düşüş iyidir): iyi → success,
+ * kötü → danger, yatay → nötr. Renk ASLA tek başına anlam taşımaz: yön ikonu + işaretli metin
+ * her zaman yanında. Değer büyük tek başına bir sayı olduğu için orantılı rakam (tabular DEĞİL —
+ * `tabular-nums` "121"i büyük boyutta dağınık gösterir).
+ *
+ * Ray motifi BİLEREK yok — README bu motifi 4 yerle sınırlıyor, StatTile beşinci yer olmuyor.
+ * Dar bir ızgara hücresinde (16rem altı, `@container`) ikon metnin ÜSTÜNE geçer — değer satırı daralmaz.
+ * `@container` (inline-size containment) host'un genişliği İÇERİKTEN gelemez demek: ızgara/blok
+ * içinde doğal çalışır; genişliği verilmemiş bir flex öğesi olarak kullanırken `flex-1`/`w-*` verin.
+ */
+declare class StatTile {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly caption: _angular_core.InputSignal<string>;
+    readonly tone: _angular_core.InputSignal<"neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined>;
+    /** Görüntülenecek işaretli değişim ("+12%", "−3"). Boşsa delta satırı çizilmez. */
+    readonly delta: _angular_core.InputSignal<string>;
+    readonly deltaDirection: _angular_core.InputSignal<StatTileDeltaDirection>;
+    /** Artış iyi mi? Hata oranı, churn, yanıt süresi gibi metriklerde `false`. */
+    readonly upIsGood: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Karşılaştırılan dönem ("geçen aya göre") — tüketici metni, kit varsayılanı YOK. */
+    readonly deltaCaption: _angular_core.InputSignal<string>;
+    /** Sparkline değerleri (en az 2). Güncel dönem vurgu renginde çizilir. */
+    readonly trend: _angular_core.InputSignal<readonly number[]>;
+    /** Sparkline'ın erişilebilir adı; boşsa süs sayılır (değer zaten metinde). */
+    readonly trendLabel: _angular_core.InputSignal<string>;
+    protected readonly iconClasses: _angular_core.Signal<string>;
+    protected readonly deltaIcon: _angular_core.Signal<string>;
+    protected readonly deltaClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatTile, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "mf-stat-tile", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaDirection": { "alias": "deltaDirection"; "required": false; "isSignal": true; }; "upIsGood": { "alias": "upIsGood"; "required": false; "isSignal": true; }; "deltaCaption": { "alias": "deltaCaption"; "required": false; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "trendLabel": { "alias": "trendLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Tonal ikon dolgusu — Badge/Avatar'daki AYNI tonal işaret rol token'ı (`bg-X-tint text-X-tint-fg`, `color-mix()` tabanlı), bkz. projects/ui-kit/README.md "Token mimarisi". */
+declare const statTileIconVariants: (props?: ({
+    tone?: "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StatTileTone = VariantProps<typeof statTileIconVariants>['tone'];
+
+export { StatTile, statTileIconVariants };
+export type { StatTileDeltaDirection, StatTileTone };

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

@@ -0,0 +1,48 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * `<mf-step label="Hesap" description="Bilgilerinizi girin" />` — bir
+ * `mf-stepper` ATASI ZORUNLU (bkz. `stepper.ts`'in JSDoc'u). Bağlayıcı
+ * çizgi kendi `::after` pseudo-elementi (`last:after:hidden` ile SON
+ * adımda gizlenir — hangi adımın son olduğunu bilmek için ayrı bir
+ * hesaplama GEREKMEZ, saf CSS `:last-child`).
+ */
+declare class Step {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    private readonly stepper;
+    protected readonly index: number;
+    protected readonly isComplete: _angular_core.Signal<boolean>;
+    protected readonly isCurrent: _angular_core.Signal<boolean>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    protected circleClasses(): string;
+    protected labelClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Step, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Step, "mf-step", ["mfStep"], { "label": { "alias": "label"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `<mf-stepper [current]="1"><mf-step label="Hesap" /><mf-step label="Ödeme" /></mf-stepper>`
+ *
+ * Salt görsel bir ilerleme göstergesi — gezinme (bir sonraki/önceki adıma
+ * geçme) çağıranın kendi sorumluluğunda (`[current]`'ı değiştiren düğmeler
+ * dışarıda yaşar). Her `mf-step` kendi index'ini KURULUŞTA bir kez
+ * `registerStep()` ile alır — `contentChildren` yerine basit bir kayıt-sırası
+ * sayacı, `Step`'in `Stepper`'ı import ETMESİ yeterli (tersi YOK, döngüsel
+ * bir tip bağımlılığı kurulmuyor).
+ */
+declare class Stepper {
+    readonly current: _angular_core.InputSignal<number>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    private readonly stepperLabels;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    private nextIndex;
+    /** Her `mf-step` kurulumda BİR KEZ çağırır — kendi (sıradaki) index'ini alır. */
+    registerStep(): number;
+    isComplete(index: number): boolean;
+    isCurrent(index: number): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Stepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Stepper, "mf-stepper", ["mfStepper"], { "current": { "alias": "current"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { Step, Stepper };

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

@@ -0,0 +1,34 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase, MfSize } from '@mesgflow/ui-kit/core';
+
+/**
+ * `<mf-switch [(checked)]="row.active" (checkedChange)="onToggle(row)" />`
+ *
+ * Native `[(ngModel)]` DEĞİL, Angular'ın `model()` iki-yönlü bağlama sinyali
+ * kullanılıyor (`[(checked)]`) — ControlValueAccessor yazmadan aynı ergonomiyi
+ * veriyor. Görünür track+thumb, gizli (sr-only) bir native checkbox'ın
+ * `:checked` durumuna komşu `<span>` üzerinden `peer-checked:` ile tepki
+ * veriyor — gerçek form kontrolü hâlâ native checkbox (klavye/focus/a11y
+ * ücretsiz), görsel tamamen bizim.
+ */
+declare class Switch extends ValueAccessorBase<boolean> implements ControlValueAccessor {
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<MfSize>;
+    readonly label: _angular_core.InputSignal<string>;
+    /** `label` boşken (görünür metin yok) native checkbox'a erişilebilir ad sağlamak için — `label` doluysa YOK SAYILIR (çift anons olmasın diye). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly sizeClasses: _angular_core.Signal<{
+        track: string;
+        thumb: string;
+        offset: string;
+        translate: string;
+    }>;
+    writeValue(value: boolean): void;
+    protected onToggle(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Switch, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Switch, "mf-switch", ["mfSwitch"], { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, never, true, never>;
+}
+
+export { Switch };