@mesgflow/ui-kit 0.6.0

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

@@ -0,0 +1,42 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@angular/aria/accordion';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/**
+ * `<mf-accordion multiExpandable><mf-accordion-item summary="...">...</mf-accordion-item></mf-accordion>`
+ *
+ * Salt bir kapsayıcı — ARIA/klavye/genişletme-modu mantığı `@angular/aria/accordion`'ın
+ * `AccordionGroup` pattern'inden `hostDirectives` ile ödünç alınıyor (bkz.
+ * `tabs.ts`'teki AYNI desen). `multiExpandable`/`disabled` girdileri
+ * `hostDirectives`'in `inputs` listesiyle dışarı açıldı.
+ */
+declare class Accordion {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Accordion, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Accordion, "mf-accordion", ["mfAccordion"], {}, {}, never, ["*"], true, [{ directive: typeof i1.AccordionGroup; inputs: { "multiExpandable": "multiExpandable"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+/**
+ * `<mf-accordion-item summary="Genel">İçerik…</mf-accordion-item>` —
+ * `mf-accordion` içine konur. `ngAccordionTrigger`/`ngAccordionPanel`/
+ * `ngAccordionContent` (`@angular/aria/accordion`) doğrudan bu component'in
+ * KENDİ template'inde kullanılıyor (`hostDirectives` DEĞİL — `Tab`'ın aksine
+ * trigger butonu ve panel div'i İKİ AYRI DOM elemanı, tek host'a sığmıyor;
+ * bkz. `Select`'in `cdkOverlayOrigin`/`cdkConnectedOverlay`'i kendi
+ * template'inde birleştirme deseniyle AYNI gerekçe).
+ *
+ * İçerik `ngAccordionContent` sayesinde LAZY — panel ilk açılana kadar hiç
+ * oluşturulmaz.
+ */
+declare class AccordionItem {
+    readonly summary: i0.InputSignal<string>;
+    readonly disabled: i0.InputSignal<boolean>;
+    protected readonly triggerClasses: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItem, "mf-accordion-item", never, { "summary": { "alias": "summary"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare const accordionTriggerVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+export { Accordion, AccordionItem, accordionTriggerVariants };

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

@@ -0,0 +1,60 @@
+import * as _angular_core from '@angular/core';
+import { MfTone } from '@mesgflow/ui-kit/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * `<mf-alert tone="danger" title="Kayıt başarısız">Ağ bağlantısı koptu.</mf-alert>`
+ *
+ * İçerik (gövde metni) `<ng-content />` ile projekte edilir. İkon ayrı bir
+ * content-projection SLOT'u DEĞİL — `icon` girdisi (bkz. `ConfirmDialog`'un
+ * aynı deseni, `dialog/confirm-dialog.ts`): tone'a göre makul bir varsayılanı
+ * var, tüketici farklı bir Material Symbol adı geçebilir ya da `icon=""` ile
+ * tamamen kapatabilir. Gerçek content-slot algılaması (`@ContentChild` +
+ * "sağlandı mı" kontrolü) bu basit vakada gereksiz karmaşıklık.
+ *
+ * `role`: `danger`/`warning` kullanıcının DİKKATİNİ kesmesi gereken durumlar
+ * — `role="alert"` (assertive, ekran okuyucu anında keser). Diğer tonlar
+ * `role="status"` (polite, mevcut anonsu beklemeden araya girmez).
+ */
+declare class Alert {
+    readonly tone: _angular_core.InputSignal<MfTone>;
+    readonly title: _angular_core.InputSignal<string>;
+    /** `null` (varsayılan) → `tone`'a göre otomatik ikon. Boş string (`''`) → ikon YOK. Başka bir Material Symbol adı → onu kullan. */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    readonly dismissLabel: _angular_core.InputSignal<string | undefined>;
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    private readonly injectedLabels;
+    protected readonly effectiveDismissLabel: _angular_core.Signal<string>;
+    protected readonly containerClasses: _angular_core.Signal<string>;
+    protected readonly role: _angular_core.Signal<"alert" | "status">;
+    protected readonly iconName: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Alert, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "mf-alert", ["mfAlert"], { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Badge/Chip/Avatar/StatTile ile AYNI "tonal işaret" dili (bkz.
+ * badge.variants.ts'teki gerekçe) — rol token'ı `bg-X-tint text-X-tint-fg`
+ * (`color-mix()` ile rampanın kendi basamağının %12 alfası; light çapa 600,
+ * dark çapa 400 — "Deep Emerald & Slate v2" spec'inin "Soft Tinting"
+ * tekniği). Alert her türlü zeminin üstüne (kart, sayfa, panel) oturabiliyor
+ * — `color-mix` sayesinde her zeminde AYRI ayrı doğru karışıyor, eski "düz
+ * basamak çifti" (`bg-X-50 dark:bg-X-900`) döneminde zeminden bağımsız
+ * garantili kontrast İÇİN gerekliydi, artık `check:contrast` dört yüzeyde
+ * (surface/canvas/overlay/surface-alt) `color-mix` sonucunu doğruluyor.
+ *
+ * Kenarlık `border-X/30` — Button'ın `outlined` görünümüyle AYNI dil (renkli-
+ * şeffaf çizgi, düz gri DEĞİL); primary `border-accent/30` kullanır (kendi
+ * `X-tint` token'ı yok, `accent`/`primary-tint` çifti aynı işi görür). Geniş
+ * bir banner için sadece dolgu yetersiz kalıyordu (kenar tanımı olmadan
+ * sayfa zeminiyle karışıyordu, `Badge`'in küçük pilinde bu sorun yoktu).
+ */
+declare const alertVariants: (props?: ({
+    tone?: "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AlertTone = VariantProps<typeof alertVariants>['tone'];
+
+export { Alert, alertVariants };
+export type { AlertTone };

package/types/mesgflow-ui-kit-avatar-group.d.ts

@@ -0,0 +1,28 @@
+import * as _angular_core from '@angular/core';
+
+interface AvatarGroupItem {
+    name: string;
+    src?: string | null;
+}
+/**
+ * `<mf-avatar-group [items]="teamMembers" [max]="5" />` — üst üste binen
+ * (`-space-x-2` + `ring-2 ring-surface` her avatarı komşusundan ayırır)
+ * bir avatar yığını. `max`'ı aşan üyeler tek bir "+N" göstergesine
+ * TOPLANIR (tıklanabilir değil — sadece özet; tam listeyi göstermek
+ * çağıranın kendi tooltip/popover'ına bırakılır).
+ */
+declare class AvatarGroup {
+    readonly items: _angular_core.InputSignal<AvatarGroupItem[]>;
+    readonly max: _angular_core.InputSignal<number>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    private readonly avatarGroupLabels;
+    protected readonly effectiveOverflowLabel: _angular_core.Signal<string>;
+    protected readonly visible: _angular_core.Signal<AvatarGroupItem[]>;
+    protected readonly overflowCount: _angular_core.Signal<number>;
+    protected readonly overflowClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarGroup, "mf-avatar-group", ["mfAvatarGroup"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { AvatarGroup };
+export type { AvatarGroupItem };

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

@@ -0,0 +1,23 @@
+import * as _angular_core from '@angular/core';
+import { MfTone } from '@mesgflow/ui-kit/core';
+
+type AvatarTone = MfTone;
+declare class Avatar {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly src: _angular_core.InputSignal<string | null>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly shape: _angular_core.InputSignal<"round" | "square">;
+    /** Her isim için sabit, farklı bir renk (ör. tenant switcher listesi) — `tone` verilmişse yoksayılır. */
+    readonly colorful: _angular_core.InputSignal<boolean>;
+    /** İsimden bağımsız, hep AYNI sabit renk (ör. tek bir kullanıcının kendi profili) — `colorful`'dan öncelikli. */
+    readonly tone: _angular_core.InputSignal<MfTone | null>;
+    protected readonly shapeClasses: _angular_core.Signal<"rounded-md" | "rounded-full">;
+    protected readonly colorClasses: _angular_core.Signal<string>;
+    protected readonly initials: _angular_core.Signal<string>;
+    protected readonly sizeClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Avatar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Avatar, "mf-avatar", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "colorful": { "alias": "colorful"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Avatar };
+export type { AvatarTone };

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

@@ -0,0 +1,39 @@
+import * as _angular_core from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/** `<span mfBadge tone="success">Aktif</span>` */
+declare class Badge {
+    readonly tone: _angular_core.InputSignal<"neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | null | undefined>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Badge, "span[mfBadge]", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Kullanıcının beğendiği bir Artifact'teki `.pill` deseni birebir uyarlandı:
+ * mono + büyük harf + geniş harf aralığı + `currentColor` nokta göstergesi
+ * (`before:`). Bu bileşenin kendisi bu tazelemenin imza motiflerinden biri
+ * ("mono mikro-etiket") — `text-eyebrow` token'ı (tokens/typography.css)
+ * TAM OLARAK bu dili konuşmak için var (kalın ağırlık + geniş tracking bir
+ * arada); font-weight/letter-spacing'i elle tekrar YAZMAK yerine doğrudan
+ * o token kullanılıyor (bkz. plan Faz 1d — sm/md artık FONT BOYUTUNDA değil,
+ * sadece dolguda ayrışıyor, ikisi de aynı mikro-etiket ölçeğini paylaşıyor).
+ *
+ * Renkli tonlar rol token'ı `bg-X-tint text-X-tint-fg` kullanır — spec'in
+ * "Soft Tinting" tekniği: `color-mix()` ile rampanın kendi basamağının %12
+ * alfası (light çapa 600, dark çapa 400), metin rampanın 800/400 basamağı.
+ * Rozet her türlü zeminin (kart, tablo satırı, toolbar) üstüne oturabiliyor —
+ * `color-mix` her zeminde AYRI karışıp `check:contrast`'ta dört yüzeyde de
+ * doğrulanıyor (bkz. projects/ui-kit/README.md "Token mimarisi").
+ */
+declare const badgeVariants: (props?: ({
+    tone?: "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "help" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeTone = VariantProps<typeof badgeVariants>['tone'];
+type BadgeSize = VariantProps<typeof badgeVariants>['size'];
+
+export { Badge, badgeVariants };
+export type { BadgeSize, BadgeTone };

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

@@ -0,0 +1,42 @@
+import * as _mesgflow_ui_kit_core from '@mesgflow/ui-kit/core';
+import { MfTone } from '@mesgflow/ui-kit/core';
+import * as _angular_core from '@angular/core';
+
+type BannerAppearance = 'tint' | 'fill';
+/**
+ * `<mf-banner tone="primary" appearance="fill" icon="campaign" dismissible dismissKey="v0.5">
+ *    Yeni sürüm yayında. <a href="/changelog">Neler değişti?</a>
+ *    <button mfButton size="sm" action>Güncelle</button>
+ *  </mf-banner>`
+ *
+ * Sayfanın/bölümün üst kenarında tam genişlik duyuru şeridi — `Alert`'ten farkı: kart değil
+ * kenardan kenara şerit, alt kenarlık; `fill` görünümü marka/durum rengiyle dolu. İçerideki
+ * bağlantılar metin rengini devralır ve altı çizilir (dolu zeminde `mfLink`'in marka rengi
+ * kontrastı bozardı). Eylem düğmesi `[action]` slotuna.
+ *
+ * `dismissKey` verilirse kapatma bu tarayıcıda hatırlanır (`localStorage`) — duyuru bir daha
+ * gösterilmez; depolama erişilemezse (gizli pencere) sessizce yalnızca oturumluk kapanır.
+ * Varsayılan olarak `role` YOK (statik duyuru); sonradan beliren, duyurulması gereken bir
+ * şerit için `announce` → `role="status"`.
+ */
+declare class Banner {
+    readonly tone: _angular_core.InputSignal<MfTone>;
+    readonly appearance: _angular_core.InputSignal<BannerAppearance>;
+    readonly icon: _angular_core.InputSignal<string | null>;
+    readonly align: _angular_core.InputSignal<"start" | "center">;
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Kalıcı kapatma anahtarı — değiştirmek (ör. sürüm) duyuruyu yeniden gösterir. */
+    readonly dismissKey: _angular_core.InputSignal<string | undefined>;
+    readonly announce: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    protected readonly labels: _angular_core.Signal<_mesgflow_ui_kit_core.MfAlertLabels>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    constructor();
+    protected dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Banner, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Banner, "mf-banner", ["mfBanner"], { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "dismissKey": { "alias": "dismissKey"; "required": false; "isSignal": true; }; "announce": { "alias": "announce"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "dismissed": "dismissed"; }, never, ["*", "[action]"], true, never>;
+}
+
+export { Banner };
+export type { BannerAppearance };

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

@@ -0,0 +1,45 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { ValueAccessorBase } from '@mesgflow/ui-kit/core';
+
+interface BoxValue {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * `<mf-box-input [(value)]="padding" unit="px" />` — 4 kenar (padding/
+ * margin/border) kutu-model girdisi. Bağlantılı mod (varsayılan AÇIK): tek
+ * input değiştirmek dördünü BİRDEN değiştirir — zincir ikonuna tıklayınca
+ * kenarlar bağımsızlaşır (kenarı ayırırken mevcut `top` değeri dördüne
+ * BASILMAZ — sadece tekrar bağlarken senkronlanır). `NumberInput` üstüne
+ * kompoze edilmiş bir COMPONENT (gerçek iç yapı — bkz. README "Directive mi,
+ * component mi?").
+ */
+declare class BoxInput extends ValueAccessorBase<BoxValue> implements ControlValueAccessor {
+    readonly value: _angular_core.ModelSignal<BoxValue>;
+    readonly unit: _angular_core.InputSignal<string>;
+    readonly min: _angular_core.InputSignal<number>;
+    readonly max: _angular_core.InputSignal<number | null>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly linked: _angular_core.WritableSignal<boolean>;
+    protected readonly sides: (keyof BoxValue)[];
+    private readonly boxInputLabels;
+    protected readonly sideLabels: _angular_core.Signal<{
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    }>;
+    protected readonly linkToggleTitle: _angular_core.Signal<string>;
+    writeValue(value: BoxValue): void;
+    protected sideValue(side: keyof BoxValue): number;
+    protected setSide(side: keyof BoxValue, next: number | null): void;
+    protected toggleLinked(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BoxInput, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BoxInput, "mf-box-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { BoxInput };
+export type { BoxValue };

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

@@ -0,0 +1,48 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * `<mf-brand [name]="i18n().auth.layout.brandName" />`
+ *
+ * Marka işareti TEK kaynağa indirildi — daha önce üç ayrı yerde üç farklı
+ * şey vardı: auth masaüstü panelinde sabit kodlu "MF", mobil auth bloğunda
+ * ve layout sidebar'ında sabit kodlu "N", sidebar'da ayrıca `bg-teal-600`
+ * (eski marka rengi, köşeli/`rounded-*` olmayan bir kare). İşaret artık
+ * `name()`'in İLK HARFİNDEN türetiliyor — `brandName` çevirisi değişse bile
+ * bir daha asenkron/bayat kalamaz.
+ *
+ * `labelTone="auto"` (varsayılan) isim metnini moda-duyarlı `text-fg` ile
+ * boyar — ama auth-layout'un sol paneli gibi TEMADAN BAĞIMSIZ hep koyu kalan
+ * zeminlerde bu YANLIŞ: light modda `text-fg` koyu metne döner, koyu panel
+ * üstünde görünmez olur (gerçek bug, tarayıcıda yakalandı). O bağlamlarda
+ * `labelTone="light"` ver — sabit beyaz metin, moddan bağımsız. Simetrik
+ * olarak `labelTone="dark"` — sabit koyu (`primary-900`) metin, TEMADAN
+ * BAĞIMSIZ hep AÇIK kalan zeminler için (`appearance="brand-light"` sidebar
+ * gibi): `auto` orada da YANLIŞ olurdu — dark site modunda `text-fg` açık
+ * renge döner, ki zemin (primary-100) hep açık kaldığından metin kaybolurdu.
+ *
+ * İşaret zemini `bg-accent-fill` — Sidebar `appearance="brand"` içine
+ * (`[brand]` slotu ile) projelendiğinde bu artık primary-900'e (kök
+ * sidebar'la AYNI zemin) denk düşer, işaret kaybolurdu. `group-data-
+ * [appearance=brand]/sidebar:` varyantı (özgüllük 0,2,0, `bg-accent-fill`in
+ * 0,1,0'ını İKİ MODDA da yener) o bağlamda primary-400 (`#10b981`) + ink
+ * (`primary-950`, ≈6.9:1) zeminine geçer — Sidebar'ın kendi `data-appearance`
+ * attribute'una bağlı, `Brand`'e yeni bir input EKLENMEDEN.
+ *
+ * `appearance="brand-light"` (kök primary-100, İKİ modda da AYNI) için AYRI
+ * bir override GEREKİR — DARK site modunda `bg-accent-fill` primary-400'e
+ * kayıyor, primary-100 zemine karşı sadece 2.15:1 (AA altı, neredeyse
+ * kaybolur). Sabit koyu blok + beyaz metin (`primary-900`/`white`) — bu,
+ * LIGHT site modunda zaten `bg-accent-fill`in verdiği sonuçla (primary-900)
+ * ÖRTÜŞÜYOR, sadece dark site modundaki tutarsızlığı gideriyor.
+ */
+declare class Brand {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly size: _angular_core.InputSignal<"sm" | "md">;
+    readonly showLabel: _angular_core.InputSignal<boolean>;
+    readonly labelTone: _angular_core.InputSignal<"auto" | "light" | "dark">;
+    protected readonly mark: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Brand, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Brand, "mf-brand", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "labelTone": { "alias": "labelTone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Brand };

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

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+/**
+ * `<mf-breadcrumb [items]="[{label: 'Ayarlar', href: '/ayarlar'}, {label: 'Ekip'}]" />`
+ *
+ * SON öğe (mevcut sayfa) `href` verilse BİLE bağlantı OLARAK render
+ * EDİLMEZ — WAI-ARIA breadcrumb deseninin önerdiği gibi düz metin +
+ * `aria-current="page"`. Host `role="navigation"` taşır (`nav` etiketi
+ * DEĞİL — `mf-breadcrumb` özel bir eleman, ama landmark semantiği aynı
+ * şekilde çalışır).
+ */
+declare class Breadcrumb {
+    readonly items: _angular_core.InputSignal<BreadcrumbItem[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    private readonly injectedLabels;
+    protected readonly effectiveAriaLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Breadcrumb, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Breadcrumb, "mf-breadcrumb", ["mfBreadcrumb"], { "items": { "alias": "items"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { Breadcrumb };
+export type { BreadcrumbItem };

package/types/mesgflow-ui-kit-button-group.d.ts

@@ -0,0 +1,17 @@
+import * as i0 from '@angular/core';
+
+/**
+ * `<mf-button-group><button mfButton appearance="outlined">A</button>...</mf-button-group>`
+ * — bitişik butonları TEK bir segment şeridi gibi birleştirir: iç köşeler
+ * kare, kenarlıklar 1px çakışır (`-ms-px`), hover/odaklı buton `z-10` ile
+ * komşusunun üstüne çıkar (çakışan kenarlık kesilmesin diye). En anlamlısı
+ * `appearance="outlined"` butonlarla — dolu/düz-metin butonlarda zaten
+ * görünür kenarlık yok, sadece aralarındaki boşluk kapanır.
+ */
+declare class ButtonGroup {
+    readonly ariaLabel: i0.InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroup, "mf-button-group", ["mfButtonGroup"], { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { ButtonGroup };

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

@@ -0,0 +1,75 @@
+import * as _angular_core from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * `<button mfButton>`/`<a mfButton>` — selector native elemanın KENDİSİNİ
+ * hedefler (`button[mfButton], a[mfButton]`), bir SARMALAYICI etiket
+ * (`<mf-button>`) DEĞİL (bkz. `projects/ui-kit/README.md` "Directive mi,
+ * component mi?") — bu yüzden tüketicinin `class="..."` ile verdiği static
+ * class GENE doğrudan gerçek native elemana düşer, eskiden directive'ken
+ * olduğu gibi (host'ta kalıp içe düşmeme sorunu YOK). Directive'ten
+ * component'e yükseltilmenin TEK sebebi: `loading`'i gerçek bir
+ * `<mf-spinner>`'a, `iconStart`/`iconEnd`'i gerçek ikon element'lerine
+ * bağlayabilmek için bir ŞABLONA ihtiyaç duyulması — tüketicinin kendi
+ * içeriği `<ng-content />` ile AYNEN korunur.
+ *
+ * `tone` (renk) × `appearance` (dolu/kenarlıklı/düz-metin) bağımsız iki
+ * girdi — ör. `tone="danger" appearance="text" size="icon"` sadece ikon
+ * gösteren, kenarlıksız bir sil butonu için.
+ */
+declare class Button {
+    readonly tone: _angular_core.InputSignal<"primary" | "neutral" | "success" | "warning" | "danger" | "info" | "help" | null | undefined>;
+    readonly appearance: _angular_core.InputSignal<"filled" | "outlined" | "text" | null | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "icon" | null | undefined>;
+    /** Sadece `size="icon"`'da etkili — bkz. button.variants.ts. */
+    readonly shape: _angular_core.InputSignal<"round" | "square" | null | undefined>;
+    /** Native <button> varsayılan type="submit" sürprizini önlemek için — <a>'da yok sayılır. */
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    /**
+     * `true` iken içeriğin (`<ng-content />`) ÖNÜNE `<mf-spinner size="xs" />`
+     * eklenir — `iconStart` varsa YERİNE geçer, etiket metni görünür KALIR
+     * (buton "Kaydet" yazıp yanında dönen bir gösterge taşır, metin
+     * kaybolmaz). `disabled`'ı KENDİLİĞİNDEN yönetmez — tüketici
+     * `[disabled]="loading() || ..."` ile kendi bağlar.
+     */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    /** Material Symbol adı (bkz. `Icon`) — içeriğin ÖNÜNE eklenir. `loading=true` iken spinner onun YERİNE geçer. */
+    readonly iconStart: _angular_core.InputSignal<string>;
+    /** Material Symbol adı — içeriğin ARDINA eklenir. `loading=true` iken GİZLENİR (tek bir dönen gösterge yeterli — `iconStart` ile aynı ilke). */
+    readonly iconEnd: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly nativeType: _angular_core.Signal<"button" | "submit" | "reset">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "button[mfButton], a[mfButton]", ["mfButton"], { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "iconStart": { "alias": "iconStart"; "required": false; "isSignal": true; }; "iconEnd": { "alias": "iconEnd"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * İki bağımsız eksen: `tone` (anlamsal renk, bkz. `MfTone`) × `appearance`
+ * (dolu/kenarlıklı/düz-metin). Her kombinasyon
+ * `compoundVariants`'ta açık — okunabilirlik netlik demek, kısayola kaçma.
+ *
+ * Gloss/iç-highlight YOK — 2 kez reddedildi.
+ * `outlined` kenarlığı bilinçli olarak jenerik gri DEĞİL, rengin kendisinin
+ * düşük opaklıklı hali (`border-accent/30` gibi) — düz gri çizgi "90'lar
+ * form elemanı" hissi veriyordu, renkli-şeffaf kenarlık modern/kasıtlı durur.
+ * Bu opaklık artık TEK bir class'ta iki modu birden doğru veriyor: `accent`/
+ * `success`/`warning`/`danger`/`info` çıplak isimleri `styles.css`'te
+ * moda göre takas olan rol token'ları (600 basamağı light, 400 basamağı
+ * dark) — `dark:` ikizi yazmaya gerek YOK.
+ */
+declare const buttonVariants: (props?: ({
+    tone?: "primary" | "neutral" | "success" | "warning" | "danger" | "info" | "help" | null | undefined;
+    appearance?: "filled" | "outlined" | "text" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+    shape?: "round" | "square" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonTone = VariantProps<typeof buttonVariants>['tone'];
+/** @deprecated `ButtonTone` kullan — `severity` girdisi `tone`'a taşındı (bkz. plan Faz 1a). */
+type ButtonSeverity = ButtonTone;
+type ButtonAppearance = VariantProps<typeof buttonVariants>['appearance'];
+type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+type ButtonShape = VariantProps<typeof buttonVariants>['shape'];
+
+export { Button, buttonVariants };
+export type { ButtonAppearance, ButtonSeverity, ButtonShape, ButtonSize, ButtonTone };

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

@@ -0,0 +1,71 @@
+import * as _angular_core from '@angular/core';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/** `<div mfCard padding="md" [interactive]="true">...</div>` — `interactive` tıklanabilir/navigasyona giden kartlar için hover'da hafif bir yükselme ekler. */
+declare class Card {
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | null | undefined>;
+    readonly interactive: _angular_core.InputSignal<boolean | null | undefined>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Card, "[mfCard]", never, { "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** `<div mfCardBody>...</div>` — bkz. `CardHeader`'ın JSDoc'u. */
+declare class CardBody {
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | null | undefined>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardBody, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardBody, "[mfCardBody]", never, { "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `<div mfCardFooter bordered>...</div>` — bkz. `CardHeader`'ın JSDoc'u.
+ * Aksiyon düğmeleri için sağa yaslanmış bir satır varsayar (`justify-end`).
+ */
+declare class CardFooter {
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | null | undefined>;
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardFooter, "[mfCardFooter]", never, { "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * `<div mfCard padding="none"><div mfCardHeader bordered>...</div>...</div>`
+ * — bkz. `cardSectionPadding`'in JSDoc'u (dış `mfCard`'ın `padding="none"`
+ * olması beklenir). `bordered` alttaki içerikten ayıran bir `border-b` ekler
+ * — tek başlık kartlarında (alt parça yok) gereksiz, o yüzden varsayılan `false`.
+ */
+declare class CardHeader {
+    readonly padding: _angular_core.InputSignal<"none" | "sm" | "md" | null | undefined>;
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardHeader, "[mfCardHeader]", never, { "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * BORDER-FIRST (2026-09 Deep Emerald geçişi, kullanıcı kararıyla önceki
+ * "light modda kenarlıksız, sadece gölge" ilkesinin YERİNE geçti): iki modda
+ * da `border-hairline` (color.css — %8-12 opak marka-tonlu 1px çizgi),
+ * gölge YOK. `interactive` kartlarda hover'da hafif bir yükselme hâlâ
+ * `shadow-2` ile veriliyor — bu artık istisna, varsayılan durum gölgesiz.
+ */
+declare const cardVariants: (props?: ({
+    padding?: "none" | "sm" | "md" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardPadding = VariantProps<typeof cardVariants>['padding'];
+type CardInteractive = VariantProps<typeof cardVariants>['interactive'];
+/**
+ * `CardHeader`/`CardBody`/`CardFooter`'ın paylaştığı dolgu ölçeği — `Card`'ın
+ * kendi `padding` ekseniyle AYNI üç basamak. Alt parçalar kullanılırken dış
+ * `mfCard`'ın `padding="none"` olması BEKLENİR (aksi halde dolgu iki katmanda
+ * çakışır) — bu, çağıranın sorumluluğunda (bkz. `Field`'ın `for`/id
+ * eşleşmesiyle aynı desen, `field.ts`'teki not).
+ */
+declare const cardSectionPadding: Record<NonNullable<CardPadding>, string>;
+
+export { Card, CardBody, CardFooter, CardHeader, cardSectionPadding, cardVariants };
+export type { CardInteractive, CardPadding };