@ahmetilhn/hanui 1.1.1 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +131 -15
- package/build/index.cjs +18 -14
- package/build/index.cjs.map +1 -1
- package/build/index.d.ts +1600 -160
- package/build/index.js +3866 -1964
- package/build/index.js.map +1 -1
- package/build/styles.css +1 -1
- package/package.json +21 -6
package/build/index.d.ts
CHANGED
|
@@ -8,6 +8,8 @@ import { HTMLAttributes } from 'react';
|
|
|
8
8
|
import { InputHTMLAttributes } from 'react';
|
|
9
9
|
import { JSX } from 'react';
|
|
10
10
|
import { MemoExoticComponent } from 'react';
|
|
11
|
+
import { NamedExoticComponent } from 'react';
|
|
12
|
+
import { ReactElement } from 'react';
|
|
11
13
|
import { ReactNode } from 'react';
|
|
12
14
|
import { ReactPortal } from 'react';
|
|
13
15
|
import { RefAttributes } from 'react';
|
|
@@ -20,6 +22,51 @@ export declare const ABOVE_MOBILE_MEDIA_QUERY = "(min-width: 641px)";
|
|
|
20
22
|
/** Kenar çubuğu ekranda olduğu için filtre paneli bu ölçünün üstünde gizlenir. */
|
|
21
23
|
export declare const ABOVE_TABLET_MEDIA_QUERY = "(min-width: 1025px)";
|
|
22
24
|
|
|
25
|
+
export declare const Accordion: typeof Accordion_2;
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Akordeon — katlanabilir bölümler.
|
|
29
|
+
*
|
|
30
|
+
* <h3>Yerel `<details>` / `<summary>` üzerine</h3>
|
|
31
|
+
* Açık/kapalı durumu, klavye desteği (`Enter` ve `Space`), ekran okuyucu
|
|
32
|
+
* duyurusu ("genişletildi/daraltıldı") ve <strong>sayfa içi bulma</strong>
|
|
33
|
+
* tarayıcıdan gelir. Sonuncusu taklit bir uygulamada imkânsız: Ctrl+F ile
|
|
34
|
+
* aranan bir metin kapalı bir `<details>`in içindeyse tarayıcı bölümü kendisi
|
|
35
|
+
* açıyor; `display: none` ile gizlenmiş bir `<div>`de o metin hiç yok.
|
|
36
|
+
*
|
|
37
|
+
* <p>Bedeli, tek-açık kipin elle kurulması: `<details name="…">` bunu yerel
|
|
38
|
+
* olarak veriyor ama Safari 17.2 öncesinde yok ve orada TÜM bölümler
|
|
39
|
+
* birbirinden bağımsız açılıyordu — sessiz bir davranış farkı. Karar burada
|
|
40
|
+
* veriliyor, tarayıcıya bırakılmıyor.
|
|
41
|
+
*
|
|
42
|
+
* <h3>Yükseklik geçişi</h3>
|
|
43
|
+
* `interpolate-size: allow-keywords` + `height` geçişi ile `auto`ya
|
|
44
|
+
* canlandırılıyor. Desteklemeyen tarayıcıda geçiş düşer ve bölüm ANINDA
|
|
45
|
+
* açılır — eski davranış. Sabit bir piksel yüksekliği vermek ya da
|
|
46
|
+
* `max-height` numarası kullanmak yanlış: ilki içeriği kırpıyor, ikincisi
|
|
47
|
+
* kısa bölümlerde gözle görülür bir gecikme bırakıyordu.
|
|
48
|
+
*
|
|
49
|
+
* <h3>Klavye (yerel)</h3>
|
|
50
|
+
* <table>
|
|
51
|
+
* <tr><td>`Enter` / `Space`</td><td>bölümü açar/kapatır</td></tr>
|
|
52
|
+
* <tr><td>`Tab`</td><td>başlıklar arasında gezinir</td></tr>
|
|
53
|
+
* </table>
|
|
54
|
+
* Ok tuşu YOKTUR ve olmamalı: akordeon bir liste değil, her başlık bağımsız
|
|
55
|
+
* bir düğme (WAI-ARIA APG accordion deseni ok tuşlarını isteğe bağlı bırakıyor
|
|
56
|
+
* ve yerel öğe onları getirmiyor).
|
|
57
|
+
*/
|
|
58
|
+
declare const Accordion_2: FC<Props_35>;
|
|
59
|
+
|
|
60
|
+
export declare type AccordionItem = {
|
|
61
|
+
id: string;
|
|
62
|
+
/** Başlık satırı — tıklanabilir olan bu. */
|
|
63
|
+
title: ReactNode;
|
|
64
|
+
/** Başlığın sağında duran ikincil bilgi (sayaç, rozet). */
|
|
65
|
+
meta?: ReactNode;
|
|
66
|
+
content: ReactNode;
|
|
67
|
+
isDisabled?: boolean;
|
|
68
|
+
};
|
|
69
|
+
|
|
23
70
|
export declare const Alert: typeof Alert_2;
|
|
24
71
|
|
|
25
72
|
/**
|
|
@@ -29,10 +76,13 @@ export declare const Alert: typeof Alert_2;
|
|
|
29
76
|
* anında duyurur. `info` ve `success` duyurulmaz — sayfa yüklenirken her bilgi
|
|
30
77
|
* kutusunun okunması gürültü olurdu.
|
|
31
78
|
*/
|
|
32
|
-
declare const Alert_2: FC<
|
|
79
|
+
declare const Alert_2: FC<Props_17>;
|
|
33
80
|
|
|
34
81
|
export declare type AlertTone = 'info' | 'success' | 'warning' | 'danger';
|
|
35
82
|
|
|
83
|
+
/** Duyurunun aciliyeti. */
|
|
84
|
+
export declare type AnnouncePoliteness = 'polite' | 'assertive';
|
|
85
|
+
|
|
36
86
|
export declare const Avatar: typeof Avatar_2;
|
|
37
87
|
|
|
38
88
|
/**
|
|
@@ -49,7 +99,7 @@ export declare const Avatar: typeof Avatar_2;
|
|
|
49
99
|
* okumak "A İ Ahmet İlhan" gibi bir gürültü üretiyordu. Adın yanında
|
|
50
100
|
* durmadığı bir yerde kullanılıyorsa çağıran taraf metni kendisi yazar.
|
|
51
101
|
*/
|
|
52
|
-
declare const Avatar_2: FC<
|
|
102
|
+
declare const Avatar_2: FC<Props_18>;
|
|
53
103
|
|
|
54
104
|
export declare const Badge: typeof Badge_2;
|
|
55
105
|
|
|
@@ -70,7 +120,7 @@ export declare const Badge: typeof Badge_2;
|
|
|
70
120
|
* `link`) anlamlı: onlar bir durumu değil bir sayıyı bildirir ve tıklanabilir
|
|
71
121
|
* bir öğenin parçasıdır.
|
|
72
122
|
*/
|
|
73
|
-
declare const Badge_2: FC<
|
|
123
|
+
declare const Badge_2: FC<Props_19>;
|
|
74
124
|
|
|
75
125
|
export declare type BadgeTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info'
|
|
76
126
|
/** Birincil sınıflandırma tinti (mavi-lacivert aile). */
|
|
@@ -154,7 +204,7 @@ declare type BaseProps_4 = {
|
|
|
154
204
|
testId?: string;
|
|
155
205
|
};
|
|
156
206
|
|
|
157
|
-
export declare const BottomSheet: MemoExoticComponent<({ title, closeLabel, onClose, children, toolbar, footer, closeAbove, className, testId, }:
|
|
207
|
+
export declare const BottomSheet: MemoExoticComponent<({ title, closeLabel, onClose, children, toolbar, footer, closeAbove, className, testId, }: Props_40) => ReactPortal | null>;
|
|
158
208
|
|
|
159
209
|
export declare const Breadcrumb: typeof Breadcrumb_2;
|
|
160
210
|
|
|
@@ -167,7 +217,7 @@ export declare const Breadcrumb: typeof Breadcrumb_2;
|
|
|
167
217
|
* <p>Ayırıcı ikon `aria-hidden`; ekran okuyucu liste yapısından hiyerarşiyi
|
|
168
218
|
* zaten anlar.
|
|
169
219
|
*/
|
|
170
|
-
declare const Breadcrumb_2: FC<
|
|
220
|
+
declare const Breadcrumb_2: FC<Props_20>;
|
|
171
221
|
|
|
172
222
|
/**
|
|
173
223
|
* Yapılandırmayı CSS metnine çevirir.
|
|
@@ -338,6 +388,42 @@ declare type CardSectionProps = {
|
|
|
338
388
|
className?: string;
|
|
339
389
|
};
|
|
340
390
|
|
|
391
|
+
export declare const Carousel: typeof Carousel_2;
|
|
392
|
+
|
|
393
|
+
/**
|
|
394
|
+
* Kaydırılabilir şerit (carousel).
|
|
395
|
+
*
|
|
396
|
+
* <h3>OTOMATİK OYNATMA YOK — ve olmayacak</h3>
|
|
397
|
+
* Kendiliğinden ilerleyen bir şerit WCAG 2.2.2'yi ihlal ediyor (beş saniyeden
|
|
398
|
+
* uzun süren hareket duraklatılabilmeli) ama asıl sorun daha basit: kullanıcı
|
|
399
|
+
* okumaya başladığı kartı kaybediyor. Bir prop olarak bile eklenmedi —
|
|
400
|
+
* eklenseydi kullanılırdı.
|
|
401
|
+
*
|
|
402
|
+
* <h3>Kaydırma YEREL, JavaScript değil</h3>
|
|
403
|
+
* Şerit `overflow-x: auto` + `scroll-snap`: dokunmatikte parmakla kaydırma,
|
|
404
|
+
* masaüstünde shift+tekerlek ve <strong>klavyeyle ok tuşları</strong>
|
|
405
|
+
* tarayıcıdan geliyor. JavaScript ile `transform` kaydıran bir uygulama
|
|
406
|
+
* bunların hiçbirini getirmiyor ve kaydırma çubuğunu da götürüyor — kullanıcı
|
|
407
|
+
* şeridin devam ettiğini göremiyordu.
|
|
408
|
+
*
|
|
409
|
+
* <p>Düğmeler `scrollBy` çağırıyor: yerel kaydırmayı DEĞİŞTİRMİYOR,
|
|
410
|
+
* tetikliyor. İkisi aynı durumu paylaşıyor ve ayrışmaları imkânsız.
|
|
411
|
+
*
|
|
412
|
+
* <h3>Şerit klavyeyle ULAŞILABİLİR</h3>
|
|
413
|
+
* Kaydırılabilir bir kutu, içinde odaklanabilir öğe yoksa `tabindex`
|
|
414
|
+
* verilmediğinde klavye kullanıcısı için ulaşılamaz (WCAG 2.1.1). Şerit
|
|
415
|
+
* genellikle bağlantı taşıyan kartlardan oluşuyor ve o durumda ek bir durak
|
|
416
|
+
* gereksiz — bu yüzden `tabindex` yalnızca <strong>odaklanabilir çocuk
|
|
417
|
+
* yoksa</strong> yazılıyor.
|
|
418
|
+
*
|
|
419
|
+
* <h3>Klavye</h3>
|
|
420
|
+
* <table>
|
|
421
|
+
* <tr><td>`Tab`</td><td>önceki/sonraki düğmelerine ve kartların içine</td></tr>
|
|
422
|
+
* <tr><td>ok tuşları</td><td>şeridi kaydırır (yerel)</td></tr>
|
|
423
|
+
* </table>
|
|
424
|
+
*/
|
|
425
|
+
declare const Carousel_2: FC<Props_21>;
|
|
426
|
+
|
|
341
427
|
export declare const Checkbox: typeof Checkbox_2;
|
|
342
428
|
|
|
343
429
|
/**
|
|
@@ -428,8 +514,18 @@ export declare const ChipGroup: typeof ChipGroup_2;
|
|
|
428
514
|
* Radyo grubunda Tab tuşu <strong>gruba</strong> girer, seçenekler arasında ok
|
|
429
515
|
* tuşlarıyla gezilir. Her çipin ayrı ayrı Tab durağı olması, 7 seçenekli bir
|
|
430
516
|
* filtrede klavye kullanıcısını 7 kez Tab'lamaya zorluyordu.
|
|
517
|
+
*
|
|
518
|
+
* <h3>Klavye</h3>
|
|
519
|
+
* <table>
|
|
520
|
+
* <tr><td>`ArrowRight` / `ArrowDown`</td><td>sonraki seçenek; uçlarda DÖNER</td></tr>
|
|
521
|
+
* <tr><td>`ArrowLeft` / `ArrowUp`</td><td>önceki seçenek</td></tr>
|
|
522
|
+
* </table>
|
|
523
|
+
* ÇOKLU seçimde ok tuşu YOKTUR: orada her çip bağımsız bir onay kutusu ve
|
|
524
|
+
* `Tab` ile gezilir — ok tuşuyla gezinmek seçimi de değiştirirdi, oysa
|
|
525
|
+
* radyo grubunun aksine burada gezinmek seçmek demek değil. Nöbetçi:
|
|
526
|
+
* `components/__tests__/keyboard.test.tsx`.
|
|
431
527
|
*/
|
|
432
|
-
declare const ChipGroup_2: <T extends string>({ options, label, size, isScrollable, className, ...selection }:
|
|
528
|
+
declare const ChipGroup_2: <T extends string>({ options, label, size, isScrollable, className, ...selection }: Props_6<T>) => JSX.Element;
|
|
433
529
|
|
|
434
530
|
export declare type ChipOption<T extends string = string> = {
|
|
435
531
|
value: T;
|
|
@@ -441,6 +537,22 @@ export declare type ChipOption<T extends string = string> = {
|
|
|
441
537
|
|
|
442
538
|
export declare type ChipSize = 'sm' | 'md';
|
|
443
539
|
|
|
540
|
+
declare type CircleProps = {
|
|
541
|
+
/** Tamamlanan miktar. `undefined` → BELİRSİZ; çember döner. */
|
|
542
|
+
value?: number;
|
|
543
|
+
max?: number;
|
|
544
|
+
/** Erişilebilir ad. ZORUNLU. */
|
|
545
|
+
label: string;
|
|
546
|
+
valueText?: string;
|
|
547
|
+
/** Yüzdeyi çemberin ortasına yazar. */
|
|
548
|
+
isValueVisible?: boolean;
|
|
549
|
+
tone?: 'brand' | 'success' | 'warning' | 'danger';
|
|
550
|
+
/** Dış çap (px). */
|
|
551
|
+
size?: number;
|
|
552
|
+
className?: string;
|
|
553
|
+
testId?: string;
|
|
554
|
+
};
|
|
555
|
+
|
|
444
556
|
export declare const Combobox: typeof Combobox_2;
|
|
445
557
|
|
|
446
558
|
/**
|
|
@@ -480,8 +592,19 @@ export declare const Combobox: typeof Combobox_2;
|
|
|
480
592
|
* `role="combobox"` + `aria-activedescendant`. Masaüstünde odak arama
|
|
481
593
|
* kutusundan ayrılmaz; ok tuşları yalnızca <em>etkin</em> seçeneği değiştirir.
|
|
482
594
|
* Odağı seçeneklere taşımak, yazmaya devam etmeyi imkânsız kılıyordu.
|
|
595
|
+
*
|
|
596
|
+
* <h3>Klavye (APG: combobox with listbox popup)</h3>
|
|
597
|
+
* <table>
|
|
598
|
+
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin seçenek bir alt/üst; uçlarda DÖNER</td></tr>
|
|
599
|
+
* <tr><td>`Home` / `End`</td><td>ilk / son seçenek</td></tr>
|
|
600
|
+
* <tr><td>`Enter`</td><td>etkin seçeneği seçer, paneli kapatır</td></tr>
|
|
601
|
+
* <tr><td>`Escape`</td><td>kapatır, odak tetikleyiciye döner</td></tr>
|
|
602
|
+
* <tr><td>`Tab`</td><td>kapatır, gezinme sürer</td></tr>
|
|
603
|
+
* <tr><td>yazmak</td><td>filtreler ve etkin seçeneği başa çeker</td></tr>
|
|
604
|
+
* </table>
|
|
605
|
+
* Nöbetçi: `components/__tests__/keyboard.test.tsx`.
|
|
483
606
|
*/
|
|
484
|
-
declare const Combobox_2: <T extends string>({ options, value, onChange, labels, isSearchHidden, onSearch, isLoading, isDisabled, isClearable, icon, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }:
|
|
607
|
+
declare const Combobox_2: <T extends string>({ options, value, onChange, labels, isSearchHidden, onSearch, isLoading, isDisabled, isClearable, icon, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props_7<T>) => JSX.Element;
|
|
485
608
|
|
|
486
609
|
/**
|
|
487
610
|
* Bileşenin çizdiği metinler.
|
|
@@ -514,6 +637,55 @@ export declare type ComboboxOption<T extends string = string> = {
|
|
|
514
637
|
isDisabled?: boolean;
|
|
515
638
|
};
|
|
516
639
|
|
|
640
|
+
export declare type CommandItem = {
|
|
641
|
+
id: string;
|
|
642
|
+
label: string;
|
|
643
|
+
/** Ayırt edici ikincil satır — bir komutun nereye götürdüğü. */
|
|
644
|
+
description?: string;
|
|
645
|
+
/** Gruplama başlığı ("Gezinme", "Eylemler"). Aynı grup ardışık çizilir. */
|
|
646
|
+
group?: string;
|
|
647
|
+
icon?: ReactNode;
|
|
648
|
+
/** Kısayol ipucu ("⌘K"). Yalnızca GÖSTERİLİR; tuşu çağıran bağlar. */
|
|
649
|
+
shortcut?: string;
|
|
650
|
+
onSelect: () => void;
|
|
651
|
+
};
|
|
652
|
+
|
|
653
|
+
export declare const CommandPalette: typeof CommandPalette_2;
|
|
654
|
+
|
|
655
|
+
/**
|
|
656
|
+
* Komut paleti — klavyeyle her şeye ulaşma.
|
|
657
|
+
*
|
|
658
|
+
* <h3>Neden `Combobox` + `Modal` bileşimi DEĞİL de ayrı bir bileşen</h3>
|
|
659
|
+
* Denendi ve iki yerde kırıldı. `Combobox` bir DEĞER seçtiriyor: seçim
|
|
660
|
+
* tetikleyicide kalıcı olarak görünüyor, `value`/`onChange` sözleşmesi var ve
|
|
661
|
+
* kapanınca seçili öğe hatırlanıyor. Palet ise bir EYLEM çalıştırıyor —
|
|
662
|
+
* hatırlanacak bir değer yok. İkincisi, `Combobox`ın tetikleyicisi var;
|
|
663
|
+
* palette tetikleyici KLAVYE KISAYOLU ve o kısayolu bağlamak çağıranın işi
|
|
664
|
+
* (hangi tuş, hangi sayfada — kütüphane bilemez).
|
|
665
|
+
*
|
|
666
|
+
* <h3>Kısayolu KÜTÜPHANE bağlamaz</h3>
|
|
667
|
+
* `⌘K` yaygın ama evrensel değil ve belge düzeyinde bir tuş dinleyicisi
|
|
668
|
+
* kurmak, tüketicinin kendi kısayollarıyla sessizce çakışmak demek. `shortcut`
|
|
669
|
+
* alanı yalnızca GÖSTERİLİYOR; `isOpen` çağıranın.
|
|
670
|
+
*
|
|
671
|
+
* <h3>Arama `matchesSearch` ile — aksan duyarsız</h3>
|
|
672
|
+
* "siparis" yazan kullanıcı "Sipariş"i bulmalı. Aynı normalizasyon
|
|
673
|
+
* `Combobox`ın yerel filtresinde de kullanılıyor; iki yerde iki farklı arama
|
|
674
|
+
* kuralı, aynı terimin iki farklı sonuç vermesi demekti.
|
|
675
|
+
*
|
|
676
|
+
* <h3>Klavye</h3>
|
|
677
|
+
* <table>
|
|
678
|
+
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin komut; uçlarda DÖNER</td></tr>
|
|
679
|
+
* <tr><td>`Home` / `End`</td><td>ilk / son komut</td></tr>
|
|
680
|
+
* <tr><td>`Enter`</td><td>etkin komutu çalıştırır ve kapatır</td></tr>
|
|
681
|
+
* <tr><td>`Escape`</td><td>kapatır, odak AÇAN öğeye döner</td></tr>
|
|
682
|
+
* </table>
|
|
683
|
+
* Odak arama kutusundan AYRILMAZ; etkin komut `aria-activedescendant` ile
|
|
684
|
+
* bildiriliyor. Odağı listeye taşımak yazmaya devam etmeyi imkânsız
|
|
685
|
+
* kılıyordu.
|
|
686
|
+
*/
|
|
687
|
+
declare const CommandPalette_2: ({ isOpen, onClose, items, label, searchPlaceholder, emptyMessage, className, testId, }: Props_42) => JSX.Element;
|
|
688
|
+
|
|
517
689
|
/**
|
|
518
690
|
* Her bileşenin kabul ettiği ortak kanca noktaları.
|
|
519
691
|
*
|
|
@@ -528,6 +700,41 @@ export declare type CommonElementProps = Partial<{
|
|
|
528
700
|
testId: string;
|
|
529
701
|
}>;
|
|
530
702
|
|
|
703
|
+
/**
|
|
704
|
+
* YOĞUN (compact) KİP — `<html data-hanui-density="compact">`.
|
|
705
|
+
*
|
|
706
|
+
* <h3>Gerekçe ölçülü</h3>
|
|
707
|
+
* Aynı bileşenleri iki uygulama kullanıyor: vitrin bir ekranda 8 satır,
|
|
708
|
+
* operasyon paneli 80 satır gösteriyor. Vitrin için doğru olan ferahlık,
|
|
709
|
+
* panelde kullanıcıyı kaydırmaya mahkûm ediyor; panel için doğru olan
|
|
710
|
+
* sıkılık vitrinde ucuz duruyor. İkisini tek ölçekle karşılamanın yolu yok.
|
|
711
|
+
*
|
|
712
|
+
* <h3>Yalnızca boşluk ve punto iner — ÖLÇEĞİN TAMAMI DEĞİL</h3>
|
|
713
|
+
* `space-0` ve `space-1` sabit kalır: 4 px'in altına inen bir boşluk kademesi
|
|
714
|
+
* bir boşluk değil bir çizim hatası. Yarıçap da sabit kalır — yuvarlaklık
|
|
715
|
+
* yoğunluğun değil markanın işi.
|
|
716
|
+
*
|
|
717
|
+
* <h3>DOKUNMA HEDEFİ KÜÇÜLMEZ</h3>
|
|
718
|
+
* `tap-target` görünmez bir örtü çiziyor ve ölçüsü (44 px) buraya girmiyor:
|
|
719
|
+
* yoğun kip bilgi yoğunluğunu artırmak içindir, dokunulabilirliği düşürmek
|
|
720
|
+
* için değil (WCAG 2.5.8). Görsel kutu küçülür, hedef küçülmez.
|
|
721
|
+
*/
|
|
722
|
+
export declare const COMPACT_DENSITY: {
|
|
723
|
+
readonly 'space-2': "6px";
|
|
724
|
+
readonly 'space-3': "8px";
|
|
725
|
+
readonly 'space-4': "12px";
|
|
726
|
+
readonly 'space-5': "16px";
|
|
727
|
+
readonly 'space-6': "24px";
|
|
728
|
+
readonly 'space-7': "32px";
|
|
729
|
+
readonly 'font-size-2xs': "11px";
|
|
730
|
+
readonly 'font-size-xs': "12px";
|
|
731
|
+
readonly 'font-size-sm': "13px";
|
|
732
|
+
readonly 'font-size-base': "15px";
|
|
733
|
+
readonly 'font-size-body': "16px";
|
|
734
|
+
readonly 'leading-normal': "1.5";
|
|
735
|
+
readonly 'leading-relaxed': "1.6";
|
|
736
|
+
};
|
|
737
|
+
|
|
531
738
|
export declare const ConfirmDialog: typeof ConfirmDialog_2;
|
|
532
739
|
|
|
533
740
|
/**
|
|
@@ -569,7 +776,7 @@ export declare const ConfirmDialog: typeof ConfirmDialog_2;
|
|
|
569
776
|
* }}
|
|
570
777
|
* />
|
|
571
778
|
*/
|
|
572
|
-
declare const ConfirmDialog_2: FC<
|
|
779
|
+
declare const ConfirmDialog_2: FC<Props_43>;
|
|
573
780
|
|
|
574
781
|
export declare type ConfirmKind = 'destructive' | 'warning' | 'neutral';
|
|
575
782
|
|
|
@@ -601,7 +808,7 @@ export declare const CopyField: typeof CopyField_2;
|
|
|
601
808
|
* kendisi kopyalayabilir. Sessizce hiçbir şey yapmamak, düğmeyi bozuk
|
|
602
809
|
* gösteriyordu.
|
|
603
810
|
*/
|
|
604
|
-
declare const CopyField_2: FC<
|
|
811
|
+
declare const CopyField_2: FC<Props_22>;
|
|
605
812
|
|
|
606
813
|
export declare type Crumb = {
|
|
607
814
|
label: string;
|
|
@@ -634,8 +841,17 @@ export declare const DataTable: typeof DataTable_2;
|
|
|
634
841
|
* <h3>Durum öncelik sırası</h3>
|
|
635
842
|
* `error` > `isLoading` > boş > satırlar. Hata varken yükleme veya boş
|
|
636
843
|
* mesajı gösterilmez; yüklenirken bayat satır çizilmez.
|
|
844
|
+
*
|
|
845
|
+
* <h3>Görünmez başlık `aria-label` DEĞİL, gizlenmiş METİN</h3>
|
|
846
|
+
* Eylem sütununun adı önce `<th aria-label="Eylemler">` olarak yazılıyordu.
|
|
847
|
+
* Eksen taraması bunu ihlal olarak bildirdi (`empty-table-header`) ve haklı:
|
|
848
|
+
* `aria-label`ın hücre başlığı olarak kullanılması destek teknolojilerinde
|
|
849
|
+
* tutarsız — bazı ekran okuyucular tablo gezinme kipinde sütun adını
|
|
850
|
+
* hücrenin İÇERİĞİNDEN okur ve boş bir `<th>` orada adsız kalır. Görsel olarak
|
|
851
|
+
* gizlenmiş gerçek bir metin düğümü hem okunur hem de sayfa çevirisine,
|
|
852
|
+
* bulma-değiştirmeye ve seçime dahil olur.
|
|
637
853
|
*/
|
|
638
|
-
declare const DataTable_2: FC<
|
|
854
|
+
declare const DataTable_2: FC<Props_47>;
|
|
639
855
|
|
|
640
856
|
export declare type DataTableColumn = {
|
|
641
857
|
/** Sütun kimliği (React key). */
|
|
@@ -645,18 +861,89 @@ export declare type DataTableColumn = {
|
|
|
645
861
|
/**
|
|
646
862
|
* Görsel başlığı olmayan sütunun erişilebilir adı (eylem sütunu gibi).
|
|
647
863
|
* Boş bir `<th>` ekran okuyucuda adsız bir sütun bırakıyordu.
|
|
864
|
+
*
|
|
865
|
+
* <p>Metin `aria-label` OLARAK DEĞİL, görsel olarak gizlenmiş gerçek bir
|
|
866
|
+
* metin düğümü olarak yazılır — gerekçe {@link DataTable} JSDoc'unda.
|
|
648
867
|
*/
|
|
649
868
|
srLabel?: string;
|
|
650
869
|
/**
|
|
651
|
-
* Sıralanabilir sütunun yönü (`aria-sort`).
|
|
652
|
-
*
|
|
870
|
+
* Sıralanabilir sütunun yönü (`aria-sort`).
|
|
871
|
+
*
|
|
872
|
+
* <p>`onSort` ile birlikte verildiğinde başlık TIKLANABİLİR olur ve yön
|
|
873
|
+
* oku çizilir. Tek başına verildiğinde yalnızca durumu bildirir —
|
|
874
|
+
* sıralamayı başka bir denetim (bir `Select`) yapıyorsa doğrusu budur.
|
|
653
875
|
*/
|
|
654
876
|
ariaSort?: 'ascending' | 'descending';
|
|
877
|
+
/**
|
|
878
|
+
* Sütun sıralanabilir. `DataTable.onSort` ile birlikte anlamlı; ikisinden
|
|
879
|
+
* biri eksikse başlık düz metin kalır — tıklanabilir görünüp hiçbir şey
|
|
880
|
+
* yapmayan bir başlık, kullanıcıya var olmayan bir yetenek vaat ediyordu.
|
|
881
|
+
*/
|
|
882
|
+
isSortable?: boolean;
|
|
883
|
+
/**
|
|
884
|
+
* Sütun yatay kaydırmada YERİNDE kalır.
|
|
885
|
+
*
|
|
886
|
+
* <p>Yalnızca İLK sütunda anlamlı: geniş bir tabloda sağa kaydıran
|
|
887
|
+
* kullanıcı hangi satıra baktığını kaybediyordu. İkinci bir yapışkan sütun
|
|
888
|
+
* `left` ofsetinin elle hesaplanmasını gerektirir ve o hesap sütun
|
|
889
|
+
* genişliğine bağlı — desteklenmiyor.
|
|
890
|
+
*/
|
|
891
|
+
isSticky?: boolean;
|
|
655
892
|
className?: string;
|
|
656
893
|
};
|
|
657
894
|
|
|
658
895
|
export declare const DataTableRow: FC<RowProps>;
|
|
659
896
|
|
|
897
|
+
export declare const DateField: typeof DateField_2;
|
|
898
|
+
|
|
899
|
+
/**
|
|
900
|
+
* Tarih alanı — <strong>yerel</strong> `<input type="date">`.
|
|
901
|
+
*
|
|
902
|
+
* <h3>Neden taklit bir takvim YOK</h3>
|
|
903
|
+
* Bu kütüphanenin kuralı: yerel öğe korunur, taklit yazmanın tek gerekçesi
|
|
904
|
+
* ölçülmüş bir kusurdur ({@link Select} bunun tek istisnası ve gerekçesi
|
|
905
|
+
* orada yazılı). Tarih alanında böyle bir kusur YOK — tersine, yerel öğenin
|
|
906
|
+
* taklidin veremeyeceği dört şeyi var:
|
|
907
|
+
*
|
|
908
|
+
* <ul>
|
|
909
|
+
* <li><b>Mobilde işletim sisteminin seçicisi.</b> iOS'ta tekerlek, Android'de
|
|
910
|
+
* takvim — kullanıcının her gün kullandığı, alışkın olduğu arayüz. Hiçbir
|
|
911
|
+
* web takvimi 360 px'lik bir ekranda ona yaklaşamıyor.</li>
|
|
912
|
+
* <li><b>Klavyeyle YAZARAK giriş.</b> Doğum tarihini bilen biri "01.01.1980"i
|
|
913
|
+
* üç saniyede yazıyor; taklit takvimde aynı iş kırk yıl geriye tıklamak
|
|
914
|
+
* demek.</li>
|
|
915
|
+
* <li><b>Yerel biçim.</b> Tarayıcı kullanıcının işletim sistemi ayarına göre
|
|
916
|
+
* gg.aa.yyyy ya da mm/dd/yyyy gösteriyor; değer her zaman ISO
|
|
917
|
+
* (`YYYY-MM-DD`) kalıyor. İki biçimi elle yönetmek, kütüphanenin
|
|
918
|
+
* kullanıcının yerel ayarını TAHMİN etmesi demekti.</li>
|
|
919
|
+
* <li><b>Ekran okuyucu.</b> Alan üç ayrı bölüm (gün/ay/yıl) olarak okunuyor
|
|
920
|
+
* ve ok tuşlarıyla artırılıyor. APG'ye uygun bir takvim ızgarası bunu
|
|
921
|
+
* ancak taklit edebilir.</li>
|
|
922
|
+
* </ul>
|
|
923
|
+
*
|
|
924
|
+
* <p>Bedeli: takvim açılışının görünüşü tarayıcıya ait ve tema token'larını
|
|
925
|
+
* izlemiyor. Kabul edildi — açılan panelin rengi, yukarıdaki dördünün
|
|
926
|
+
* yanında küçük bir bedel.
|
|
927
|
+
*
|
|
928
|
+
* <h3>`min` / `max` KULLANIN</h3>
|
|
929
|
+
* İkisi de yerel öğede var ve tarayıcı doğrulamayı kendisi yapıyor. Geçersiz
|
|
930
|
+
* bir tarihi yalnızca gönderimde yakalamak, kullanıcıyı formu doldurduktan
|
|
931
|
+
* sonra geri gönderiyordu.
|
|
932
|
+
*/
|
|
933
|
+
declare const DateField_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
934
|
+
/** `date` (varsayılan) · `datetime-local` · `month` · `time`. */
|
|
935
|
+
type?: "date" | "datetime-local" | "month" | "time";
|
|
936
|
+
testId?: string;
|
|
937
|
+
} & RefAttributes<HTMLInputElement>>;
|
|
938
|
+
|
|
939
|
+
export declare const DateRange: MemoExoticComponent<({ value, onChange, startLabel, endLabel, separator, min, max, isSummaryVisible, isDisabled, className, testId, }: RangeProps) => JSX.Element>;
|
|
940
|
+
|
|
941
|
+
export declare type DateRangeValue = {
|
|
942
|
+
/** ISO tarih (`YYYY-MM-DD`) ya da boş dize. */
|
|
943
|
+
start: string;
|
|
944
|
+
end: string;
|
|
945
|
+
};
|
|
946
|
+
|
|
660
947
|
/** Kütüphanenin varsayılan font yığınları — hepsi sistem fontlarına iner. */
|
|
661
948
|
export declare const DEFAULT_FONTS: Required<HanuiFonts>;
|
|
662
949
|
|
|
@@ -764,7 +1051,41 @@ export declare const Divider: typeof Divider_2;
|
|
|
764
1051
|
* <p>Etiketli hâli `role="separator"` taşımaz: metin içerdiğinde ekran okuyucu
|
|
765
1052
|
* onu ayırıcı değil içerik olarak okumalı ("veya").
|
|
766
1053
|
*/
|
|
767
|
-
declare const Divider_2: FC<
|
|
1054
|
+
declare const Divider_2: FC<Props_23>;
|
|
1055
|
+
|
|
1056
|
+
export declare const Drawer: typeof Drawer_2;
|
|
1057
|
+
|
|
1058
|
+
/**
|
|
1059
|
+
* Çekmece (drawer) — kenardan açılan kipsel panel.
|
|
1060
|
+
*
|
|
1061
|
+
* <h3>{@link BottomSheet} ile farkı: EKRAN, tercih değil</h3>
|
|
1062
|
+
* İkisi de kipsel bir yan panel; ayrım hangi ekranda doğru olduklarında:
|
|
1063
|
+
*
|
|
1064
|
+
* <ul>
|
|
1065
|
+
* <li>`BottomSheet` DAR ekran içindir. Baş parmağın erişebildiği yer
|
|
1066
|
+
* ekranın dibi; kenardan gelen bir panel telefonda ekranın tamamını
|
|
1067
|
+
* kaplıyor ve "panel" olmaktan çıkıyor.</li>
|
|
1068
|
+
* <li><b>`Drawer` GENİŞ ekran içindir.</b> Filtre paneli ve ayrıntı
|
|
1069
|
+
* incelemesi sayfanın yanında durur; kullanıcı listeyi görmeye devam
|
|
1070
|
+
* eder. Aynı panel dipten gelseydi 1440 px'lik bir ekranda içeriğin
|
|
1071
|
+
* tamamını örtüyordu.</li>
|
|
1072
|
+
* </ul>
|
|
1073
|
+
*
|
|
1074
|
+
* <h3>`isOpen` alır — ve bu {@link BottomSheet}ten bilinçli bir AYRILIK</h3>
|
|
1075
|
+
* `BottomSheet` "açıkken çizilir, kapatmak için kaldırılır" sözleşmesini
|
|
1076
|
+
* kullanıyor ve bunun bir bedeli var: React sökülen bir ağacı bekletmediği
|
|
1077
|
+
* için <strong>çıkış animasyonu çizilemiyor</strong>, panel bir karede yok
|
|
1078
|
+
* oluyor. Çekmece açık/kapalı durumu kendisi taşıyor; `<dialog>` kapanırken
|
|
1079
|
+
* `@starting-style` + `allow-discrete` ile geri kayıyor.
|
|
1080
|
+
*
|
|
1081
|
+
* <h3>Klavye</h3>
|
|
1082
|
+
* <table>
|
|
1083
|
+
* <tr><td>`Escape`</td><td>kapatır — üst üste açık panellerde YALNIZCA en üstteki</td></tr>
|
|
1084
|
+
* <tr><td>`Tab`</td><td>odak panelin içinde döner (tarayıcı: `showModal()`)</td></tr>
|
|
1085
|
+
* </table>
|
|
1086
|
+
* Açılışta odak kapatma düğmesine DEĞİL ilk anlamlı öğeye gider.
|
|
1087
|
+
*/
|
|
1088
|
+
declare const Drawer_2: ({ isOpen, onClose, title, closeLabel, children, side, size, footer, toolbar, className, testId, }: Props_44) => JSX.Element;
|
|
768
1089
|
|
|
769
1090
|
export declare const EmptyState: typeof EmptyState_2;
|
|
770
1091
|
|
|
@@ -776,11 +1097,17 @@ export declare const EmptyState: typeof EmptyState_2;
|
|
|
776
1097
|
* yapacağını bilmeli: aramayı temizle, filtreyi kaldır, listeye dön. `action`
|
|
777
1098
|
* isteğe bağlı ama çağıran taraf onu vermezse kullanıcı tıkanır.
|
|
778
1099
|
*
|
|
779
|
-
* <
|
|
780
|
-
*
|
|
781
|
-
*
|
|
1100
|
+
* <h3>BOŞ ile YÜKLENEMEDİ ayrı durumlardır</h3>
|
|
1101
|
+
* Ağ hatasını "kayıt kalmamış" diye okuyan kullanıcı yanlış karar veriyor.
|
|
1102
|
+
* İkisi `tone` ile ayrılıyor: `error` farklı bir ton taşıyor ve
|
|
1103
|
+
* `role="alert"` ile duyuruluyor, ama YERLEŞİM aynı — iki durum arasındaki
|
|
1104
|
+
* geçiş sıçramıyor.
|
|
1105
|
+
*
|
|
1106
|
+
* <p>Ayrım önce bu bileşenin DIŞINDAYDI ("ağ hatasında çizilmez") ve sonucu
|
|
1107
|
+
* şuydu: her çağıran kendi hata kutusunu yazıyor, kutular birbirinden farklı
|
|
1108
|
+
* görünüyordu. Ayrım korunuyor, kararın yeri değişti.
|
|
782
1109
|
*/
|
|
783
|
-
declare const EmptyState_2: FC<
|
|
1110
|
+
declare const EmptyState_2: FC<Props_24>;
|
|
784
1111
|
|
|
785
1112
|
export declare const Field: typeof Field_2;
|
|
786
1113
|
|
|
@@ -808,7 +1135,7 @@ export declare const Field: typeof Field_2;
|
|
|
808
1135
|
* // `{...props}` yaymayan bileşenlerde (Combobox, Select) yalnızca `id`:
|
|
809
1136
|
* <Field label="Şehir">{props => <Combobox id={props.id} … />}</Field>
|
|
810
1137
|
*/
|
|
811
|
-
declare const Field_2: FC<
|
|
1138
|
+
declare const Field_2: FC<Props_15>;
|
|
812
1139
|
|
|
813
1140
|
/** Girdiye yayılacak erişilebilirlik bağları. */
|
|
814
1141
|
export declare type FieldChildProps = {
|
|
@@ -828,6 +1155,39 @@ declare type FieldProps = {
|
|
|
828
1155
|
className?: string;
|
|
829
1156
|
};
|
|
830
1157
|
|
|
1158
|
+
export declare const FileUpload: typeof FileUpload_2;
|
|
1159
|
+
|
|
1160
|
+
/**
|
|
1161
|
+
* Dosya yükleme — sürükle-bırak <strong>ve</strong> düğme.
|
|
1162
|
+
*
|
|
1163
|
+
* <h3>Yerel `<input type="file">` KORUNUR</h3>
|
|
1164
|
+
* Görsel olarak gizlenir ama DOM'da kalır ve `<label>` ile alana bağlanır:
|
|
1165
|
+
* klavyeyle `Tab` + `Enter`, ekran okuyucuda "dosya seç, düğme" duyurusu,
|
|
1166
|
+
* işletim sisteminin dosya seçicisi ve mobilde kamera/galeri seçenekleri
|
|
1167
|
+
* <em>bedava</em> gelir. `<div>` üzerine `onDrop` yazıp düğmeyi taklit etmek
|
|
1168
|
+
* bunların hiçbirini getirmiyor — ve sürükle-bırak zaten <strong>tek başına
|
|
1169
|
+
* erişilebilir değil</strong>: fare gerektiriyor (WCAG 2.5.7).
|
|
1170
|
+
*
|
|
1171
|
+
* <h3>Doğrulama BİLEŞENDE, ama yalnızca ÖLÇÜLEBİLİR olan</h3>
|
|
1172
|
+
* Boyut sınırı burada uygulanıyor çünkü cevabı kesin ve anında verilebiliyor:
|
|
1173
|
+
* aşan dosya `onSelect`e hiç ulaşmıyor, kullanıcı yüklemenin bitmesini
|
|
1174
|
+
* beklemeden hatayı görüyor. Tür/içerik doğrulaması burada YAPILMIYOR —
|
|
1175
|
+
* `accept` bir öneri, gerçek karar sunucunun ve istemcide "geçerli" demek
|
|
1176
|
+
* yanlış bir söz olurdu.
|
|
1177
|
+
*
|
|
1178
|
+
* <h3>Sonuç DUYURULUYOR</h3>
|
|
1179
|
+
* Dosya eklendiğinde ve reddedildiğinde `useAnnounce` ile ekran okuyucuya
|
|
1180
|
+
* bildiriliyor. Listeye sessizce eklenen bir satır, görmeyen kullanıcı için
|
|
1181
|
+
* hiç olmamış demekti.
|
|
1182
|
+
*
|
|
1183
|
+
* <h3>Klavye</h3>
|
|
1184
|
+
* <table>
|
|
1185
|
+
* <tr><td>`Tab`</td><td>alana, sonra her dosyanın kaldırma düğmesine</td></tr>
|
|
1186
|
+
* <tr><td>`Enter` / `Space`</td><td>alanda: dosya seçiciyi açar</td></tr>
|
|
1187
|
+
* </table>
|
|
1188
|
+
*/
|
|
1189
|
+
declare const FileUpload_2: ({ files, onSelect, onRemove, label, hint, accept, isMultiple, maxSize, removeLabel, dropLabel, sizeErrorText, isDisabled, error, children, className, testId, }: Props_16) => JSX.Element;
|
|
1190
|
+
|
|
831
1191
|
export declare const FilterBar: typeof FilterBar_2;
|
|
832
1192
|
|
|
833
1193
|
/**
|
|
@@ -847,7 +1207,7 @@ export declare const FilterBar: typeof FilterBar_2;
|
|
|
847
1207
|
* daraltılabilir kalır: alan tercihen 220px'tir ama sığmadığı yerde küçülür,
|
|
848
1208
|
* taşmaz.
|
|
849
1209
|
*/
|
|
850
|
-
declare const FilterBar_2: FC<
|
|
1210
|
+
declare const FilterBar_2: FC<Props_48>;
|
|
851
1211
|
|
|
852
1212
|
/**
|
|
853
1213
|
* Şerit içindeki tek alanın genişlik sözleşmesi. İçine `Field` + girdi ya da
|
|
@@ -894,7 +1254,32 @@ export declare const FilterBarField: FC<FieldProps>;
|
|
|
894
1254
|
/** Sayı biçimlendiricileri: değere bağlı metinler dizeyle verilemez. */
|
|
895
1255
|
declare type Formatter<TArgs extends unknown[]> = (...args: TArgs) => string;
|
|
896
1256
|
|
|
897
|
-
/**
|
|
1257
|
+
/**
|
|
1258
|
+
* Kullanıcının SEÇİMİ. `system` = açık bir seçim yok, işletim sistemi tercihi
|
|
1259
|
+
* izlenir (`prefers-color-scheme`).
|
|
1260
|
+
*
|
|
1261
|
+
* <h3>Bu tip neden sonradan eklendi</h3>
|
|
1262
|
+
* `HanuiColorScheme`in JSDoc'u "`system` işletim sistemi tercihini izler"
|
|
1263
|
+
* diyordu ama tipte `system` YOKTU — belge bir yeteneği anlatıyor, tip onu
|
|
1264
|
+
* yasaklıyordu. İki çözüm vardı: cümleyi silmek ya da yeteneği gerçekten
|
|
1265
|
+
* eklemek. İkincisi seçildi çünkü eksik olan gerçek bir davranıştı: üç
|
|
1266
|
+
* durumlu tema anahtarı (Açık / Koyu / Sistem) yaygın bir kalıp ve kütüphane
|
|
1267
|
+
* onu kuramıyordu — `system`e dönmenin yolu özniteliği ELLE silmekti ve bunu
|
|
1268
|
+
* tüketicinin bilmesi gerekiyordu.
|
|
1269
|
+
*
|
|
1270
|
+
* <p>Ekleme KIRICI DEĞİL: `scheme` hâlâ çözülmüş değeri döndürüyor, yalnızca
|
|
1271
|
+
* `preference` alanı ve `setScheme('system')` girişi eklendi.
|
|
1272
|
+
*/
|
|
1273
|
+
export declare type HanuiColorPreference = HanuiColorScheme | 'system';
|
|
1274
|
+
|
|
1275
|
+
/**
|
|
1276
|
+
* ÇÖZÜLMÜŞ tema — ekranda gerçekten hangisi çizili.
|
|
1277
|
+
*
|
|
1278
|
+
* <p>Burada `system` YOKTUR ve olamaz: `system` bir tercih, bir tema değil.
|
|
1279
|
+
* Çözüldüğünde ya açık ya koyu olur ve bileşenlerin gördüğü şey o. İkisini tek
|
|
1280
|
+
* tipte toplamak, `scheme === 'system'` yazan bir tüketiciye hangi renklerin
|
|
1281
|
+
* çizildiğini hâlâ söylemiyordu.
|
|
1282
|
+
*/
|
|
898
1283
|
export declare type HanuiColorScheme = 'light' | 'dark';
|
|
899
1284
|
|
|
900
1285
|
export declare type HanuiContextValue = {
|
|
@@ -916,6 +1301,15 @@ export declare type HanuiContextValue = {
|
|
|
916
1301
|
labels?: HanuiLabels;
|
|
917
1302
|
};
|
|
918
1303
|
|
|
1304
|
+
/**
|
|
1305
|
+
* Bilgi yoğunluğu. `default` vitrin, `compact` operasyon paneli.
|
|
1306
|
+
*
|
|
1307
|
+
* <p>Seçim `<html data-hanui-density>` ile taşınır — tıpkı tema gibi, ve aynı
|
|
1308
|
+
* sebeple: bir ölçek kararı tek bir React ağacının değil BELGENİN kararıdır;
|
|
1309
|
+
* portal ile gövdeye taşınan kip pencere de aynı yoğunlukta olmalı.
|
|
1310
|
+
*/
|
|
1311
|
+
export declare type HanuiDensity = 'default' | 'compact';
|
|
1312
|
+
|
|
919
1313
|
/**
|
|
920
1314
|
* Yazı tipi ailesi sözleşmesi.
|
|
921
1315
|
*
|
|
@@ -1038,6 +1432,12 @@ export declare type HanuiLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
|
1038
1432
|
[key: string]: unknown;
|
|
1039
1433
|
};
|
|
1040
1434
|
|
|
1435
|
+
/** Ölçü ezmeleri. Kısmî verilebilir; verilmeyen her ölçü varsayılanında kalır. */
|
|
1436
|
+
export declare type HanuiMetrics = Partial<Record<HanuiMetricToken, string>>;
|
|
1437
|
+
|
|
1438
|
+
/** Ölçü token adları — `METRIC_TOKENS`ten türetilir. */
|
|
1439
|
+
export declare type HanuiMetricToken = keyof typeof METRIC_TOKENS;
|
|
1440
|
+
|
|
1041
1441
|
/**
|
|
1042
1442
|
* Kütüphane sağlayıcısı.
|
|
1043
1443
|
*
|
|
@@ -1086,6 +1486,18 @@ export declare type HanuiThemeConfig = Partial<{
|
|
|
1086
1486
|
light: HanuiThemeTokens;
|
|
1087
1487
|
dark: HanuiThemeTokens;
|
|
1088
1488
|
fonts: HanuiFonts;
|
|
1489
|
+
/**
|
|
1490
|
+
* Ölçü ezmeleri — yarıçap, boşluk, punto, süre.
|
|
1491
|
+
*
|
|
1492
|
+
* <p>Renk gibi tema başına DEĞİL tek blokta: bir markanın yuvarlaklığı açık
|
|
1493
|
+
* temada 12 px, koyu temada 8 px olmaz. Ayrı verilebilseydi iki değerin
|
|
1494
|
+
* ayrışması kaçınılmazdı ve fark yalnızca tema değiştirildiğinde
|
|
1495
|
+
* görünürdü — yani neredeyse hiç.
|
|
1496
|
+
*
|
|
1497
|
+
* @example
|
|
1498
|
+
* initHanui({ theme: { metrics: { 'radius-md': '2px', 'radius-lg': '4px' } } });
|
|
1499
|
+
*/
|
|
1500
|
+
metrics: HanuiMetrics;
|
|
1089
1501
|
}>;
|
|
1090
1502
|
|
|
1091
1503
|
/** Bir temanın token → değer eşlemesi. Kısmî verilebilir; eksikler varsayılandan gelir. */
|
|
@@ -1094,6 +1506,12 @@ export declare type HanuiThemeTokens = Partial<Record<HanuiToken, string>>;
|
|
|
1094
1506
|
/** Token adları — `LIGHT_THEME`den türetilir, elle listelenmez. */
|
|
1095
1507
|
export declare type HanuiToken = keyof typeof LIGHT_THEME;
|
|
1096
1508
|
|
|
1509
|
+
declare type HubProps = {
|
|
1510
|
+
/** Kapatma düğmelerinin erişilebilir adı. Verilmezse `labels.close`. */
|
|
1511
|
+
closeLabel?: string;
|
|
1512
|
+
className?: string;
|
|
1513
|
+
};
|
|
1514
|
+
|
|
1097
1515
|
export declare const IconButton: typeof IconButton_2;
|
|
1098
1516
|
|
|
1099
1517
|
/**
|
|
@@ -1165,13 +1583,22 @@ export declare type IconButtonVariant = 'ghost' | 'outline' | 'solid' | 'cart' |
|
|
|
1165
1583
|
export declare const initHanui: (options?: InitHanuiOptions) => void;
|
|
1166
1584
|
|
|
1167
1585
|
export declare type InitHanuiOptions = Partial<{
|
|
1168
|
-
/** Tema ezmeleri. Yalnızca değiştirilen token'lar verilir. */
|
|
1586
|
+
/** Tema ve ölçü ezmeleri. Yalnızca değiştirilen token'lar verilir. */
|
|
1169
1587
|
theme: HanuiThemeConfig;
|
|
1170
1588
|
/**
|
|
1171
1589
|
* Başlangıç şeması. Verilmezse `<html data-hanui-theme>` neyse o kalır;
|
|
1172
1590
|
* o da yoksa sistem tercihi (`prefers-color-scheme`) devreye girer.
|
|
1173
1591
|
*/
|
|
1174
1592
|
colorScheme: HanuiColorScheme;
|
|
1593
|
+
/**
|
|
1594
|
+
* Bilgi yoğunluğu. Verilmezse `<html data-hanui-density>` neyse o kalır;
|
|
1595
|
+
* o da yoksa `default`.
|
|
1596
|
+
*
|
|
1597
|
+
* <p>Uygulama başına SABİT bir karar olduğunda (operasyon paneli her zaman
|
|
1598
|
+
* `compact`) buradan verilir; kullanıcıya seçtiren bir uygulama özniteliği
|
|
1599
|
+
* kendisi yazar.
|
|
1600
|
+
*/
|
|
1601
|
+
density: HanuiDensity;
|
|
1175
1602
|
}>;
|
|
1176
1603
|
|
|
1177
1604
|
export declare const Input: typeof Input_2;
|
|
@@ -1213,7 +1640,7 @@ export declare const LIGHT_THEME: {
|
|
|
1213
1640
|
readonly 'border-strong': "#c9d0da";
|
|
1214
1641
|
readonly text: "#11151b";
|
|
1215
1642
|
readonly 'text-2': "#5a6472";
|
|
1216
|
-
readonly 'text-3': "#
|
|
1643
|
+
readonly 'text-3': "#626c7a";
|
|
1217
1644
|
readonly graphite: "#1f2937";
|
|
1218
1645
|
readonly 'graphite-2': "#2b3646";
|
|
1219
1646
|
readonly 'graphite-3': "#3a4658";
|
|
@@ -1255,8 +1682,8 @@ export declare const LIGHT_THEME: {
|
|
|
1255
1682
|
readonly 'sale-bg': "#e8f4eb";
|
|
1256
1683
|
readonly 'sale-fg': "#1d6e31";
|
|
1257
1684
|
readonly 'red-accent': "#dc2626";
|
|
1258
|
-
readonly 'green-accent': "#
|
|
1259
|
-
readonly 'green-accent-hover': "#
|
|
1685
|
+
readonly 'green-accent': "#299d46";
|
|
1686
|
+
readonly 'green-accent-hover': "#23883c";
|
|
1260
1687
|
readonly 'on-green': "#06280f";
|
|
1261
1688
|
readonly star: "#9a5f04";
|
|
1262
1689
|
readonly 'danger-solid': "#dc2626";
|
|
@@ -1266,7 +1693,7 @@ export declare const LIGHT_THEME: {
|
|
|
1266
1693
|
readonly 'nav-bg-2': "#eef0f4";
|
|
1267
1694
|
readonly 'nav-fg': "#11151b";
|
|
1268
1695
|
readonly 'nav-fg-2': "#5a6472";
|
|
1269
|
-
readonly 'nav-fg-3': "#
|
|
1696
|
+
readonly 'nav-fg-3': "#626c7a";
|
|
1270
1697
|
readonly 'nav-line': "#e2e6ec";
|
|
1271
1698
|
readonly 'nav-line-strong': "#c9d0da";
|
|
1272
1699
|
readonly 'nav-hover': "#eef0f4";
|
|
@@ -1322,6 +1749,134 @@ declare type LinkProps = BaseProps_4 & {
|
|
|
1322
1749
|
*/
|
|
1323
1750
|
export declare const matchesSearch: (haystack: string, needle: string) => boolean;
|
|
1324
1751
|
|
|
1752
|
+
export declare const Menu: typeof Menu_2;
|
|
1753
|
+
|
|
1754
|
+
/**
|
|
1755
|
+
* Menü — bir listeden EYLEM seçme.
|
|
1756
|
+
*
|
|
1757
|
+
* <h3>{@link Select} ile farkı: seçim mi eylem mi</h3>
|
|
1758
|
+
* Görsel olarak benzerler; ayrım seçilen şeyin ne olduğunda:
|
|
1759
|
+
*
|
|
1760
|
+
* <ul>
|
|
1761
|
+
* <li>`Select` bir DEĞER seçer. Seçim kalıcıdır, tetikleyicide görünür ve
|
|
1762
|
+
* geri alınabilir. ARIA rolü `listbox`.</li>
|
|
1763
|
+
* <li><b>`Menu` bir EYLEM çalıştırır.</b> "Sil", "Kopyala", "Dışa aktar".
|
|
1764
|
+
* Seçilen şey hatırlanmaz; menü kapanır ve iş yapılır. ARIA rolü
|
|
1765
|
+
* `menu`.</li>
|
|
1766
|
+
* </ul>
|
|
1767
|
+
*
|
|
1768
|
+
* <p>Ayrım ekran okuyucuda duyuluyor: `listbox` "3 seçenekten 2.'si seçili"
|
|
1769
|
+
* der, `menu` "menü, 3 öğe" der. Eylem listesini `listbox` olarak sunmak,
|
|
1770
|
+
* kullanıcıya kalıcı bir seçim yaptığını söylüyordu.
|
|
1771
|
+
*
|
|
1772
|
+
* <h3>Odak GERÇEKTEN taşınır</h3>
|
|
1773
|
+
* `Select` odağı tetikleyicide tutup etkin seçeneği `aria-activedescendant`
|
|
1774
|
+
* ile bildiriyor; menüde bu YANLIŞ olurdu. APG menü deseni gerçek odak
|
|
1775
|
+
* istiyor çünkü menü öğeleri düğme gibi davranıyor — ve harfe atlama
|
|
1776
|
+
* (type-ahead) yalnızca odaklanmış bir öğe üzerinde anlamlı.
|
|
1777
|
+
*
|
|
1778
|
+
* <h3>Klavye (APG: menu button)</h3>
|
|
1779
|
+
* <table>
|
|
1780
|
+
* <tr><td>`Enter` / `Space` / `ArrowDown`</td><td>tetikleyicide: açar, İLK öğeye odaklanır</td></tr>
|
|
1781
|
+
* <tr><td>`ArrowUp`</td><td>tetikleyicide: açar, SON öğeye odaklanır</td></tr>
|
|
1782
|
+
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>öğeler arasında; uçlarda DÖNER</td></tr>
|
|
1783
|
+
* <tr><td>`Home` / `End`</td><td>ilk / son öğe</td></tr>
|
|
1784
|
+
* <tr><td>harf</td><td>o harfle başlayan ilk öğeye atlar</td></tr>
|
|
1785
|
+
* <tr><td>`Enter` / `Space`</td><td>öğeyi çalıştırır ve menüyü kapatır</td></tr>
|
|
1786
|
+
* <tr><td>`Escape` / `Tab`</td><td>kapatır, odak TETİKLEYİCİYE döner</td></tr>
|
|
1787
|
+
* </table>
|
|
1788
|
+
*/
|
|
1789
|
+
declare const Menu_2: ({ trigger, items, label, side, align, className, testId, }: Props_4) => JSX.Element | null;
|
|
1790
|
+
|
|
1791
|
+
export declare type MenuItem = {
|
|
1792
|
+
id: string;
|
|
1793
|
+
label: string;
|
|
1794
|
+
icon?: ReactNode;
|
|
1795
|
+
onSelect: () => void;
|
|
1796
|
+
isDisabled?: boolean;
|
|
1797
|
+
/** Geri alınamaz eylem: yıkıcı tonda çizilir. */
|
|
1798
|
+
isDanger?: boolean;
|
|
1799
|
+
};
|
|
1800
|
+
|
|
1801
|
+
/**
|
|
1802
|
+
* ÖLÇÜ TOKEN'LARI — temadan bağımsız, çalışma zamanında EZİLEBİLİR.
|
|
1803
|
+
*
|
|
1804
|
+
* <h3>Neden bunlar da CSS değişkeni</h3>
|
|
1805
|
+
* Bir zamanlar yalnızca renkler ve font aileleri çalışma zamanında
|
|
1806
|
+
* eziliyordu; yarıçap, boşluk, süre ve tipografi ölçeği `_variables.scss`
|
|
1807
|
+
* içinde SCSS sabitiydi. Sonucu şuydu: bir tüketici markasının RENGİNİ
|
|
1808
|
+
* verebiliyor ama YUVARLAKLIĞINI veremiyordu. Oysa bir markayı tanınır kılan
|
|
1809
|
+
* şeylerin listesinde yarıçap renkten sonra gelir — keskin köşeli bir
|
|
1810
|
+
* kurumsal panelle yumuşak köşeli bir vitrin aynı pakete aynı derecede
|
|
1811
|
+
* ihtiyaç duyuyor. Aynısı bilgi yoğunluğu (boşluk ölçeği) ve hareket süresi
|
|
1812
|
+
* için de geçerli.
|
|
1813
|
+
*
|
|
1814
|
+
* <h3>SCSS sabiti olarak KALANLAR ve nedenleri</h3>
|
|
1815
|
+
* <ul>
|
|
1816
|
+
* <li><b>Kırılma noktaları</b> — `@media (max-width: var(--x))` GEÇERSİZ
|
|
1817
|
+
* CSS. Medya sorgusu özel özellik okuyamaz; taşınsalardı bütün duyarlı
|
|
1818
|
+
* yerleşim sessizce çökerdi.</li>
|
|
1819
|
+
* <li><b>Katman (`z-*`)</b> — bir yığılma bağlamı sayısı, marka kararı
|
|
1820
|
+
* değil. Tüketicinin ezmesi gereken bir şey değil; ezerse kip pencere
|
|
1821
|
+
* perdenin altında kalır.</li>
|
|
1822
|
+
* <li><b>Ağırlık, harf aralığı, kapsayıcı genişlikleri, sayfa dolgusu</b> —
|
|
1823
|
+
* ölçek değil tekil değer; ezme ihtiyacı ölçülmedi. Gerektiğinde
|
|
1824
|
+
* buraya taşınabilir, ters yön (geri alma) kırıcıdır.</li>
|
|
1825
|
+
* </ul>
|
|
1826
|
+
*
|
|
1827
|
+
* <h3>Değerler DİZE, sayı değil</h3>
|
|
1828
|
+
* `'4px'` yazılıyor çünkü çıktı doğrudan bir CSS bildirimi. Sayı tutulup
|
|
1829
|
+
* birim sonradan eklenseydi, `radius-pill` (999px) ile `leading-normal`
|
|
1830
|
+
* (birimsiz 1.62) aynı listede duramazdı.
|
|
1831
|
+
*/
|
|
1832
|
+
export declare const METRIC_TOKENS: {
|
|
1833
|
+
readonly 'radius-xs': "4px";
|
|
1834
|
+
readonly 'radius-sm': "6px";
|
|
1835
|
+
readonly 'radius-md': "8px";
|
|
1836
|
+
readonly 'radius-lg': "12px";
|
|
1837
|
+
readonly 'radius-xl': "16px";
|
|
1838
|
+
readonly 'radius-pill': "999px";
|
|
1839
|
+
readonly 'space-0': "0";
|
|
1840
|
+
readonly 'space-1': "4px";
|
|
1841
|
+
readonly 'space-2': "8px";
|
|
1842
|
+
readonly 'space-3': "12px";
|
|
1843
|
+
readonly 'space-4': "16px";
|
|
1844
|
+
readonly 'space-5': "24px";
|
|
1845
|
+
readonly 'space-6': "32px";
|
|
1846
|
+
readonly 'space-7': "48px";
|
|
1847
|
+
readonly 'space-8': "64px";
|
|
1848
|
+
readonly 'space-9': "96px";
|
|
1849
|
+
readonly 'font-size-2xs': "12px";
|
|
1850
|
+
readonly 'font-size-xs': "13px";
|
|
1851
|
+
readonly 'font-size-sm': "15px";
|
|
1852
|
+
readonly 'font-size-base': "16px";
|
|
1853
|
+
readonly 'font-size-body': "17px";
|
|
1854
|
+
readonly 'font-size-lg': "19px";
|
|
1855
|
+
readonly 'font-size-xl': "23px";
|
|
1856
|
+
readonly 'font-size-2xl': "29px";
|
|
1857
|
+
readonly 'font-size-3xl': "37px";
|
|
1858
|
+
readonly 'font-size-4xl': "47px";
|
|
1859
|
+
readonly 'leading-none': "1";
|
|
1860
|
+
readonly 'leading-tight': "1.16";
|
|
1861
|
+
readonly 'leading-snug': "1.35";
|
|
1862
|
+
readonly 'leading-normal': "1.62";
|
|
1863
|
+
readonly 'leading-relaxed': "1.75";
|
|
1864
|
+
readonly 'icon-xs': "14px";
|
|
1865
|
+
readonly 'icon-sm': "16px";
|
|
1866
|
+
readonly 'icon-md': "18px";
|
|
1867
|
+
readonly 'icon-lg': "20px";
|
|
1868
|
+
readonly 'icon-xl': "24px";
|
|
1869
|
+
readonly 'duration-instant': "80ms";
|
|
1870
|
+
readonly 'duration-fast': "140ms";
|
|
1871
|
+
readonly 'duration-normal': "200ms";
|
|
1872
|
+
readonly 'duration-slow': "320ms";
|
|
1873
|
+
readonly 'ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
1874
|
+
readonly 'ease-in-out': "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
1875
|
+
readonly 'ease-spring': "cubic-bezier(0.34, 1.4, 0.64, 1)";
|
|
1876
|
+
readonly 'duration-spin': "700ms";
|
|
1877
|
+
readonly 'duration-shimmer': "1400ms";
|
|
1878
|
+
};
|
|
1879
|
+
|
|
1325
1880
|
/**
|
|
1326
1881
|
* Kırılma noktaları — `styles/_variables.scss` içindeki `$breakpoint-*` ile
|
|
1327
1882
|
* <strong>aynı</strong> değerler.
|
|
@@ -1362,8 +1917,18 @@ export declare const Modal: typeof Modal_2;
|
|
|
1362
1917
|
* Dar ekranda ortalanmış bir pencere, klavye açıldığında yukarı sıkışıyor ve
|
|
1363
1918
|
* dip düğmeleri klavyenin altında kalıyordu. Alt sayfa baş parmağın
|
|
1364
1919
|
* erişebildiği yerde durur.
|
|
1920
|
+
*
|
|
1921
|
+
* <h3>Klavye</h3>
|
|
1922
|
+
* <table>
|
|
1923
|
+
* <tr><td>`Escape`</td><td>kapatır — `isDismissable={false}` iken KAPATMAZ</td></tr>
|
|
1924
|
+
* <tr><td>`Tab`</td><td>odak panelin içinde döner (tarayıcı: `showModal()`)</td></tr>
|
|
1925
|
+
* </table>
|
|
1926
|
+
* Odak tuzağı tarayıcıdan gelir; kütüphanenin işi `cancel` olayını React
|
|
1927
|
+
* durumuna bağlamak. Yakalanmadığında pencere kapanıyor ama `isOpen` `true`
|
|
1928
|
+
* kalıyor ve bir daha açılamıyordu. Nöbetçi:
|
|
1929
|
+
* `components/__tests__/keyboard.test.tsx`.
|
|
1365
1930
|
*/
|
|
1366
|
-
declare const Modal_2: ({ isOpen, onClose, title, closeLabel, children, description, footer, icon, tone, size, isDismissable, className, testId, }:
|
|
1931
|
+
declare const Modal_2: ({ isOpen, onClose, title, closeLabel, children, description, footer, icon, tone, size, isDismissable, className, testId, }: Props_41) => JSX.Element;
|
|
1367
1932
|
|
|
1368
1933
|
export declare type ModalTone = 'neutral' | 'danger' | 'warning' | 'success' | 'info';
|
|
1369
1934
|
|
|
@@ -1410,7 +1975,7 @@ export declare const PageHeader: typeof PageHeader_2;
|
|
|
1410
1975
|
* Düğmeler başlık bloğunun ALT kenarına hizalanır. `baseline` verildiğinde iki
|
|
1411
1976
|
* satırlık başlıklarda düğme ilk satıra çekiliyordu.
|
|
1412
1977
|
*/
|
|
1413
|
-
declare const PageHeader_2: FC<
|
|
1978
|
+
declare const PageHeader_2: FC<Props_25>;
|
|
1414
1979
|
|
|
1415
1980
|
export declare const Pagination: typeof Pagination_2;
|
|
1416
1981
|
|
|
@@ -1433,7 +1998,7 @@ export declare const Pagination: typeof Pagination_2;
|
|
|
1433
1998
|
* kalırlar — `<a>` etiketinin "devre dışı" hâli yok, `aria-disabled` ise
|
|
1434
1999
|
* tıklamayı engellemez. Sayfa numaraları tarayıcıya zaten tam listeyi veriyor.
|
|
1435
2000
|
*/
|
|
1436
|
-
declare const Pagination_2: FC<
|
|
2001
|
+
declare const Pagination_2: FC<Props_49>;
|
|
1437
2002
|
|
|
1438
2003
|
export declare const Panel: typeof Panel_2;
|
|
1439
2004
|
|
|
@@ -1458,7 +2023,7 @@ export declare const Panel: typeof Panel_2;
|
|
|
1458
2023
|
* <PanelForm>…alanlar…</PanelForm>
|
|
1459
2024
|
* </Panel>
|
|
1460
2025
|
*/
|
|
1461
|
-
declare const Panel_2: FC<
|
|
2026
|
+
declare const Panel_2: FC<Props_26>;
|
|
1462
2027
|
|
|
1463
2028
|
/**
|
|
1464
2029
|
* Panel içindeki form ızgarası.
|
|
@@ -1490,6 +2055,48 @@ declare type PanelRowProps = {
|
|
|
1490
2055
|
className?: string;
|
|
1491
2056
|
};
|
|
1492
2057
|
|
|
2058
|
+
export declare const Popover: typeof Popover_2;
|
|
2059
|
+
|
|
2060
|
+
/**
|
|
2061
|
+
* Popover — <strong>eylem taşıyabilen</strong>, odaklanabilir yüzey.
|
|
2062
|
+
*
|
|
2063
|
+
* <h3>{@link Tooltip} ile farkı: içine ne konabildiği</h3>
|
|
2064
|
+
* İkisi de tetikleyiciye yapışan bir yüzey açıyor; ayrım içeriğin
|
|
2065
|
+
* ERİŞİLEBİLİR olup olmamasında:
|
|
2066
|
+
*
|
|
2067
|
+
* <ul>
|
|
2068
|
+
* <li>`Tooltip` yalnızca AÇIKLAMA taşır. `pointer-events: none` ve klavyeyle
|
|
2069
|
+
* içine girilemez — içine bir bağlantı konsa ona ulaşmanın yolu olmazdı
|
|
2070
|
+
* (fare balona giderken tetikleyiciden çıkıyor).</li>
|
|
2071
|
+
* <li><b>`Popover` odak alır.</b> Açıldığında odak içeri girer, `Escape`
|
|
2072
|
+
* kapatır ve odak tetikleyiciye döner. Bağlantı, düğme, kısa bir form
|
|
2073
|
+
* konabilir.</li>
|
|
2074
|
+
* </ul>
|
|
2075
|
+
*
|
|
2076
|
+
* <h3>Kipsel DEĞİL</h3>
|
|
2077
|
+
* Arka plan tıklanabilir kalır ve sayfa kaydırılabilir. Kararı bekleyen,
|
|
2078
|
+
* kaçınılmaz bir seçim `Modal`ın işi; popover yardımcı bir yüzey ve
|
|
2079
|
+
* kullanıcıyı hapsetmemeli. Bu yüzden `<dialog>` DEĞİL portal + `usePositioning`:
|
|
2080
|
+
* `showModal()` arka planı inert bırakıyor, `<dialog open>` (kipsiz) ise üst
|
|
2081
|
+
* katmana hiç girmiyor ve `z-index` yarışına dönüyordu.
|
|
2082
|
+
*
|
|
2083
|
+
* <h3>Klavye</h3>
|
|
2084
|
+
* <table>
|
|
2085
|
+
* <tr><td>`Enter` / `Space`</td><td>tetikleyicide: açar</td></tr>
|
|
2086
|
+
* <tr><td>`Escape`</td><td>kapatır, odak TETİKLEYİCİYE döner</td></tr>
|
|
2087
|
+
* <tr><td>`Tab`</td><td>yüzeyin içinde gezinir; dışına çıkınca KAPANIR</td></tr>
|
|
2088
|
+
* </table>
|
|
2089
|
+
* Odak tuzağı YOK — kipsel olmayan bir yüzeyde odağı hapsetmek, kullanıcıyı
|
|
2090
|
+
* sayfadan koparır. Odak dışarı çıktığında yüzey kapanır.
|
|
2091
|
+
*/
|
|
2092
|
+
declare const Popover_2: ({ trigger, children, label, side, align, isOpen: controlledOpen, onOpenChange, className, testId, }: Props_5) => JSX.Element | null;
|
|
2093
|
+
|
|
2094
|
+
/** Tercih edilen kenar boyunca hizalama. */
|
|
2095
|
+
declare type PositionAlign = 'start' | 'center' | 'end';
|
|
2096
|
+
|
|
2097
|
+
/** Yüzeyin tercih ettiği kenar. Yer yoksa karşıtına düşer. */
|
|
2098
|
+
declare type PositionSide = 'top' | 'bottom' | 'left' | 'right';
|
|
2099
|
+
|
|
1493
2100
|
/**
|
|
1494
2101
|
* `showModal()` ÇAĞRILDIKTAN SONRA çağrılır. Odak bir metin alanına düştüyse
|
|
1495
2102
|
* panelin kendisine geri alınır; düşmediyse hiçbir şey yapılmaz.
|
|
@@ -1513,7 +2120,36 @@ export declare const Price: typeof Price_2;
|
|
|
1513
2120
|
* küçük bir yeşil rozet. Kırmızı fiyat ucuz durur ve kırmızıyı "olumsuz"
|
|
1514
2121
|
* anlamından koparır.
|
|
1515
2122
|
*/
|
|
1516
|
-
declare const Price_2: FC<
|
|
2123
|
+
declare const Price_2: FC<Props_27>;
|
|
2124
|
+
|
|
2125
|
+
export declare const Progress: typeof Progress_2;
|
|
2126
|
+
|
|
2127
|
+
/**
|
|
2128
|
+
* İlerleme çubuğu — <strong>ölçülebilir</strong> bekleme.
|
|
2129
|
+
*
|
|
2130
|
+
* <h3>{@link Spinner} ile farkı: sonu bilinip bilinmediği</h3>
|
|
2131
|
+
* `Spinner` "bir şey oluyor" der ve başka bir şey söyleyemez. Ölçülebilir bir
|
|
2132
|
+
* işte (dosya yükleme, içe aktarma, çok adımlı ödeme) bu yetmiyor: kullanıcı
|
|
2133
|
+
* beklemeye değip değmeyeceğine karar veremiyor ve iki saniyeyle iki dakika
|
|
2134
|
+
* arasındaki farkı ancak bekleyerek öğreniyordu.
|
|
2135
|
+
*
|
|
2136
|
+
* <p>`value` verilmediğinde çubuk BELİRSİZ kipe düşer: yine bir çubuk çizer
|
|
2137
|
+
* ama `aria-valuenow` yazmaz. Bu kasıtlı — bilinmeyen bir değeri "0" diye
|
|
2138
|
+
* bildirmek, ekran okuyucuya işin hiç ilerlemediğini söylüyordu.
|
|
2139
|
+
*
|
|
2140
|
+
* <h3>Yüzde tek başına yeterli DEĞİL</h3>
|
|
2141
|
+
* `valueText` verildiğinde ekran okuyucu onu okur ("5 dosyadan 3'ü"), yüzdeyi
|
|
2142
|
+
* değil. Aynı bilgi görsel tarafta `isValueVisible` ile yazılabiliyor; ikisi
|
|
2143
|
+
* de aynı gerçeği söylemek zorunda.
|
|
2144
|
+
*
|
|
2145
|
+
* <h3>Renk tek başına anlam taşımaz</h3>
|
|
2146
|
+
* `tone` yalnızca bir vurgu: "tamamlandı" ya da "başarısız" durumu çubuğun
|
|
2147
|
+
* rengiyle DEĞİL, yanındaki metinle ve çağıran tarafın çizdiği ikonla
|
|
2148
|
+
* anlatılır (WCAG 1.4.1).
|
|
2149
|
+
*/
|
|
2150
|
+
declare const Progress_2: ({ value, max, label, valueText, isValueVisible, tone, size, className, testId, }: Props_33) => JSX.Element;
|
|
2151
|
+
|
|
2152
|
+
export declare const ProgressCircle: MemoExoticComponent<({ value, max, label, valueText, isValueVisible, tone, size, className, testId, }: CircleProps) => JSX.Element>;
|
|
1517
2153
|
|
|
1518
2154
|
export declare const PromptDialog: typeof PromptDialog_2;
|
|
1519
2155
|
|
|
@@ -1536,7 +2172,7 @@ export declare const PromptDialog: typeof PromptDialog_2;
|
|
|
1536
2172
|
* (`Modal` dip şeridi formun dışında çizer). `multiline` kipinde Enter satır
|
|
1537
2173
|
* başı yapar, gönderme düğmeden.
|
|
1538
2174
|
*/
|
|
1539
|
-
declare const PromptDialog_2: FC<
|
|
2175
|
+
declare const PromptDialog_2: FC<Props_45>;
|
|
1540
2176
|
|
|
1541
2177
|
declare type Props = {
|
|
1542
2178
|
children: ReactNode;
|
|
@@ -1574,6 +2210,66 @@ declare type Props = {
|
|
|
1574
2210
|
};
|
|
1575
2211
|
|
|
1576
2212
|
declare type Props_10 = {
|
|
2213
|
+
/** Radyo grubu adı — aynı gruptaki kartlar ok tuşlarıyla gezilir. */
|
|
2214
|
+
name: string;
|
|
2215
|
+
value: string;
|
|
2216
|
+
isSelected: boolean;
|
|
2217
|
+
isDisabled?: boolean;
|
|
2218
|
+
onChange: (value: string) => void;
|
|
2219
|
+
/** Zengin gövde: kartın içeriği çağırana aittir. */
|
|
2220
|
+
children: ReactNode;
|
|
2221
|
+
} & CommonElementProps;
|
|
2222
|
+
|
|
2223
|
+
declare type Props_11 = {
|
|
2224
|
+
min: number;
|
|
2225
|
+
max: number;
|
|
2226
|
+
step?: number;
|
|
2227
|
+
value: RangeValue;
|
|
2228
|
+
/** Sürükleme sürerken her adımda çağrılır — ekrandaki değeri günceller. */
|
|
2229
|
+
onChange: (value: RangeValue) => void;
|
|
2230
|
+
/**
|
|
2231
|
+
* Sürükleme <em>bittiğinde</em> çağrılır. Adres çubuğuna yazmak veya
|
|
2232
|
+
* sunucuya istek atmak gibi pahalı işler buraya bağlanır.
|
|
2233
|
+
*/
|
|
2234
|
+
onCommit?: (value: RangeValue) => void;
|
|
2235
|
+
/** Ham sayıyı okunur metne çevirir ("125000" → "1.250 TL"). */
|
|
2236
|
+
formatValue?: (value: number) => string;
|
|
2237
|
+
/** Grubun erişilebilir adı ("Fiyat aralığı"). */
|
|
2238
|
+
label: string;
|
|
2239
|
+
/** Alt kulbun erişilebilir ad eki. Verilmezse `labels.range.min`. */
|
|
2240
|
+
minLabel?: string;
|
|
2241
|
+
/** Üst kulbun erişilebilir ad eki. Verilmezse `labels.range.max`. */
|
|
2242
|
+
maxLabel?: string;
|
|
2243
|
+
isDisabled?: boolean;
|
|
2244
|
+
className?: string;
|
|
2245
|
+
testId?: string;
|
|
2246
|
+
};
|
|
2247
|
+
|
|
2248
|
+
declare type Props_12 = {
|
|
2249
|
+
value: number | null;
|
|
2250
|
+
onChange: (value: number) => void;
|
|
2251
|
+
/** Grubun erişilebilir adı ("Ürün puanı"). */
|
|
2252
|
+
label: string;
|
|
2253
|
+
/**
|
|
2254
|
+
* Puan açıklamaları. Hem ekran okuyucuya okunur hem de seçildiğinde
|
|
2255
|
+
* yıldızların altında yazar. Verilmezse `labels.rating.scale`.
|
|
2256
|
+
*
|
|
2257
|
+
* <p>Dolu yıldız sayısı tek başına bir renk/şekil sinyali. Yanına açıklama
|
|
2258
|
+
* yazmak hem anlamı netleştirir hem de renk körü kullanıcıya ikinci bir ipucu
|
|
2259
|
+
* verir (WCAG 1.4.1).
|
|
2260
|
+
*/
|
|
2261
|
+
ratingLabels?: RatingLabels;
|
|
2262
|
+
/**
|
|
2263
|
+
* Ekran okuyucuda yıldız sayısını okuyan biçimlendirici ("4 yıldız").
|
|
2264
|
+
* Verilmezse `labels.rating.starCount`.
|
|
2265
|
+
*/
|
|
2266
|
+
formatStarCount?: (star: number) => string;
|
|
2267
|
+
isDisabled?: boolean;
|
|
2268
|
+
className?: string;
|
|
2269
|
+
testId?: string;
|
|
2270
|
+
};
|
|
2271
|
+
|
|
2272
|
+
declare type Props_13 = {
|
|
1577
2273
|
value: number;
|
|
1578
2274
|
onChange: (value: number) => void;
|
|
1579
2275
|
/** Grubun ve girdinin erişilebilir adı. Verilmezse `labels.quantity.label`. */
|
|
@@ -1590,7 +2286,27 @@ declare type Props_10 = {
|
|
|
1590
2286
|
testId?: string;
|
|
1591
2287
|
};
|
|
1592
2288
|
|
|
1593
|
-
declare type
|
|
2289
|
+
declare type Props_14 = {
|
|
2290
|
+
values: string[];
|
|
2291
|
+
onChange: (values: string[]) => void;
|
|
2292
|
+
/** Alanın erişilebilir adı. ZORUNLU. */
|
|
2293
|
+
label: string;
|
|
2294
|
+
placeholder?: string;
|
|
2295
|
+
/** Her etiketin kaldırma düğmesinin ad öneki ("Kaldır"). ZORUNLU. */
|
|
2296
|
+
removeLabel: string;
|
|
2297
|
+
/** Etiketi bitiren tuşlar. Varsayılan `Enter` ve virgül. */
|
|
2298
|
+
separators?: string[];
|
|
2299
|
+
/** En fazla kaç etiket. Dolduğunda girdi PASİF olur, gizlenmez. */
|
|
2300
|
+
maxTags?: number;
|
|
2301
|
+
isDisabled?: boolean;
|
|
2302
|
+
id?: string;
|
|
2303
|
+
'aria-describedby'?: string;
|
|
2304
|
+
'aria-invalid'?: boolean;
|
|
2305
|
+
className?: string;
|
|
2306
|
+
testId?: string;
|
|
2307
|
+
};
|
|
2308
|
+
|
|
2309
|
+
declare type Props_15 = BaseProps_2 & {
|
|
1594
2310
|
isRequired?: boolean;
|
|
1595
2311
|
/**
|
|
1596
2312
|
* Zorunluluk yıldızının ekran okuyucu karşılığı ("(zorunlu)").
|
|
@@ -1602,7 +2318,35 @@ declare type Props_11 = BaseProps_2 & {
|
|
|
1602
2318
|
requiredLabel?: string;
|
|
1603
2319
|
};
|
|
1604
2320
|
|
|
1605
|
-
declare type
|
|
2321
|
+
declare type Props_16 = {
|
|
2322
|
+
files: UploadFile[];
|
|
2323
|
+
/** Kullanıcı dosya seçtiğinde/bıraktığında çağrılır — DOĞRULANMIŞ liste. */
|
|
2324
|
+
onSelect: (files: File[]) => void;
|
|
2325
|
+
onRemove: (id: string) => void;
|
|
2326
|
+
/** Alanın görünür etiketi ve erişilebilir adı. ZORUNLU. */
|
|
2327
|
+
label: string;
|
|
2328
|
+
/** Etiketin altındaki kural cümlesi ("PDF veya JPG, en fazla 5 MB"). */
|
|
2329
|
+
hint?: string;
|
|
2330
|
+
/** `<input accept>` — tarayıcının dosya seçicisini süzer. */
|
|
2331
|
+
accept?: string;
|
|
2332
|
+
isMultiple?: boolean;
|
|
2333
|
+
/** Bayt. Aşan dosya `onSelect`e HİÇ ulaşmaz; hata metni burada üretilir. */
|
|
2334
|
+
maxSize?: number;
|
|
2335
|
+
/** Kaldırma düğmelerinin erişilebilir ad öneki ("Kaldır"). */
|
|
2336
|
+
removeLabel: string;
|
|
2337
|
+
/** Sürükle-bırak alanının içine yazılan çağrı ("Dosyaları buraya bırakın"). */
|
|
2338
|
+
dropLabel: string;
|
|
2339
|
+
/** Boyut aşıldığında yazılan hata; `{name}` ve `{max}` yerine konur. */
|
|
2340
|
+
sizeErrorText?: string;
|
|
2341
|
+
isDisabled?: boolean;
|
|
2342
|
+
/** Alanın tamamına ait hata (sunucu reddi). */
|
|
2343
|
+
error?: string;
|
|
2344
|
+
children?: ReactNode;
|
|
2345
|
+
className?: string;
|
|
2346
|
+
testId?: string;
|
|
2347
|
+
};
|
|
2348
|
+
|
|
2349
|
+
declare type Props_17 = {
|
|
1606
2350
|
children: ReactNode;
|
|
1607
2351
|
tone?: AlertTone;
|
|
1608
2352
|
title?: string;
|
|
@@ -1612,7 +2356,7 @@ declare type Props_12 = {
|
|
|
1612
2356
|
testId?: string;
|
|
1613
2357
|
};
|
|
1614
2358
|
|
|
1615
|
-
declare type
|
|
2359
|
+
declare type Props_18 = {
|
|
1616
2360
|
/** Tam ad; baş harfler buradan üretilir ve görsel yoksa `alt` metnidir. */
|
|
1617
2361
|
name: string;
|
|
1618
2362
|
/**
|
|
@@ -1633,7 +2377,7 @@ declare type Props_13 = {
|
|
|
1633
2377
|
testId?: string;
|
|
1634
2378
|
};
|
|
1635
2379
|
|
|
1636
|
-
declare type
|
|
2380
|
+
declare type Props_19 = {
|
|
1637
2381
|
children: ReactNode;
|
|
1638
2382
|
tone?: BadgeTone;
|
|
1639
2383
|
variant?: BadgeVariant;
|
|
@@ -1643,7 +2387,18 @@ declare type Props_14 = {
|
|
|
1643
2387
|
testId?: string;
|
|
1644
2388
|
};
|
|
1645
2389
|
|
|
1646
|
-
declare type
|
|
2390
|
+
declare type Props_2 = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
|
|
2391
|
+
href: string;
|
|
2392
|
+
children: ReactNode;
|
|
2393
|
+
/** Sonda ok gösterilir — "devam et" anlamı taşıyan bağlantılarda. */
|
|
2394
|
+
hasArrow?: boolean;
|
|
2395
|
+
tone?: 'brand' | 'muted';
|
|
2396
|
+
size?: 'sm' | 'md';
|
|
2397
|
+
/** Yönlendiriciye geçirilecek ek props. */
|
|
2398
|
+
linkProps?: HanuiLinkExtraProps;
|
|
2399
|
+
};
|
|
2400
|
+
|
|
2401
|
+
declare type Props_20 = {
|
|
1647
2402
|
items: Crumb[];
|
|
1648
2403
|
/** Gezinme bölgesinin erişilebilir adı. Verilmezse `labels.breadcrumb`. */
|
|
1649
2404
|
label?: string;
|
|
@@ -1653,7 +2408,28 @@ declare type Props_15 = {
|
|
|
1653
2408
|
testId?: string;
|
|
1654
2409
|
};
|
|
1655
2410
|
|
|
1656
|
-
declare type
|
|
2411
|
+
declare type Props_21 = {
|
|
2412
|
+
children: ReactNode;
|
|
2413
|
+
/** Şeridin erişilebilir adı ("Öne çıkan ürünler"). ZORUNLU. */
|
|
2414
|
+
label: string;
|
|
2415
|
+
/** Önceki/sonraki düğmelerinin erişilebilir adları. ZORUNLU. */
|
|
2416
|
+
previousLabel: string;
|
|
2417
|
+
nextLabel: string;
|
|
2418
|
+
/**
|
|
2419
|
+
* Sayfa göstergesinin ad üreticisi (`index` 1 tabanlı).
|
|
2420
|
+
*
|
|
2421
|
+
* <p>Verilmediğinde nokta göstergesi ÇİZİLMEZ: adsız bir nokta ekran
|
|
2422
|
+
* okuyucuda "düğme" diye okunuyor ve kullanıcı nereye gittiğini
|
|
2423
|
+
* bilmiyordu.
|
|
2424
|
+
*/
|
|
2425
|
+
formatDotLabel?: (index: number, total: number) => string;
|
|
2426
|
+
/** Bir kartın asgari genişliği. Şerit buna göre kaç kart göstereceğine karar verir. */
|
|
2427
|
+
itemMinWidth?: number;
|
|
2428
|
+
className?: string;
|
|
2429
|
+
testId?: string;
|
|
2430
|
+
};
|
|
2431
|
+
|
|
2432
|
+
declare type Props_22 = {
|
|
1657
2433
|
/** Gösterilecek ve panoya kopyalanacak değer. */
|
|
1658
2434
|
value: string;
|
|
1659
2435
|
/**
|
|
@@ -1682,13 +2458,13 @@ declare type Props_16 = {
|
|
|
1682
2458
|
testId?: string;
|
|
1683
2459
|
};
|
|
1684
2460
|
|
|
1685
|
-
declare type
|
|
2461
|
+
declare type Props_23 = {
|
|
1686
2462
|
/** Ortada gösterilen metin ("veya"). */
|
|
1687
2463
|
label?: string;
|
|
1688
2464
|
className?: string;
|
|
1689
2465
|
};
|
|
1690
2466
|
|
|
1691
|
-
declare type
|
|
2467
|
+
declare type Props_24 = {
|
|
1692
2468
|
title: string;
|
|
1693
2469
|
description?: string;
|
|
1694
2470
|
icon?: ReactNode;
|
|
@@ -1696,12 +2472,27 @@ declare type Props_18 = {
|
|
|
1696
2472
|
action?: ReactNode;
|
|
1697
2473
|
/** İkincil eylem veya ipucu. */
|
|
1698
2474
|
secondaryAction?: ReactNode;
|
|
2475
|
+
/**
|
|
2476
|
+
* `error` — liste BOŞ değil, ÇEKİLEMEDİ.
|
|
2477
|
+
*
|
|
2478
|
+
* <p>İkisi ayrı durumlar ve ayrı görünmek zorundalar: ağ hatasını "kayıt
|
|
2479
|
+
* kalmamış" diye okuyan kullanıcı yanlış karar veriyor (ürün aramayı
|
|
2480
|
+
* bırakıyor, siparişinin silindiğini sanıyor). Varyant `role="alert"`
|
|
2481
|
+
* taşıyor ve tonu farklı — layout aynı kalıyor ki iki durum arasındaki
|
|
2482
|
+
* geçiş sıçramasın.
|
|
2483
|
+
*
|
|
2484
|
+
* <p>Ayrım ÖNCE bu bileşenin dışındaydı ("ağ hatasında bu bileşen
|
|
2485
|
+
* çizilmez") ve sonucu şuydu: her çağıran kendi hata kutusunu yazıyor,
|
|
2486
|
+
* kutular birbirinden farklı görünüyordu. Ayrım korunuyor — ama artık
|
|
2487
|
+
* BİLEŞENDE kodlu, çağıranın disiplinine bırakılmış değil.
|
|
2488
|
+
*/
|
|
2489
|
+
tone?: 'empty' | 'error';
|
|
1699
2490
|
size?: 'sm' | 'md';
|
|
1700
2491
|
className?: string;
|
|
1701
2492
|
testId?: string;
|
|
1702
2493
|
};
|
|
1703
2494
|
|
|
1704
|
-
declare type
|
|
2495
|
+
declare type Props_25 = {
|
|
1705
2496
|
title: string;
|
|
1706
2497
|
/** Başlığın üstündeki küçük bağlam etiketi ("HESABIM", "KATEGORİ"). */
|
|
1707
2498
|
eyebrow?: string;
|
|
@@ -1724,18 +2515,7 @@ declare type Props_19 = {
|
|
|
1724
2515
|
testId?: string;
|
|
1725
2516
|
};
|
|
1726
2517
|
|
|
1727
|
-
declare type
|
|
1728
|
-
href: string;
|
|
1729
|
-
children: ReactNode;
|
|
1730
|
-
/** Sonda ok gösterilir — "devam et" anlamı taşıyan bağlantılarda. */
|
|
1731
|
-
hasArrow?: boolean;
|
|
1732
|
-
tone?: 'brand' | 'muted';
|
|
1733
|
-
size?: 'sm' | 'md';
|
|
1734
|
-
/** Yönlendiriciye geçirilecek ek props. */
|
|
1735
|
-
linkProps?: HanuiLinkExtraProps;
|
|
1736
|
-
};
|
|
1737
|
-
|
|
1738
|
-
declare type Props_20 = {
|
|
2518
|
+
declare type Props_26 = {
|
|
1739
2519
|
children: ReactNode;
|
|
1740
2520
|
/** Panel başlığı. Verilmezse başlık şeridi hiç çizilmez. */
|
|
1741
2521
|
title?: string;
|
|
@@ -1757,7 +2537,7 @@ declare type Props_20 = {
|
|
|
1757
2537
|
testId?: string;
|
|
1758
2538
|
};
|
|
1759
2539
|
|
|
1760
|
-
declare type
|
|
2540
|
+
declare type Props_27 = {
|
|
1761
2541
|
/** BİÇİMLENMİŞ tutar: "1.299,90". Bileşen hesap yapmaz. */
|
|
1762
2542
|
value: string;
|
|
1763
2543
|
/** Para birimi simgesi ya da kodu. Verilmezse `labels.currency`. */
|
|
@@ -1773,7 +2553,7 @@ declare type Props_21 = {
|
|
|
1773
2553
|
testId?: string;
|
|
1774
2554
|
};
|
|
1775
2555
|
|
|
1776
|
-
declare type
|
|
2556
|
+
declare type Props_28 = {
|
|
1777
2557
|
/** 0–5 arası puan. Yarım yıldız desteklenir. */
|
|
1778
2558
|
value: number;
|
|
1779
2559
|
/** Değerlendirme sayısı; verilirse yıldızların yanında gösterilir. */
|
|
@@ -1794,7 +2574,7 @@ declare type Props_22 = {
|
|
|
1794
2574
|
testId?: string;
|
|
1795
2575
|
};
|
|
1796
2576
|
|
|
1797
|
-
declare type
|
|
2577
|
+
declare type Props_29 = {
|
|
1798
2578
|
title: string;
|
|
1799
2579
|
description?: string;
|
|
1800
2580
|
/** Üstte gösterilen küçük büyük-harf etiket. */
|
|
@@ -1807,7 +2587,54 @@ declare type Props_23 = {
|
|
|
1807
2587
|
testId?: string;
|
|
1808
2588
|
};
|
|
1809
2589
|
|
|
1810
|
-
declare type
|
|
2590
|
+
declare type Props_3 = {
|
|
2591
|
+
/** Balonda gösterilecek açıklama. */
|
|
2592
|
+
content: ReactNode;
|
|
2593
|
+
/** Açıklamanın bağlandığı öğe — düğme, ikon, etiket. */
|
|
2594
|
+
children: ReactNode;
|
|
2595
|
+
/**
|
|
2596
|
+
* Tercih edilen kenar. Yer yoksa KARŞITINA düşer; üçüncü bir kenara
|
|
2597
|
+
* atlamaz (bkz. `usePositioning`).
|
|
2598
|
+
*/
|
|
2599
|
+
side?: PositionSide;
|
|
2600
|
+
/**
|
|
2601
|
+
* Açılma gecikmesi (ms). Fare bir araç çubuğunun üzerinden geçerken sıfır
|
|
2602
|
+
* gecikme, art arda beş balon açıp kapatıyordu.
|
|
2603
|
+
*/
|
|
2604
|
+
openDelay?: number;
|
|
2605
|
+
/**
|
|
2606
|
+
* @deprecated `side` kullanın. Bu prop bir sonraki büyük sürümde kalkacak.
|
|
2607
|
+
*
|
|
2608
|
+
* <p>Ad değişti çünkü davranış değişti: `position` SABİT bir kenar
|
|
2609
|
+
* yazıyordu ve balon oraya sığmadığında görünüm alanının dışına taşıyordu.
|
|
2610
|
+
* `side` yalnızca TERCİH — yer yoksa karşıt kenara düşülüyor. Aynı adı
|
|
2611
|
+
* korumak, artık doğru olmayan bir sözü sürdürmek olurdu.
|
|
2612
|
+
*/
|
|
2613
|
+
position?: 'top' | 'bottom';
|
|
2614
|
+
className?: string;
|
|
2615
|
+
};
|
|
2616
|
+
|
|
2617
|
+
declare type Props_30 = {
|
|
2618
|
+
children: ReactNode;
|
|
2619
|
+
/**
|
|
2620
|
+
* Kaydırılabilir bölgenin erişilebilir adı. ZORUNLU.
|
|
2621
|
+
*
|
|
2622
|
+
* <p>Bölge klavyeyle odaklanabilir olduğunda ekran okuyucu onu duyuruyor;
|
|
2623
|
+
* adsız bir bölge "bölge" diye okunuyor ve kullanıcı neyin içinde olduğunu
|
|
2624
|
+
* bilmiyordu.
|
|
2625
|
+
*/
|
|
2626
|
+
label: string;
|
|
2627
|
+
/** Kaydırma yönü. `both` iki eksende de kaydırır. */
|
|
2628
|
+
axis?: 'vertical' | 'horizontal' | 'both';
|
|
2629
|
+
/** En fazla yükseklik — dikey kaydırmada zorunlu, yoksa kutu uzar gider. */
|
|
2630
|
+
maxHeight?: number | string;
|
|
2631
|
+
/** Kenarlarda içeriğin devam ettiğini gösteren solma. */
|
|
2632
|
+
hasFade?: boolean;
|
|
2633
|
+
className?: string;
|
|
2634
|
+
testId?: string;
|
|
2635
|
+
};
|
|
2636
|
+
|
|
2637
|
+
declare type Props_31 = {
|
|
1811
2638
|
/** Genişlik: sayı px, dize doğrudan CSS değeri. */
|
|
1812
2639
|
width?: number | string;
|
|
1813
2640
|
height?: number | string;
|
|
@@ -1818,7 +2645,66 @@ declare type Props_24 = {
|
|
|
1818
2645
|
className?: string;
|
|
1819
2646
|
};
|
|
1820
2647
|
|
|
1821
|
-
declare type
|
|
2648
|
+
declare type Props_32 = {
|
|
2649
|
+
/** Ölçülen şeyin adı ("Bugünkü sipariş"). */
|
|
2650
|
+
label: string;
|
|
2651
|
+
/** Değerin KENDİSİ — biçimlendirilmiş dize. Bileşen hesap yapmaz. */
|
|
2652
|
+
value: ReactNode;
|
|
2653
|
+
/** Değerin yanındaki birim ("₺", "adet"). */
|
|
2654
|
+
unit?: string;
|
|
2655
|
+
/** Değişim metni ("%12", "+3"). `trend` ile birlikte anlamlı. */
|
|
2656
|
+
delta?: string;
|
|
2657
|
+
/**
|
|
2658
|
+
* Değişimin yönü.
|
|
2659
|
+
*
|
|
2660
|
+
* <p>Yön TEK BAŞINA iyi/kötü demek değildir: "iade oranı %12 arttı" kötü,
|
|
2661
|
+
* "ciro %12 arttı" iyi. Renk kararı {@link isUpPositive} ile ayrı veriliyor.
|
|
2662
|
+
*/
|
|
2663
|
+
trend?: StatTrend;
|
|
2664
|
+
/**
|
|
2665
|
+
* Artış İYİ mi. Varsayılan `true`.
|
|
2666
|
+
*
|
|
2667
|
+
* <p>`false` verildiğinde yukarı ok kırmızı, aşağı ok yeşil çizilir — iade
|
|
2668
|
+
* oranı, hata sayısı, terk edilen sepet gibi ölçüler için. Yönü her zaman
|
|
2669
|
+
* yeşil çizmek, kötüleşen bir ölçüyü iyi haber gibi gösteriyordu.
|
|
2670
|
+
*/
|
|
2671
|
+
isUpPositive?: boolean;
|
|
2672
|
+
/** Değerin altındaki bir cümlelik bağlam ("geçen haftaya göre"). */
|
|
2673
|
+
description?: ReactNode;
|
|
2674
|
+
/** Sol üstte duran ikon madalyonu. */
|
|
2675
|
+
icon?: ReactNode;
|
|
2676
|
+
size?: 'sm' | 'md';
|
|
2677
|
+
className?: string;
|
|
2678
|
+
testId?: string;
|
|
2679
|
+
};
|
|
2680
|
+
|
|
2681
|
+
declare type Props_33 = {
|
|
2682
|
+
/**
|
|
2683
|
+
* Tamamlanan miktar. `undefined` → BELİRSİZ ilerleme (sonu bilinmiyor);
|
|
2684
|
+
* çubuk kendi kendine akar.
|
|
2685
|
+
*/
|
|
2686
|
+
value?: number;
|
|
2687
|
+
/** Ölçeğin üst ucu. */
|
|
2688
|
+
max?: number;
|
|
2689
|
+
/** Çubuğun erişilebilir adı ("Yükleme", "Ödeme adımı"). ZORUNLU. */
|
|
2690
|
+
label: string;
|
|
2691
|
+
/**
|
|
2692
|
+
* Ekran okuyucuya okunan METİN karşılığı ("3 / 5 dosya").
|
|
2693
|
+
*
|
|
2694
|
+
* <p>Verilmezse ekran okuyucu ham yüzdeyi okur. Bir dosya yüklemesinde
|
|
2695
|
+
* "yüzde altmış" ile "5 dosyadan 3'ü" arasındaki fark, kullanıcının
|
|
2696
|
+
* bekleyip beklememeye karar verebilmesi.
|
|
2697
|
+
*/
|
|
2698
|
+
valueText?: string;
|
|
2699
|
+
/** Yüzdeyi çubuğun yanında GÖRÜNÜR olarak yazar. */
|
|
2700
|
+
isValueVisible?: boolean;
|
|
2701
|
+
tone?: 'brand' | 'success' | 'warning' | 'danger';
|
|
2702
|
+
size?: 'sm' | 'md';
|
|
2703
|
+
className?: string;
|
|
2704
|
+
testId?: string;
|
|
2705
|
+
};
|
|
2706
|
+
|
|
2707
|
+
declare type Props_34 = {
|
|
1822
2708
|
size?: 'sm' | 'md' | 'lg';
|
|
1823
2709
|
/**
|
|
1824
2710
|
* Ekran okuyucuya okunacak metin; görsel olarak gizli.
|
|
@@ -1832,7 +2718,44 @@ declare type Props_25 = {
|
|
|
1832
2718
|
className?: string;
|
|
1833
2719
|
};
|
|
1834
2720
|
|
|
1835
|
-
declare type
|
|
2721
|
+
declare type Props_35 = {
|
|
2722
|
+
items: AccordionItem[];
|
|
2723
|
+
/**
|
|
2724
|
+
* Aynı anda YALNIZCA BİR bölüm açık kalır.
|
|
2725
|
+
*
|
|
2726
|
+
* <p>Varsayılan çoklu: bir SSS listesinde iki soruyu yan yana okumak
|
|
2727
|
+
* yaygın bir ihtiyaç ve tek-açık kip, kullanıcının az önce açtığı bölümü
|
|
2728
|
+
* habersizce kapatıyordu. Tek-açık yalnızca bölümler UZUN olduğunda
|
|
2729
|
+
* (mobil filtre paneli) doğru.
|
|
2730
|
+
*/
|
|
2731
|
+
isSingle?: boolean;
|
|
2732
|
+
/** Kontrolsüz kullanımda açılışta açık olan bölümler. */
|
|
2733
|
+
defaultOpenIds?: string[];
|
|
2734
|
+
/** Kontrollü kullanım; `onChange` ile birlikte verilir. */
|
|
2735
|
+
openIds?: string[];
|
|
2736
|
+
onChange?: (openIds: string[]) => void;
|
|
2737
|
+
className?: string;
|
|
2738
|
+
testId?: string;
|
|
2739
|
+
};
|
|
2740
|
+
|
|
2741
|
+
declare type Props_36 = {
|
|
2742
|
+
steps: StepItem[];
|
|
2743
|
+
/** Bulunulan adımın DİZİNİ (0 tabanlı). Öncesi tamamlanmış sayılır. */
|
|
2744
|
+
currentIndex: number;
|
|
2745
|
+
/**
|
|
2746
|
+
* Bir adıma dönülebiliyorsa verilir. Verilmediğinde adımlar düğme DEĞİL
|
|
2747
|
+
* düz metin olur — tıklanabilir görünüp hiçbir şey yapmayan bir adım,
|
|
2748
|
+
* kullanıcıya var olmayan bir yol vaat ediyordu.
|
|
2749
|
+
*/
|
|
2750
|
+
onStepClick?: (index: number) => void;
|
|
2751
|
+
/** Akışın erişilebilir adı ("Ödeme adımları"). ZORUNLU. */
|
|
2752
|
+
label: string;
|
|
2753
|
+
orientation?: 'horizontal' | 'vertical';
|
|
2754
|
+
className?: string;
|
|
2755
|
+
testId?: string;
|
|
2756
|
+
};
|
|
2757
|
+
|
|
2758
|
+
declare type Props_37 = {
|
|
1836
2759
|
items: TabItem[];
|
|
1837
2760
|
/** Kontrolsüz kullanımda açılışta seçili sekme. */
|
|
1838
2761
|
defaultTabId?: string;
|
|
@@ -1851,7 +2774,7 @@ declare type Props_26 = {
|
|
|
1851
2774
|
testId?: string;
|
|
1852
2775
|
};
|
|
1853
2776
|
|
|
1854
|
-
declare type
|
|
2777
|
+
declare type Props_38 = {
|
|
1855
2778
|
label: string;
|
|
1856
2779
|
/** İkon DIŞARIDAN gelir: hangi ikonun hangi konuya ait olduğu uygulamanın bilgisi. */
|
|
1857
2780
|
icon: ReactNode;
|
|
@@ -1865,7 +2788,27 @@ declare type Props_27 = {
|
|
|
1865
2788
|
testId?: string;
|
|
1866
2789
|
};
|
|
1867
2790
|
|
|
1868
|
-
declare type
|
|
2791
|
+
declare type Props_39 = {
|
|
2792
|
+
events: TimelineEvent[];
|
|
2793
|
+
/** Akışın erişilebilir adı ("Sipariş geçmişi"). ZORUNLU. */
|
|
2794
|
+
label: string;
|
|
2795
|
+
className?: string;
|
|
2796
|
+
testId?: string;
|
|
2797
|
+
};
|
|
2798
|
+
|
|
2799
|
+
declare type Props_4 = {
|
|
2800
|
+
/** Tetikleyici. TEK öğe; bileşen ona `ref` ve ARIA ekliyor. */
|
|
2801
|
+
trigger: ReactElement;
|
|
2802
|
+
items: MenuItem[];
|
|
2803
|
+
/** Menünün erişilebilir adı ("Satır eylemleri"). ZORUNLU. */
|
|
2804
|
+
label: string;
|
|
2805
|
+
side?: PositionSide;
|
|
2806
|
+
align?: PositionAlign;
|
|
2807
|
+
className?: string;
|
|
2808
|
+
testId?: string;
|
|
2809
|
+
};
|
|
2810
|
+
|
|
2811
|
+
declare type Props_40 = {
|
|
1869
2812
|
title: string;
|
|
1870
2813
|
/** Kapatma düğmesinin erişilebilir adı. Verilmezse `labels.close`. */
|
|
1871
2814
|
closeLabel?: string;
|
|
@@ -1891,7 +2834,7 @@ declare type Props_28 = {
|
|
|
1891
2834
|
testId?: string;
|
|
1892
2835
|
};
|
|
1893
2836
|
|
|
1894
|
-
declare type
|
|
2837
|
+
declare type Props_41 = {
|
|
1895
2838
|
isOpen: boolean;
|
|
1896
2839
|
onClose: () => void;
|
|
1897
2840
|
title: string;
|
|
@@ -1930,17 +2873,21 @@ declare type Props_29 = {
|
|
|
1930
2873
|
testId?: string;
|
|
1931
2874
|
};
|
|
1932
2875
|
|
|
1933
|
-
declare type
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
2876
|
+
declare type Props_42 = {
|
|
2877
|
+
isOpen: boolean;
|
|
2878
|
+
onClose: () => void;
|
|
2879
|
+
items: CommandItem[];
|
|
2880
|
+
/** Pencerenin erişilebilir adı ("Komut paleti"). ZORUNLU. */
|
|
2881
|
+
label: string;
|
|
2882
|
+
/** Arama kutusunun yer tutucusu ve erişilebilir adı. ZORUNLU. */
|
|
2883
|
+
searchPlaceholder: string;
|
|
2884
|
+
/** Sonuç yokken yazılan metin. ZORUNLU. */
|
|
2885
|
+
emptyMessage: string;
|
|
1940
2886
|
className?: string;
|
|
2887
|
+
testId?: string;
|
|
1941
2888
|
};
|
|
1942
2889
|
|
|
1943
|
-
declare type
|
|
2890
|
+
declare type Props_43 = {
|
|
1944
2891
|
isOpen: boolean;
|
|
1945
2892
|
onClose: () => void;
|
|
1946
2893
|
/**
|
|
@@ -1973,7 +2920,30 @@ declare type Props_30 = {
|
|
|
1973
2920
|
children?: ReactNode;
|
|
1974
2921
|
};
|
|
1975
2922
|
|
|
1976
|
-
declare type
|
|
2923
|
+
declare type Props_44 = {
|
|
2924
|
+
isOpen: boolean;
|
|
2925
|
+
onClose: () => void;
|
|
2926
|
+
title: string;
|
|
2927
|
+
/** Kapatma düğmesinin erişilebilir adı. Verilmezse `labels.close`. */
|
|
2928
|
+
closeLabel?: string;
|
|
2929
|
+
children: ReactNode;
|
|
2930
|
+
/**
|
|
2931
|
+
* Panelin hangi kenardan geldiği. Mantıksal: `end` RTL'de sola açılır.
|
|
2932
|
+
*
|
|
2933
|
+
* <p>Varsayılan `end` — filtre ve ayrıntı panelleri okuma yönünün SONUNDAN
|
|
2934
|
+
* gelir; `start` gezinme panelleri içindir.
|
|
2935
|
+
*/
|
|
2936
|
+
side?: 'start' | 'end';
|
|
2937
|
+
size?: 'sm' | 'md' | 'lg';
|
|
2938
|
+
/** Dipte duran eylem şeridi; gövde kaydırılırken yerinde kalır. */
|
|
2939
|
+
footer?: ReactNode;
|
|
2940
|
+
/** Başlığın altında duran, gövdeyle birlikte kaymayan şerit. */
|
|
2941
|
+
toolbar?: ReactNode;
|
|
2942
|
+
className?: string;
|
|
2943
|
+
testId?: string;
|
|
2944
|
+
};
|
|
2945
|
+
|
|
2946
|
+
declare type Props_45 = BaseProps_3 & {
|
|
1977
2947
|
/** Boş (yalnızca boşluk dahil) değer gönderilemez. */
|
|
1978
2948
|
isRequired?: boolean;
|
|
1979
2949
|
/**
|
|
@@ -1986,7 +2956,7 @@ declare type Props_31 = BaseProps_3 & {
|
|
|
1986
2956
|
requiredLabel?: string;
|
|
1987
2957
|
};
|
|
1988
2958
|
|
|
1989
|
-
declare type
|
|
2959
|
+
declare type Props_46 = TableHTMLAttributes<HTMLTableElement> & Partial<{
|
|
1990
2960
|
/**
|
|
1991
2961
|
* Hücre dolgusu. Tablolar aynı iskeleti paylaşır ama yoğunlukları içeriğe
|
|
1992
2962
|
* göre değişir: yüzlerce satırlık bir liste sıkı, karşılaştırma matrisi
|
|
@@ -2004,7 +2974,7 @@ declare type Props_32 = TableHTMLAttributes<HTMLTableElement> & Partial<{
|
|
|
2004
2974
|
hasRowHover: boolean;
|
|
2005
2975
|
}>;
|
|
2006
2976
|
|
|
2007
|
-
declare type
|
|
2977
|
+
declare type Props_47 = {
|
|
2008
2978
|
columns: DataTableColumn[];
|
|
2009
2979
|
/**
|
|
2010
2980
|
* Gövde satırları (`<tr>`). Ekranların özel hücreleri, bağlantıları ve satır
|
|
@@ -2031,11 +3001,28 @@ declare type Props_33 = {
|
|
|
2031
3001
|
* gidiyordu.
|
|
2032
3002
|
*/
|
|
2033
3003
|
hasViewportCap?: boolean;
|
|
3004
|
+
/**
|
|
3005
|
+
* Sıralanabilir bir başlığa basıldığında çağrılır.
|
|
3006
|
+
*
|
|
3007
|
+
* <p>Sıralamanın KENDİSİ burada yapılmaz: veri çağıranın ve sıralama
|
|
3008
|
+
* neredeyse her zaman sunucuda (sayfalanmış bir listede istemcide sıralamak
|
|
3009
|
+
* yalnızca görünen sayfayı sıralar — kullanıcı "en ucuz" dediğinde en ucuz
|
|
3010
|
+
* 24 ürünü değil, o sayfadaki en ucuzu görüyordu).
|
|
3011
|
+
*/
|
|
3012
|
+
onSort?: (key: string, direction: 'ascending' | 'descending') => void;
|
|
3013
|
+
/**
|
|
3014
|
+
* Satır seçildiğinde beliren TOPLU EYLEM şeridi.
|
|
3015
|
+
*
|
|
3016
|
+
* <p>Tablonun ÜSTÜNDE ve yapışkan: kullanıcı yüzlerce satır arasında
|
|
3017
|
+
* seçim yapıp aşağı kaydırdığında eylem şeridi ekranın dışında kalıyor ve
|
|
3018
|
+
* seçimin ne işe yaradığı görünmüyordu.
|
|
3019
|
+
*/
|
|
3020
|
+
bulkBar?: ReactNode;
|
|
2034
3021
|
className?: string;
|
|
2035
3022
|
testId?: string;
|
|
2036
3023
|
};
|
|
2037
3024
|
|
|
2038
|
-
declare type
|
|
3025
|
+
declare type Props_48 = {
|
|
2039
3026
|
/**
|
|
2040
3027
|
* Filtreler uygulanır. `preventDefault` bileşenin işi; çağıran yalnızca
|
|
2041
3028
|
* durumunu günceller (sayfayı 1'e almak + aramayı uygulamak gibi).
|
|
@@ -2051,11 +3038,29 @@ declare type Props_34 = {
|
|
|
2051
3038
|
testId?: string;
|
|
2052
3039
|
};
|
|
2053
3040
|
|
|
2054
|
-
declare type
|
|
3041
|
+
declare type Props_49 = LinkProps | ButtonProps;
|
|
3042
|
+
|
|
3043
|
+
declare type Props_5 = {
|
|
3044
|
+
/**
|
|
3045
|
+
* Tetikleyici. TEK bir öğe olmak zorunda: bileşen ona `ref`, `onClick` ve
|
|
3046
|
+
* `aria-expanded` ekliyor.
|
|
3047
|
+
*/
|
|
3048
|
+
trigger: ReactElement;
|
|
3049
|
+
children: ReactNode;
|
|
3050
|
+
/** Yüzeyin erişilebilir adı. ZORUNLU — adsız bir bölge "grup" diye okunur. */
|
|
3051
|
+
label: string;
|
|
3052
|
+
side?: PositionSide;
|
|
3053
|
+
align?: PositionAlign;
|
|
3054
|
+
/** Kontrollü kullanım. Verilmezse bileşen durumu kendisi tutar. */
|
|
3055
|
+
isOpen?: boolean;
|
|
3056
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
3057
|
+
className?: string;
|
|
3058
|
+
testId?: string;
|
|
3059
|
+
};
|
|
2055
3060
|
|
|
2056
|
-
declare type
|
|
3061
|
+
declare type Props_6<T extends string> = SingleProps<T> | MultipleProps<T>;
|
|
2057
3062
|
|
|
2058
|
-
declare type
|
|
3063
|
+
declare type Props_7<T extends string> = {
|
|
2059
3064
|
options: ComboboxOption<T>[];
|
|
2060
3065
|
value: T | null;
|
|
2061
3066
|
onChange: (value: T | null) => void;
|
|
@@ -2087,7 +3092,20 @@ declare type Props_5<T extends string> = {
|
|
|
2087
3092
|
testId?: string;
|
|
2088
3093
|
};
|
|
2089
3094
|
|
|
2090
|
-
declare type
|
|
3095
|
+
declare type Props_8<T extends string> = {
|
|
3096
|
+
options: SegmentOption<T>[];
|
|
3097
|
+
value: T;
|
|
3098
|
+
onChange: (value: T) => void;
|
|
3099
|
+
/** Grubun erişilebilir adı ("Görünüm"). ZORUNLU. */
|
|
3100
|
+
label: string;
|
|
3101
|
+
/** Etiketler gizlenir, yalnızca ikon çizilir. `label` yine okunur. */
|
|
3102
|
+
isIconOnly?: boolean;
|
|
3103
|
+
size?: 'sm' | 'md';
|
|
3104
|
+
className?: string;
|
|
3105
|
+
testId?: string;
|
|
3106
|
+
};
|
|
3107
|
+
|
|
3108
|
+
declare type Props_9<T extends string> = {
|
|
2091
3109
|
options: SelectOption<T>[];
|
|
2092
3110
|
value: T;
|
|
2093
3111
|
onChange: (value: T) => void;
|
|
@@ -2123,66 +3141,6 @@ declare type Props_6<T extends string> = {
|
|
|
2123
3141
|
testId?: string;
|
|
2124
3142
|
};
|
|
2125
3143
|
|
|
2126
|
-
declare type Props_7 = {
|
|
2127
|
-
/** Radyo grubu adı — aynı gruptaki kartlar ok tuşlarıyla gezilir. */
|
|
2128
|
-
name: string;
|
|
2129
|
-
value: string;
|
|
2130
|
-
isSelected: boolean;
|
|
2131
|
-
isDisabled?: boolean;
|
|
2132
|
-
onChange: (value: string) => void;
|
|
2133
|
-
/** Zengin gövde: kartın içeriği çağırana aittir. */
|
|
2134
|
-
children: ReactNode;
|
|
2135
|
-
} & CommonElementProps;
|
|
2136
|
-
|
|
2137
|
-
declare type Props_8 = {
|
|
2138
|
-
min: number;
|
|
2139
|
-
max: number;
|
|
2140
|
-
step?: number;
|
|
2141
|
-
value: RangeValue;
|
|
2142
|
-
/** Sürükleme sürerken her adımda çağrılır — ekrandaki değeri günceller. */
|
|
2143
|
-
onChange: (value: RangeValue) => void;
|
|
2144
|
-
/**
|
|
2145
|
-
* Sürükleme <em>bittiğinde</em> çağrılır. Adres çubuğuna yazmak veya
|
|
2146
|
-
* sunucuya istek atmak gibi pahalı işler buraya bağlanır.
|
|
2147
|
-
*/
|
|
2148
|
-
onCommit?: (value: RangeValue) => void;
|
|
2149
|
-
/** Ham sayıyı okunur metne çevirir ("125000" → "1.250 TL"). */
|
|
2150
|
-
formatValue?: (value: number) => string;
|
|
2151
|
-
/** Grubun erişilebilir adı ("Fiyat aralığı"). */
|
|
2152
|
-
label: string;
|
|
2153
|
-
/** Alt kulbun erişilebilir ad eki. Verilmezse `labels.range.min`. */
|
|
2154
|
-
minLabel?: string;
|
|
2155
|
-
/** Üst kulbun erişilebilir ad eki. Verilmezse `labels.range.max`. */
|
|
2156
|
-
maxLabel?: string;
|
|
2157
|
-
isDisabled?: boolean;
|
|
2158
|
-
className?: string;
|
|
2159
|
-
testId?: string;
|
|
2160
|
-
};
|
|
2161
|
-
|
|
2162
|
-
declare type Props_9 = {
|
|
2163
|
-
value: number | null;
|
|
2164
|
-
onChange: (value: number) => void;
|
|
2165
|
-
/** Grubun erişilebilir adı ("Ürün puanı"). */
|
|
2166
|
-
label: string;
|
|
2167
|
-
/**
|
|
2168
|
-
* Puan açıklamaları. Hem ekran okuyucuya okunur hem de seçildiğinde
|
|
2169
|
-
* yıldızların altında yazar. Verilmezse `labels.rating.scale`.
|
|
2170
|
-
*
|
|
2171
|
-
* <p>Dolu yıldız sayısı tek başına bir renk/şekil sinyali. Yanına açıklama
|
|
2172
|
-
* yazmak hem anlamı netleştirir hem de renk körü kullanıcıya ikinci bir ipucu
|
|
2173
|
-
* verir (WCAG 1.4.1).
|
|
2174
|
-
*/
|
|
2175
|
-
ratingLabels?: RatingLabels;
|
|
2176
|
-
/**
|
|
2177
|
-
* Ekran okuyucuda yıldız sayısını okuyan biçimlendirici ("4 yıldız").
|
|
2178
|
-
* Verilmezse `labels.rating.starCount`.
|
|
2179
|
-
*/
|
|
2180
|
-
formatStarCount?: (star: number) => string;
|
|
2181
|
-
isDisabled?: boolean;
|
|
2182
|
-
className?: string;
|
|
2183
|
-
testId?: string;
|
|
2184
|
-
};
|
|
2185
|
-
|
|
2186
3144
|
export declare const QuantityStepper: typeof QuantityStepper_2;
|
|
2187
3145
|
|
|
2188
3146
|
/**
|
|
@@ -2195,7 +3153,7 @@ export declare const QuantityStepper: typeof QuantityStepper_2;
|
|
|
2195
3153
|
* vuruşunda değil: "12" yazarken "1"i anında 1'e sabitlemek kullanıcının
|
|
2196
3154
|
* yazmasını engellerdi.
|
|
2197
3155
|
*/
|
|
2198
|
-
declare const QuantityStepper_2: FC<
|
|
3156
|
+
declare const QuantityStepper_2: FC<Props_13>;
|
|
2199
3157
|
|
|
2200
3158
|
export declare const Radio: typeof Radio_2;
|
|
2201
3159
|
|
|
@@ -2244,7 +3202,26 @@ export declare const RadioCard: typeof RadioCard_2;
|
|
|
2244
3202
|
*
|
|
2245
3203
|
* <p>{@link Radio} yalın satır içindir, gövde taşıyamaz — ikisi karışmaz.
|
|
2246
3204
|
*/
|
|
2247
|
-
declare const RadioCard_2: FC<
|
|
3205
|
+
declare const RadioCard_2: FC<Props_10>;
|
|
3206
|
+
|
|
3207
|
+
declare type RangeProps = {
|
|
3208
|
+
value: DateRangeValue;
|
|
3209
|
+
onChange: (value: DateRangeValue) => void;
|
|
3210
|
+
/** Başlangıç alanının erişilebilir adı ("Başlangıç"). ZORUNLU. */
|
|
3211
|
+
startLabel: string;
|
|
3212
|
+
/** Bitiş alanının erişilebilir adı ("Bitiş"). ZORUNLU. */
|
|
3213
|
+
endLabel: string;
|
|
3214
|
+
/** İki alanın arasındaki ayraç. Varsayılan yarım tire. */
|
|
3215
|
+
separator?: string;
|
|
3216
|
+
/** Ölçeğin uçları; ikisi de yerel öğeye geçer. */
|
|
3217
|
+
min?: string;
|
|
3218
|
+
max?: string;
|
|
3219
|
+
/** Seçilen aralığın okunur özetini gösterir. */
|
|
3220
|
+
isSummaryVisible?: boolean;
|
|
3221
|
+
isDisabled?: boolean;
|
|
3222
|
+
className?: string;
|
|
3223
|
+
testId?: string;
|
|
3224
|
+
};
|
|
2248
3225
|
|
|
2249
3226
|
export declare const RangeSlider: typeof RangeSlider_2;
|
|
2250
3227
|
|
|
@@ -2270,8 +3247,20 @@ export declare const RangeSlider: typeof RangeSlider_2;
|
|
|
2270
3247
|
* Kaydırırken her adımda adres çubuğuna yazmak, tek bir sürüklemede onlarca
|
|
2271
3248
|
* gezinme kaydı bırakıp geri tuşunu kullanılamaz hâle getiriyordu. Ekran anında
|
|
2272
3249
|
* güncellenir (`onChange`), sorgu yalnızca kulp bırakılınca yazılır.
|
|
3250
|
+
*
|
|
3251
|
+
* <h3>Klavye</h3>
|
|
3252
|
+
* <table>
|
|
3253
|
+
* <tr><td>`ArrowRight` / `ArrowUp`</td><td>bir adım artırır</td></tr>
|
|
3254
|
+
* <tr><td>`ArrowLeft` / `ArrowDown`</td><td>bir adım azaltır</td></tr>
|
|
3255
|
+
* <tr><td>`Home` / `End`</td><td>ölçeğin ucuna gider</td></tr>
|
|
3256
|
+
* <tr><td>`PageUp` / `PageDown`</td><td>büyük adım</td></tr>
|
|
3257
|
+
* </table>
|
|
3258
|
+
* Tamamı YEREL öğeden gelir — kütüphane hiçbir tuşu kendisi işlemez. Buraya
|
|
3259
|
+
* ait olan iki şey ayrıca ölçülüyor: kulpların birbirini geçmemesi ve
|
|
3260
|
+
* `onCommit`in tuş bırakıldığında (`keyup`) çalışması. Nöbetçi:
|
|
3261
|
+
* `components/__tests__/keyboard.test.tsx`.
|
|
2273
3262
|
*/
|
|
2274
|
-
declare const RangeSlider_2: ({ min, max, step, value, onChange, onCommit, formatValue, label, minLabel, maxLabel, isDisabled, className, testId, }:
|
|
3263
|
+
declare const RangeSlider_2: ({ min, max, step, value, onChange, onCommit, formatValue, label, minLabel, maxLabel, isDisabled, className, testId, }: Props_11) => JSX.Element;
|
|
2275
3264
|
|
|
2276
3265
|
export declare type RangeValue = [number, number];
|
|
2277
3266
|
|
|
@@ -2286,7 +3275,7 @@ export declare const Rating: typeof Rating_2;
|
|
|
2286
3275
|
*
|
|
2287
3276
|
* <p>Etkileşimli kardeşi {@link RatingInput}.
|
|
2288
3277
|
*/
|
|
2289
|
-
declare const Rating_2: FC<
|
|
3278
|
+
declare const Rating_2: FC<Props_28>;
|
|
2290
3279
|
|
|
2291
3280
|
export declare const RatingInput: typeof RatingInput_2;
|
|
2292
3281
|
|
|
@@ -2303,8 +3292,19 @@ export declare const RatingInput: typeof RatingInput_2;
|
|
|
2303
3292
|
* <p>{@link Rating} genişletilemez: o `<span>` üretiyor ve açıkça
|
|
2304
3293
|
* salt-gösterim. İkisini tek bileşende toplamak, gösterim tarafına hiç
|
|
2305
3294
|
* kullanılmayan etkileşim kodu taşımak olurdu.
|
|
3295
|
+
*
|
|
3296
|
+
* <h3>Klavye (APG: radio group — tamamı YEREL)</h3>
|
|
3297
|
+
* <table>
|
|
3298
|
+
* <tr><td>`ArrowRight` / `ArrowDown`</td><td>bir sonraki yıldız</td></tr>
|
|
3299
|
+
* <tr><td>`ArrowLeft` / `ArrowUp`</td><td>bir önceki yıldız</td></tr>
|
|
3300
|
+
* <tr><td>`Tab`</td><td>grubu TEK durak olarak geçer</td></tr>
|
|
3301
|
+
* </table>
|
|
3302
|
+
* Kütüphane hiçbir tuşu işlemiyor; nöbetçi bu yüzden tuşları değil DEVRİ
|
|
3303
|
+
* ölçüyor — beş gerçek radyo, tek grup adı, okunabilir adlar
|
|
3304
|
+
* (`components/__tests__/keyboard.test.tsx`). Yıldızlar `<span>`e dönerse
|
|
3305
|
+
* test kırılır.
|
|
2306
3306
|
*/
|
|
2307
|
-
declare const RatingInput_2: ({ value, onChange, label, ratingLabels, formatStarCount, isDisabled, className, testId, }:
|
|
3307
|
+
declare const RatingInput_2: ({ value, onChange, label, ratingLabels, formatStarCount, isDisabled, className, testId, }: Props_12) => JSX.Element;
|
|
2308
3308
|
|
|
2309
3309
|
/** Beş puanın her birinin ne anlama geldiği. */
|
|
2310
3310
|
export declare type RatingLabels = Record<1 | 2 | 3 | 4 | 5, string>;
|
|
@@ -2326,6 +3326,37 @@ declare type RowProps = HTMLAttributes<HTMLTableRowElement> & {
|
|
|
2326
3326
|
isWarning?: boolean;
|
|
2327
3327
|
};
|
|
2328
3328
|
|
|
3329
|
+
export declare const ScrollArea: typeof ScrollArea_2;
|
|
3330
|
+
|
|
3331
|
+
/**
|
|
3332
|
+
* Kaydırma kutusu — <strong>klavyeyle erişilebilir</strong> kaydırma bölgesi.
|
|
3333
|
+
*
|
|
3334
|
+
* <h3>Neden bir bileşen: `overflow: auto` TEK BAŞINA yetmiyor</h3>
|
|
3335
|
+
* Kaydırılabilir bir bölge klavyeyle ulaşılabilir olmak zorunda (WCAG 2.1.1).
|
|
3336
|
+
* İçinde odaklanabilir öğe olmayan bir kutu — uzun bir metin, bir tablo, bir
|
|
3337
|
+
* kod bloğu — `tabindex` verilmediğinde klavye kullanıcısı için
|
|
3338
|
+
* <strong>ulaşılamaz</strong>: `Tab` onu atlıyor ve ok tuşları sayfayı
|
|
3339
|
+
* kaydırıyor, kutuyu değil. Firefox bunu kendiliğinden yapıyor, Chrome ve
|
|
3340
|
+
* Safari yapmıyor.
|
|
3341
|
+
*
|
|
3342
|
+
* <p>Ama `tabindex="0"` KOŞULSUZ verilemez: içerik sığdığında kutu
|
|
3343
|
+
* kaydırılamaz olur ve gereksiz bir `Tab` durağına dönüşür. Bileşen taşmayı
|
|
3344
|
+
* ÖLÇÜYOR ve `tabindex`i yalnızca gerçekten kaydırılabilirken yazıyor.
|
|
3345
|
+
*
|
|
3346
|
+
* <h3>Kaydırma çubuğu temalı</h3>
|
|
3347
|
+
* İşletim sisteminin açık çubuğu koyu temada kutunun kenarında parlak bir
|
|
3348
|
+
* şerit bırakıyordu.
|
|
3349
|
+
*
|
|
3350
|
+
* <h3>Klavye</h3>
|
|
3351
|
+
* <table>
|
|
3352
|
+
* <tr><td>`Tab`</td><td>kaydırılabilir bölgeye odaklanır (yalnızca taşma varsa)</td></tr>
|
|
3353
|
+
* <tr><td>ok tuşları · `PageUp`/`PageDown` · `Home`/`End`</td><td>kaydırır</td></tr>
|
|
3354
|
+
* </table>
|
|
3355
|
+
* Tuşların hepsi TARAYICIDAN geliyor; bileşenin işi yalnızca bölgeyi
|
|
3356
|
+
* odaklanabilir kılmak.
|
|
3357
|
+
*/
|
|
3358
|
+
declare const ScrollArea_2: FC<Props_30>;
|
|
3359
|
+
|
|
2329
3360
|
declare type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
|
|
2330
3361
|
/**
|
|
2331
3362
|
* Çerçeve (hairline + yarıçap + yüzey). Gömülü tablolarda kapatılır: orada
|
|
@@ -2345,7 +3376,52 @@ export declare const SectionHeader: typeof SectionHeader_2;
|
|
|
2345
3376
|
* İkisini birbirine bağlamak, doğru görünüm için yanlış başlık düzeyi seçmeye
|
|
2346
3377
|
* zorlardı.
|
|
2347
3378
|
*/
|
|
2348
|
-
declare const SectionHeader_2: FC<
|
|
3379
|
+
declare const SectionHeader_2: FC<Props_29>;
|
|
3380
|
+
|
|
3381
|
+
export declare const SegmentedControl: typeof SegmentedControl_2;
|
|
3382
|
+
|
|
3383
|
+
/**
|
|
3384
|
+
* Bölmeli denetim — <strong>görünüm</strong> değiştirme.
|
|
3385
|
+
*
|
|
3386
|
+
* <h3>{@link ChipGroup} ile farkı: filtre mi görünüm mü</h3>
|
|
3387
|
+
* İkisi de `radiogroup` ve ikisi de tek seçim; ayrım seçilen şeyin ne
|
|
3388
|
+
* olduğunda:
|
|
3389
|
+
*
|
|
3390
|
+
* <ul>
|
|
3391
|
+
* <li>`ChipGroup` bir FİLTRE. Seçim listeyi daraltıyor, seçenek sayısı
|
|
3392
|
+
* değişken ve "hiçbiri" geçerli bir durum — çipe ikinci kez basmak
|
|
3393
|
+
* seçimi kaldırıyor.</li>
|
|
3394
|
+
* <li><b>`SegmentedControl` bir GÖRÜNÜM anahtarı.</b> Liste/ızgara,
|
|
3395
|
+
* aylık/yıllık, gelen/giden. Seçenek sayısı 2-4 ve SABİT; <strong>seçili
|
|
3396
|
+
* durum her zaman tektir</strong> — "hiçbiri" diye bir hâl yok, çünkü
|
|
3397
|
+
* ekranda bir şey çizilmek zorunda.</li>
|
|
3398
|
+
* </ul>
|
|
3399
|
+
*
|
|
3400
|
+
* <p>Bu yüzden seçili öğeye ikinci kez basmak hiçbir şey yapmaz; `ChipGroup`ta
|
|
3401
|
+
* aynı hareket seçimi kaldırıyor. Aynı bileşeni iki iş için kullanmak, bu
|
|
3402
|
+
* davranış farkını kaybetmek olurdu.
|
|
3403
|
+
*
|
|
3404
|
+
* <h3>Neden `Tabs` değil</h3>
|
|
3405
|
+
* `Tabs` bir PANEL değiştirir ve `aria-controls` ile ona bağlanır; bölmeli
|
|
3406
|
+
* denetim aynı içeriğin başka bir SUNUMUNU seçiyor — gösterilen veri aynı.
|
|
3407
|
+
* Sekme olarak sunmak ekran okuyucuya var olmayan bir panel vaat ediyordu.
|
|
3408
|
+
*
|
|
3409
|
+
* <h3>Klavye (APG: radio group)</h3>
|
|
3410
|
+
* <table>
|
|
3411
|
+
* <tr><td>`ArrowRight` / `ArrowDown`</td><td>sonraki seçenek; uçlarda DÖNER</td></tr>
|
|
3412
|
+
* <tr><td>`ArrowLeft` / `ArrowUp`</td><td>önceki seçenek</td></tr>
|
|
3413
|
+
* <tr><td>`Tab`</td><td>grubu TEK durak olarak geçer (dönen `tabindex`)</td></tr>
|
|
3414
|
+
* </table>
|
|
3415
|
+
*/
|
|
3416
|
+
declare const SegmentedControl_2: <T extends string>({ options, value, onChange, label, isIconOnly, size, className, testId, }: Props_8<T>) => JSX.Element;
|
|
3417
|
+
|
|
3418
|
+
export declare type SegmentOption<T extends string = string> = {
|
|
3419
|
+
value: T;
|
|
3420
|
+
label: string;
|
|
3421
|
+
/** Yalnızca ikon gösterilecekse `label` erişilebilir ad olarak kalır. */
|
|
3422
|
+
icon?: ReactNode;
|
|
3423
|
+
isDisabled?: boolean;
|
|
3424
|
+
};
|
|
2349
3425
|
|
|
2350
3426
|
export declare const Select: typeof Select_2;
|
|
2351
3427
|
|
|
@@ -2370,11 +3446,22 @@ export declare const Select: typeof Select_2;
|
|
|
2370
3446
|
* Seçenekleri tek tek odaklanabilir yapmak, aynı bileşende iki ayrı klavye
|
|
2371
3447
|
* modeli demekti (APG: listbox + activedescendant).
|
|
2372
3448
|
*
|
|
3449
|
+
* <table>
|
|
3450
|
+
* <tr><td>`ArrowDown`/`ArrowUp`/`Enter`/`Space` (kapalıyken)</td><td>paneli açar</td></tr>
|
|
3451
|
+
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin seçenek bir alt/üst; uçlarda DÖNER</td></tr>
|
|
3452
|
+
* <tr><td>`Home` / `End`</td><td>ilk / son seçenek</td></tr>
|
|
3453
|
+
* <tr><td>`Enter` / `Space`</td><td>etkin seçeneği seçer</td></tr>
|
|
3454
|
+
* <tr><td>`Escape`</td><td>seçim yapmadan kapatır, odak tetikleyicide</td></tr>
|
|
3455
|
+
* <tr><td>`Tab`</td><td>kapatır, gezinme sürer</td></tr>
|
|
3456
|
+
* </table>
|
|
3457
|
+
* Etkin seçenek açılışta SEÇİLİ olandan başlar. Nöbetçi:
|
|
3458
|
+
* `components/__tests__/keyboard.test.tsx`.
|
|
3459
|
+
*
|
|
2373
3460
|
* <h3>20+ seçenek varsa bu bileşen DEĞİL</h3>
|
|
2374
3461
|
* Aramasız bir liste 20 satırdan sonra taranamaz hâle gelir; orada
|
|
2375
3462
|
* {@link Combobox} kullanılır.
|
|
2376
3463
|
*/
|
|
2377
|
-
declare const Select_2: <T extends string>({ options, value, onChange, label, placeholder, closeLabel, icon, size, align, isDisabled, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }:
|
|
3464
|
+
declare const Select_2: <T extends string>({ options, value, onChange, label, placeholder, closeLabel, icon, size, align, isDisabled, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props_9<T>) => JSX.Element;
|
|
2378
3465
|
|
|
2379
3466
|
export declare type SelectOption<T extends string = string> = {
|
|
2380
3467
|
value: T;
|
|
@@ -2382,6 +3469,12 @@ export declare type SelectOption<T extends string = string> = {
|
|
|
2382
3469
|
isDisabled?: boolean;
|
|
2383
3470
|
};
|
|
2384
3471
|
|
|
3472
|
+
declare type ShapeProps = {
|
|
3473
|
+
/** Kaç kopya çizilecek — bir listenin bilinen satır sayısı. */
|
|
3474
|
+
count?: number;
|
|
3475
|
+
className?: string;
|
|
3476
|
+
};
|
|
3477
|
+
|
|
2385
3478
|
declare type SingleProps<T extends string> = BaseProps<T> & {
|
|
2386
3479
|
isMultiple?: false;
|
|
2387
3480
|
value: T | null;
|
|
@@ -2402,7 +3495,15 @@ export declare const Skeleton: typeof Skeleton_2;
|
|
|
2402
3495
|
* <p>`aria-hidden`: ekran okuyucuya "yükleniyor" bilgisini veren, iskeletin
|
|
2403
3496
|
* kendisi değil onu saran bölgenin `aria-busy` özelliğidir.
|
|
2404
3497
|
*/
|
|
2405
|
-
declare const Skeleton_2: FC<
|
|
3498
|
+
declare const Skeleton_2: FC<Props_31>;
|
|
3499
|
+
|
|
3500
|
+
export declare const SkeletonCard: NamedExoticComponent<ShapeProps>;
|
|
3501
|
+
|
|
3502
|
+
export declare const SkeletonRows: NamedExoticComponent<ShapeProps>;
|
|
3503
|
+
|
|
3504
|
+
export declare const SkeletonTable: NamedExoticComponent<ShapeProps & {
|
|
3505
|
+
columns?: number;
|
|
3506
|
+
}>;
|
|
2406
3507
|
|
|
2407
3508
|
export declare const Spinner: typeof Spinner_2;
|
|
2408
3509
|
|
|
@@ -2413,7 +3514,137 @@ export declare const Spinner: typeof Spinner_2;
|
|
|
2413
3514
|
* bilinmeyen</em> bir bekleme için — düğme içi işlem veya belirsiz süreli bir
|
|
2414
3515
|
* sorgu gibi.
|
|
2415
3516
|
*/
|
|
2416
|
-
declare const Spinner_2: FC<
|
|
3517
|
+
declare const Spinner_2: FC<Props_34>;
|
|
3518
|
+
|
|
3519
|
+
export declare const Stat: typeof Stat_2;
|
|
3520
|
+
|
|
3521
|
+
/**
|
|
3522
|
+
* Ölçüm kutusu (KPI).
|
|
3523
|
+
*
|
|
3524
|
+
* <h3>Bileşen HESAP YAPMAZ</h3>
|
|
3525
|
+
* `value` ve `delta` biçimlendirilmiş dizeler. Yüzde hesabı, para birimi ve
|
|
3526
|
+
* yuvarlama çağıranın: bir gösterge panelinde "%12,5" ile "%13" arasındaki
|
|
3527
|
+
* farkı belirleyen şey ürün kararı, bileşenin varsayılanı değil. Aynı sebeple
|
|
3528
|
+
* `Price` de hesap yapmıyor.
|
|
3529
|
+
*
|
|
3530
|
+
* <h3>Yön TEK BAŞINA iyi/kötü demek DEĞİL</h3>
|
|
3531
|
+
* "İade oranı %12 arttı" kötü haber, "ciro %12 arttı" iyi. Yükselen her oku
|
|
3532
|
+
* yeşile boyamak, kötüleşen bir ölçüyü iyi gibi gösteriyordu — `isUpPositive`
|
|
3533
|
+
* bu kararı çağırana bırakıyor.
|
|
3534
|
+
*
|
|
3535
|
+
* <h3>Renk tek sinyal değil</h3>
|
|
3536
|
+
* Değişim üç şeyle birden anlatılıyor: <strong>ok yönü</strong> (biçim),
|
|
3537
|
+
* <strong>renk</strong> ve ekran okuyucuya okunan <strong>metin</strong>
|
|
3538
|
+
* ("artış" / "azalış" / "değişim yok"). Yalnızca renk kullanılsaydı renk körü
|
|
3539
|
+
* bir kullanıcı için artışla azalış aynı görünüyordu (WCAG 1.4.1).
|
|
3540
|
+
*
|
|
3541
|
+
* <h3>Rakamlar TABULAR</h3>
|
|
3542
|
+
* Alt alta duran ölçüm kutularında orantılı rakamlar sütunu tırtıklı
|
|
3543
|
+
* gösteriyor; `tabular-nums` her basamağı aynı genişlikte çiziyor.
|
|
3544
|
+
*/
|
|
3545
|
+
declare const Stat_2: FC<Props_32>;
|
|
3546
|
+
|
|
3547
|
+
/** Değişimin yönü. `flat` "değişmedi" — yokluk DEĞİL. */
|
|
3548
|
+
export declare type StatTrend = 'up' | 'down' | 'flat';
|
|
3549
|
+
|
|
3550
|
+
export declare type StepItem = {
|
|
3551
|
+
id: string;
|
|
3552
|
+
label: string;
|
|
3553
|
+
/** Etiketin altındaki bir cümlelik açıklama. */
|
|
3554
|
+
description?: ReactNode;
|
|
3555
|
+
};
|
|
3556
|
+
|
|
3557
|
+
export declare const Steps: typeof Steps_2;
|
|
3558
|
+
|
|
3559
|
+
/**
|
|
3560
|
+
* Adım göstergesi (stepper) — çok adımlı akışta NEREDE olunduğu.
|
|
3561
|
+
*
|
|
3562
|
+
* <h3>Üç durum, ÜÇ AYRI işaret</h3>
|
|
3563
|
+
* Tamamlanan adım <strong>tik</strong>, bulunulan adım <strong>dolu
|
|
3564
|
+
* madalyon + sıra numarası</strong>, sıradaki adım <strong>boş
|
|
3565
|
+
* madalyon</strong> taşıyor. Renk bunlara EŞLİK ediyor, tek başına
|
|
3566
|
+
* anlatmıyor (WCAG 1.4.1): üçünü yalnızca renkle ayırmak, renk körü bir
|
|
3567
|
+
* kullanıcı için "üç aynı daire" demekti.
|
|
3568
|
+
*
|
|
3569
|
+
* <p>Durum ayrıca METİN olarak okunuyor — her adımın erişilebilir adına
|
|
3570
|
+
* "tamamlandı" / "şu anki adım" / "sıradaki" ekleniyor. Görsel işaret ekran
|
|
3571
|
+
* okuyucuya geçmiyor; `aria-current` tek başına yalnızca BULUNULAN adımı
|
|
3572
|
+
* söylüyor, tamamlananları değil.
|
|
3573
|
+
*
|
|
3574
|
+
* <h3>Geri dönülebilirlik AÇIKÇA bildirilir</h3>
|
|
3575
|
+
* `onStepClick` verilmediğinde adımlar `<button>` bile değil: tıklanabilir
|
|
3576
|
+
* görünüp hiçbir şey yapmayan bir adım, kullanıcıya var olmayan bir yol vaat
|
|
3577
|
+
* ediyordu. Verildiğinde yalnızca TAMAMLANMIŞ adımlar tıklanabilir — ileri
|
|
3578
|
+
* atlamak, atlanan adımın verisini toplamadan devam etmek demek.
|
|
3579
|
+
*
|
|
3580
|
+
* <h3>Klavye</h3>
|
|
3581
|
+
* <table>
|
|
3582
|
+
* <tr><td>`Tab`</td><td>tıklanabilir adımlar arasında gezinir</td></tr>
|
|
3583
|
+
* <tr><td>`Enter` / `Space`</td><td>adıma döner</td></tr>
|
|
3584
|
+
* </table>
|
|
3585
|
+
* Ok tuşu YOK: adımlar bir seçim listesi değil, her biri bağımsız bir
|
|
3586
|
+
* gezinme bağlantısı.
|
|
3587
|
+
*/
|
|
3588
|
+
declare const Steps_2: FC<Props_36>;
|
|
3589
|
+
|
|
3590
|
+
export declare const Switch: typeof Switch_2;
|
|
3591
|
+
|
|
3592
|
+
/**
|
|
3593
|
+
* Anahtar (switch) — <strong>anında</strong> uygulanan aç/kapa.
|
|
3594
|
+
*
|
|
3595
|
+
* <h3>`Checkbox` ile farkı: NE ZAMAN etkili olduğu</h3>
|
|
3596
|
+
* İkisi de iki durumlu ve ikisi de yerel `<input type="checkbox">` üzerine
|
|
3597
|
+
* kurulu; ayrım görünüşte değil ZAMANLAMADA:
|
|
3598
|
+
*
|
|
3599
|
+
* <ul>
|
|
3600
|
+
* <li>{@link Checkbox} bir formda <strong>gönderilecek</strong> seçimdir.
|
|
3601
|
+
* "Sözleşmeyi okudum" işaretlendiğinde hiçbir şey olmaz; karar
|
|
3602
|
+
* "Kaydet"e basıldığında geçerli olur. Geri almak için işareti kaldırıp
|
|
3603
|
+
* yeniden göndermek gerekir.</li>
|
|
3604
|
+
* <li><b>`Switch` ANINDA uygulanır.</b> "Kampanya bildirimleri" açıldığı
|
|
3605
|
+
* anda sunucuya gider. Kaydet düğmesi yoktur, olmamalıdır da —
|
|
3606
|
+
* kullanıcı anahtarı çevirdikten sonra bir düğme aramak zorunda
|
|
3607
|
+
* kalıyordu.</li>
|
|
3608
|
+
* </ul>
|
|
3609
|
+
*
|
|
3610
|
+
* <p>Ayrım keyfi değil ekran okuyucuda DUYULUYOR: `role="switch"` "açık/kapalı"
|
|
3611
|
+
* diye okunur, onay kutusu "işaretli/işaretsiz" diye. İkisi kullanıcıya farklı
|
|
3612
|
+
* bir söz veriyor.
|
|
3613
|
+
*
|
|
3614
|
+
* <h3>Yerel öğe korunur</h3>
|
|
3615
|
+
* `<input type="checkbox" role="switch">` — `Space` ile değiştirme, `Tab`
|
|
3616
|
+
* sırası, form gönderimine katılma ve `:disabled` semantiği tarayıcıdan gelir.
|
|
3617
|
+
* `<div role="switch" tabindex="0">` yazmak bunların hepsini elle yeniden
|
|
3618
|
+
* kurmak demekti.
|
|
3619
|
+
*
|
|
3620
|
+
* <h3>Durum RENKLE ANLATILMAZ</h3>
|
|
3621
|
+
* Açık ve kapalı hâl arasındaki fark yalnızca zemin rengi olsaydı renk körü
|
|
3622
|
+
* bir kullanıcı için iki durum aynı görünürdü (WCAG 1.4.1). Kulp KONUM
|
|
3623
|
+
* değiştiriyor — bu bir biçim farkı — ve zorlanmış renk kipinde çerçeve +
|
|
3624
|
+
* konum tek başına yeterli kalıyor.
|
|
3625
|
+
*
|
|
3626
|
+
* <h3>Klavye</h3>
|
|
3627
|
+
* <table>
|
|
3628
|
+
* <tr><td>`Space`</td><td>durumu değiştirir</td></tr>
|
|
3629
|
+
* </table>
|
|
3630
|
+
*
|
|
3631
|
+
* @example
|
|
3632
|
+
* <Switch
|
|
3633
|
+
* label="Kampanya bildirimleri"
|
|
3634
|
+
* hint="E-posta ile ayda en fazla iki ileti"
|
|
3635
|
+
* checked={isSubscribed}
|
|
3636
|
+
* onChange={event => subscribe(event.target.checked)}
|
|
3637
|
+
* />
|
|
3638
|
+
*/
|
|
3639
|
+
declare const Switch_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "role" | "type"> & {
|
|
3640
|
+
/** Anahtarın görünür etiketi. */
|
|
3641
|
+
label: ReactNode;
|
|
3642
|
+
/** Etiketin altındaki açıklama; `aria-describedby` ile bağlanır. */
|
|
3643
|
+
hint?: string;
|
|
3644
|
+
/** Etiket anahtarın SOLUNDA durur — ayar listelerinin yaygın düzeni. */
|
|
3645
|
+
isLabelFirst?: boolean;
|
|
3646
|
+
testId?: string;
|
|
3647
|
+
} & RefAttributes<HTMLInputElement>>;
|
|
2417
3648
|
|
|
2418
3649
|
export declare type TabItem = {
|
|
2419
3650
|
id: string;
|
|
@@ -2443,7 +3674,7 @@ export declare const Table: typeof Table_2;
|
|
|
2443
3674
|
* <p>Operasyon ekranlarının durum satırlı (yükleniyor/hata/boş) sürümü için
|
|
2444
3675
|
* {@link DataTable}.
|
|
2445
3676
|
*/
|
|
2446
|
-
declare const Table_2: FC<
|
|
3677
|
+
declare const Table_2: FC<Props_46>;
|
|
2447
3678
|
|
|
2448
3679
|
export declare const TableCheckbox: typeof TableCheckbox_2;
|
|
2449
3680
|
|
|
@@ -2458,6 +3689,13 @@ export declare const TableCheckbox: typeof TableCheckbox_2;
|
|
|
2458
3689
|
*
|
|
2459
3690
|
* <p>Renk `Checkbox` ile aynı kaynaktan: `accent-color` mavi — onay kutusu bir
|
|
2460
3691
|
* seçimdir, bir dönüşüm değil.
|
|
3692
|
+
*
|
|
3693
|
+
* <h3>Klavye</h3>
|
|
3694
|
+
* <table>
|
|
3695
|
+
* <tr><td>`Space`</td><td>seçimi değiştirir</td></tr>
|
|
3696
|
+
* </table>
|
|
3697
|
+
* Yerel öğe: `Space`, `indeterminate` durumu ve form gönderimine katılma
|
|
3698
|
+
* platformdan gelir. Nöbetçi: `components/__tests__/keyboard.test.tsx`.
|
|
2461
3699
|
*/
|
|
2462
3700
|
declare const TableCheckbox_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-label"> & {
|
|
2463
3701
|
/**
|
|
@@ -2507,8 +3745,51 @@ export declare const Tabs: typeof Tabs_2;
|
|
|
2507
3745
|
* <li><b>Kontrollü + panelsiz</b> — `activeId` + `onChange` verilir,
|
|
2508
3746
|
* `content` verilmez; bileşen yalnızca çubuğu çizer.</li>
|
|
2509
3747
|
* </ul>
|
|
3748
|
+
*
|
|
3749
|
+
* <h3>Klavye (APG: tabs, OTOMATİK etkinleştirme)</h3>
|
|
3750
|
+
* <table>
|
|
3751
|
+
* <tr><td>`ArrowRight` / `ArrowLeft`</td><td>sonraki / önceki sekme; uçlarda DÖNER</td></tr>
|
|
3752
|
+
* <tr><td>`Tab`</td><td>çubuktan panele çıkar — çubuk TEK durak</td></tr>
|
|
3753
|
+
* </table>
|
|
3754
|
+
* Ok tuşu odakla birlikte seçimi de taşır (otomatik etkinleştirme). Panel
|
|
3755
|
+
* içeriği hazır ve ucuz olduğu sürece APG'nin önerdiği budur; pahalı panelli
|
|
3756
|
+
* bir kullanım manuel etkinleştirme ister ve o seçenek HENÜZ YOK. Nöbetçi:
|
|
3757
|
+
* `components/__tests__/keyboard.test.tsx`.
|
|
2510
3758
|
*/
|
|
2511
|
-
declare const Tabs_2: FC<
|
|
3759
|
+
declare const Tabs_2: FC<Props_37>;
|
|
3760
|
+
|
|
3761
|
+
export declare const TagInput: typeof TagInput_2;
|
|
3762
|
+
|
|
3763
|
+
/**
|
|
3764
|
+
* Etiket girdisi — yazılan metni kaldırılabilir çiplere çevirir.
|
|
3765
|
+
*
|
|
3766
|
+
* <h3>Yerel `<input>` KORUNUR</h3>
|
|
3767
|
+
* Yazma, panodan yapıştırma, mobil klavye ve `Tab` sırası tarayıcıdan geliyor.
|
|
3768
|
+
* Çipler girdinin İÇİNDE görünüyor ama DOM'da kardeşi: `<input>` çocuk
|
|
3769
|
+
* alamıyor ve çipleri içine koymanın tek yolu girdiyi taklit etmekti.
|
|
3770
|
+
*
|
|
3771
|
+
* <h3>Neden {@link Combobox} değil</h3>
|
|
3772
|
+
* `Combobox` BİLİNEN bir listeden seçtiriyor; burada değer serbest — kullanıcı
|
|
3773
|
+
* listede olmayan bir şey yazıyor (arama terimi, OEM kodu, e-posta). Seçilecek
|
|
3774
|
+
* bir liste varsa `Combobox` doğrusu.
|
|
3775
|
+
*
|
|
3776
|
+
* <h3>Yinelenen değer sessizce YUTULMAZ</h3>
|
|
3777
|
+
* Aynı etiket ikinci kez yazıldığında eklenmiyor ama girdi de temizleniyor;
|
|
3778
|
+
* kullanıcı "yazdım, kayboldu" diyordu. Artık var olan çip bir kare
|
|
3779
|
+
* vurgulanıyor ve ekran okuyucuya "zaten ekli" duyuruluyor.
|
|
3780
|
+
*
|
|
3781
|
+
* <h3>Klavye</h3>
|
|
3782
|
+
* <table>
|
|
3783
|
+
* <tr><td>`Enter` / `,`</td><td>yazılanı etikete çevirir</td></tr>
|
|
3784
|
+
* <tr><td>`Backspace` (girdi BOŞken)</td><td>SON etiketi kaldırır</td></tr>
|
|
3785
|
+
* <tr><td>`Tab`</td><td>girdiden çıkar — yazılan metin de etikete DÖNER</td></tr>
|
|
3786
|
+
* <tr><td>çipin çarpısı</td><td>o etiketi kaldırır</td></tr>
|
|
3787
|
+
* </table>
|
|
3788
|
+
* `Tab`ta yazılanın etikete dönmesi bilinçli: yarım kalmış bir metin alanı
|
|
3789
|
+
* terk edildiğinde kayboluyordu ve kullanıcı bunu ancak gönderdikten sonra
|
|
3790
|
+
* fark ediyordu.
|
|
3791
|
+
*/
|
|
3792
|
+
declare const TagInput_2: ({ values, onChange, label, placeholder, removeLabel, separators, maxTags, isDisabled, id, className, testId, "aria-describedby": describedBy, "aria-invalid": isInvalid, }: Props_14) => JSX.Element;
|
|
2512
3793
|
|
|
2513
3794
|
export declare const Textarea: typeof Textarea_2;
|
|
2514
3795
|
|
|
@@ -2548,8 +3829,20 @@ export declare const TextLink: typeof TextLink_2;
|
|
|
2548
3829
|
declare const TextLink_2: ({ href, children, hasArrow, tone, size, className, linkProps, ...rest }: Props_2) => JSX.Element;
|
|
2549
3830
|
|
|
2550
3831
|
declare type ThemeState = {
|
|
3832
|
+
/**
|
|
3833
|
+
* ÇÖZÜLMÜŞ tema — ekranda çizili olan. `preference` `system` iken bu alan
|
|
3834
|
+
* işletim sisteminin o anki tercihini taşır.
|
|
3835
|
+
*/
|
|
2551
3836
|
scheme: HanuiColorScheme;
|
|
2552
|
-
|
|
3837
|
+
/**
|
|
3838
|
+
* Kullanıcının SEÇİMİ. Üç durumlu bir tema anahtarı (Açık / Koyu / Sistem)
|
|
3839
|
+
* bunu okur; `scheme` okunsaydı "Sistem" seçiliyken düğme "Koyu"yu işaretli
|
|
3840
|
+
* gösterirdi.
|
|
3841
|
+
*/
|
|
3842
|
+
preference: HanuiColorPreference;
|
|
3843
|
+
/** `'system'` verildiğinde AÇIK seçim silinir ve sistem tercihi izlenir. */
|
|
3844
|
+
setScheme: (preference: HanuiColorPreference) => void;
|
|
3845
|
+
/** Açık ↔ koyu. `system` iken ÇÖZÜLMÜŞ değerin tersine geçer. */
|
|
2553
3846
|
toggle: () => void;
|
|
2554
3847
|
/**
|
|
2555
3848
|
* Sunucu çıktısında ve hidrasyondan önceki ilk karede `false`.
|
|
@@ -2582,7 +3875,113 @@ export declare const Tile: typeof Tile_2;
|
|
|
2582
3875
|
* "1.248 ürün" cümlesi hem sayı biçimine hem dile bağlı. Bileşen içinde
|
|
2583
3876
|
* `toLocaleString` çağırmak, o kararı kütüphanenin varsayımına bağlıyordu.
|
|
2584
3877
|
*/
|
|
2585
|
-
declare const Tile_2: ({ label, icon, href, meta, isActive, linkProps, className, testId }:
|
|
3878
|
+
declare const Tile_2: ({ label, icon, href, meta, isActive, linkProps, className, testId }: Props_38) => JSX.Element;
|
|
3879
|
+
|
|
3880
|
+
export declare const Timeline: typeof Timeline_2;
|
|
3881
|
+
|
|
3882
|
+
/**
|
|
3883
|
+
* Zaman çizelgesi — sipariş durumu, işlem geçmişi.
|
|
3884
|
+
*
|
|
3885
|
+
* <h3>{@link Steps} ile farkı: ileri mi geri mi bakıyor</h3>
|
|
3886
|
+
* İkisi de sıralı ve durumlu; ayrım yönlerinde:
|
|
3887
|
+
*
|
|
3888
|
+
* <ul>
|
|
3889
|
+
* <li>`Steps` İLERİ bakar: kullanıcı bir akışın içinde ve kalan adımları
|
|
3890
|
+
* görüyor. Adım sayısı sabit, adımlara dönülebilir.</li>
|
|
3891
|
+
* <li><b>`Timeline` GERİ bakar:</b> olmuş şeylerin kaydı. Olay sayısı
|
|
3892
|
+
* değişken, hiçbiri tıklanabilir değil ve <strong>başarısız</strong>
|
|
3893
|
+
* diye bir durum var — bir adım "başarısız" olamaz, akış orada durur;
|
|
3894
|
+
* bir olay olabilir ve kayıtta kalır.</li>
|
|
3895
|
+
* </ul>
|
|
3896
|
+
*
|
|
3897
|
+
* <h3>Zaman biçimlendirmesi ÇAĞIRANIN</h3>
|
|
3898
|
+
* `time` biçimlendirilmiş bir dize. Kütüphane `Intl` çağırsaydı yerel ayarı
|
|
3899
|
+
* ve "3 saat önce" mi "14:32" mi yazılacağını kendisi seçmiş olurdu — ikisi
|
|
3900
|
+
* de bağlama bağlı kararlar.
|
|
3901
|
+
*
|
|
3902
|
+
* <h3>Durum renkle DEĞİL, üç şeyle birden</h3>
|
|
3903
|
+
* İşaretin <strong>biçimi</strong> (dolu / halka / tik / çarpı), rengi ve
|
|
3904
|
+
* ekran okuyucuya okunan <strong>metni</strong>. Yalnızca renk kullanılsaydı
|
|
3905
|
+
* "tamamlandı" ile "başarısız" renk körü bir kullanıcı için aynı daireydi.
|
|
3906
|
+
*/
|
|
3907
|
+
declare const Timeline_2: FC<Props_39>;
|
|
3908
|
+
|
|
3909
|
+
export declare type TimelineEvent = {
|
|
3910
|
+
id: string;
|
|
3911
|
+
title: string;
|
|
3912
|
+
/** Zaman damgası — BİÇİMLENDİRİLMİŞ dize. Bileşen tarih biçimlendirmez. */
|
|
3913
|
+
time?: string;
|
|
3914
|
+
description?: ReactNode;
|
|
3915
|
+
status?: TimelineStatus;
|
|
3916
|
+
/** Varsayılan işaretin yerine geçen ikon. */
|
|
3917
|
+
icon?: ReactNode;
|
|
3918
|
+
};
|
|
3919
|
+
|
|
3920
|
+
/** Bir olayın durumu. `pending` HENÜZ olmadı — başarısız değil. */
|
|
3921
|
+
export declare type TimelineStatus = 'done' | 'current' | 'pending' | 'failed';
|
|
3922
|
+
|
|
3923
|
+
/**
|
|
3924
|
+
* BİLDİRİM SÖZLEŞMESİ — süre, ikon ve renk kararları TEK YERDE.
|
|
3925
|
+
*
|
|
3926
|
+
* <h3>Neden harici bir kütüphaneye sarmalayıcı DEĞİL</h3>
|
|
3927
|
+
* Tüketici `react-hot-toast` taşıyordu ve gövdeyi kendi yazmak zorunda
|
|
3928
|
+
* kalmıştı: kütüphanenin goober sınıfı bizim modül sınıfımızla AYNI
|
|
3929
|
+
* özgüllükteydi ve kazananı kaynak sırası belirliyordu — aynı bildirim
|
|
3930
|
+
* geliştirmede ve üretimde İKİ FARKLI RENKTE çıkıyordu. Bir sarmalayıcı bu
|
|
3931
|
+
* sorunu çözmez, erteler.
|
|
3932
|
+
*
|
|
3933
|
+
* @example
|
|
3934
|
+
* toast.success('Adres kaydedildi');
|
|
3935
|
+
* toast.error('Kart reddedildi', { action: { label: 'Yeniden dene', onClick: retry } });
|
|
3936
|
+
*/
|
|
3937
|
+
export declare const toast: {
|
|
3938
|
+
show: (message: string, options?: ToastOptions) => number;
|
|
3939
|
+
info: (message: string, options?: ToastOptions) => number;
|
|
3940
|
+
success: (message: string, options?: ToastOptions) => number;
|
|
3941
|
+
warning: (message: string, options?: ToastOptions) => number;
|
|
3942
|
+
error: (message: string, options?: ToastOptions) => number;
|
|
3943
|
+
dismiss: (id: number) => void;
|
|
3944
|
+
/** Tümünü kapatır — sayfa geçişinde bayat bildirim taşınmasın. */
|
|
3945
|
+
clear: () => void;
|
|
3946
|
+
};
|
|
3947
|
+
|
|
3948
|
+
export declare const ToastHub: typeof ToastHub_2;
|
|
3949
|
+
|
|
3950
|
+
/**
|
|
3951
|
+
* Bildirim yığını — uygulamada <strong>BİR KEZ</strong> çizilir.
|
|
3952
|
+
*
|
|
3953
|
+
* <h3>Neden tek yığın</h3>
|
|
3954
|
+
* Birden fazla canlı bölge, ekran okuyucuların duyuruları birleştirip sırayla
|
|
3955
|
+
* okumasına ya da tamamen atlamasına yol açıyor. Yığın kök yerleşimde bir kez
|
|
3956
|
+
* durur; `toast.*` çağrıları React ağacının dışından da çalışır.
|
|
3957
|
+
*
|
|
3958
|
+
* <h3>Duyuru bölgesi HER ZAMAN DOM'da</h3>
|
|
3959
|
+
* Kapsayıcı bildirim yokken de çiziliyor. Sonradan DOM'a eklenen bir canlı
|
|
3960
|
+
* bölgenin ilk duyurusu güvenilmez — ekran okuyucu bölgeyi izlemeye
|
|
3961
|
+
* başlamadan içerik gelmiş oluyor.
|
|
3962
|
+
*
|
|
3963
|
+
* <h3>Klavye</h3>
|
|
3964
|
+
* <table>
|
|
3965
|
+
* <tr><td>`Tab`</td><td>bildirimin eylemine ve kapatma düğmesine ulaşır</td></tr>
|
|
3966
|
+
* <tr><td>odak/hover</td><td>kapanma sayacını DURDURUR</td></tr>
|
|
3967
|
+
* </table>
|
|
3968
|
+
*/
|
|
3969
|
+
declare const ToastHub_2: ({ closeLabel, className }: HubProps) => ReactPortal | null;
|
|
3970
|
+
|
|
3971
|
+
export declare type ToastOptions = {
|
|
3972
|
+
tone?: ToastTone;
|
|
3973
|
+
/** Görüntülenme süresi (ms). `0` → kendiliğinden kapanmaz. */
|
|
3974
|
+
duration?: number;
|
|
3975
|
+
/** Başlığın altındaki bir cümlelik ayrıntı. */
|
|
3976
|
+
description?: ReactNode;
|
|
3977
|
+
/** Bildirimin içindeki tek eylem ("Geri al"). */
|
|
3978
|
+
action?: {
|
|
3979
|
+
label: string;
|
|
3980
|
+
onClick: () => void;
|
|
3981
|
+
};
|
|
3982
|
+
};
|
|
3983
|
+
|
|
3984
|
+
export declare type ToastTone = 'info' | 'success' | 'warning' | 'danger';
|
|
2586
3985
|
|
|
2587
3986
|
export declare const Tooltip: typeof Tooltip_2;
|
|
2588
3987
|
|
|
@@ -2595,19 +3994,41 @@ export declare const Tooltip: typeof Tooltip_2;
|
|
|
2595
3994
|
* bir arayüzde "üzerine gelince açıklama çıkar" demek, kullanıcıların çoğu
|
|
2596
3995
|
* için açıklamanın hiç olmaması demek.
|
|
2597
3996
|
*
|
|
3997
|
+
* <h3>Balon PORTAL ile gövdede</h3>
|
|
3998
|
+
* Önce tetikleyicinin içinde `position: absolute` ile duruyordu ve üç yerde
|
|
3999
|
+
* birden bozuluyordu: `overflow: hidden` taşıyan bir kapsayıcının içinde
|
|
4000
|
+
* (kart, tablo hücresi, `Panel`) KIRPILIYOR, ekranın kenarında görünüm
|
|
4001
|
+
* alanının dışına TAŞIYOR, `transform` taşıyan bir atanın altında yığılma
|
|
4002
|
+
* bağlamına HAPSOLUYORDU. Konum artık `usePositioning` ile ölçülüyor;
|
|
4003
|
+
* gerekçenin tamamı orada.
|
|
4004
|
+
*
|
|
2598
4005
|
* <h3>Neden yalnızca AÇIKLAMA taşır</h3>
|
|
2599
4006
|
* Balonda <em>yalnızca</em> yardımcı metin durur — bağlantı, düğme veya
|
|
2600
|
-
* okunması zorunlu bir bilgi değil.
|
|
2601
|
-
*
|
|
2602
|
-
*
|
|
2603
|
-
*
|
|
2604
|
-
*
|
|
2605
|
-
* <h3>
|
|
2606
|
-
*
|
|
2607
|
-
*
|
|
2608
|
-
*
|
|
4007
|
+
* okunması zorunlu bir bilgi değil. İçine bir eylem konsaydı ona erişmenin
|
|
4008
|
+
* yolu olmazdı: balon `pointer-events: none` ve klavyeyle içine girilemiyor.
|
|
4009
|
+
* Eylem taşıyan yüzey `Popover`ın işi; kalıcı olması gereken metin `Field`ın
|
|
4010
|
+
* `hint`i.
|
|
4011
|
+
*
|
|
4012
|
+
* <h3>Dokunmatik: uzun basma</h3>
|
|
4013
|
+
* Dokunmatikte `hover` yok — ipucu orada hiç açılmıyordu. Uzun basma balonu
|
|
4014
|
+
* açar; ekranın herhangi bir yerine dokunmak kapatır. Bağlam menüsü
|
|
4015
|
+
* bastırılır: uzun basmada iOS'ta seçim büyüteci, Android'de kopyala menüsü
|
|
4016
|
+
* çıkıyor ve ikisi de balonun üstüne biniyordu.
|
|
4017
|
+
*
|
|
4018
|
+
* <h3>Kapanma toleransı</h3>
|
|
4019
|
+
* İmleç tetikleyiciden çıkar çıkmaz kapatmak, balonun kendisine ulaşmayı
|
|
4020
|
+
* imkânsız kılıyordu (metin seçilemiyor). Kapanış {@link CLOSE_DELAY} kadar
|
|
4021
|
+
* bekletilir ve bu sürede balona giren imleç onu açık tutar.
|
|
4022
|
+
*
|
|
4023
|
+
* <h3>Klavye</h3>
|
|
4024
|
+
* <table>
|
|
4025
|
+
* <tr><td>`Tab`</td><td>tetikleyiciye gelince GECİKMESİZ açılır</td></tr>
|
|
4026
|
+
* <tr><td>`Escape`</td><td>kapatır; odak tetikleyicide kalır</td></tr>
|
|
4027
|
+
* </table>
|
|
4028
|
+
* Gecikme fare için var; Tab ile gelen kullanıcı zaten bilinçli olarak orada
|
|
4029
|
+
* duruyor.
|
|
2609
4030
|
*/
|
|
2610
|
-
declare const Tooltip_2:
|
|
4031
|
+
declare const Tooltip_2: ({ content, children, side, position, openDelay, className }: Props_3) => JSX.Element;
|
|
2611
4032
|
|
|
2612
4033
|
/**
|
|
2613
4034
|
* Ölçü basamakları.
|
|
@@ -2676,6 +4097,23 @@ export declare enum UIVariant {
|
|
|
2676
4097
|
DANGER = "DANGER"
|
|
2677
4098
|
}
|
|
2678
4099
|
|
|
4100
|
+
export declare type UploadFile = {
|
|
4101
|
+
id: string;
|
|
4102
|
+
name: string;
|
|
4103
|
+
/** Bayt. Ekranda okunur biçime çevrilir. */
|
|
4104
|
+
size: number;
|
|
4105
|
+
/** 0-100. `undefined` → yükleme başlamadı ya da bitti. */
|
|
4106
|
+
progress?: number;
|
|
4107
|
+
/** Bu dosyaya ait hata. Satır kırmızı çizilir ve metin okunur. */
|
|
4108
|
+
error?: string;
|
|
4109
|
+
};
|
|
4110
|
+
|
|
4111
|
+
/**
|
|
4112
|
+
* Duyuru fonksiyonu döndürür. Referans SABİT: bağımlılık dizisine güvenle
|
|
4113
|
+
* konur, her render'da yeni bir kapanış üretip etkileri tetiklemez.
|
|
4114
|
+
*/
|
|
4115
|
+
export declare const useAnnounce: () => ((message: string, politeness?: AnnouncePoliteness) => void);
|
|
4116
|
+
|
|
2679
4117
|
/**
|
|
2680
4118
|
* Sağlayıcı ZORUNLU DEĞİL.
|
|
2681
4119
|
*
|
|
@@ -2711,6 +4149,8 @@ export declare const useHanui: () => HanuiContextValue;
|
|
|
2711
4149
|
*/
|
|
2712
4150
|
export declare const useHanuiTheme: () => ThemeState;
|
|
2713
4151
|
|
|
4152
|
+
export declare const useScrollLock: (isLocked?: boolean) => void;
|
|
4153
|
+
|
|
2714
4154
|
/**
|
|
2715
4155
|
* Alt sayfayi <strong>gorunen</strong> alana yaslar.
|
|
2716
4156
|
*
|