@ahmetilhn/hanui 2.0.10 → 2.2.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 +5 -9
- package/build/index.cjs +7 -7
- package/build/index.cjs.map +1 -1
- package/build/index.d.ts +289 -2427
- package/build/index.js +1999 -2019
- package/build/index.js.map +1 -1
- package/build/styles.css +1 -1
- package/package.json +4 -3
package/build/index.d.ts
CHANGED
|
@@ -26,37 +26,7 @@ export declare const ABOVE_TABLET_MEDIA_QUERY = "(min-width: 1025px)";
|
|
|
26
26
|
|
|
27
27
|
export declare const Accordion: typeof Accordion_2;
|
|
28
28
|
|
|
29
|
-
/**
|
|
30
|
-
* Akordeon — katlanabilir bölümler.
|
|
31
|
-
*
|
|
32
|
-
* <h3>Yerel `<details>` / `<summary>` üzerine</h3>
|
|
33
|
-
* Açık/kapalı durumu, klavye desteği (`Enter` ve `Space`), ekran okuyucu
|
|
34
|
-
* duyurusu ("genişletildi/daraltıldı") ve <strong>sayfa içi bulma</strong>
|
|
35
|
-
* tarayıcıdan gelir. Sonuncusu taklit bir uygulamada imkânsız: Ctrl+F ile
|
|
36
|
-
* aranan bir metin kapalı bir `<details>`in içindeyse tarayıcı bölümü kendisi
|
|
37
|
-
* açıyor; `display: none` ile gizlenmiş bir `<div>`de o metin hiç yok.
|
|
38
|
-
*
|
|
39
|
-
* <p>Bedeli, tek-açık kipin elle kurulması: `<details name="…">` bunu yerel
|
|
40
|
-
* olarak veriyor ama Safari 17.2 öncesinde yok ve orada TÜM bölümler
|
|
41
|
-
* birbirinden bağımsız açılıyordu — sessiz bir davranış farkı. Karar burada
|
|
42
|
-
* veriliyor, tarayıcıya bırakılmıyor.
|
|
43
|
-
*
|
|
44
|
-
* <h3>Yükseklik geçişi</h3>
|
|
45
|
-
* `interpolate-size: allow-keywords` + `height` geçişi ile `auto`ya
|
|
46
|
-
* canlandırılıyor. Desteklemeyen tarayıcıda geçiş düşer ve bölüm ANINDA
|
|
47
|
-
* açılır — eski davranış. Sabit bir piksel yüksekliği vermek ya da
|
|
48
|
-
* `max-height` numarası kullanmak yanlış: ilki içeriği kırpıyor, ikincisi
|
|
49
|
-
* kısa bölümlerde gözle görülür bir gecikme bırakıyordu.
|
|
50
|
-
*
|
|
51
|
-
* <h3>Klavye (yerel)</h3>
|
|
52
|
-
* <table>
|
|
53
|
-
* <tr><td>`Enter` / `Space`</td><td>bölümü açar/kapatır</td></tr>
|
|
54
|
-
* <tr><td>`Tab`</td><td>başlıklar arasında gezinir</td></tr>
|
|
55
|
-
* </table>
|
|
56
|
-
* Ok tuşu YOKTUR ve olmamalı: akordeon bir liste değil, her başlık bağımsız
|
|
57
|
-
* bir düğme (WAI-ARIA APG accordion deseni ok tuşlarını isteğe bağlı bırakıyor
|
|
58
|
-
* ve yerel öğe onları getirmiyor).
|
|
59
|
-
*/
|
|
29
|
+
/** Akordeon — katlanabilir bölümler. */
|
|
60
30
|
declare const Accordion_2: FC<Props_35>;
|
|
61
31
|
|
|
62
32
|
export declare type AccordionItem = {
|
|
@@ -71,13 +41,7 @@ export declare type AccordionItem = {
|
|
|
71
41
|
|
|
72
42
|
export declare const Alert: typeof Alert_2;
|
|
73
43
|
|
|
74
|
-
/**
|
|
75
|
-
* Bilgi / uyarı kutusu.
|
|
76
|
-
*
|
|
77
|
-
* <p>`danger` ve `warning` tonları `role="alert"` taşır: ekran okuyucu bunları
|
|
78
|
-
* anında duyurur. `info` ve `success` duyurulmaz — sayfa yüklenirken her bilgi
|
|
79
|
-
* kutusunun okunması gürültü olurdu.
|
|
80
|
-
*/
|
|
44
|
+
/** Bilgi / uyarı kutusu. */
|
|
81
45
|
declare const Alert_2: FC<Props_17>;
|
|
82
46
|
|
|
83
47
|
export declare type AlertTone = 'info' | 'success' | 'warning' | 'danger';
|
|
@@ -87,59 +51,12 @@ export declare type AnnouncePoliteness = 'polite' | 'assertive';
|
|
|
87
51
|
|
|
88
52
|
export declare const Avatar: typeof Avatar_2;
|
|
89
53
|
|
|
90
|
-
/**
|
|
91
|
-
* Avatar — kullanıcı madalyonu.
|
|
92
|
-
*
|
|
93
|
-
* <h3>Görsel yoksa baş harf</h3>
|
|
94
|
-
* Profil görseli olmayan bir sistemde baş harf madalyonu kimliği
|
|
95
|
-
* <em>yeterince</em> taşır: kullanıcı hesap menüsünün en üstünde doğru hesapta
|
|
96
|
-
* olduğunu görmek ister, fotoğrafını değil. `imageUrl` verildiğinde görsel
|
|
97
|
-
* çizilir ve baş harf yedeğe düşer; çağıran tarafların değişmesi gerekmez.
|
|
98
|
-
*
|
|
99
|
-
* <h3>Ekran okuyucuya okunmaz</h3>
|
|
100
|
-
* Madalyon `aria-hidden`: yanında zaten adın kendisi yazıyor. İkisini de
|
|
101
|
-
* okumak "A İ Ahmet İlhan" gibi bir gürültü üretiyordu. Adın yanında
|
|
102
|
-
* durmadığı bir yerde kullanılıyorsa çağıran taraf metni kendisi yazar.
|
|
103
|
-
*/
|
|
54
|
+
/** Avatar — kullanıcı madalyonu. */
|
|
104
55
|
declare const Avatar_2: FC<Props_18>;
|
|
105
56
|
|
|
106
57
|
export declare const Badge: typeof Badge_2;
|
|
107
58
|
|
|
108
|
-
/**
|
|
109
|
-
* Rozet — durum ve sınıflandırma etiketi.
|
|
110
|
-
*
|
|
111
|
-
* <p><strong>Renk tek başına anlam taşımaz</strong> (WCAG 1.4.1): her rozet
|
|
112
|
-
* okunabilir bir metin içerir. `tone` yalnızca metni pekiştirir; renk körü bir
|
|
113
|
-
* kullanıcı da aynı bilgiyi alır.
|
|
114
|
-
*
|
|
115
|
-
* <h3>Durum tonlarında `solid` ile `soft` aynı şeyi verir</h3>
|
|
116
|
-
* Bu bilinçli. <strong>Doygun dolgu = tıklanabilir</strong> kuralı gereği dolu
|
|
117
|
-
* zeminli bir durum etiketi düğmeye benziyor ve kullanıcılar "Son 2 adet" gibi
|
|
118
|
-
* bir etikete tıklamayı deniyordu. Prop çağıran tarafları kırmamak için
|
|
119
|
-
* korundu, görünüm tint'e sabitlendi.
|
|
120
|
-
*
|
|
121
|
-
* <p>Doygun dolgu yalnızca <strong>miktar</strong> tonlarında (`action`,
|
|
122
|
-
* `link`) anlamlı: onlar bir durumu değil bir sayıyı bildirir ve tıklanabilir
|
|
123
|
-
* bir öğenin parçasıdır.
|
|
124
|
-
*
|
|
125
|
-
* <h3>Koyu bandın üzerinde: `neutral` yeniden bağlanır</h3>
|
|
126
|
-
* Nötr rozet üç CSS özel özelliği okur — `--hanui-badge-bg`,
|
|
127
|
-
* `--hanui-badge-fg`, `--hanui-badge-line`. Kapsayıcıda tanımlanmadıklarında
|
|
128
|
-
* varsayılan tint çizilir; koyu bir gezinme rayının içinde ise kapsayıcı
|
|
129
|
-
* üçünü kendi tonlarına bağlayarak rozeti oraya taşır. İç sınıflara kural
|
|
130
|
-
* yazmak bir sonraki yayında sessizce düşerdi.
|
|
131
|
-
*
|
|
132
|
-
* ```scss
|
|
133
|
-
* .rail__badge {
|
|
134
|
-
* --hanui-badge-bg: #{$rail-hover};
|
|
135
|
-
* --hanui-badge-fg: #{$rail-fg-2};
|
|
136
|
-
* --hanui-badge-line: #{$rail-line};
|
|
137
|
-
* }
|
|
138
|
-
* ```
|
|
139
|
-
*
|
|
140
|
-
* <p>Durum tonları bilinçli olarak ezilemez: bir hata rozetini kapsayıcının
|
|
141
|
-
* sessizce nötrleştirmesi, rengin taşıdığı anlamı yok ederdi.
|
|
142
|
-
*/
|
|
59
|
+
/** Rozet — durum ve sınıflandırma etiketi. */
|
|
143
60
|
declare const Badge_2: FC<Props_19>;
|
|
144
61
|
|
|
145
62
|
export declare type BadgeTone = 'neutral' | 'success' | 'danger' | 'warning' | 'info'
|
|
@@ -223,11 +140,6 @@ declare type BaseProps_4 = {
|
|
|
223
140
|
/**
|
|
224
141
|
* Sayfa değiştiğinde ekran okuyucuya duyurulacak metin
|
|
225
142
|
* ("3. sayfa · 1.248 sonuç").
|
|
226
|
-
*
|
|
227
|
-
* <p>Verilmediğinde duyuru YAPILMAZ. Görsel tarafta sayfa numarası
|
|
228
|
-
* `aria-current` ile zaten işaretli ama o yalnızca ODAK oraya geldiğinde
|
|
229
|
-
* okunuyor: bağlantıya basıp listenin başına dönen kullanıcı, kaçıncı
|
|
230
|
-
* sayfada olduğunu ve kaç sonuç kaldığını hiç duymuyordu.
|
|
231
143
|
*/
|
|
232
144
|
formatAnnouncement?: (page: number, totalPages: number) => string;
|
|
233
145
|
className?: string;
|
|
@@ -238,32 +150,10 @@ export declare const BottomSheet: MemoExoticComponent<({ title, closeLabel, onCl
|
|
|
238
150
|
|
|
239
151
|
export declare const Breadcrumb: typeof Breadcrumb_2;
|
|
240
152
|
|
|
241
|
-
/**
|
|
242
|
-
* Kırıntı yolu.
|
|
243
|
-
*
|
|
244
|
-
* <p>Son öğe bağlantı DEĞİL ve `aria-current="page"` taşır: bulunduğu sayfaya
|
|
245
|
-
* bağlantı veren bir kırıntı yolu, ekran okuyucu kullanıcısını yanıltır.
|
|
246
|
-
*
|
|
247
|
-
* <p>Ayırıcı ikon `aria-hidden`; ekran okuyucu liste yapısından hiyerarşiyi
|
|
248
|
-
* zaten anlar.
|
|
249
|
-
*/
|
|
153
|
+
/** Kırıntı yolu. */
|
|
250
154
|
declare const Breadcrumb_2: FC<Props_20>;
|
|
251
155
|
|
|
252
|
-
/**
|
|
253
|
-
* Yapılandırmayı CSS metnine çevirir.
|
|
254
|
-
*
|
|
255
|
-
* <h3>Neden yalnızca EZİLEN token'lar yazılıyor</h3>
|
|
256
|
-
* Tam eşlemeyi yazmak da çalışırdı ama iki bedeli var: çıktı 90 satır yerine
|
|
257
|
-
* 4 satır olurdu ve daha önemlisi, kütüphane bir sonraki sürümde bir token'ın
|
|
258
|
-
* varsayılanını değiştirdiğinde tüketicinin sayfası ESKİ değeri yazmaya devam
|
|
259
|
-
* ederdi — üstelik ezmediği bir token için. Ezmeler ne ise o yazılır.
|
|
260
|
-
*
|
|
261
|
-
* <h3>Neden `<style>`, neden satır içi stil değil</h3>
|
|
262
|
-
* Satır içi stil yalnızca `<html>` üzerinde durur ve `[data-hanui-theme]`
|
|
263
|
-
* seçicisinden daha yüksek özgüllüktedir: kullanıcı temayı değiştirdiğinde
|
|
264
|
-
* ezmeler HER İKİ temada da aynı kalıyordu. Ayrı bir kural bloğu, açık ve
|
|
265
|
-
* koyu ezmeleri kendi seçicilerine bağlar.
|
|
266
|
-
*/
|
|
156
|
+
/** Yapılandırmayı CSS metnine çevirir. */
|
|
267
157
|
export declare const buildThemeCss: (config: HanuiThemeConfig) => string;
|
|
268
158
|
|
|
269
159
|
export declare const Button: typeof Button_2;
|
|
@@ -271,27 +161,9 @@ export declare const Button: typeof Button_2;
|
|
|
271
161
|
/**
|
|
272
162
|
* Düğme.
|
|
273
163
|
*
|
|
274
|
-
* <h3>Yüklenirken içerik korunur</h3>
|
|
275
|
-
* Metin dönen çarkla DEĞİŞTİRİLMEZ, yanına eklenir ve düğme genişliği
|
|
276
|
-
* sabitlenir. Metni değiştirmek düğmeyi daraltıp yerleşimi kaydırıyordu ve
|
|
277
|
-
* kullanıcı neye tıkladığını kaybediyordu.
|
|
278
|
-
*
|
|
279
|
-
* <h3>Bağlantı mı düğme mi</h3>
|
|
280
|
-
* `href` verilirse `<a>` çizilir. Görsel olarak düğme gibi duran bir
|
|
281
|
-
* bağlantının gerçekten `<a>` olması gerekir: orta tuşla yeni sekmede
|
|
282
|
-
* açılması ve tarayıcı geçmişine girmesi beklenen davranıştır.
|
|
283
|
-
*
|
|
284
|
-
* <p>`isExternal` ile birlikte yönlendirici DEĞİL ham `<a>` çizilir ve
|
|
285
|
-
* `target="_blank"` + `rel="noopener noreferrer"` eklenir. Uygulama dışı bir
|
|
286
|
-
* adres için yönlendiriciyi araya sokmak anlamsız; `rel` ise zorunlu —
|
|
287
|
-
* `noopener` olmadan açılan sekme `window.opener` üzerinden bu sayfaya
|
|
288
|
-
* erişebiliyor. Düğme benzeri dış bağlantı elle `<a>` olarak yazılmasın diye
|
|
289
|
-
* burada: elle yazılan her bağlantı odak halkasını ve durum matrisini yeniden
|
|
290
|
-
* kurmak zorunda kalıyordu.
|
|
291
|
-
*
|
|
292
164
|
* @example
|
|
293
165
|
* <Button variant={UIVariant.PRIMARY} isLoading={isSaving} onClick={save}>
|
|
294
|
-
*
|
|
166
|
+
* Kaydet
|
|
295
167
|
* </Button>
|
|
296
168
|
*/
|
|
297
169
|
declare const Button_2: ForwardRefExoticComponent<Partial<{
|
|
@@ -318,14 +190,7 @@ linkProps?: HanuiLinkExtraProps;
|
|
|
318
190
|
} & RefAttributes<HTMLButtonElement>>;
|
|
319
191
|
|
|
320
192
|
declare type ButtonProps = BaseProps_4 & {
|
|
321
|
-
/**
|
|
322
|
-
* Sayfa değişimi adres çubuğu YERİNE buraya bildirilir.
|
|
323
|
-
*
|
|
324
|
-
* <p>Yalnızca sayfalamanın adrese yazılmadığı listeler için: kişiye özel,
|
|
325
|
-
* `noindex` ekranlarda kimse "ikinci sayfa" bağlantısını paylaşmıyor ve orada
|
|
326
|
-
* adresi kirletmek geri tuşunu kullanılamaz hâle getiriyordu. Bağlantı
|
|
327
|
-
* verilebilecek bir hedef olmadığı için numaralar düğme kalır.
|
|
328
|
-
*/
|
|
193
|
+
/** Sayfa değişimi adres çubuğu YERİNE buraya bildirilir. */
|
|
329
194
|
onPageChange: (page: number) => void;
|
|
330
195
|
buildHref?: never;
|
|
331
196
|
linkProps?: never;
|
|
@@ -336,26 +201,14 @@ export declare const Card: typeof Card_2;
|
|
|
336
201
|
/**
|
|
337
202
|
* Kart — medya + gövde + eylem şeridi.
|
|
338
203
|
*
|
|
339
|
-
* <h3>Neden bileşik (compound) bir bileşen</h3>
|
|
340
|
-
* Bir uygulamadaki her kart (ürün, kampanya, sipariş) aynı üç bölümden oluşur
|
|
341
|
-
* ama içerikleri tamamen farklıdır. Tek bir "her şeyi yapan" kart bileşeni on
|
|
342
|
-
* beş isteğe bağlı prop'a şişiyordu. Bunun yerine <em>yerleşim</em>
|
|
343
|
-
* paylaşılır, içerik çağırana bırakılır: kenarlık, yarıçap, gölge, medya oranı
|
|
344
|
-
* ve eylem şeridinin dipte durması tek yerde tanımlıdır.
|
|
345
|
-
*
|
|
346
|
-
* <h3>Eylem şeridi hep dipte</h3>
|
|
347
|
-
* {@link CardFooter} `margin-top: auto` alır. Izgarada yan yana duran kartların
|
|
348
|
-
* başlıkları farklı uzunlukta olsa da alt şerit aynı hizada kalır; aksi hâlde
|
|
349
|
-
* satır dalgalı görünüyordu.
|
|
350
|
-
*
|
|
351
204
|
* @example
|
|
352
205
|
* <Card as="article" isInteractive>
|
|
353
|
-
*
|
|
354
|
-
*
|
|
355
|
-
*
|
|
356
|
-
*
|
|
357
|
-
*
|
|
358
|
-
*
|
|
206
|
+
* <CardMedia href="/urun/x" ratio={1}>
|
|
207
|
+
* <CardOverlay position="top-left"><Badge>Yeni</Badge></CardOverlay>
|
|
208
|
+
* <img src={…} alt="" />
|
|
209
|
+
* </CardMedia>
|
|
210
|
+
* <CardBody>…</CardBody>
|
|
211
|
+
* <CardFooter>…</CardFooter>
|
|
359
212
|
* </Card>
|
|
360
213
|
*/
|
|
361
214
|
declare const Card_2: FC<CardProps>;
|
|
@@ -366,38 +219,10 @@ export declare const CardBody: FC<CardSectionProps>;
|
|
|
366
219
|
/** Eylem şeridi — tutar, düğmeler. Kartın dibine yapışır. */
|
|
367
220
|
export declare const CardFooter: FC<CardSectionProps>;
|
|
368
221
|
|
|
369
|
-
/**
|
|
370
|
-
* Kartın görsel alanı.
|
|
371
|
-
*
|
|
372
|
-
* <p>Oran <strong>sabittir</strong>: görsel yüklenene kadar yer tutar ve
|
|
373
|
-
* yerleşim kaymasını (CLS) önler. Oransız bırakıldığında kartlar görseller
|
|
374
|
-
* yüklendikçe zıplıyordu.
|
|
375
|
-
*
|
|
376
|
-
* <p>Görselin çerçeveyi doldurma biçimi ÇAĞIRANIN kararı ({@link CardMediaFit}):
|
|
377
|
-
* kütüphane "her ürün fotoğrafı içeriden dursun" gibi bir tercihi kendi
|
|
378
|
-
* varsayılanına gömmez. Varsayılan `contain` — kırpmayan, yani hiçbir bilgiyi
|
|
379
|
-
* sessizce yok etmeyen seçenek.
|
|
380
|
-
*/
|
|
222
|
+
/** Kartın görsel alanı. */
|
|
381
223
|
export declare const CardMedia: FC<CardMediaProps>;
|
|
382
224
|
|
|
383
|
-
/**
|
|
384
|
-
* Görselin çerçeveyi NASIL doldurduğu.
|
|
385
|
-
*
|
|
386
|
-
* <p>Üçü de aynı soruyu yanıtlıyor — <em>kırpılsın mı, sığsın mı, yoksa
|
|
387
|
-
* içeriden mi dursun</em> — bu yüzden tek bir prop'un değerleri; ayrı ayrı
|
|
388
|
-
* boolean'lar olsalardı `isContained={false} isInset` gibi anlamsız
|
|
389
|
-
* bileşimler yazılabilir hâle gelirdi.
|
|
390
|
-
*
|
|
391
|
-
* <ul>
|
|
392
|
-
* <li><b>`cover`</b> — çerçeveyi tamamen doldurur, taşan kenarları KIRPAR.
|
|
393
|
-
* Kadraj kenara kadar anlamlı olan fotoğraflar (kampanya, kapak).</li>
|
|
394
|
-
* <li><b>`contain`</b> — kırpmadan sığdırır; uzun kenarı çerçeve dolgusuna
|
|
395
|
-
* dayanır. Karışık oranlarda gelen görseller.</li>
|
|
396
|
-
* <li><b>`inset`</b> — sığdırır ve <b>%85</b>e çekip merkezler. Şeffaf
|
|
397
|
-
* zeminli ürün fotoğrafları: parçanın kenarı kartın kenarına
|
|
398
|
-
* değmiyor.</li>
|
|
399
|
-
* </ul>
|
|
400
|
-
*/
|
|
225
|
+
/** Görselin çerçeveyi NASIL doldurduğu. */
|
|
401
226
|
export declare type CardMediaFit = 'cover' | 'contain' | 'inset';
|
|
402
227
|
|
|
403
228
|
declare type CardMediaProps = {
|
|
@@ -414,19 +239,13 @@ declare type CardMediaProps = {
|
|
|
414
239
|
* @deprecated `fit` kullanın: `isContained` → `fit="contain"`,
|
|
415
240
|
* `isContained={false}` → `fit="cover"`. Boolean yalnızca iki durumu
|
|
416
241
|
* anlatabiliyordu, üçüncüsü (`inset`) ona sığmadı. Eski yol bir sürüm daha
|
|
417
|
-
* çalışır; `
|
|
242
|
+
* çalışır; `CLAUDE.md` → Göç.
|
|
418
243
|
*/
|
|
419
244
|
isContained?: boolean;
|
|
420
245
|
className?: string;
|
|
421
246
|
};
|
|
422
247
|
|
|
423
|
-
/**
|
|
424
|
-
* Görselin üzerine binen katman: rozetler ve hızlı eylemler.
|
|
425
|
-
*
|
|
426
|
-
* <p>Varsayılan olarak `pointer-events: none` — rozet yığını, altındaki görsel
|
|
427
|
-
* bağlantısının tıklanmasını engellememeli. İçindeki gerçek düğmeler kendi
|
|
428
|
-
* olaylarını geri açar.
|
|
429
|
-
*/
|
|
248
|
+
/** Görselin üzerine binen katman: rozetler ve hızlı eylemler. */
|
|
430
249
|
export declare const CardOverlay: FC<CardOverlayProps>;
|
|
431
250
|
|
|
432
251
|
declare type CardOverlayProps = {
|
|
@@ -452,53 +271,12 @@ declare type CardSectionProps = {
|
|
|
452
271
|
|
|
453
272
|
export declare const Carousel: typeof Carousel_2;
|
|
454
273
|
|
|
455
|
-
/**
|
|
456
|
-
* Kaydırılabilir şerit (carousel).
|
|
457
|
-
*
|
|
458
|
-
* <h3>OTOMATİK OYNATMA YOK — ve olmayacak</h3>
|
|
459
|
-
* Kendiliğinden ilerleyen bir şerit WCAG 2.2.2'yi ihlal ediyor (beş saniyeden
|
|
460
|
-
* uzun süren hareket duraklatılabilmeli) ama asıl sorun daha basit: kullanıcı
|
|
461
|
-
* okumaya başladığı kartı kaybediyor. Bir prop olarak bile eklenmedi —
|
|
462
|
-
* eklenseydi kullanılırdı.
|
|
463
|
-
*
|
|
464
|
-
* <h3>Kaydırma YEREL, JavaScript değil</h3>
|
|
465
|
-
* Şerit `overflow-x: auto` + `scroll-snap`: dokunmatikte parmakla kaydırma,
|
|
466
|
-
* masaüstünde shift+tekerlek ve <strong>klavyeyle ok tuşları</strong>
|
|
467
|
-
* tarayıcıdan geliyor. JavaScript ile `transform` kaydıran bir uygulama
|
|
468
|
-
* bunların hiçbirini getirmiyor ve kaydırma çubuğunu da götürüyor — kullanıcı
|
|
469
|
-
* şeridin devam ettiğini göremiyordu.
|
|
470
|
-
*
|
|
471
|
-
* <p>Düğmeler `scrollBy` çağırıyor: yerel kaydırmayı DEĞİŞTİRMİYOR,
|
|
472
|
-
* tetikliyor. İkisi aynı durumu paylaşıyor ve ayrışmaları imkânsız.
|
|
473
|
-
*
|
|
474
|
-
* <h3>Şerit klavyeyle ULAŞILABİLİR</h3>
|
|
475
|
-
* Kaydırılabilir bir kutu, içinde odaklanabilir öğe yoksa `tabindex`
|
|
476
|
-
* verilmediğinde klavye kullanıcısı için ulaşılamaz (WCAG 2.1.1). Şerit
|
|
477
|
-
* genellikle bağlantı taşıyan kartlardan oluşuyor ve o durumda ek bir durak
|
|
478
|
-
* gereksiz — bu yüzden `tabindex` yalnızca <strong>odaklanabilir çocuk
|
|
479
|
-
* yoksa</strong> yazılıyor.
|
|
480
|
-
*
|
|
481
|
-
* <h3>Klavye</h3>
|
|
482
|
-
* <table>
|
|
483
|
-
* <tr><td>`Tab`</td><td>önceki/sonraki düğmelerine ve kartların içine</td></tr>
|
|
484
|
-
* <tr><td>ok tuşları</td><td>şeridi kaydırır (yerel)</td></tr>
|
|
485
|
-
* </table>
|
|
486
|
-
*/
|
|
274
|
+
/** Kaydırılabilir şerit (carousel). */
|
|
487
275
|
declare const Carousel_2: FC<Props_21>;
|
|
488
276
|
|
|
489
277
|
export declare const Checkbox: typeof Checkbox_2;
|
|
490
278
|
|
|
491
|
-
/**
|
|
492
|
-
* Onay kutusu.
|
|
493
|
-
*
|
|
494
|
-
* <p>Yerel `<input type="checkbox">` korunur ve `accent-color` ile
|
|
495
|
-
* renklendirilir. Özel bir kutu çizmek (gizli input + sahte kare) klavye
|
|
496
|
-
* odağını ve ekran okuyucu davranışını elle yeniden kurmayı gerektirir;
|
|
497
|
-
* kazanç görsel, maliyet erişilebilirlik.
|
|
498
|
-
*
|
|
499
|
-
* <p>Tüm satır tıklanabilir (`<label>` sarmalar): 18 px'lik kareyi
|
|
500
|
-
* hedeflemek özellikle dokunmatik ekranda yorucu.
|
|
501
|
-
*/
|
|
279
|
+
/** Onay kutusu. */
|
|
502
280
|
declare const Checkbox_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
503
281
|
label: ReactNode;
|
|
504
282
|
hint?: string;
|
|
@@ -507,32 +285,7 @@ testId?: string;
|
|
|
507
285
|
|
|
508
286
|
export declare const Chip: typeof Chip_2;
|
|
509
287
|
|
|
510
|
-
/**
|
|
511
|
-
* Çip — seçilebilir etiket.
|
|
512
|
-
*
|
|
513
|
-
* <h3>Tasarım sisteminin en çok tekrarlanan öğesi</h3>
|
|
514
|
-
* Kategori seçimi, hızlı filtre, sıralama tercihi, görünüm anahtarı: hepsi
|
|
515
|
-
* aynı öğe. Ayrı ayrı düğme stilleri yazmak yerine tek çip kullanılır;
|
|
516
|
-
* böylece seçili durumun nasıl göründüğü uygulamanın her yerinde aynıdır.
|
|
517
|
-
*
|
|
518
|
-
* <h3>Seçili durum üç sinyalle birden bildirilir</h3>
|
|
519
|
-
* Kenarlık + metin rengi + ikon rengi <em>birlikte</em> değişir. Yalnızca
|
|
520
|
-
* zemini doldurmak (renk tek başına, WCAG 1.4.1) renk körü kullanıcı için
|
|
521
|
-
* ayırt edilemez olurdu; ayrıca dolu zemin çipi düğmeye benzetip "buraya
|
|
522
|
-
* tıkla" gibi okutuyordu — oysa çip bir <em>durum</em> gösterir.
|
|
523
|
-
*
|
|
524
|
-
* <h3>Neden `aria-pressed`, `disabled` değil</h3>
|
|
525
|
-
* Seçili çip pasifleştirilmez: kullanıcı seçimini geri alabilmeli. Basılı
|
|
526
|
-
* düğme semantiği (`aria-pressed`) ekran okuyucuya "seçili, kapatılabilir"
|
|
527
|
-
* bilgisini verir.
|
|
528
|
-
*
|
|
529
|
-
* <h3>Native `title` YAZILMAZ</h3>
|
|
530
|
-
* Görünür metni olmayan çip `label`ı yalnızca `aria-label`a koyar. Önce
|
|
531
|
-
* ikisini birden yazıyordu; tarayıcının balonu dokunmatikte hiç görünmez,
|
|
532
|
-
* klavyede gecikmeli çıkar ve biçimi işletim sistemine bağlıdır — yani
|
|
533
|
-
* "üzerine gelince ne olduğu yazar" sözü kullanıcıların çoğunda tutmuyordu.
|
|
534
|
-
* Açıklama isteyen çağıran çipi {@link Tooltip} ile sarar.
|
|
535
|
-
*/
|
|
288
|
+
/** Çip — seçilebilir etiket. */
|
|
536
289
|
declare const Chip_2: ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
|
|
537
290
|
/** Görünen metin. Yalnız ikon taşıyan çipte verilmez; `label` zorunlu olur. */
|
|
538
291
|
children?: ReactNode;
|
|
@@ -564,36 +317,7 @@ testId?: string;
|
|
|
564
317
|
|
|
565
318
|
export declare const ChipGroup: typeof ChipGroup_2;
|
|
566
319
|
|
|
567
|
-
/**
|
|
568
|
-
* Çip grubu — açılır liste yerine tek dokunuşla seçim.
|
|
569
|
-
*
|
|
570
|
-
* <h3>Ne zaman çip grubu, ne zaman açılır liste</h3>
|
|
571
|
-
* Seçenek sayısı azsa (kabaca 7'ye kadar) ve seçenekler ekranda durabiliyorsa
|
|
572
|
-
* çip grubu kullanılır: kullanıcı listeyi <em>açmadan</em> hem seçenekleri hem
|
|
573
|
-
* de hangisinin seçili olduğunu görür — açılır listede bu bilgi iki tıklama
|
|
574
|
-
* arkasındadır. 5–20 seçenek için {@link Select}, 20+ için {@link Combobox}.
|
|
575
|
-
*
|
|
576
|
-
* <h3>Tek seçim radyo grubudur</h3>
|
|
577
|
-
* Tek seçimli grup `role="radiogroup"` alır ve çipler `role="radio"` olur.
|
|
578
|
-
* Görsel olarak radyo düğmesi gibi durmasalar da davranış aynıdır; ekran
|
|
579
|
-
* okuyucu "3 seçenekten 2.'si" diye okur. Yalnız `aria-pressed` kullanmak,
|
|
580
|
-
* seçeneklerin birbirini dışladığı bilgisini kaybettiriyordu.
|
|
581
|
-
*
|
|
582
|
-
* <h3>Gezinme tabindex'i dolaşır (roving tabindex)</h3>
|
|
583
|
-
* Radyo grubunda Tab tuşu <strong>gruba</strong> girer, seçenekler arasında ok
|
|
584
|
-
* tuşlarıyla gezilir. Her çipin ayrı ayrı Tab durağı olması, 7 seçenekli bir
|
|
585
|
-
* filtrede klavye kullanıcısını 7 kez Tab'lamaya zorluyordu.
|
|
586
|
-
*
|
|
587
|
-
* <h3>Klavye</h3>
|
|
588
|
-
* <table>
|
|
589
|
-
* <tr><td>`ArrowRight` / `ArrowDown`</td><td>sonraki seçenek; uçlarda DÖNER</td></tr>
|
|
590
|
-
* <tr><td>`ArrowLeft` / `ArrowUp`</td><td>önceki seçenek</td></tr>
|
|
591
|
-
* </table>
|
|
592
|
-
* ÇOKLU seçimde ok tuşu YOKTUR: orada her çip bağımsız bir onay kutusu ve
|
|
593
|
-
* `Tab` ile gezilir — ok tuşuyla gezinmek seçimi de değiştirirdi, oysa
|
|
594
|
-
* radyo grubunun aksine burada gezinmek seçmek demek değil. Nöbetçi:
|
|
595
|
-
* `components/__tests__/keyboard.test.tsx`.
|
|
596
|
-
*/
|
|
320
|
+
/** Çip grubu — açılır liste yerine tek dokunuşla seçim. */
|
|
597
321
|
declare const ChipGroup_2: <T extends string>({ options, label, size, isScrollable, className, ...selection }: Props_6<T>) => JSX.Element;
|
|
598
322
|
|
|
599
323
|
export declare type ChipOption<T extends string = string> = {
|
|
@@ -624,65 +348,10 @@ declare type CircleProps = {
|
|
|
624
348
|
|
|
625
349
|
export declare const Combobox: typeof Combobox_2;
|
|
626
350
|
|
|
627
|
-
/**
|
|
628
|
-
|
|
629
|
-
*
|
|
630
|
-
* <h3>Neden yerel `<select>` değil</h3>
|
|
631
|
-
* Yerel açılır liste 20 seçeneğe kadar iyidir. Binlerce seçenekli bir listede
|
|
632
|
-
* kullanıcı harf harf yazarak (ve yalnızca baştan eşleşerek) arıyor, mobilde
|
|
633
|
-
* ise metrelerce süren bir tekerlek çeviriyor. Aranabilir liste, seçeneği
|
|
634
|
-
* <em>yazarak</em> bulmayı mümkün kılar.
|
|
635
|
-
*
|
|
636
|
-
* <h3>Arama kutusu listenin İÇİNDE</h3>
|
|
637
|
-
* Arama alanını listenin dışına koymak kullanıcıya iki ayrı alan gösteriyor
|
|
638
|
-
* ve hangisinin seçimi belirlediği anlaşılmıyordu. Tek tetikleyici, tek
|
|
639
|
-
* panel: masaüstünde panel açılınca odak doğrudan arama kutusuna gider,
|
|
640
|
-
* yazılır, Enter'a basılır. Dar ekranda odak VERİLMEZ — bkz. aşağıdaki not.
|
|
641
|
-
*
|
|
642
|
-
* <h3>Yerel mi sunucu araması mı</h3>
|
|
643
|
-
* `onSearch` verilmezse bileşen elindeki listeyi aksan duyarsız filtreler.
|
|
644
|
-
* Verilirse filtrelemeyi <em>yapmaz</em> — sunucudan gelen liste zaten
|
|
645
|
-
* filtrelenmiştir; ikinci kez filtrelemek sunucunun daha akıllı eşleşmesini
|
|
646
|
-
* (eş anlamlı, kod eşleşmesi) bozardı.
|
|
647
|
-
*
|
|
648
|
-
* <h3>Seçilenin etiketi listeden düşse de korunur</h3>
|
|
649
|
-
* Sunucu aramasında kullanıcı yeni bir arama yaptığında seçili kayıt gelen
|
|
650
|
-
* listede olmayabilir. Etiket son bilinen değerden hatırlanır; aksi hâlde
|
|
651
|
-
* tetikleyici seçim varken yer tutucuya dönüyordu.
|
|
652
|
-
*
|
|
653
|
-
* <h3>Dar ekranda arama kutusu ODAKLANMAZ</h3>
|
|
654
|
-
* Alt sayfa açılırken kutuya odaklanmak ekran klavyesini kullanıcı istemeden
|
|
655
|
-
* açıyordu: panel yarı yüksekliğe sıkışıyor, liste birkaç satıra iniyor ve
|
|
656
|
-
* seçim yapmak için önce klavyeyi kapatmak gerekiyordu. Telefonda liste
|
|
657
|
-
* taranarak kullanılır; yazmak isteyen kutuya kendisi dokunur.
|
|
658
|
-
*
|
|
659
|
-
* <h3>ARIA</h3>
|
|
660
|
-
* Tetikleyici `aria-haspopup="listbox"`, panel içindeki arama alanı
|
|
661
|
-
* `role="combobox"` + `aria-activedescendant`. Masaüstünde odak arama
|
|
662
|
-
* kutusundan ayrılmaz; ok tuşları yalnızca <em>etkin</em> seçeneği değiştirir.
|
|
663
|
-
* Odağı seçeneklere taşımak, yazmaya devam etmeyi imkânsız kılıyordu.
|
|
664
|
-
*
|
|
665
|
-
* <h3>Klavye (APG: combobox with listbox popup)</h3>
|
|
666
|
-
* <table>
|
|
667
|
-
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin seçenek bir alt/üst; uçlarda DÖNER</td></tr>
|
|
668
|
-
* <tr><td>`Home` / `End`</td><td>ilk / son seçenek</td></tr>
|
|
669
|
-
* <tr><td>`Enter`</td><td>etkin seçeneği seçer, paneli kapatır</td></tr>
|
|
670
|
-
* <tr><td>`Escape`</td><td>kapatır, odak tetikleyiciye döner</td></tr>
|
|
671
|
-
* <tr><td>`Tab`</td><td>kapatır, gezinme sürer</td></tr>
|
|
672
|
-
* <tr><td>yazmak</td><td>filtreler ve etkin seçeneği başa çeker</td></tr>
|
|
673
|
-
* </table>
|
|
674
|
-
* Nöbetçi: `components/__tests__/keyboard.test.tsx`.
|
|
675
|
-
*/
|
|
676
|
-
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;
|
|
351
|
+
/** Aranabilir seçim kutusu. */
|
|
352
|
+
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, }: ComboboxProps<T>) => JSX.Element;
|
|
677
353
|
|
|
678
|
-
/**
|
|
679
|
-
* Bileşenin çizdiği metinler.
|
|
680
|
-
*
|
|
681
|
-
* <p>`placeholder` dışındaki her şey `HanuiProvider labels.combobox`ten de
|
|
682
|
-
* gelebilir; buradaki değer kazanır. `placeholder` ALANI adlandırır
|
|
683
|
-
* ("Şehir seçin", "Marka seçin") ve her çağrı yerinde farklıdır — o yüzden
|
|
684
|
-
* zorunlu kaldı.
|
|
685
|
-
*/
|
|
354
|
+
/** Bileşenin çizdiği metinler. */
|
|
686
355
|
export declare type ComboboxLabels = {
|
|
687
356
|
/** Seçim yokken tetikleyicide ve alt sayfa başlığında görünen metin. */
|
|
688
357
|
placeholder: string;
|
|
@@ -706,6 +375,32 @@ export declare type ComboboxOption<T extends string = string> = {
|
|
|
706
375
|
isDisabled?: boolean;
|
|
707
376
|
};
|
|
708
377
|
|
|
378
|
+
declare type ComboboxProps<T extends string> = {
|
|
379
|
+
options: ComboboxOption<T>[];
|
|
380
|
+
value: T | null;
|
|
381
|
+
onChange: (value: T | null) => void;
|
|
382
|
+
labels: ComboboxLabels;
|
|
383
|
+
/**
|
|
384
|
+
* Verilirse arama <strong>sunucuda</strong> yapılır: bileşen listeyi kendisi
|
|
385
|
+
* filtrelemez, yazılanı 300 ms bekleyip buraya bildirir. Verilmezse
|
|
386
|
+
* filtreleme yerelde ve aksan duyarsız yapılır.
|
|
387
|
+
*/
|
|
388
|
+
onSearch?: (query: string) => void;
|
|
389
|
+
isLoading?: boolean;
|
|
390
|
+
isDisabled?: boolean;
|
|
391
|
+
/** Seçimi kaldıran çarpı düğmesi gösterilir. */
|
|
392
|
+
isClearable?: boolean;
|
|
393
|
+
/** Arama kutusu GİZLENİR. */
|
|
394
|
+
isSearchHidden?: boolean;
|
|
395
|
+
/** Tetikleyicinin solundaki ikon. */
|
|
396
|
+
icon?: ReactNode;
|
|
397
|
+
id?: string;
|
|
398
|
+
'aria-describedby'?: string;
|
|
399
|
+
'aria-invalid'?: boolean;
|
|
400
|
+
className?: string;
|
|
401
|
+
testId?: string;
|
|
402
|
+
};
|
|
403
|
+
|
|
709
404
|
export declare type CommandItem = {
|
|
710
405
|
id: string;
|
|
711
406
|
label: string;
|
|
@@ -721,78 +416,17 @@ export declare type CommandItem = {
|
|
|
721
416
|
|
|
722
417
|
export declare const CommandPalette: typeof CommandPalette_2;
|
|
723
418
|
|
|
724
|
-
/**
|
|
725
|
-
* Komut paleti — klavyeyle her şeye ulaşma.
|
|
726
|
-
*
|
|
727
|
-
* <h3>Neden `Combobox` + `Modal` bileşimi DEĞİL de ayrı bir bileşen</h3>
|
|
728
|
-
* Denendi ve iki yerde kırıldı. `Combobox` bir DEĞER seçtiriyor: seçim
|
|
729
|
-
* tetikleyicide kalıcı olarak görünüyor, `value`/`onChange` sözleşmesi var ve
|
|
730
|
-
* kapanınca seçili öğe hatırlanıyor. Palet ise bir EYLEM çalıştırıyor —
|
|
731
|
-
* hatırlanacak bir değer yok. İkincisi, `Combobox`ın tetikleyicisi var;
|
|
732
|
-
* palette tetikleyici KLAVYE KISAYOLU ve o kısayolu bağlamak çağıranın işi
|
|
733
|
-
* (hangi tuş, hangi sayfada — kütüphane bilemez).
|
|
734
|
-
*
|
|
735
|
-
* <h3>Kısayolu KÜTÜPHANE bağlamaz</h3>
|
|
736
|
-
* `⌘K` yaygın ama evrensel değil ve belge düzeyinde bir tuş dinleyicisi
|
|
737
|
-
* kurmak, tüketicinin kendi kısayollarıyla sessizce çakışmak demek. `shortcut`
|
|
738
|
-
* alanı yalnızca GÖSTERİLİYOR; `isOpen` çağıranın.
|
|
739
|
-
*
|
|
740
|
-
* <h3>Arama `matchesSearch` ile — aksan duyarsız</h3>
|
|
741
|
-
* "siparis" yazan kullanıcı "Sipariş"i bulmalı. Aynı normalizasyon
|
|
742
|
-
* `Combobox`ın yerel filtresinde de kullanılıyor; iki yerde iki farklı arama
|
|
743
|
-
* kuralı, aynı terimin iki farklı sonuç vermesi demekti.
|
|
744
|
-
*
|
|
745
|
-
* <h3>Klavye</h3>
|
|
746
|
-
* <table>
|
|
747
|
-
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin komut; uçlarda DÖNER</td></tr>
|
|
748
|
-
* <tr><td>`Home` / `End`</td><td>ilk / son komut</td></tr>
|
|
749
|
-
* <tr><td>`Enter`</td><td>etkin komutu çalıştırır ve kapatır</td></tr>
|
|
750
|
-
* <tr><td>`Escape`</td><td>kapatır, odak AÇAN öğeye döner</td></tr>
|
|
751
|
-
* </table>
|
|
752
|
-
* Odak arama kutusundan AYRILMAZ; etkin komut `aria-activedescendant` ile
|
|
753
|
-
* bildiriliyor. Odağı listeye taşımak yazmaya devam etmeyi imkânsız
|
|
754
|
-
* kılıyordu.
|
|
755
|
-
*/
|
|
419
|
+
/** Komut paleti — klavyeyle her şeye ulaşma. */
|
|
756
420
|
declare const CommandPalette_2: ({ isOpen, onClose, items, label, searchPlaceholder, emptyMessage, className, testId, }: Props_42) => JSX.Element;
|
|
757
421
|
|
|
758
|
-
/**
|
|
759
|
-
* Her bileşenin kabul ettiği ortak kanca noktaları.
|
|
760
|
-
*
|
|
761
|
-
* <p>`testId` `data-testid` olarak çizilir. Test kancasını prop olarak
|
|
762
|
-
* geçirmek yerine `className`e bir işaret koymak da mümkündü ama sınıf adları
|
|
763
|
-
* derleme sırasında karıştırılıyor: testin ona tutunması, kütüphane sürüm
|
|
764
|
-
* atladığında sessizce kopuyordu.
|
|
765
|
-
*/
|
|
422
|
+
/** Her bileşenin kabul ettiği ortak kanca noktaları. */
|
|
766
423
|
export declare type CommonElementProps = Partial<{
|
|
767
424
|
className: string;
|
|
768
425
|
id: string;
|
|
769
426
|
testId: string;
|
|
770
427
|
}>;
|
|
771
428
|
|
|
772
|
-
/**
|
|
773
|
-
* YOĞUN (compact) KİP — `<html data-hanui-density="compact">`.
|
|
774
|
-
*
|
|
775
|
-
* <h3>Gerekçe ölçülü</h3>
|
|
776
|
-
* Aynı bileşenleri iki uygulama kullanıyor: vitrin bir ekranda 8 satır,
|
|
777
|
-
* operasyon paneli 80 satır gösteriyor. Vitrin için doğru olan ferahlık,
|
|
778
|
-
* panelde kullanıcıyı kaydırmaya mahkûm ediyor; panel için doğru olan
|
|
779
|
-
* sıkılık vitrinde ucuz duruyor. İkisini tek ölçekle karşılamanın yolu yok.
|
|
780
|
-
*
|
|
781
|
-
* <h3>Boşluk ve punto iner; yarıçap ve dokunma hedefi inmez</h3>
|
|
782
|
-
* `space-0` ve `space-1` sabit kalır: 4 px'in altına inen bir boşluk kademesi
|
|
783
|
-
* bir boşluk değil bir çizim hatası. Yarıçap da sabit kalır — yuvarlaklık
|
|
784
|
-
* yoğunluğun değil markanın işi.
|
|
785
|
-
*
|
|
786
|
-
* <p>Punto ölçeğinin <strong>tamamı</strong> iner. Bir dönem yalnızca küçük
|
|
787
|
-
* uç (`2xs`–`body`) iniyordu ve bu ölçülebilir bir hataydı: gövde 15 px'e
|
|
788
|
-
* inerken başlıklar 29 px'te kaldığı için oran vitrindekinin çok üstüne
|
|
789
|
-
* çıkıyor, panelde başlıklar ekranı yiyordu.
|
|
790
|
-
*
|
|
791
|
-
* <h3>DOKUNMA HEDEFİ KÜÇÜLMEZ</h3>
|
|
792
|
-
* `tap-target` görünmez bir örtü çiziyor ve ölçüsü (44 px) buraya girmiyor:
|
|
793
|
-
* yoğun kip bilgi yoğunluğunu artırmak içindir, dokunulabilirliği düşürmek
|
|
794
|
-
* için değil (WCAG 2.5.8). Görsel kutu küçülür, hedef küçülmez.
|
|
795
|
-
*/
|
|
429
|
+
/** YOĞUN (compact) KİP — `<html data-hanui-density="compact">`. */
|
|
796
430
|
export declare const COMPACT_DENSITY: {
|
|
797
431
|
readonly 'space-2': "6px";
|
|
798
432
|
readonly 'space-3': "8px";
|
|
@@ -819,41 +453,8 @@ export declare const ConfirmDialog: typeof ConfirmDialog_2;
|
|
|
819
453
|
/**
|
|
820
454
|
* Onay penceresi.
|
|
821
455
|
*
|
|
822
|
-
* <h3>Neden `window.confirm()` yerine bu</h3>
|
|
823
|
-
* Yerel `confirm()`in dört sorunu var:
|
|
824
|
-
* <ul>
|
|
825
|
-
* <li>Görünümü işletim sisteminin — sitenin diliyle hiç ilgisi yok, üstünde
|
|
826
|
-
* tarayıcının alan adı yazıyor.</li>
|
|
827
|
-
* <li><strong>Ana iş parçacığını kilitler.</strong></li>
|
|
828
|
-
* <li>Yıkıcı eylemi vurgulayamaz: "Tamam" ile "İptal" aynı ağırlıkta ve
|
|
829
|
-
* hangisinin sildiğini yalnızca metinden anlıyorsun.</li>
|
|
830
|
-
* <li>İstek sürerken geri bildirim veremez; kullanıcı silme düğmesine ikinci
|
|
831
|
-
* kez basıyordu.</li>
|
|
832
|
-
* </ul>
|
|
833
|
-
*
|
|
834
|
-
* <h3>Yükleme durumu pencerede kalır</h3>
|
|
835
|
-
* Onaya basıldığında pencere hemen kapanmaz: düğme yükleniyor durumuna geçer
|
|
836
|
-
* ve pencere kapanmaz hâle gelir (`isDismissable={false}`). İstek bittiğinde
|
|
837
|
-
* kapatma kararı çağırana ait — hata varsa pencere açık kalmalı ki kullanıcı
|
|
838
|
-
* tekrar deneyebilsin.
|
|
839
|
-
*
|
|
840
456
|
* @example
|
|
841
457
|
* const [target, setTarget] = useState<Address | null>(null);
|
|
842
|
-
*
|
|
843
|
-
* <ConfirmDialog
|
|
844
|
-
* isOpen={target !== null}
|
|
845
|
-
* onClose={() => setTarget(null)}
|
|
846
|
-
* kind="destructive"
|
|
847
|
-
* title="Adres silinsin mi?"
|
|
848
|
-
* description="Bu işlem geri alınamaz."
|
|
849
|
-
* confirmLabel="Sil"
|
|
850
|
-
* cancelLabel="Vazgeç"
|
|
851
|
-
* closeLabel="Kapat"
|
|
852
|
-
* onConfirm={async () => {
|
|
853
|
-
* await remove(target!.id);
|
|
854
|
-
* setTarget(null);
|
|
855
|
-
* }}
|
|
856
|
-
* />
|
|
857
458
|
*/
|
|
858
459
|
declare const ConfirmDialog_2: FC<Props_43>;
|
|
859
460
|
|
|
@@ -861,38 +462,7 @@ export declare type ConfirmKind = 'destructive' | 'warning' | 'neutral';
|
|
|
861
462
|
|
|
862
463
|
export declare const CopyField: typeof CopyField_2;
|
|
863
464
|
|
|
864
|
-
/**
|
|
865
|
-
* Kopyalanabilir teknik değer — <strong>tek dokunuşla panoya</strong>.
|
|
866
|
-
*
|
|
867
|
-
* <h3>Neden ayrı bir öğe</h3>
|
|
868
|
-
* Bir kod (SKU, parça numarası, sipariş numarası, IBAN) dekoratif bir metin
|
|
869
|
-
* değil, kullanıcının <em>taşıdığı</em> veri. Düz bir `<span>` olduğunda
|
|
870
|
-
* kullanıcı onu fareyle seçmeye çalışırken kartın tamamını seçiyor ya da
|
|
871
|
-
* yanlışlıkla altındaki bağlantıyı tetikliyordu.
|
|
872
|
-
*
|
|
873
|
-
* <h3>Neden monospace</h3>
|
|
874
|
-
* "0986479644" gibi diziler orantılı yazı tipinde okunmuyor: `0`/`O` ve `1`/`l`
|
|
875
|
-
* ayırt edilemiyor ve bir hane atlandığında tamamen başka bir kayıt oluyor.
|
|
876
|
-
* `technical-text` sabit genişlik + `tabular-nums` verir; iki değer alt alta
|
|
877
|
-
* geldiğinde farklı hane gözle bulunur.
|
|
878
|
-
*
|
|
879
|
-
* <h3>Geri bildirim neden düğmenin üstünde</h3>
|
|
880
|
-
* Bir bildirim (toast) da olurdu ama listelerde on beş satır var; ekranın
|
|
881
|
-
* dibinde "kopyalandı" yazması <em>hangisinin</em> kopyalandığını
|
|
882
|
-
* söylemiyordu. İkon yerinde tike dönünce cevap tıklanan yerde.
|
|
883
|
-
*
|
|
884
|
-
* <h3>Düğmede native `title` YOK</h3>
|
|
885
|
-
* Ad yalnızca `aria-label`da. `title` aynı metni bir kez daha yazıyordu ve
|
|
886
|
-
* tarayıcı balonu dokunmatikte hiç görünmediği için hiçbir şey kazandırmıyor,
|
|
887
|
-
* bazı ekran okuyucularda adı iki kez okutuyordu. Simgenin kendisi zaten bir
|
|
888
|
-
* pano ve kopyalandığında tikli panoya dönüyor.
|
|
889
|
-
*
|
|
890
|
-
* <h3>Pano erişimi reddedilirse</h3>
|
|
891
|
-
* `navigator.clipboard` güvenli olmayan bağlamda (HTTP) ve izin verilmediğinde
|
|
892
|
-
* reddeder. O durumda değer sessizce <em>seçilir</em>: kullanıcı Ctrl+C ile
|
|
893
|
-
* kendisi kopyalayabilir. Sessizce hiçbir şey yapmamak, düğmeyi bozuk
|
|
894
|
-
* gösteriyordu.
|
|
895
|
-
*/
|
|
465
|
+
/** Kopyalanabilir teknik değer — <strong>tek dokunuşla panoya</strong>. */
|
|
896
466
|
declare const CopyField_2: FC<Props_22>;
|
|
897
467
|
|
|
898
468
|
export declare type Crumb = {
|
|
@@ -901,41 +471,12 @@ export declare type Crumb = {
|
|
|
901
471
|
href?: string;
|
|
902
472
|
};
|
|
903
473
|
|
|
904
|
-
/**
|
|
905
|
-
* KOYU TEMA.
|
|
906
|
-
*
|
|
907
|
-
* <p>Yüzey merdiveni açık temanın AYNISI DEĞİL, tersi: koyu temada yükselen
|
|
908
|
-
* yüzey AÇILIR (`surface` > `page`), çünkü ışık yukarıdan gelir. Aynı sırayı
|
|
909
|
-
* korumak kartları sayfaya gömüyordu.
|
|
910
|
-
*/
|
|
474
|
+
/** KOYU TEMA. */
|
|
911
475
|
export declare const DARK_THEME: Record<keyof typeof LIGHT_THEME, string>;
|
|
912
476
|
|
|
913
477
|
export declare const DataTable: typeof DataTable_2;
|
|
914
478
|
|
|
915
|
-
/**
|
|
916
|
-
* Operasyon veri tablosu — durum satırlı tablo sözleşmesi.
|
|
917
|
-
*
|
|
918
|
-
* <h3>Neden bir bileşen</h3>
|
|
919
|
-
* On iki ekranda on bir ham tablo ve altı kaydırma sarmalayıcısı kopyası
|
|
920
|
-
* vardı; üçü farklı davranıyordu (kimi dikey kaymıyor, kiminin başlığı
|
|
921
|
-
* yapışmıyor). Kabuk (yüzey + hairline + `overflow: auto`), tablo görünümü ve
|
|
922
|
-
* üç durum satırı (yükleniyor / hata / boş) artık tek yerde; `colSpan` sütun
|
|
923
|
-
* sayısından kendiliğinden hesaplanır — elle yazılan `colSpan={8}` bir sütun
|
|
924
|
-
* eklenince sessizce yanlış kalıyordu.
|
|
925
|
-
*
|
|
926
|
-
* <h3>Durum öncelik sırası</h3>
|
|
927
|
-
* `error` > `isLoading` > boş > satırlar. Hata varken yükleme veya boş
|
|
928
|
-
* mesajı gösterilmez; yüklenirken bayat satır çizilmez.
|
|
929
|
-
*
|
|
930
|
-
* <h3>Görünmez başlık `aria-label` DEĞİL, gizlenmiş METİN</h3>
|
|
931
|
-
* Eylem sütununun adı önce `<th aria-label="Eylemler">` olarak yazılıyordu.
|
|
932
|
-
* Eksen taraması bunu ihlal olarak bildirdi (`empty-table-header`) ve haklı:
|
|
933
|
-
* `aria-label`ın hücre başlığı olarak kullanılması destek teknolojilerinde
|
|
934
|
-
* tutarsız — bazı ekran okuyucular tablo gezinme kipinde sütun adını
|
|
935
|
-
* hücrenin İÇERİĞİNDEN okur ve boş bir `<th>` orada adsız kalır. Görsel olarak
|
|
936
|
-
* gizlenmiş gerçek bir metin düğümü hem okunur hem de sayfa çevirisine,
|
|
937
|
-
* bulma-değiştirmeye ve seçime dahil olur.
|
|
938
|
-
*/
|
|
479
|
+
/** Operasyon veri tablosu — durum satırlı tablo sözleşmesi. */
|
|
939
480
|
declare const DataTable_2: FC<Props_47>;
|
|
940
481
|
|
|
941
482
|
export declare type DataTableColumn = {
|
|
@@ -946,18 +487,9 @@ export declare type DataTableColumn = {
|
|
|
946
487
|
/**
|
|
947
488
|
* Görsel başlığı olmayan sütunun erişilebilir adı (eylem sütunu gibi).
|
|
948
489
|
* Boş bir `<th>` ekran okuyucuda adsız bir sütun bırakıyordu.
|
|
949
|
-
*
|
|
950
|
-
* <p>Metin `aria-label` OLARAK DEĞİL, görsel olarak gizlenmiş gerçek bir
|
|
951
|
-
* metin düğümü olarak yazılır — gerekçe {@link DataTable} JSDoc'unda.
|
|
952
490
|
*/
|
|
953
491
|
srLabel?: string;
|
|
954
|
-
/**
|
|
955
|
-
* Sıralanabilir sütunun yönü (`aria-sort`).
|
|
956
|
-
*
|
|
957
|
-
* <p>`onSort` ile birlikte verildiğinde başlık TIKLANABİLİR olur ve yön
|
|
958
|
-
* oku çizilir. Tek başına verildiğinde yalnızca durumu bildirir —
|
|
959
|
-
* sıralamayı başka bir denetim (bir `Select`) yapıyorsa doğrusu budur.
|
|
960
|
-
*/
|
|
492
|
+
/** Sıralanabilir sütunun yönü (`aria-sort`). */
|
|
961
493
|
ariaSort?: 'ascending' | 'descending';
|
|
962
494
|
/**
|
|
963
495
|
* Sütun sıralanabilir. `DataTable.onSort` ile birlikte anlamlı; ikisinden
|
|
@@ -965,14 +497,7 @@ export declare type DataTableColumn = {
|
|
|
965
497
|
* yapmayan bir başlık, kullanıcıya var olmayan bir yetenek vaat ediyordu.
|
|
966
498
|
*/
|
|
967
499
|
isSortable?: boolean;
|
|
968
|
-
/**
|
|
969
|
-
* Sütun yatay kaydırmada YERİNDE kalır.
|
|
970
|
-
*
|
|
971
|
-
* <p>Yalnızca İLK sütunda anlamlı: geniş bir tabloda sağa kaydıran
|
|
972
|
-
* kullanıcı hangi satıra baktığını kaybediyordu. İkinci bir yapışkan sütun
|
|
973
|
-
* `left` ofsetinin elle hesaplanmasını gerektirir ve o hesap sütun
|
|
974
|
-
* genişliğine bağlı — desteklenmiyor.
|
|
975
|
-
*/
|
|
500
|
+
/** Sütun yatay kaydırmada YERİNDE kalır. */
|
|
976
501
|
isSticky?: boolean;
|
|
977
502
|
className?: string;
|
|
978
503
|
};
|
|
@@ -981,40 +506,7 @@ export declare const DataTableRow: FC<RowProps>;
|
|
|
981
506
|
|
|
982
507
|
export declare const DateField: typeof DateField_2;
|
|
983
508
|
|
|
984
|
-
/**
|
|
985
|
-
* Tarih alanı — <strong>yerel</strong> `<input type="date">`.
|
|
986
|
-
*
|
|
987
|
-
* <h3>Neden taklit bir takvim YOK</h3>
|
|
988
|
-
* Bu kütüphanenin kuralı: yerel öğe korunur, taklit yazmanın tek gerekçesi
|
|
989
|
-
* ölçülmüş bir kusurdur ({@link Select} bunun tek istisnası ve gerekçesi
|
|
990
|
-
* orada yazılı). Tarih alanında böyle bir kusur YOK — tersine, yerel öğenin
|
|
991
|
-
* taklidin veremeyeceği dört şeyi var:
|
|
992
|
-
*
|
|
993
|
-
* <ul>
|
|
994
|
-
* <li><b>Mobilde işletim sisteminin seçicisi.</b> iOS'ta tekerlek, Android'de
|
|
995
|
-
* takvim — kullanıcının her gün kullandığı, alışkın olduğu arayüz. Hiçbir
|
|
996
|
-
* web takvimi 360 px'lik bir ekranda ona yaklaşamıyor.</li>
|
|
997
|
-
* <li><b>Klavyeyle YAZARAK giriş.</b> Doğum tarihini bilen biri "01.01.1980"i
|
|
998
|
-
* üç saniyede yazıyor; taklit takvimde aynı iş kırk yıl geriye tıklamak
|
|
999
|
-
* demek.</li>
|
|
1000
|
-
* <li><b>Yerel biçim.</b> Tarayıcı kullanıcının işletim sistemi ayarına göre
|
|
1001
|
-
* gg.aa.yyyy ya da mm/dd/yyyy gösteriyor; değer her zaman ISO
|
|
1002
|
-
* (`YYYY-MM-DD`) kalıyor. İki biçimi elle yönetmek, kütüphanenin
|
|
1003
|
-
* kullanıcının yerel ayarını TAHMİN etmesi demekti.</li>
|
|
1004
|
-
* <li><b>Ekran okuyucu.</b> Alan üç ayrı bölüm (gün/ay/yıl) olarak okunuyor
|
|
1005
|
-
* ve ok tuşlarıyla artırılıyor. APG'ye uygun bir takvim ızgarası bunu
|
|
1006
|
-
* ancak taklit edebilir.</li>
|
|
1007
|
-
* </ul>
|
|
1008
|
-
*
|
|
1009
|
-
* <p>Bedeli: takvim açılışının görünüşü tarayıcıya ait ve tema token'larını
|
|
1010
|
-
* izlemiyor. Kabul edildi — açılan panelin rengi, yukarıdaki dördünün
|
|
1011
|
-
* yanında küçük bir bedel.
|
|
1012
|
-
*
|
|
1013
|
-
* <h3>`min` / `max` KULLANIN</h3>
|
|
1014
|
-
* İkisi de yerel öğede var ve tarayıcı doğrulamayı kendisi yapıyor. Geçersiz
|
|
1015
|
-
* bir tarihi yalnızca gönderimde yakalamak, kullanıcıyı formu doldurduktan
|
|
1016
|
-
* sonra geri gönderiyordu.
|
|
1017
|
-
*/
|
|
509
|
+
/** Tarih alanı — <strong>yerel</strong> `<input type="date">`. */
|
|
1018
510
|
declare const DateField_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
1019
511
|
/** `date` (varsayılan) · `datetime-local` · `month` · `time`. */
|
|
1020
512
|
type?: "date" | "datetime-local" | "month" | "time";
|
|
@@ -1037,30 +529,16 @@ export declare const Directory: typeof Directory_2;
|
|
|
1037
529
|
/**
|
|
1038
530
|
* Dizin — harf veya konu başlıklı, gruplanmış bağlantı listesi.
|
|
1039
531
|
*
|
|
1040
|
-
* <h3>Neden ortak bir bileşen</h3>
|
|
1041
|
-
* Bir marka dizini ile bir kategori dizini aynı işi yapıyor: yüzlerce
|
|
1042
|
-
* bağlantıyı gruplayıp taranabilir kılmak. Ama iki container bunu ayrı ayrı
|
|
1043
|
-
* kurmuştu ve sonuç iki farklı sayfa oldu — birinde grup başlığı alt çizgili
|
|
1044
|
-
* 19 px, diğerinde çizgisiz; birinde satırlar ızgarada, diğerinde tek kolonda.
|
|
1045
|
-
*
|
|
1046
|
-
* <p>Ortak olan <em>görsel dilbilgisi</em>: grup başlığı + ızgara + satır
|
|
1047
|
-
* öğesi. O buraya taşındı; ne listelendiği çağırana kaldı.
|
|
1048
|
-
*
|
|
1049
532
|
* @example
|
|
1050
533
|
* <Directory>
|
|
1051
|
-
*
|
|
1052
|
-
*
|
|
1053
|
-
*
|
|
534
|
+
* <DirectoryGroup label="A">
|
|
535
|
+
* <DirectoryRow href="/marka/ate" name="ATE" media={<img … />} />
|
|
536
|
+
* </DirectoryGroup>
|
|
1054
537
|
* </Directory>
|
|
1055
538
|
*/
|
|
1056
539
|
declare const Directory_2: FC<DirectoryProps>;
|
|
1057
540
|
|
|
1058
|
-
/**
|
|
1059
|
-
* Dizin grubu.
|
|
1060
|
-
*
|
|
1061
|
-
* <p>Başlık <strong>yapışkan</strong>: uzun bir listede kaydırırken hangi
|
|
1062
|
-
* harfte olduğunu görmek, listeyi yukarı sarıp kontrol etmekten iyi.
|
|
1063
|
-
*/
|
|
541
|
+
/** Dizin grubu. */
|
|
1064
542
|
export declare const DirectoryGroup: FC<DirectoryGroupProps>;
|
|
1065
543
|
|
|
1066
544
|
declare type DirectoryGroupProps = {
|
|
@@ -1080,17 +558,7 @@ declare type DirectoryGroupProps = {
|
|
|
1080
558
|
id?: string;
|
|
1081
559
|
};
|
|
1082
560
|
|
|
1083
|
-
/**
|
|
1084
|
-
* Alfabe atlama şeridi.
|
|
1085
|
-
*
|
|
1086
|
-
* <p>Uzun bir listede "V" harfine ulaşmak için kaydırmak dakikalar alıyordu.
|
|
1087
|
-
* Şerit yatay kayar ve `#çıpa` bağlantıları taşır — JavaScript gerekmez,
|
|
1088
|
-
* tarayıcı kaydırmayı kendisi yapar ve bağlantı paylaşılabilir.
|
|
1089
|
-
*
|
|
1090
|
-
* <p>Bağlantılar HAM `<a>`: bunlar sayfa içi çıpa, gezinme değil. Bir
|
|
1091
|
-
* yönlendiriciden geçirmek aynı sayfayı yeniden çözümleyip kaydırmayı
|
|
1092
|
-
* kaçırıyordu.
|
|
1093
|
-
*/
|
|
561
|
+
/** Alfabe atlama şeridi. */
|
|
1094
562
|
export declare const DirectoryJump: FC<DirectoryJumpProps>;
|
|
1095
563
|
|
|
1096
564
|
declare type DirectoryJumpProps = {
|
|
@@ -1107,13 +575,7 @@ declare type DirectoryProps = {
|
|
|
1107
575
|
className?: string;
|
|
1108
576
|
};
|
|
1109
577
|
|
|
1110
|
-
/**
|
|
1111
|
-
* Dizin satırı — tek bir bağlantı.
|
|
1112
|
-
*
|
|
1113
|
-
* <p>Tüm satır tıklanabilir ve en az 44 px yüksekliğinde (WCAG 2.5.8):
|
|
1114
|
-
* yalnızca metnin tıklanabilir olduğu bir listede dokunmatik kullanıcılar
|
|
1115
|
-
* satırın boşluğuna basıp hiçbir şey olmadığını görüyordu.
|
|
1116
|
-
*/
|
|
578
|
+
/** Dizin satırı — tek bir bağlantı. */
|
|
1117
579
|
export declare const DirectoryRow: FC<DirectoryRowProps>;
|
|
1118
580
|
|
|
1119
581
|
declare type DirectoryRowProps = {
|
|
@@ -1130,68 +592,17 @@ declare type DirectoryRowProps = {
|
|
|
1130
592
|
|
|
1131
593
|
export declare const Divider: typeof Divider_2;
|
|
1132
594
|
|
|
1133
|
-
/**
|
|
1134
|
-
* Ayırıcı çizgi.
|
|
1135
|
-
*
|
|
1136
|
-
* <p>Etiketli hâli `role="separator"` taşımaz: metin içerdiğinde ekran okuyucu
|
|
1137
|
-
* onu ayırıcı değil içerik olarak okumalı ("veya").
|
|
1138
|
-
*/
|
|
595
|
+
/** Ayırıcı çizgi. */
|
|
1139
596
|
declare const Divider_2: FC<Props_23>;
|
|
1140
597
|
|
|
1141
598
|
export declare const Drawer: typeof Drawer_2;
|
|
1142
599
|
|
|
1143
|
-
/**
|
|
1144
|
-
* Çekmece (drawer) — kenardan açılan kipsel panel.
|
|
1145
|
-
*
|
|
1146
|
-
* <h3>{@link BottomSheet} ile farkı: EKRAN, tercih değil</h3>
|
|
1147
|
-
* İkisi de kipsel bir yan panel; ayrım hangi ekranda doğru olduklarında:
|
|
1148
|
-
*
|
|
1149
|
-
* <ul>
|
|
1150
|
-
* <li>`BottomSheet` DAR ekran içindir. Baş parmağın erişebildiği yer
|
|
1151
|
-
* ekranın dibi; kenardan gelen bir panel telefonda ekranın tamamını
|
|
1152
|
-
* kaplıyor ve "panel" olmaktan çıkıyor.</li>
|
|
1153
|
-
* <li><b>`Drawer` GENİŞ ekran içindir.</b> Filtre paneli ve ayrıntı
|
|
1154
|
-
* incelemesi sayfanın yanında durur; kullanıcı listeyi görmeye devam
|
|
1155
|
-
* eder. Aynı panel dipten gelseydi 1440 px'lik bir ekranda içeriğin
|
|
1156
|
-
* tamamını örtüyordu.</li>
|
|
1157
|
-
* </ul>
|
|
1158
|
-
*
|
|
1159
|
-
* <h3>`isOpen` alır — ve bu {@link BottomSheet}ten bilinçli bir AYRILIK</h3>
|
|
1160
|
-
* `BottomSheet` "açıkken çizilir, kapatmak için kaldırılır" sözleşmesini
|
|
1161
|
-
* kullanıyor ve bunun bir bedeli var: React sökülen bir ağacı bekletmediği
|
|
1162
|
-
* için <strong>çıkış animasyonu çizilemiyor</strong>, panel bir karede yok
|
|
1163
|
-
* oluyor. Çekmece açık/kapalı durumu kendisi taşıyor; `<dialog>` kapanırken
|
|
1164
|
-
* `@starting-style` + `allow-discrete` ile geri kayıyor.
|
|
1165
|
-
*
|
|
1166
|
-
* <h3>Klavye</h3>
|
|
1167
|
-
* <table>
|
|
1168
|
-
* <tr><td>`Escape`</td><td>kapatır — üst üste açık panellerde YALNIZCA en üstteki</td></tr>
|
|
1169
|
-
* <tr><td>`Tab`</td><td>odak panelin içinde döner (tarayıcı: `showModal()`)</td></tr>
|
|
1170
|
-
* </table>
|
|
1171
|
-
* Açılışta odak kapatma düğmesine DEĞİL ilk anlamlı öğeye gider.
|
|
1172
|
-
*/
|
|
600
|
+
/** Çekmece (drawer) — kenardan açılan kipsel panel. */
|
|
1173
601
|
declare const Drawer_2: ({ isOpen, onClose, title, closeLabel, children, side, size, footer, toolbar, className, testId, }: Props_44) => JSX.Element;
|
|
1174
602
|
|
|
1175
603
|
export declare const EmptyState: typeof EmptyState_2;
|
|
1176
604
|
|
|
1177
|
-
/**
|
|
1178
|
-
* Boş durum.
|
|
1179
|
-
*
|
|
1180
|
-
* <h3>Neden her boş durum bir eylem taşır</h3>
|
|
1181
|
-
* "Sonuç bulunamadı" tek başına çıkmaz sokaktır. Kullanıcı o ekranda ne
|
|
1182
|
-
* yapacağını bilmeli: aramayı temizle, filtreyi kaldır, listeye dön. `action`
|
|
1183
|
-
* isteğe bağlı ama çağıran taraf onu vermezse kullanıcı tıkanır.
|
|
1184
|
-
*
|
|
1185
|
-
* <h3>BOŞ ile YÜKLENEMEDİ ayrı durumlardır</h3>
|
|
1186
|
-
* Ağ hatasını "kayıt kalmamış" diye okuyan kullanıcı yanlış karar veriyor.
|
|
1187
|
-
* İkisi `tone` ile ayrılıyor: `error` farklı bir ton taşıyor ve
|
|
1188
|
-
* `role="alert"` ile duyuruluyor, ama YERLEŞİM aynı — iki durum arasındaki
|
|
1189
|
-
* geçiş sıçramıyor.
|
|
1190
|
-
*
|
|
1191
|
-
* <p>Ayrım önce bu bileşenin DIŞINDAYDI ("ağ hatasında çizilmez") ve sonucu
|
|
1192
|
-
* şuydu: her çağıran kendi hata kutusunu yazıyor, kutular birbirinden farklı
|
|
1193
|
-
* görünüyordu. Ayrım korunuyor, kararın yeri değişti.
|
|
1194
|
-
*/
|
|
605
|
+
/** Boş durum. */
|
|
1195
606
|
declare const EmptyState_2: FC<Props_24>;
|
|
1196
607
|
|
|
1197
608
|
export declare const Field: typeof Field_2;
|
|
@@ -1199,21 +610,9 @@ export declare const Field: typeof Field_2;
|
|
|
1199
610
|
/**
|
|
1200
611
|
* Form alanı sarmalayıcısı.
|
|
1201
612
|
*
|
|
1202
|
-
* <h3>Neden render-prop</h3>
|
|
1203
|
-
* Etiket, hata mesajı ve yardım metni girdiye `id` / `aria-describedby` /
|
|
1204
|
-
* `aria-invalid` ile <strong>bağlanmak zorunda</strong> — yoksa ekran okuyucu
|
|
1205
|
-
* hatayı okumaz. Bu bağları her form alanında elle yazmak kaçınılmaz olarak
|
|
1206
|
-
* bir yerde atlanıyor.
|
|
1207
|
-
*
|
|
1208
|
-
* <p>Render-prop kalıbı bağları bileşene ürettirir: çağıran taraf yalnızca
|
|
1209
|
-
* aldığı props'ları girdiye yayar ve erişilebilirlik kendiliğinden doğru olur.
|
|
1210
|
-
*
|
|
1211
|
-
* <p>Hata varken yardım metni gösterilmez: ikisi birlikte gürültü yapar ve
|
|
1212
|
-
* kullanıcının okuması gereken mesaj kaybolur.
|
|
1213
|
-
*
|
|
1214
613
|
* @example
|
|
1215
614
|
* <Field label="E-posta" isRequired requiredLabel="(zorunlu)" error={emailError}>
|
|
1216
|
-
*
|
|
615
|
+
* {props => <Input {...props} type="email" value={email} onChange={onChange} />}
|
|
1217
616
|
* </Field>
|
|
1218
617
|
*
|
|
1219
618
|
* @example
|
|
@@ -1242,65 +641,12 @@ declare type FieldProps = {
|
|
|
1242
641
|
|
|
1243
642
|
export declare const FileUpload: typeof FileUpload_2;
|
|
1244
643
|
|
|
1245
|
-
/**
|
|
1246
|
-
* Dosya yükleme — sürükle-bırak <strong>ve</strong> düğme.
|
|
1247
|
-
*
|
|
1248
|
-
* <h3>Yerel `<input type="file">` KORUNUR</h3>
|
|
1249
|
-
* Görsel olarak gizlenir ama DOM'da kalır ve `<label>` ile alana bağlanır:
|
|
1250
|
-
* klavyeyle `Tab` + `Enter`, ekran okuyucuda "dosya seç, düğme" duyurusu,
|
|
1251
|
-
* işletim sisteminin dosya seçicisi ve mobilde kamera/galeri seçenekleri
|
|
1252
|
-
* <em>bedava</em> gelir. `<div>` üzerine `onDrop` yazıp düğmeyi taklit etmek
|
|
1253
|
-
* bunların hiçbirini getirmiyor — ve sürükle-bırak zaten <strong>tek başına
|
|
1254
|
-
* erişilebilir değil</strong>: fare gerektiriyor (WCAG 2.5.7).
|
|
1255
|
-
*
|
|
1256
|
-
* <h3>Doğrulama BİLEŞENDE, ama yalnızca ÖLÇÜLEBİLİR olan</h3>
|
|
1257
|
-
* Boyut sınırı burada uygulanıyor çünkü cevabı kesin ve anında verilebiliyor:
|
|
1258
|
-
* aşan dosya `onSelect`e hiç ulaşmıyor, kullanıcı yüklemenin bitmesini
|
|
1259
|
-
* beklemeden hatayı görüyor. Tür/içerik doğrulaması burada YAPILMIYOR —
|
|
1260
|
-
* `accept` bir öneri, gerçek karar sunucunun ve istemcide "geçerli" demek
|
|
1261
|
-
* yanlış bir söz olurdu.
|
|
1262
|
-
*
|
|
1263
|
-
* <h3>Sonuç DUYURULUYOR</h3>
|
|
1264
|
-
* Dosya eklendiğinde ve reddedildiğinde `useAnnounce` ile ekran okuyucuya
|
|
1265
|
-
* bildiriliyor. Listeye sessizce eklenen bir satır, görmeyen kullanıcı için
|
|
1266
|
-
* hiç olmamış demekti.
|
|
1267
|
-
*
|
|
1268
|
-
* <h3>Klavye</h3>
|
|
1269
|
-
* <table>
|
|
1270
|
-
* <tr><td>`Tab`</td><td>alana, sonra her dosyanın kaldırma düğmesine</td></tr>
|
|
1271
|
-
* <tr><td>`Enter` / `Space`</td><td>alanda: dosya seçiciyi açar</td></tr>
|
|
1272
|
-
* </table>
|
|
1273
|
-
*/
|
|
644
|
+
/** Dosya yükleme — sürükle-bırak <strong>ve</strong> düğme. */
|
|
1274
645
|
declare const FileUpload_2: ({ files, onSelect, onRemove, label, hint, accept, isMultiple, maxSize, removeLabel, dropLabel, sizeErrorText, isDisabled, error, children, className, testId, }: Props_16) => JSX.Element;
|
|
1275
646
|
|
|
1276
647
|
export declare const FilterBar: typeof FilterBar_2;
|
|
1277
648
|
|
|
1278
|
-
/**
|
|
1279
|
-
* Filtre şeridi.
|
|
1280
|
-
*
|
|
1281
|
-
* <h3>Her zaman `<form onSubmit>`</h3>
|
|
1282
|
-
* Beş ekran şeridi elle kuruyordu ve yalnızca üçü `<form>` kullanıyordu: arama
|
|
1283
|
-
* kutusunda Enter üç ekranda filtreyi uyguluyor, ikisinde hiçbir şey
|
|
1284
|
-
* yapmıyordu. Şerit artık her zaman bir formdur ve görünür bir gönderme düğmesi
|
|
1285
|
-
* olmasa bile Enter çalışsın diye gizli bir yedek gönderme düğmesi taşır
|
|
1286
|
-
* (birden çok alanı olan formda tarayıcının örtük gönderimi ancak bir gönderme
|
|
1287
|
-
* düğmesi varsa çalışır).
|
|
1288
|
-
*
|
|
1289
|
-
* <h3>Denetimler tek hizada</h3>
|
|
1290
|
-
* Şerit alanları alt kenardan hizalar; etiketli ve etiketsiz alanın yan yana
|
|
1291
|
-
* durması bunu bozmaz. Bozan şey denetimin <strong>altına</strong> yazılan
|
|
1292
|
-
* yardım/hata metniydi: alanın alt kenarı artık denetimin değil metnin kenarı
|
|
1293
|
-
* oluyor ve denetim komşularından yukarı kaçıyordu (ölçüldü: bir ekranda 24 px
|
|
1294
|
-
* kaçık iki girdi). Şeridin içindeki `Field` mesajı denetimin
|
|
1295
|
-
* <em>üstüne</em> alır — etiket, ipucu, denetim. DOM sırası değişmez, yani
|
|
1296
|
-
* ekran okuyucu yine "etiket, denetim, hata, ipucu" duyar.
|
|
1297
|
-
*
|
|
1298
|
-
* <h3>320px'te taşma yok</h3>
|
|
1299
|
-
* Alanlar `min-width: 240–280px` taşıyordu ve en dar ekranda şerit sayfayı yana
|
|
1300
|
-
* kaydırıyordu. Genişlik artık `flex-basis` ile istenir, `min-width: 0` ile
|
|
1301
|
-
* daraltılabilir kalır: alan tercihen 220px'tir ama sığmadığı yerde küçülür,
|
|
1302
|
-
* taşmaz.
|
|
1303
|
-
*/
|
|
649
|
+
/** Filtre şeridi. */
|
|
1304
650
|
declare const FilterBar_2: FC<Props_48>;
|
|
1305
651
|
|
|
1306
652
|
/**
|
|
@@ -1309,82 +655,20 @@ declare const FilterBar_2: FC<Props_48>;
|
|
|
1309
655
|
*/
|
|
1310
656
|
export declare const FilterBarField: FC<FieldProps>;
|
|
1311
657
|
|
|
1312
|
-
/**
|
|
1313
|
-
* ARAYÜZ METİNLERİ.
|
|
1314
|
-
*
|
|
1315
|
-
* <h3>Kütüphane hiçbir dilde metin UYDURMAZ</h3>
|
|
1316
|
-
* Bir bileşen kütüphanesi "Kapat" yazamaz: hangi dilde, hangi üslupta
|
|
1317
|
-
* ("Kapat" mı "Vazgeç" mi), hangi terimle (kayıt / ürün / talep) yazacağını
|
|
1318
|
-
* bilmez. Bu yüzden kullanıcıya görünen her metin dışarıdan gelir.
|
|
1319
|
-
*
|
|
1320
|
-
* <h3>Ama her ÇAĞRI YERİNDE değil, bir KEZ</h3>
|
|
1321
|
-
* Metinleri prop olarak zorunlu tutmak doğruydu ama yeri yanlıştı: aynı
|
|
1322
|
-
* "Kapat" dizesi yüz çağrı yerine dağılıyor ve biri değiştiğinde
|
|
1323
|
-
* doksan dokuzu eski kalıyordu. Uygulamanın dili tek; karar da tek yerde
|
|
1324
|
-
* verilmeli.
|
|
1325
|
-
*
|
|
1326
|
-
* <pre>
|
|
1327
|
-
* <HanuiProvider labels={{ close: 'Kapat', cancel: 'Vazgeç' }}>
|
|
1328
|
-
* </pre>
|
|
1329
|
-
*
|
|
1330
|
-
* <h3>Çözümleme sırası: prop → config → uyarı</h3>
|
|
1331
|
-
* Bir prop verilmişse o kazanır (bir pencerenin kapatma düğmesi bağlama göre
|
|
1332
|
-
* "Kapat" yerine "Daha sonra" olabilir). Verilmemişse config'ten okunur.
|
|
1333
|
-
* İkisi de yoksa öğe erişilebilir adını kaybeder — bu bir hata ve geliştirme
|
|
1334
|
-
* kipinde konsola yazılır (bkz. `helpers/label.helper`).
|
|
1335
|
-
*
|
|
1336
|
-
* <h3>Neden derleme zamanında zorlanamıyor</h3>
|
|
1337
|
-
* TypeScript, çalışma zamanında bir sağlayıcının olup olmadığını göremez.
|
|
1338
|
-
* Prop'ları zorunlu tutmak config'i işe yaramaz kılardı; isteğe bağlı yapmak
|
|
1339
|
-
* derleme güvencesini bırakıp geliştirme uyarısına indiriyor. Bilinçli bir
|
|
1340
|
-
* takas: metnin tek yerde durması, derleyicinin bunu görmesinden daha değerli.
|
|
1341
|
-
*
|
|
1342
|
-
* <h3>Neye metin VERİLMEZ</h3>
|
|
1343
|
-
* Öğeye ÖZGÜ olan hiçbir şey buraya girmez: `Modal.title`,
|
|
1344
|
-
* `ConfirmDialog.confirmLabel` ("Sil" — eylemi tekrarlamak zorunda),
|
|
1345
|
-
* `IconButton.label`, `Select.label`, `TableCheckbox.label`. Bunlar prop
|
|
1346
|
-
* olarak zorunlu kalır çünkü her çağrı yerinde farklıdır.
|
|
1347
|
-
*/
|
|
1348
658
|
/** Sayı biçimlendiricileri: değere bağlı metinler dizeyle verilemez. */
|
|
1349
659
|
declare type Formatter<TArgs extends unknown[]> = (...args: TArgs) => string;
|
|
1350
660
|
|
|
1351
661
|
/**
|
|
1352
662
|
* Kullanıcının SEÇİMİ. `system` = açık bir seçim yok, işletim sistemi tercihi
|
|
1353
663
|
* izlenir (`prefers-color-scheme`).
|
|
1354
|
-
*
|
|
1355
|
-
* <h3>Bu tip neden sonradan eklendi</h3>
|
|
1356
|
-
* `HanuiColorScheme`in JSDoc'u "`system` işletim sistemi tercihini izler"
|
|
1357
|
-
* diyordu ama tipte `system` YOKTU — belge bir yeteneği anlatıyor, tip onu
|
|
1358
|
-
* yasaklıyordu. İki çözüm vardı: cümleyi silmek ya da yeteneği gerçekten
|
|
1359
|
-
* eklemek. İkincisi seçildi çünkü eksik olan gerçek bir davranıştı: üç
|
|
1360
|
-
* durumlu tema anahtarı (Açık / Koyu / Sistem) yaygın bir kalıp ve kütüphane
|
|
1361
|
-
* onu kuramıyordu — `system`e dönmenin yolu özniteliği ELLE silmekti ve bunu
|
|
1362
|
-
* tüketicinin bilmesi gerekiyordu.
|
|
1363
|
-
*
|
|
1364
|
-
* <p>Ekleme KIRICI DEĞİL: `scheme` hâlâ çözülmüş değeri döndürüyor, yalnızca
|
|
1365
|
-
* `preference` alanı ve `setScheme('system')` girişi eklendi.
|
|
1366
664
|
*/
|
|
1367
665
|
export declare type HanuiColorPreference = HanuiColorScheme | 'system';
|
|
1368
666
|
|
|
1369
|
-
/**
|
|
1370
|
-
* ÇÖZÜLMÜŞ tema — ekranda gerçekten hangisi çizili.
|
|
1371
|
-
*
|
|
1372
|
-
* <p>Burada `system` YOKTUR ve olamaz: `system` bir tercih, bir tema değil.
|
|
1373
|
-
* Çözüldüğünde ya açık ya koyu olur ve bileşenlerin gördüğü şey o. İkisini tek
|
|
1374
|
-
* tipte toplamak, `scheme === 'system'` yazan bir tüketiciye hangi renklerin
|
|
1375
|
-
* çizildiğini hâlâ söylemiyordu.
|
|
1376
|
-
*/
|
|
667
|
+
/** ÇÖZÜLMÜŞ tema — ekranda gerçekten hangisi çizili. */
|
|
1377
668
|
export declare type HanuiColorScheme = 'light' | 'dark';
|
|
1378
669
|
|
|
1379
670
|
export declare type HanuiContextValue = {
|
|
1380
|
-
/**
|
|
1381
|
-
* Tüketicinin yönlendiricisi (`next/link`, `react-router`ın `Link`i…).
|
|
1382
|
-
*
|
|
1383
|
-
* <p>Verilmezse ham `<a>` çizilir ve gezinme tam sayfa yenilemesi olur.
|
|
1384
|
-
* Bir bileşen kütüphanesi kendi yönlendiricisini SEÇEMEZ: `next/link`
|
|
1385
|
-
* import etmek paketi Next'e bağlar, `react-router` import etmek başka bir
|
|
1386
|
-
* uygulamayı kırar. Karar tüketicinin.
|
|
1387
|
-
*/
|
|
671
|
+
/** Tüketicinin yönlendiricisi (`next/link`, `react-router`ın `Link`i…). */
|
|
1388
672
|
linkComponent?: HanuiLinkComponent;
|
|
1389
673
|
/** Uygulanan tema ezmeleri. Salt okunur; değiştirmek için `HanuiProvider`. */
|
|
1390
674
|
theme?: HanuiThemeConfig;
|
|
@@ -1395,27 +679,10 @@ export declare type HanuiContextValue = {
|
|
|
1395
679
|
labels?: HanuiLabels;
|
|
1396
680
|
};
|
|
1397
681
|
|
|
1398
|
-
/**
|
|
1399
|
-
* Bilgi yoğunluğu. `default` vitrin, `compact` operasyon paneli.
|
|
1400
|
-
*
|
|
1401
|
-
* <p>Seçim `<html data-hanui-density>` ile taşınır — tıpkı tema gibi, ve aynı
|
|
1402
|
-
* sebeple: bir ölçek kararı tek bir React ağacının değil BELGENİN kararıdır;
|
|
1403
|
-
* portal ile gövdeye taşınan kip pencere de aynı yoğunlukta olmalı.
|
|
1404
|
-
*/
|
|
682
|
+
/** Bilgi yoğunluğu. `default` vitrin, `compact` operasyon paneli. */
|
|
1405
683
|
export declare type HanuiDensity = 'default' | 'compact';
|
|
1406
684
|
|
|
1407
|
-
/**
|
|
1408
|
-
* Yazı tipi ailesi sözleşmesi.
|
|
1409
|
-
*
|
|
1410
|
-
* <p>Üç rol ayrı: başlık (≥19 px), arayüz metni (11–16 px) ve teknik veri
|
|
1411
|
-
* (kod, seri numarası, tutar). KÜÇÜK ARAYÜZ METNİ BAŞLIK FONTUNU KULLANMAZ —
|
|
1412
|
-
* grotesk başlık yüzleri 12–14 px yarı-kalında sıkışıp okunurluğu düşürüyor
|
|
1413
|
-
* ve düğme etiketleri bir arayüzün en çok okunan kısa metinleri.
|
|
1414
|
-
*
|
|
1415
|
-
* <p>Kütüphane font YÜKLEMEZ: değerler `font-family` dizesi olarak geçer ve
|
|
1416
|
-
* yüklemeyi (next/font, @font-face, CDN) tüketici yapar. Bir UI paketinin
|
|
1417
|
-
* ağdan font çekmesi, tüketicinin ölçemediği bir istek demek.
|
|
1418
|
-
*/
|
|
685
|
+
/** Yazı tipi ailesi sözleşmesi. */
|
|
1419
686
|
export declare type HanuiFonts = Partial<{
|
|
1420
687
|
heading: string;
|
|
1421
688
|
body: string;
|
|
@@ -1441,12 +708,11 @@ export declare type HanuiLabels = Partial<{
|
|
|
1441
708
|
directoryJump: string;
|
|
1442
709
|
/** Seçim yokken `Select` tetikleyicisinde görünen metin. */
|
|
1443
710
|
selectPlaceholder: string;
|
|
1444
|
-
/**
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
*/
|
|
711
|
+
/** Şifreyi görünür kılan düğmenin erişilebilir adı. `PasswordInput`. */
|
|
712
|
+
passwordShow: string;
|
|
713
|
+
/** Şifreyi gizleyen düğmenin erişilebilir adı. `PasswordInput`. */
|
|
714
|
+
passwordHide: string;
|
|
715
|
+
/** Baş harf büyütmesinde kullanılacak dil etiketi. `Avatar`. */
|
|
1450
716
|
locale: string;
|
|
1451
717
|
/** Para birimi simgesi ya da kodu. `Price`. */
|
|
1452
718
|
currency: string;
|
|
@@ -1507,19 +773,7 @@ export declare type HanuiLinkComponent = ComponentType<HanuiLinkProps>;
|
|
|
1507
773
|
*/
|
|
1508
774
|
export declare type HanuiLinkExtraProps = Record<string, unknown>;
|
|
1509
775
|
|
|
1510
|
-
/**
|
|
1511
|
-
* Kütüphanenin bir bağlantı bileşenine geçirdiği props.
|
|
1512
|
-
*
|
|
1513
|
-
* <p>`href` dize: yönlendirici nesnesi (`UrlObject`) alan bir Link'e de dize
|
|
1514
|
-
* geçilebiliyor, tersi doğru değil. En dar sözleşme en çok yönlendiriciyle
|
|
1515
|
-
* uyumlu olan.
|
|
1516
|
-
*
|
|
1517
|
-
* <p>İndeks imzası yönlendiriciye özgü ek props içindir (Next'in `scroll`,
|
|
1518
|
-
* `prefetch`i; React Router'ın `replace`i). Kütüphane onları tanımıyor ama
|
|
1519
|
-
* yolunu da kapatmamalı. Değer tipi `unknown`, `any` DEĞİL: `any` yazmak
|
|
1520
|
-
* yanlış bir prop'un tip denetiminden sessizce geçmesine izin verirdi.
|
|
1521
|
-
* `href` ve `children` açıkça bildirildiği için indeks imzasından etkilenmez.
|
|
1522
|
-
*/
|
|
776
|
+
/** Kütüphanenin bir bağlantı bileşenine geçirdiği props. */
|
|
1523
777
|
export declare type HanuiLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
1524
778
|
href: string;
|
|
1525
779
|
children?: ReactNode;
|
|
@@ -1535,28 +789,9 @@ export declare type HanuiMetricToken = keyof typeof METRIC_TOKENS;
|
|
|
1535
789
|
/**
|
|
1536
790
|
* Kütüphane sağlayıcısı.
|
|
1537
791
|
*
|
|
1538
|
-
* <h3>İki iş yapar, üçüncüsünü YAPMAZ</h3>
|
|
1539
|
-
* <ol>
|
|
1540
|
-
* <li>Tema ezmelerini belgeye yazar (`<style id="hanui-theme-overrides">`).</li>
|
|
1541
|
-
* <li>Yönlendirici bileşenini bileşen ağacına dağıtır.</li>
|
|
1542
|
-
* <li><strong>Açık/koyu seçimini YÖNETMEZ.</strong></li>
|
|
1543
|
-
* </ol>
|
|
1544
|
-
*
|
|
1545
|
-
* <h3>Neden tema seçimi burada değil</h3>
|
|
1546
|
-
* Seçim `<html data-hanui-theme>` üzerinde taşınır ve o özniteliğin
|
|
1547
|
-
* <em>boyamadan önce</em> yazılması gerekir: React ağacı monte olduktan sonra
|
|
1548
|
-
* yazıldığında koyu tema seçmiş kullanıcı bir kare beyaz ekran görüyor. Doğru
|
|
1549
|
-
* yer, sunucudan gelen HTML'in `<head>`ine konan satır içi bir betik — ve
|
|
1550
|
-
* oraya yazmak tüketicinin çatısının işi (Next'te `app/layout.tsx`, Vite'ta
|
|
1551
|
-
* `index.html`). Sağlayıcı ondan sonra monte oluyor; oraya koymak sorunu
|
|
1552
|
-
* çözmüyor, gizliyor.
|
|
1553
|
-
*
|
|
1554
|
-
* <p>`useHanuiTheme` kancası seçimi <em>değiştirmek</em> için var; ilk değeri
|
|
1555
|
-
* yazmak için değil. README "Tema" bölümünde hazır betik duruyor.
|
|
1556
|
-
*
|
|
1557
792
|
* @example
|
|
1558
793
|
* <HanuiProvider linkComponent={NextLink} theme={{ light: { blue: '#0d6efd' } }}>
|
|
1559
|
-
*
|
|
794
|
+
* <App />
|
|
1560
795
|
* </HanuiProvider>
|
|
1561
796
|
*/
|
|
1562
797
|
export declare const HanuiProvider: FC<Props>;
|
|
@@ -1569,11 +804,11 @@ export declare type HanuiResolvedTokens = Record<HanuiToken, string>;
|
|
|
1569
804
|
*
|
|
1570
805
|
* @example
|
|
1571
806
|
* initHanui({
|
|
1572
|
-
*
|
|
1573
|
-
*
|
|
1574
|
-
*
|
|
1575
|
-
*
|
|
1576
|
-
*
|
|
807
|
+
* theme: {
|
|
808
|
+
* light: { blue: '#0d6efd', 'blue-text': '#0a58ca' },
|
|
809
|
+
* dark: { blue: '#6ea8fe' },
|
|
810
|
+
* fonts: { heading: 'Archivo, sans-serif' },
|
|
811
|
+
* },
|
|
1577
812
|
* });
|
|
1578
813
|
*/
|
|
1579
814
|
export declare type HanuiThemeConfig = Partial<{
|
|
@@ -1583,17 +818,32 @@ export declare type HanuiThemeConfig = Partial<{
|
|
|
1583
818
|
/**
|
|
1584
819
|
* Ölçü ezmeleri — yarıçap, boşluk, punto, süre.
|
|
1585
820
|
*
|
|
1586
|
-
* <p>Renk gibi tema başına DEĞİL tek blokta: bir markanın yuvarlaklığı açık
|
|
1587
|
-
* temada 12 px, koyu temada 8 px olmaz. Ayrı verilebilseydi iki değerin
|
|
1588
|
-
* ayrışması kaçınılmazdı ve fark yalnızca tema değiştirildiğinde
|
|
1589
|
-
* görünürdü — yani neredeyse hiç.
|
|
1590
|
-
*
|
|
1591
821
|
* @example
|
|
1592
822
|
* initHanui({ theme: { metrics: { 'radius-md': '2px', 'radius-lg': '4px' } } });
|
|
1593
823
|
*/
|
|
1594
824
|
metrics: HanuiMetrics;
|
|
1595
825
|
}>;
|
|
1596
826
|
|
|
827
|
+
declare type HanuiThemeState = {
|
|
828
|
+
/**
|
|
829
|
+
* ÇÖZÜLMÜŞ tema — ekranda çizili olan. `preference` `system` iken bu alan
|
|
830
|
+
* işletim sisteminin o anki tercihini taşır.
|
|
831
|
+
*/
|
|
832
|
+
scheme: HanuiColorScheme;
|
|
833
|
+
/**
|
|
834
|
+
* Kullanıcının SEÇİMİ. Üç durumlu bir tema anahtarı (Açık / Koyu / Sistem)
|
|
835
|
+
* bunu okur; `scheme` okunsaydı "Sistem" seçiliyken düğme "Koyu"yu işaretli
|
|
836
|
+
* gösterirdi.
|
|
837
|
+
*/
|
|
838
|
+
preference: HanuiColorPreference;
|
|
839
|
+
/** `'system'` verildiğinde AÇIK seçim silinir ve sistem tercihi izlenir. */
|
|
840
|
+
setScheme: (preference: HanuiColorPreference) => void;
|
|
841
|
+
/** Açık ↔ koyu. `system` iken ÇÖZÜLMÜŞ değerin tersine geçer. */
|
|
842
|
+
toggle: () => void;
|
|
843
|
+
/** Sunucu çıktısında ve hidrasyondan önceki ilk karede `false`. */
|
|
844
|
+
isReady: boolean;
|
|
845
|
+
};
|
|
846
|
+
|
|
1597
847
|
/** Bir temanın token → değer eşlemesi. Kısmî verilebilir; eksikler varsayılandan gelir. */
|
|
1598
848
|
export declare type HanuiThemeTokens = Partial<Record<HanuiToken, string>>;
|
|
1599
849
|
|
|
@@ -1608,38 +858,7 @@ declare type HubProps = {
|
|
|
1608
858
|
|
|
1609
859
|
export declare const IconButton: typeof IconButton_2;
|
|
1610
860
|
|
|
1611
|
-
/**
|
|
1612
|
-
* Yalnızca ikon taşıyan düğme.
|
|
1613
|
-
*
|
|
1614
|
-
* <p>`label` <strong>zorunlu</strong>: görsel etiketi olmayan bir düğme
|
|
1615
|
-
* `aria-label` olmadan ekran okuyucuda "düğme" diye okunur. Zorunlu tutmak,
|
|
1616
|
-
* unutulmasını derleme zamanında engeller.
|
|
1617
|
-
*
|
|
1618
|
-
* <p>Dokunma hedefi 44×44 px'ten küçük olamaz (WCAG 2.5.8) — görsel kutu daha
|
|
1619
|
-
* küçük olsa bile tıklanabilir alan korunur.
|
|
1620
|
-
*
|
|
1621
|
-
* <h3>`href` verilince `<a>` çizilir</h3>
|
|
1622
|
-
* Bir tablo satırının "düzenle" simgesi görsel olarak düğme ama davranışı
|
|
1623
|
-
* bağlantı: orta tuşla yeni sekmede açılması, adresinin kopyalanabilmesi ve
|
|
1624
|
-
* tarayıcı geçmişine girmesi beklenen davranış. `onClick` + `router.push` ile
|
|
1625
|
-
* yazıldığında bunların hiçbiri çalışmıyordu.
|
|
1626
|
-
*
|
|
1627
|
-
* <p>Bağlantı kipinde `disabled` YOKTUR — `<a>` etiketinin devre dışı hâli
|
|
1628
|
-
* yok ve `aria-disabled` tıklamayı engellemez. Erişilemez olması gereken bir
|
|
1629
|
-
* eylem hiç çizilmez.
|
|
1630
|
-
*
|
|
1631
|
-
* <h3>Native `title` YAZILMAZ</h3>
|
|
1632
|
-
* Düğme `label`ı yalnızca `aria-label`a koyar. Önce ikisi birlikte
|
|
1633
|
-
* yazılıyordu (`title="Şifreyi göster" aria-label="Şifreyi göster"`) ve bu üç
|
|
1634
|
-
* ayrı sorun üretiyordu: tarayıcının balonu <strong>dokunmatikte hiç
|
|
1635
|
-
* görünmez</strong> — trafiğin ağırlığı mobil olan bir arayüzde açıklamanın
|
|
1636
|
-
* hiç olmaması demek; klavyeyle gelen kullanıcıda gecikmeli çıkar ve biçimi
|
|
1637
|
-
* işletim sistemine bağlıdır; bazı ekran okuyucular `aria-label` ile birlikte
|
|
1638
|
-
* ikisini de okuyup adı <em>iki kez</em> söyler. Görünür bir açıklama isteyen
|
|
1639
|
-
* çağıran düğmeyi {@link Tooltip} ile sarar — balon dokunmatikte uzun basmayla
|
|
1640
|
-
* da açılır. Yine de `title` geçirmek isteyen `...rest` ile geçirebilir; karar
|
|
1641
|
-
* artık çağıranın.
|
|
1642
|
-
*/
|
|
861
|
+
/** Yalnızca ikon taşıyan düğme. */
|
|
1643
862
|
declare const IconButton_2: ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
1644
863
|
icon: ReactNode;
|
|
1645
864
|
/** Görsel etiketi olmayan düğmenin erişilebilir adı — ZORUNLU. */
|
|
@@ -1662,28 +881,11 @@ export declare type IconButtonVariant = 'ghost' | 'outline' | 'solid' | 'cart' |
|
|
|
1662
881
|
/**
|
|
1663
882
|
* Kütüphaneyi <strong>React ağacının dışından</strong> yapılandırır.
|
|
1664
883
|
*
|
|
1665
|
-
* <h3>Ne zaman bu, ne zaman `HanuiProvider`</h3>
|
|
1666
|
-
* `HanuiProvider` React'in içinde yaşıyor ve yönlendirici bileşenini de
|
|
1667
|
-
* taşıyor — normal yol o. Bu fonksiyon iki durum için:
|
|
1668
|
-
*
|
|
1669
|
-
* <ul>
|
|
1670
|
-
* <li><strong>Boyamadan önce çalışması gereken tema.</strong> Sağlayıcı
|
|
1671
|
-
* ağaç monte olduktan sonra yazıyor; koyu tema seçmiş bir kullanıcı o
|
|
1672
|
-
* ana kadar beyaz ekran görüyor. `<head>` içindeki satır içi bir
|
|
1673
|
-
* betikten çağrıldığında ezmeler ilk boyamadan önce yerinde olur.</li>
|
|
1674
|
-
* <li><strong>React kullanmayan bir kabuk.</strong> Tasarım token'ları
|
|
1675
|
-
* yalnızca CSS; bir e-posta önizlemesi ya da Storybook temasında
|
|
1676
|
-
* bileşen ağacı olmadan da gerekiyor.</li>
|
|
1677
|
-
* </ul>
|
|
1678
|
-
*
|
|
1679
|
-
* <p>İkisi birlikte kullanılabilir: aynı `<style>` etiketini paylaşırlar ve
|
|
1680
|
-
* son çağrı kazanır.
|
|
1681
|
-
*
|
|
1682
884
|
* @example
|
|
1683
885
|
* // app/layout.tsx — <head> içine, boyamadan önce.
|
|
1684
886
|
* <script dangerouslySetInnerHTML={{ __html: `
|
|
1685
|
-
*
|
|
1686
|
-
*
|
|
887
|
+
* document.documentElement.dataset.hanuiTheme =
|
|
888
|
+
* localStorage.getItem('theme') ?? 'light';
|
|
1687
889
|
* ` }} />
|
|
1688
890
|
*/
|
|
1689
891
|
export declare const initHanui: (options?: InitHanuiOptions) => void;
|
|
@@ -1699,25 +901,13 @@ export declare type InitHanuiOptions = Partial<{
|
|
|
1699
901
|
/**
|
|
1700
902
|
* Bilgi yoğunluğu. Verilmezse `<html data-hanui-density>` neyse o kalır;
|
|
1701
903
|
* o da yoksa `default`.
|
|
1702
|
-
*
|
|
1703
|
-
* <p>Uygulama başına SABİT bir karar olduğunda (operasyon paneli her zaman
|
|
1704
|
-
* `compact`) buradan verilir; kullanıcıya seçtiren bir uygulama özniteliği
|
|
1705
|
-
* kendisi yazar.
|
|
1706
904
|
*/
|
|
1707
905
|
density: HanuiDensity;
|
|
1708
906
|
}>;
|
|
1709
907
|
|
|
1710
908
|
export declare const Input: typeof Input_2;
|
|
1711
909
|
|
|
1712
|
-
/**
|
|
1713
|
-
* Metin girdisi.
|
|
1714
|
-
*
|
|
1715
|
-
* <p>Ön ek / son ek girdinin <em>içinde</em> konumlanır; girdinin yanına ayrı
|
|
1716
|
-
* bir kutu koymak hizalamayı bozar ve odak halkasını ikiye böler.
|
|
1717
|
-
*
|
|
1718
|
-
* <p>Odak halkası sarmalayıcıda değil girdinin kendisinde: sarmalayıcıya
|
|
1719
|
-
* verildiğinde `:focus-visible` klavye/fare ayrımını kaybediyordu.
|
|
1720
|
-
*/
|
|
910
|
+
/** Metin girdisi. */
|
|
1721
911
|
declare const Input_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "prefix"> & {
|
|
1722
912
|
/** Solda gösterilen ikon veya ön ek (arama simgesi, para birimi). */
|
|
1723
913
|
prefix?: ReactNode;
|
|
@@ -1731,52 +921,29 @@ testId?: string;
|
|
|
1731
921
|
/** Odaklanınca mobilde ekran klavyesini açacak bir öğe mi? */
|
|
1732
922
|
export declare const isKeyboardOpeningElement: (element: Element | null) => boolean;
|
|
1733
923
|
|
|
1734
|
-
/**
|
|
1735
|
-
* AÇIK TEMA — varsayılan.
|
|
1736
|
-
*
|
|
1737
|
-
* <p>Bilgi yoğunluğu yüksek ekranlarda açık zeminde okunurluk daha yüksek.
|
|
1738
|
-
*/
|
|
924
|
+
/** AÇIK TEMA — varsayılan. */
|
|
1739
925
|
export declare const LIGHT_THEME: {
|
|
1740
|
-
readonly page: "#
|
|
926
|
+
readonly page: "#f4f8f7";
|
|
1741
927
|
readonly surface: "#ffffff";
|
|
1742
|
-
readonly 'surface-2': "#
|
|
1743
|
-
readonly 'surface-3': "#
|
|
1744
|
-
readonly 'surface-inset': "#
|
|
1745
|
-
readonly border: "#
|
|
1746
|
-
readonly 'border-strong': "#
|
|
1747
|
-
readonly text: "#
|
|
1748
|
-
readonly 'text-2': "#
|
|
1749
|
-
readonly 'text-3': "#
|
|
1750
|
-
readonly graphite: "#
|
|
1751
|
-
readonly 'graphite-2': "#
|
|
1752
|
-
readonly 'graphite-3': "#
|
|
1753
|
-
readonly action: "#
|
|
1754
|
-
readonly 'action-hover': "#
|
|
1755
|
-
readonly 'action-active': "#
|
|
928
|
+
readonly 'surface-2': "#eff4f1";
|
|
929
|
+
readonly 'surface-3': "#e8efec";
|
|
930
|
+
readonly 'surface-inset': "#f9fbfa";
|
|
931
|
+
readonly border: "#d6e1dc";
|
|
932
|
+
readonly 'border-strong': "#c5d3cc";
|
|
933
|
+
readonly text: "#00120f";
|
|
934
|
+
readonly 'text-2': "#38594f";
|
|
935
|
+
readonly 'text-3': "#506d63";
|
|
936
|
+
readonly graphite: "#00322a";
|
|
937
|
+
readonly 'graphite-2': "#004d40";
|
|
938
|
+
readonly 'graphite-3': "#0f574a";
|
|
939
|
+
readonly action: "#00322a";
|
|
940
|
+
readonly 'action-hover': "#004d40";
|
|
941
|
+
readonly 'action-active': "#0f574a";
|
|
1756
942
|
readonly 'on-action': "#ffffff";
|
|
1757
943
|
/** Pasif dolgu; saydamlık DEĞİL kendi rengi (bkz. Button `:disabled`). */
|
|
1758
|
-
readonly 'action-soft': "#
|
|
1759
|
-
/**
|
|
1760
|
-
|
|
1761
|
-
*
|
|
1762
|
-
* <p>ÖLÇÜLDÜ: pasif düğme `action-soft` zeminine `on-action` (beyaz) metin
|
|
1763
|
-
* yazıyordu — açık temada <strong>1,55:1</strong>, koyu temada 1,93:1.
|
|
1764
|
-
* Ekranda "Ara", "Sorgula", "Giriş yap" yıkanmış duruyor; etiketin ne
|
|
1765
|
-
* dediği okunmuyordu.
|
|
1766
|
-
*
|
|
1767
|
-
* <p>WCAG pasif denetimleri hem 1.4.3'te hem 1.4.11'de açıkça muaf tutuyor,
|
|
1768
|
-
* yani bu bir İHLAL DEĞİLDİ — ve tam da bu yüzden hiçbir katman uyarmadı:
|
|
1769
|
-
* çift denetçinin listesinde de yoktu. Ama okunamayan bir etiket, düğmenin
|
|
1770
|
-
* neyi engellediğini de söylemez; kullanıcı "neden pasif" sorusunu
|
|
1771
|
-
* soramadan önce "bu neydi" sorusunda takılıyor. Pasiflik dolgunun
|
|
1772
|
-
* geri çekilmesiyle bildirilir, metnin silinmesiyle değil — `opacity` ile
|
|
1773
|
-
* soluklaştırma yasağının (`A11Y.md`) aynı gerekçesi.
|
|
1774
|
-
*
|
|
1775
|
-
* <p>Ton merdivenin kendisinden: açıkta `n700` (6,52:1), koyuda `n300`
|
|
1776
|
-
* (5,76:1). Çift artık `check-contrast.mjs`te ve eşiği tutmayan bir tema
|
|
1777
|
-
* derlemeyi kırar.
|
|
1778
|
-
*/
|
|
1779
|
-
readonly 'on-action-soft': "#3a424f";
|
|
944
|
+
readonly 'action-soft': "#c5d3cc";
|
|
945
|
+
/** PASİF DOLGU ÜZERİNDEKİ METİN. */
|
|
946
|
+
readonly 'on-action-soft': "#26403a";
|
|
1780
947
|
readonly amber: "#f59e0b";
|
|
1781
948
|
readonly 'amber-hover': "#d98706";
|
|
1782
949
|
readonly 'amber-active': "#b87205";
|
|
@@ -1788,15 +955,15 @@ export declare const LIGHT_THEME: {
|
|
|
1788
955
|
readonly 'blue-text': "#1d54c4";
|
|
1789
956
|
readonly 'blue-tint': "#eaf1fe";
|
|
1790
957
|
readonly 'blue-line': "#bcd2fb";
|
|
1791
|
-
readonly 'ok-bg': "#
|
|
1792
|
-
readonly 'ok-fg': "#
|
|
1793
|
-
readonly 'ok-line': "#
|
|
958
|
+
readonly 'ok-bg': "#e6f4ed";
|
|
959
|
+
readonly 'ok-fg': "#156f4e";
|
|
960
|
+
readonly 'ok-line': "#a8dcc4";
|
|
1794
961
|
readonly 'warn-bg': "#fdf0dd";
|
|
1795
962
|
readonly 'warn-fg': "#7a3e02";
|
|
1796
963
|
readonly 'warn-line': "#ebc687";
|
|
1797
|
-
readonly 'off-bg': "#
|
|
1798
|
-
readonly 'off-fg': "#
|
|
1799
|
-
readonly 'off-line': "#
|
|
964
|
+
readonly 'off-bg': "#f0f4f3";
|
|
965
|
+
readonly 'off-fg': "#26403a";
|
|
966
|
+
readonly 'off-line': "#cddad4";
|
|
1800
967
|
readonly 'bad-bg': "#f8ebeb";
|
|
1801
968
|
readonly 'bad-fg': "#bb1e1e";
|
|
1802
969
|
readonly 'bad-line': "#e6a6a6";
|
|
@@ -1806,25 +973,25 @@ export declare const LIGHT_THEME: {
|
|
|
1806
973
|
readonly 'alt-bg': "#eeebfa";
|
|
1807
974
|
readonly 'alt-fg': "#2e2661";
|
|
1808
975
|
readonly 'alt-line': "#c0b6ea";
|
|
1809
|
-
readonly 'sale-bg': "#
|
|
1810
|
-
readonly 'sale-fg': "#
|
|
976
|
+
readonly 'sale-bg': "#e6f4ed";
|
|
977
|
+
readonly 'sale-fg': "#156f4e";
|
|
1811
978
|
readonly 'red-accent': "#dc2626";
|
|
1812
|
-
readonly 'green-accent': "#
|
|
1813
|
-
readonly 'green-accent-hover': "#
|
|
1814
|
-
readonly 'on-green': "#
|
|
979
|
+
readonly 'green-accent': "#1d9a64";
|
|
980
|
+
readonly 'green-accent-hover': "#17814f";
|
|
981
|
+
readonly 'on-green': "#02180f";
|
|
1815
982
|
readonly star: "#9a5f04";
|
|
1816
983
|
readonly 'danger-solid': "#dc2626";
|
|
1817
984
|
readonly 'danger-solid-hover': "#bb1e1e";
|
|
1818
985
|
readonly 'on-danger': "#ffffff";
|
|
1819
986
|
readonly 'nav-bg': "#ffffff";
|
|
1820
|
-
readonly 'nav-bg-2': "#
|
|
1821
|
-
readonly 'nav-fg': "#
|
|
1822
|
-
readonly 'nav-fg-2': "#
|
|
1823
|
-
readonly 'nav-fg-3': "#
|
|
1824
|
-
readonly 'nav-line': "#
|
|
1825
|
-
readonly 'nav-line-strong': "#
|
|
1826
|
-
readonly 'nav-hover': "#
|
|
1827
|
-
readonly 'footer-bg': "#
|
|
987
|
+
readonly 'nav-bg-2': "#eff4f1";
|
|
988
|
+
readonly 'nav-fg': "#00120f";
|
|
989
|
+
readonly 'nav-fg-2': "#38594f";
|
|
990
|
+
readonly 'nav-fg-3': "#506d63";
|
|
991
|
+
readonly 'nav-line': "#e3eae7";
|
|
992
|
+
readonly 'nav-line-strong': "#c5d3cc";
|
|
993
|
+
readonly 'nav-hover': "#eff4f1";
|
|
994
|
+
readonly 'footer-bg': "#eff4f1";
|
|
1828
995
|
readonly 'shadow-xs': `0 1px 2px ${string}`;
|
|
1829
996
|
readonly 'shadow-sm': `0 1px 2px ${string}, 0 1px 3px ${string}`;
|
|
1830
997
|
readonly 'shadow-md': `0 2px 4px ${string}, 0 6px 16px ${string}`;
|
|
@@ -1842,25 +1009,18 @@ export declare const LIGHT_THEME: {
|
|
|
1842
1009
|
readonly glass: string;
|
|
1843
1010
|
readonly 'glass-solid': "#ffffff";
|
|
1844
1011
|
readonly 'on-scrim': "#ffffff";
|
|
1845
|
-
readonly 'skeleton-a': "#
|
|
1846
|
-
readonly 'skeleton-b': "#
|
|
1012
|
+
readonly 'skeleton-a': "#eff4f1";
|
|
1013
|
+
readonly 'skeleton-b': "#f9fbfa";
|
|
1847
1014
|
readonly track: string;
|
|
1848
1015
|
/** Görsel yer tutucu (medya yoksa). */
|
|
1849
|
-
readonly 'media-bg': "#
|
|
1016
|
+
readonly 'media-bg': "#eff4f1";
|
|
1850
1017
|
readonly 'glow-1': string;
|
|
1851
1018
|
readonly 'glow-2': string;
|
|
1852
1019
|
readonly 'glow-amber': string;
|
|
1853
1020
|
};
|
|
1854
1021
|
|
|
1855
1022
|
declare type LinkProps = BaseProps_4 & {
|
|
1856
|
-
/**
|
|
1857
|
-
* Sayfa numarasının adresini üretir.
|
|
1858
|
-
*
|
|
1859
|
-
* <p>Verildiğinde numaralar `<a>` olur — ve olması gerekir. Düğmenin `href`i
|
|
1860
|
-
* yok: arama motoru bir tıklama olayını çalıştırmaz ve ikinci sayfaya HİÇ
|
|
1861
|
-
* geçemez; kullanıcı da orta tuşla yeni sekmede açamaz, adresi kopyalayamaz,
|
|
1862
|
-
* durum çubuğunda hedefi göremez.
|
|
1863
|
-
*/
|
|
1023
|
+
/** Sayfa numarasının adresini üretir. */
|
|
1864
1024
|
buildHref: (page: number) => string;
|
|
1865
1025
|
onPageChange?: never;
|
|
1866
1026
|
/** Yönlendiriciye geçirilecek ek props (`{ scroll: false }` gibi). */
|
|
@@ -1870,13 +1030,7 @@ declare type LinkProps = BaseProps_4 & {
|
|
|
1870
1030
|
export declare type ListboxNavigation<T extends HTMLElement = HTMLElement> = {
|
|
1871
1031
|
activeIndex: number;
|
|
1872
1032
|
setActiveIndex: (index: number) => void;
|
|
1873
|
-
/**
|
|
1874
|
-
* Etkin seçeneği görünür alanda tutmak için LİSTEYE bağlanır.
|
|
1875
|
-
*
|
|
1876
|
-
* <p>Tip parametresi çağıran taraf için: `Select` bu referansı `<ul>`e
|
|
1877
|
-
* veriyor ve panel açıldığında `focus()` çağırıyor. `HTMLElement`e sabitlense
|
|
1878
|
-
* çağıran ikinci bir referans tutmak ve ikisini elle eşlemek zorunda kalırdı.
|
|
1879
|
-
*/
|
|
1033
|
+
/** Etkin seçeneği görünür alanda tutmak için LİSTEYE bağlanır. */
|
|
1880
1034
|
listRef: RefObject<T | null>;
|
|
1881
1035
|
handleKeyDown: (event: KeyboardEvent_2<HTMLElement>) => void;
|
|
1882
1036
|
};
|
|
@@ -1892,52 +1046,12 @@ export declare type ListboxNavigationOptions = {
|
|
|
1892
1046
|
onClose: () => void;
|
|
1893
1047
|
};
|
|
1894
1048
|
|
|
1895
|
-
/**
|
|
1896
|
-
* Aranan metin, hedefin içinde geçiyor mu?
|
|
1897
|
-
*
|
|
1898
|
-
* <p>Aramanın tek kapısı burasıdır: her liste kendi `includes` çağrısını
|
|
1899
|
-
* yazdığında biri normalizasyonu atlıyor ve o listede aksanlı arama
|
|
1900
|
-
* çalışmıyordu.
|
|
1901
|
-
*/
|
|
1049
|
+
/** Aranan metin, hedefin içinde geçiyor mu? */
|
|
1902
1050
|
export declare const matchesSearch: (haystack: string, needle: string) => boolean;
|
|
1903
1051
|
|
|
1904
1052
|
export declare const Menu: typeof Menu_2;
|
|
1905
1053
|
|
|
1906
|
-
/**
|
|
1907
|
-
* Menü — bir listeden EYLEM seçme.
|
|
1908
|
-
*
|
|
1909
|
-
* <h3>{@link Select} ile farkı: seçim mi eylem mi</h3>
|
|
1910
|
-
* Görsel olarak benzerler; ayrım seçilen şeyin ne olduğunda:
|
|
1911
|
-
*
|
|
1912
|
-
* <ul>
|
|
1913
|
-
* <li>`Select` bir DEĞER seçer. Seçim kalıcıdır, tetikleyicide görünür ve
|
|
1914
|
-
* geri alınabilir. ARIA rolü `listbox`.</li>
|
|
1915
|
-
* <li><b>`Menu` bir EYLEM çalıştırır.</b> "Sil", "Kopyala", "Dışa aktar".
|
|
1916
|
-
* Seçilen şey hatırlanmaz; menü kapanır ve iş yapılır. ARIA rolü
|
|
1917
|
-
* `menu`.</li>
|
|
1918
|
-
* </ul>
|
|
1919
|
-
*
|
|
1920
|
-
* <p>Ayrım ekran okuyucuda duyuluyor: `listbox` "3 seçenekten 2.'si seçili"
|
|
1921
|
-
* der, `menu` "menü, 3 öğe" der. Eylem listesini `listbox` olarak sunmak,
|
|
1922
|
-
* kullanıcıya kalıcı bir seçim yaptığını söylüyordu.
|
|
1923
|
-
*
|
|
1924
|
-
* <h3>Odak GERÇEKTEN taşınır</h3>
|
|
1925
|
-
* `Select` odağı tetikleyicide tutup etkin seçeneği `aria-activedescendant`
|
|
1926
|
-
* ile bildiriyor; menüde bu YANLIŞ olurdu. APG menü deseni gerçek odak
|
|
1927
|
-
* istiyor çünkü menü öğeleri düğme gibi davranıyor — ve harfe atlama
|
|
1928
|
-
* (type-ahead) yalnızca odaklanmış bir öğe üzerinde anlamlı.
|
|
1929
|
-
*
|
|
1930
|
-
* <h3>Klavye (APG: menu button)</h3>
|
|
1931
|
-
* <table>
|
|
1932
|
-
* <tr><td>`Enter` / `Space` / `ArrowDown`</td><td>tetikleyicide: açar, İLK öğeye odaklanır</td></tr>
|
|
1933
|
-
* <tr><td>`ArrowUp`</td><td>tetikleyicide: açar, SON öğeye odaklanır</td></tr>
|
|
1934
|
-
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>öğeler arasında; uçlarda DÖNER</td></tr>
|
|
1935
|
-
* <tr><td>`Home` / `End`</td><td>ilk / son öğe</td></tr>
|
|
1936
|
-
* <tr><td>harf</td><td>o harfle başlayan ilk öğeye atlar</td></tr>
|
|
1937
|
-
* <tr><td>`Enter` / `Space`</td><td>öğeyi çalıştırır ve menüyü kapatır</td></tr>
|
|
1938
|
-
* <tr><td>`Escape` / `Tab`</td><td>kapatır, odak TETİKLEYİCİYE döner</td></tr>
|
|
1939
|
-
* </table>
|
|
1940
|
-
*/
|
|
1054
|
+
/** Menü — bir listeden EYLEM seçme. */
|
|
1941
1055
|
declare const Menu_2: ({ trigger, items, label, side, align, className, testId, }: Props_4) => JSX.Element | null;
|
|
1942
1056
|
|
|
1943
1057
|
export declare type MenuItem = {
|
|
@@ -1950,37 +1064,7 @@ export declare type MenuItem = {
|
|
|
1950
1064
|
isDanger?: boolean;
|
|
1951
1065
|
};
|
|
1952
1066
|
|
|
1953
|
-
/**
|
|
1954
|
-
* ÖLÇÜ TOKEN'LARI — temadan bağımsız, çalışma zamanında EZİLEBİLİR.
|
|
1955
|
-
*
|
|
1956
|
-
* <h3>Neden bunlar da CSS değişkeni</h3>
|
|
1957
|
-
* Bir zamanlar yalnızca renkler ve font aileleri çalışma zamanında
|
|
1958
|
-
* eziliyordu; yarıçap, boşluk, süre ve tipografi ölçeği `_variables.scss`
|
|
1959
|
-
* içinde SCSS sabitiydi. Sonucu şuydu: bir tüketici markasının RENGİNİ
|
|
1960
|
-
* verebiliyor ama YUVARLAKLIĞINI veremiyordu. Oysa bir markayı tanınır kılan
|
|
1961
|
-
* şeylerin listesinde yarıçap renkten sonra gelir — keskin köşeli bir
|
|
1962
|
-
* kurumsal panelle yumuşak köşeli bir vitrin aynı pakete aynı derecede
|
|
1963
|
-
* ihtiyaç duyuyor. Aynısı bilgi yoğunluğu (boşluk ölçeği) ve hareket süresi
|
|
1964
|
-
* için de geçerli.
|
|
1965
|
-
*
|
|
1966
|
-
* <h3>SCSS sabiti olarak KALANLAR ve nedenleri</h3>
|
|
1967
|
-
* <ul>
|
|
1968
|
-
* <li><b>Kırılma noktaları</b> — `@media (max-width: var(--x))` GEÇERSİZ
|
|
1969
|
-
* CSS. Medya sorgusu özel özellik okuyamaz; taşınsalardı bütün duyarlı
|
|
1970
|
-
* yerleşim sessizce çökerdi.</li>
|
|
1971
|
-
* <li><b>Katman (`z-*`)</b> — bir yığılma bağlamı sayısı, marka kararı
|
|
1972
|
-
* değil. Tüketicinin ezmesi gereken bir şey değil; ezerse kip pencere
|
|
1973
|
-
* perdenin altında kalır.</li>
|
|
1974
|
-
* <li><b>Ağırlık, harf aralığı, kapsayıcı genişlikleri, sayfa dolgusu</b> —
|
|
1975
|
-
* ölçek değil tekil değer; ezme ihtiyacı ölçülmedi. Gerektiğinde
|
|
1976
|
-
* buraya taşınabilir, ters yön (geri alma) kırıcıdır.</li>
|
|
1977
|
-
* </ul>
|
|
1978
|
-
*
|
|
1979
|
-
* <h3>Değerler DİZE, sayı değil</h3>
|
|
1980
|
-
* `'4px'` yazılıyor çünkü çıktı doğrudan bir CSS bildirimi. Sayı tutulup
|
|
1981
|
-
* birim sonradan eklenseydi, `radius-pill` (999px) ile `leading-normal`
|
|
1982
|
-
* (birimsiz 1.62) aynı listede duramazdı.
|
|
1983
|
-
*/
|
|
1067
|
+
/** ÖLÇÜ TOKEN'LARI — temadan bağımsız, çalışma zamanında EZİLEBİLİR. */
|
|
1984
1068
|
export declare const METRIC_TOKENS: {
|
|
1985
1069
|
readonly 'radius-xs': "4px";
|
|
1986
1070
|
readonly 'radius-sm': "6px";
|
|
@@ -2032,54 +1116,12 @@ export declare const METRIC_TOKENS: {
|
|
|
2032
1116
|
/**
|
|
2033
1117
|
* Kırılma noktaları — `styles/_variables.scss` içindeki `$breakpoint-*` ile
|
|
2034
1118
|
* <strong>aynı</strong> değerler.
|
|
2035
|
-
*
|
|
2036
|
-
* <p>Kararı normalde CSS verir; bu sabitler yalnızca <em>JavaScript'in de
|
|
2037
|
-
* bilmek zorunda olduğu</em> tek durum için var: kipsel bir panel
|
|
2038
|
-
* (`<dialog>`) açıkken pencere büyütüldüğünde. `showModal()` sayfanın geri
|
|
2039
|
-
* kalanını inert bırakır ve bu, panelin çizilip çizilmediğine değil kipsel
|
|
2040
|
-
* olmasına bağlıdır — CSS onu gizlese bile sayfa tıklanamaz kalır. Panel bu
|
|
2041
|
-
* yüzden kırılma noktası aşıldığında JavaScript ile kapatılır.
|
|
2042
|
-
*
|
|
2043
|
-
* <p>Değerler iki yerde durduğu için ayrışabilir. Ayrışırlarsa panel yanlış
|
|
2044
|
-
* genişlikte kapanır; CSS tarafı her zaman kazanır, buradaki değer ona
|
|
2045
|
-
* uydurulur.
|
|
2046
1119
|
*/
|
|
2047
1120
|
export declare const MOBILE_BREAKPOINT = 640;
|
|
2048
1121
|
|
|
2049
1122
|
export declare const Modal: typeof Modal_2;
|
|
2050
1123
|
|
|
2051
|
-
/**
|
|
2052
|
-
* Kip pencere (modal).
|
|
2053
|
-
*
|
|
2054
|
-
* <h3>Yerel `<dialog>` + `showModal()`</h3>
|
|
2055
|
-
* Odak tuzağı, Escape ile kapanma, arka planın etkileşime kapanması ve
|
|
2056
|
-
* `aria-modal` semantiği tarayıcıdan gelir. Bunları `<div>` üzerine elle
|
|
2057
|
-
* kurmak yüzlerce satır ve kaçınılmaz olarak eksik bir odak yönetimi demek.
|
|
2058
|
-
*
|
|
2059
|
-
* <h3>Neden `open` özniteliği değil `showModal()`</h3>
|
|
2060
|
-
* `<dialog open>` pencereyi <em>kipsiz</em> açar: arka plan tıklanabilir kalır
|
|
2061
|
-
* ve odak tuzağı çalışmaz. Kipli davranışın tek yolu yöntemi çağırmak.
|
|
2062
|
-
*
|
|
2063
|
-
* <h3>Arka planın kaydırılması ayrıca engellenir</h3>
|
|
2064
|
-
* `showModal()` arka planı <em>etkileşime</em> kapatır ama tarayıcıların bir
|
|
2065
|
-
* kısmında sayfa hâlâ kaydırılabiliyor: kullanıcı pencereyi kaydırdığını
|
|
2066
|
-
* sanırken arkadaki listeyi kaydırıyordu. `<body>` kilitlenir.
|
|
2067
|
-
*
|
|
2068
|
-
* <h3>Mobilde alt sayfaya düşer</h3>
|
|
2069
|
-
* Dar ekranda ortalanmış bir pencere, klavye açıldığında yukarı sıkışıyor ve
|
|
2070
|
-
* dip düğmeleri klavyenin altında kalıyordu. Alt sayfa baş parmağın
|
|
2071
|
-
* erişebildiği yerde durur.
|
|
2072
|
-
*
|
|
2073
|
-
* <h3>Klavye</h3>
|
|
2074
|
-
* <table>
|
|
2075
|
-
* <tr><td>`Escape`</td><td>kapatır — `isDismissable={false}` iken KAPATMAZ</td></tr>
|
|
2076
|
-
* <tr><td>`Tab`</td><td>odak panelin içinde döner (tarayıcı: `showModal()`)</td></tr>
|
|
2077
|
-
* </table>
|
|
2078
|
-
* Odak tuzağı tarayıcıdan gelir; kütüphanenin işi `cancel` olayını React
|
|
2079
|
-
* durumuna bağlamak. Yakalanmadığında pencere kapanıyor ama `isOpen` `true`
|
|
2080
|
-
* kalıyor ve bir daha açılamıyordu. Nöbetçi:
|
|
2081
|
-
* `components/__tests__/keyboard.test.tsx`.
|
|
2082
|
-
*/
|
|
1124
|
+
/** Kip pencere (modal). */
|
|
2083
1125
|
declare const Modal_2: ({ isOpen, onClose, title, closeLabel, children, description, footer, icon, tone, size, isDismissable, className, testId, }: Props_41) => JSX.Element;
|
|
2084
1126
|
|
|
2085
1127
|
export declare type ModalTone = 'neutral' | 'danger' | 'warning' | 'success' | 'info';
|
|
@@ -2090,66 +1132,17 @@ declare type MultipleProps<T extends string> = BaseProps<T> & {
|
|
|
2090
1132
|
onChange: (value: T[]) => void;
|
|
2091
1133
|
};
|
|
2092
1134
|
|
|
2093
|
-
/**
|
|
2094
|
-
* Serbest metin arama anahtarı: ASCII, küçük harf, tek boşlukla ayrılmış.
|
|
2095
|
-
*
|
|
2096
|
-
* <h3>Neden aksan sökülüyor</h3>
|
|
2097
|
-
* Kullanıcı "sisli" yazdığında "Şişli" bulunmalı. Doğru aksanı yakalamak
|
|
2098
|
-
* zorunda kalmak — özellikle mobil klavyede — aramayı bitiren bir sürtünme.
|
|
2099
|
-
*
|
|
2100
|
-
* <h3>Türkçe `İ` özel durumu</h3>
|
|
2101
|
-
* `toLowerCase()`ten <em>önce</em> `İ → i` eşlenir: varsayılan küçültme
|
|
2102
|
-
* "İSTANBUL"u "i̇stanbul" (birleşik nokta ile) yapıyor ve eşleşmeyi
|
|
2103
|
-
* kaçırıyordu. Aynı sorun `ı` için ters yönde yok — o zaten tek kod noktası.
|
|
2104
|
-
*
|
|
2105
|
-
* <p>Latin-1 aksanları (`é`, `ñ`, `ü`…) `NFD` ayrıştırması + birleştirici
|
|
2106
|
-
* işaret temizliğiyle sökülür; Türkçe harfler bu yolla çözülmediği için
|
|
2107
|
-
* (`ı` ve `İ` ayrı kod noktaları) önce elle eşlenir.
|
|
2108
|
-
*/
|
|
1135
|
+
/** Serbest metin arama anahtarı: ASCII, küçük harf, tek boşlukla ayrılmış. */
|
|
2109
1136
|
export declare const normalizeSearchTerm: (value: string) => string;
|
|
2110
1137
|
|
|
2111
1138
|
export declare const PageHeader: typeof PageHeader_2;
|
|
2112
1139
|
|
|
2113
|
-
/**
|
|
2114
|
-
* Sayfa başlığı — her ekranın aynı giriş bloğu.
|
|
2115
|
-
*
|
|
2116
|
-
* <h3>Neden ortak bir bileşen</h3>
|
|
2117
|
-
* Önceden her container kendi başlığını kuruyordu: bir sayfada punto 29 px,
|
|
2118
|
-
* diğerinde 23 px; birinde açıklama başlığın altında, birinde yanında;
|
|
2119
|
-
* boşluklar 8 px ile 24 px arasında dolaşıyordu. Sayfalar arası geçiş "başka
|
|
2120
|
-
* bir siteye geçtim" hissi veriyordu. Bu bileşen o kararları tek yerde verir.
|
|
2121
|
-
*
|
|
2122
|
-
* <h3>Açıklama genişliği sınırlı</h3>
|
|
2123
|
-
* Başlık tam genişlikte akabilir ama açıklama 68ch'de durur: 1360 px
|
|
2124
|
-
* genişlikte akan bir açıklama satırında göz satır sonunda yerini kaybediyor.
|
|
2125
|
-
*
|
|
2126
|
-
* <h3>Eylemler `flex-end`</h3>
|
|
2127
|
-
* Düğmeler başlık bloğunun ALT kenarına hizalanır. `baseline` verildiğinde iki
|
|
2128
|
-
* satırlık başlıklarda düğme ilk satıra çekiliyordu.
|
|
2129
|
-
*/
|
|
1140
|
+
/** Sayfa başlığı — her ekranın aynı giriş bloğu. */
|
|
2130
1141
|
declare const PageHeader_2: FC<Props_25>;
|
|
2131
1142
|
|
|
2132
1143
|
export declare const Pagination: typeof Pagination_2;
|
|
2133
1144
|
|
|
2134
|
-
/**
|
|
2135
|
-
* Sayfalama.
|
|
2136
|
-
*
|
|
2137
|
-
* <h3>Sayfa numaraları BAĞLANTI, düğme değil</h3>
|
|
2138
|
-
* `buildHref` verildiğinde numaralar `<a>` olur. Düğme olarak bırakıldığında
|
|
2139
|
-
* iki bedeli vardı:
|
|
2140
|
-
* <ul>
|
|
2141
|
-
* <li><strong>Tarayıcı (crawler) ikinci sayfaya geçemiyordu.</strong> Düğmenin
|
|
2142
|
-
* `href`i yok; arama motoru bir tıklama olayını çalıştırmaz. Derin
|
|
2143
|
-
* sayfalardaki kayıtlar yalnızca sitemap'te göründükleri kadar
|
|
2144
|
-
* keşfedilebiliyordu.</li>
|
|
2145
|
-
* <li><strong>Kullanıcı yeni sekmede açamıyordu.</strong> Orta tık, Cmd+tık ve
|
|
2146
|
-
* "bağlantıyı kopyala" çalışmıyor, durum çubuğunda hedef görünmüyordu.</li>
|
|
2147
|
-
* </ul>
|
|
2148
|
-
*
|
|
2149
|
-
* <p>Oklar her iki kipte de `IconButton`: devre dışı kalabildikleri için düğme
|
|
2150
|
-
* kalırlar — `<a>` etiketinin "devre dışı" hâli yok, `aria-disabled` ise
|
|
2151
|
-
* tıklamayı engellemez. Sayfa numaraları tarayıcıya zaten tam listeyi veriyor.
|
|
2152
|
-
*/
|
|
1145
|
+
/** Sayfalama. */
|
|
2153
1146
|
declare const Pagination_2: FC<Props_49>;
|
|
2154
1147
|
|
|
2155
1148
|
export declare const Panel: typeof Panel_2;
|
|
@@ -2157,43 +1150,14 @@ export declare const Panel: typeof Panel_2;
|
|
|
2157
1150
|
/**
|
|
2158
1151
|
* Panel — başlığı olan içerik kutusu.
|
|
2159
1152
|
*
|
|
2160
|
-
* <h3>Neden bu bileşen var</h3>
|
|
2161
|
-
* Bir uygulamanın on bir ayarlar sayfası, on bir farklı kart kuruyordu:
|
|
2162
|
-
* birinde dolgu 16 px diğerinde 24 px, birinde başlık kartın içinde diğerinde
|
|
2163
|
-
* dışında, birinde `max-width: 560px` diğerinde tam genişlik. Aynı disiplinde
|
|
2164
|
-
* görünmeleri için kararların tek yerde verilmesi gerekiyordu.
|
|
2165
|
-
*
|
|
2166
|
-
* <h3>Genişlik paneli DEĞİL içeriği sınırlar</h3>
|
|
2167
|
-
* Panel her zaman kapsayıcısını doldurur. Form alanlarının okunabilir satır
|
|
2168
|
-
* uzunluğunu aşmaması gerekiyorsa {@link PanelForm} kullanılır — o iç ızgarayı
|
|
2169
|
-
* sınırlar, panelin kendisini daraltmaz. Önceden bir "profil düzenle" paneli
|
|
2170
|
-
* sayfanın üçte biri kadar kalıp yanındaki boşluğa bakıyordu; sorun formun
|
|
2171
|
-
* değil PANELİN daraltılmasıydı.
|
|
2172
|
-
*
|
|
2173
|
-
* <h3>Dip şeridi o sütunu izler</h3>
|
|
2174
|
-
* Panelde bir `PanelForm` varsa `footer` içeriği <strong>aynı sütunda</strong>
|
|
2175
|
-
* biter. Şeridin kendisi (zemin + üst çizgi) tam genişlikte kalır; hizalanan
|
|
2176
|
-
* yalnızca içeriği. Ölçüldü: form 565 px'lik sütununu bitirirken kaydet
|
|
2177
|
-
* düğmesi panelin öbür ucunda, formdan 576 px uzakta duruyordu — göz formu
|
|
2178
|
-
* bitiriyor, düğmeyi arıyordu. `PanelForm` kullanılmayan panelde kural
|
|
2179
|
-
* uygulanmaz: orada sınırlanacak bir sütun yok ve şeridin sağa yaslanması
|
|
2180
|
-
* doğru davranış.
|
|
2181
|
-
*
|
|
2182
1153
|
* @example
|
|
2183
1154
|
* <Panel title="Profil bilgileri" description="Fatura bu bilgilerle kesilir">
|
|
2184
|
-
*
|
|
1155
|
+
* <PanelForm>…alanlar…</PanelForm>
|
|
2185
1156
|
* </Panel>
|
|
2186
1157
|
*/
|
|
2187
1158
|
declare const Panel_2: FC<Props_26>;
|
|
2188
1159
|
|
|
2189
|
-
/**
|
|
2190
|
-
* Panel içindeki form ızgarası.
|
|
2191
|
-
*
|
|
2192
|
-
* <p>Genişliği SINIRLI (`$measure-narrow`): girdi alanları okunabilir satır
|
|
2193
|
-
* uzunluğunun ötesine uzamamalı — 900 px genişliğinde bir metin kutusu
|
|
2194
|
-
* doldurulması zor görünür. Ama bu sınır PANELE değil ızgaraya uygulanır;
|
|
2195
|
-
* panel tam genişlikte kalır ve sayfa düzeni bozulmaz.
|
|
2196
|
-
*/
|
|
1160
|
+
/** Panel içindeki form ızgarası. */
|
|
2197
1161
|
export declare const PanelForm: FC<PanelFormProps>;
|
|
2198
1162
|
|
|
2199
1163
|
declare type PanelFormProps = {
|
|
@@ -2203,12 +1167,7 @@ declare type PanelFormProps = {
|
|
|
2203
1167
|
className?: string;
|
|
2204
1168
|
};
|
|
2205
1169
|
|
|
2206
|
-
/**
|
|
2207
|
-
* İki alanı yan yana koyan satır. Dar ekranda alt alta düşer.
|
|
2208
|
-
*
|
|
2209
|
-
* <p>`PanelForm columns={2}` tüm ızgarayı ikiye böler; bu yalnızca TEK bir
|
|
2210
|
-
* satırı böler (ad + soyad gibi).
|
|
2211
|
-
*/
|
|
1170
|
+
/** İki alanı yan yana koyan satır. Dar ekranda alt alta düşer. */
|
|
2212
1171
|
export declare const PanelRow: FC<PanelRowProps>;
|
|
2213
1172
|
|
|
2214
1173
|
declare type PanelRowProps = {
|
|
@@ -2216,40 +1175,20 @@ declare type PanelRowProps = {
|
|
|
2216
1175
|
className?: string;
|
|
2217
1176
|
};
|
|
2218
1177
|
|
|
2219
|
-
export declare const
|
|
1178
|
+
export declare const PasswordInput: typeof PasswordInput_2;
|
|
2220
1179
|
|
|
2221
1180
|
/**
|
|
2222
|
-
*
|
|
2223
|
-
*
|
|
2224
|
-
* <h3>{@link Tooltip} ile farkı: içine ne konabildiği</h3>
|
|
2225
|
-
* İkisi de tetikleyiciye yapışan bir yüzey açıyor; ayrım içeriğin
|
|
2226
|
-
* ERİŞİLEBİLİR olup olmamasında:
|
|
2227
|
-
*
|
|
2228
|
-
* <ul>
|
|
2229
|
-
* <li>`Tooltip` yalnızca AÇIKLAMA taşır. `pointer-events: none` ve klavyeyle
|
|
2230
|
-
* içine girilemez — içine bir bağlantı konsa ona ulaşmanın yolu olmazdı
|
|
2231
|
-
* (fare balona giderken tetikleyiciden çıkıyor).</li>
|
|
2232
|
-
* <li><b>`Popover` odak alır.</b> Açıldığında odak içeri girer, `Escape`
|
|
2233
|
-
* kapatır ve odak tetikleyiciye döner. Bağlantı, düğme, kısa bir form
|
|
2234
|
-
* konabilir.</li>
|
|
2235
|
-
* </ul>
|
|
1181
|
+
* Şifre girdisi — yanında göz düğmesi.
|
|
2236
1182
|
*
|
|
2237
|
-
*
|
|
2238
|
-
*
|
|
2239
|
-
*
|
|
2240
|
-
* kullanıcıyı hapsetmemeli. Bu yüzden `<dialog>` DEĞİL portal + `usePositioning`:
|
|
2241
|
-
* `showModal()` arka planı inert bırakıyor, `<dialog open>` (kipsiz) ise üst
|
|
2242
|
-
* katmana hiç girmiyor ve `z-index` yarışına dönüyordu.
|
|
2243
|
-
*
|
|
2244
|
-
* <h3>Klavye</h3>
|
|
2245
|
-
* <table>
|
|
2246
|
-
* <tr><td>`Enter` / `Space`</td><td>tetikleyicide: açar</td></tr>
|
|
2247
|
-
* <tr><td>`Escape`</td><td>kapatır, odak TETİKLEYİCİYE döner</td></tr>
|
|
2248
|
-
* <tr><td>`Tab`</td><td>yüzeyin içinde gezinir; dışına çıkınca KAPANIR</td></tr>
|
|
2249
|
-
* </table>
|
|
2250
|
-
* Odak tuzağı YOK — kipsel olmayan bir yüzeyde odağı hapsetmek, kullanıcıyı
|
|
2251
|
-
* sayfadan koparır. Odak dışarı çıktığında yüzey kapanır.
|
|
1183
|
+
* `hanparca-admin` ve `hanparca-frontend`te BİREBİR AYNI dosya olarak
|
|
1184
|
+
* duruyordu; iki kopya da hanui'nin `Input` + `IconButton` bileşenlerini
|
|
1185
|
+
* sarmalıyordu, yani zaten bu kütüphaneye aitti.
|
|
2252
1186
|
*/
|
|
1187
|
+
declare const PasswordInput_2: FC<Props_13>;
|
|
1188
|
+
|
|
1189
|
+
export declare const Popover: typeof Popover_2;
|
|
1190
|
+
|
|
1191
|
+
/** Popover — <strong>eylem taşıyabilen</strong>, odaklanabilir yüzey. */
|
|
2253
1192
|
declare const Popover_2: ({ trigger, children, label, side, align, isOpen: controlledOpen, onOpenChange, className, testId, }: Props_5) => JSX.Element | null;
|
|
2254
1193
|
|
|
2255
1194
|
/** Tercih edilen kenar boyunca hizalama. */
|
|
@@ -2290,73 +1229,19 @@ export declare const preventAutoKeyboard: (dialog: HTMLDialogElement) => void;
|
|
|
2290
1229
|
|
|
2291
1230
|
export declare const Price: typeof Price_2;
|
|
2292
1231
|
|
|
2293
|
-
/**
|
|
2294
|
-
* Tutar gösterimi.
|
|
2295
|
-
*
|
|
2296
|
-
* <h3>Bileşen HESAP YAPMAZ</h3>
|
|
2297
|
-
* Tutar biçimlenmiş gelir. Kuruşu istemcide çevirmek kayan nokta hatası riski
|
|
2298
|
-
* taşır ve biçimlendirme iki yerde ayrışır: aynı ürün listede "1.299,90",
|
|
2299
|
-
* detayda "1299.9" çıkıyordu. İndirim oranı da dışarıdan gelir — burada
|
|
2300
|
-
* `(1 - fiyat/liste)` hesaplamak için biçimlenmiş metni sayıya çevirmek
|
|
2301
|
-
* gerekirdi ve o kırılgan bir iş.
|
|
2302
|
-
*
|
|
2303
|
-
* <h3>Tutar NÖTR kalır</h3>
|
|
2304
|
-
* Güncel tutar `$text`; üstü çizili eski tutar `$text-3`; indirim yüzdesi
|
|
2305
|
-
* küçük bir yeşil rozet. Kırmızı fiyat ucuz durur ve kırmızıyı "olumsuz"
|
|
2306
|
-
* anlamından koparır.
|
|
2307
|
-
*/
|
|
1232
|
+
/** Tutar gösterimi. */
|
|
2308
1233
|
declare const Price_2: FC<Props_27>;
|
|
2309
1234
|
|
|
2310
1235
|
export declare const Progress: typeof Progress_2;
|
|
2311
1236
|
|
|
2312
|
-
/**
|
|
2313
|
-
* İlerleme çubuğu — <strong>ölçülebilir</strong> bekleme.
|
|
2314
|
-
*
|
|
2315
|
-
* <h3>{@link Spinner} ile farkı: sonu bilinip bilinmediği</h3>
|
|
2316
|
-
* `Spinner` "bir şey oluyor" der ve başka bir şey söyleyemez. Ölçülebilir bir
|
|
2317
|
-
* işte (dosya yükleme, içe aktarma, çok adımlı ödeme) bu yetmiyor: kullanıcı
|
|
2318
|
-
* beklemeye değip değmeyeceğine karar veremiyor ve iki saniyeyle iki dakika
|
|
2319
|
-
* arasındaki farkı ancak bekleyerek öğreniyordu.
|
|
2320
|
-
*
|
|
2321
|
-
* <p>`value` verilmediğinde çubuk BELİRSİZ kipe düşer: yine bir çubuk çizer
|
|
2322
|
-
* ama `aria-valuenow` yazmaz. Bu kasıtlı — bilinmeyen bir değeri "0" diye
|
|
2323
|
-
* bildirmek, ekran okuyucuya işin hiç ilerlemediğini söylüyordu.
|
|
2324
|
-
*
|
|
2325
|
-
* <h3>Yüzde tek başına yeterli DEĞİL</h3>
|
|
2326
|
-
* `valueText` verildiğinde ekran okuyucu onu okur ("5 dosyadan 3'ü"), yüzdeyi
|
|
2327
|
-
* değil. Aynı bilgi görsel tarafta `isValueVisible` ile yazılabiliyor; ikisi
|
|
2328
|
-
* de aynı gerçeği söylemek zorunda.
|
|
2329
|
-
*
|
|
2330
|
-
* <h3>Renk tek başına anlam taşımaz</h3>
|
|
2331
|
-
* `tone` yalnızca bir vurgu: "tamamlandı" ya da "başarısız" durumu çubuğun
|
|
2332
|
-
* rengiyle DEĞİL, yanındaki metinle ve çağıran tarafın çizdiği ikonla
|
|
2333
|
-
* anlatılır (WCAG 1.4.1).
|
|
2334
|
-
*/
|
|
1237
|
+
/** İlerleme çubuğu — <strong>ölçülebilir</strong> bekleme. */
|
|
2335
1238
|
declare const Progress_2: ({ value, max, label, valueText, isValueVisible, tone, size, className, testId, }: Props_33) => JSX.Element;
|
|
2336
1239
|
|
|
2337
1240
|
export declare const ProgressCircle: MemoExoticComponent<({ value, max, label, valueText, isValueVisible, tone, size, className, testId, }: CircleProps) => JSX.Element>;
|
|
2338
1241
|
|
|
2339
1242
|
export declare const PromptDialog: typeof PromptDialog_2;
|
|
2340
1243
|
|
|
2341
|
-
/**
|
|
2342
|
-
* Metin isteyen pencere — `window.prompt()` yerine.
|
|
2343
|
-
*
|
|
2344
|
-
* <h3>Neden</h3>
|
|
2345
|
-
* Tarayıcı istemi tek satırlık, biçimlenemiyor, ana iş parçacığını
|
|
2346
|
-
* kilitliyor ve bazı tarayıcılarda sayfayı engelliyor. Bu bileşen aynı işi
|
|
2347
|
-
* `Modal` + `Field` + girdi ile yapar ve pencere kapanma kuralını
|
|
2348
|
-
* (aşağıda) getirir.
|
|
2349
|
-
*
|
|
2350
|
-
* <h3>Pencere yalnızca BAŞARIDA kapanır</h3>
|
|
2351
|
-
* `onSubmit` reddederse pencere açık kalır ve yazılan metin korunur — istek
|
|
2352
|
-
* patlarsa kullanıcının yazdığı gerekçe geri dönüşsüz silinmemeli. Değer
|
|
2353
|
-
* yalnızca pencere <em>yeniden açılırken</em> `defaultValue`dan tazelenir.
|
|
2354
|
-
*
|
|
2355
|
-
* <h3>Enter gönderir</h3>
|
|
2356
|
-
* Girdi bir `<form>` içinde; dip düğmesi `form` özniteliğiyle ona bağlanır
|
|
2357
|
-
* (`Modal` dip şeridi formun dışında çizer). `multiline` kipinde Enter satır
|
|
2358
|
-
* başı yapar, gönderme düğmeden.
|
|
2359
|
-
*/
|
|
1244
|
+
/** Metin isteyen pencere — `window.prompt()` yerine. */
|
|
2360
1245
|
declare const PromptDialog_2: FC<Props_45>;
|
|
2361
1246
|
|
|
2362
1247
|
declare type Props = {
|
|
@@ -2364,11 +1249,6 @@ declare type Props = {
|
|
|
2364
1249
|
/**
|
|
2365
1250
|
* Tema ezmeleri. Yalnızca DEĞİŞTİRİLEN token'lar verilir; verilmeyen her
|
|
2366
1251
|
* token varsayılanında kalır.
|
|
2367
|
-
*
|
|
2368
|
-
* <p>Nesne referansı her render'da yeniden üretilirse (satır içi nesne
|
|
2369
|
-
* literali) `<style>` etiketi de her render'da yeniden yazılır. Bileşen
|
|
2370
|
-
* bunu içerik karşılaştırmasıyla engeller ama yine de sabit bir referans
|
|
2371
|
-
* (modül düzeyinde tanımlı bir nesne) tercih edilmeli.
|
|
2372
1252
|
*/
|
|
2373
1253
|
theme?: HanuiThemeConfig;
|
|
2374
1254
|
/**
|
|
@@ -2379,33 +1259,11 @@ declare type Props = {
|
|
|
2379
1259
|
* <HanuiProvider linkComponent={NextLink}>…</HanuiProvider>
|
|
2380
1260
|
*/
|
|
2381
1261
|
linkComponent?: HanuiLinkComponent;
|
|
2382
|
-
/**
|
|
2383
|
-
* Arayüz metinleri — bir kez, burada.
|
|
2384
|
-
*
|
|
2385
|
-
* <p>Kütüphane hiçbir dilde metin uydurmaz ama aynı "Kapat" dizesini yüz
|
|
2386
|
-
* çağrı yerine dağıtmak da doğru değildi: biri değiştiğinde doksan dokuzu
|
|
2387
|
-
* eski kalıyordu. Çözümleme sırası prop → buradaki config; ikisi de yoksa
|
|
2388
|
-
* geliştirme kipinde konsola uyarı düşer.
|
|
2389
|
-
*
|
|
2390
|
-
* <p>Öğeye ÖZGÜ metinler buraya girmez (`Modal.title`,
|
|
2391
|
-
* `ConfirmDialog.confirmLabel`, `IconButton.label`); onlar prop olarak
|
|
2392
|
-
* zorunlu kalır çünkü her çağrı yerinde farklıdır.
|
|
2393
|
-
*/
|
|
1262
|
+
/** Arayüz metinleri — bir kez, burada. */
|
|
2394
1263
|
labels?: HanuiLabels;
|
|
2395
1264
|
};
|
|
2396
1265
|
|
|
2397
1266
|
declare type Props_10 = {
|
|
2398
|
-
/** Radyo grubu adı — aynı gruptaki kartlar ok tuşlarıyla gezilir. */
|
|
2399
|
-
name: string;
|
|
2400
|
-
value: string;
|
|
2401
|
-
isSelected: boolean;
|
|
2402
|
-
isDisabled?: boolean;
|
|
2403
|
-
onChange: (value: string) => void;
|
|
2404
|
-
/** Zengin gövde: kartın içeriği çağırana aittir. */
|
|
2405
|
-
children: ReactNode;
|
|
2406
|
-
} & CommonElementProps;
|
|
2407
|
-
|
|
2408
|
-
declare type Props_11 = {
|
|
2409
1267
|
min: number;
|
|
2410
1268
|
max: number;
|
|
2411
1269
|
step?: number;
|
|
@@ -2430,7 +1288,7 @@ declare type Props_11 = {
|
|
|
2430
1288
|
testId?: string;
|
|
2431
1289
|
};
|
|
2432
1290
|
|
|
2433
|
-
declare type
|
|
1291
|
+
declare type Props_11 = {
|
|
2434
1292
|
value: number | null;
|
|
2435
1293
|
onChange: (value: number) => void;
|
|
2436
1294
|
/** Grubun erişilebilir adı ("Ürün puanı"). */
|
|
@@ -2438,10 +1296,6 @@ declare type Props_12 = {
|
|
|
2438
1296
|
/**
|
|
2439
1297
|
* Puan açıklamaları. Hem ekran okuyucuya okunur hem de seçildiğinde
|
|
2440
1298
|
* yıldızların altında yazar. Verilmezse `labels.rating.scale`.
|
|
2441
|
-
*
|
|
2442
|
-
* <p>Dolu yıldız sayısı tek başına bir renk/şekil sinyali. Yanına açıklama
|
|
2443
|
-
* yazmak hem anlamı netleştirir hem de renk körü kullanıcıya ikinci bir ipucu
|
|
2444
|
-
* verir (WCAG 1.4.1).
|
|
2445
1299
|
*/
|
|
2446
1300
|
ratingLabels?: RatingLabels;
|
|
2447
1301
|
/**
|
|
@@ -2454,7 +1308,7 @@ declare type Props_12 = {
|
|
|
2454
1308
|
testId?: string;
|
|
2455
1309
|
};
|
|
2456
1310
|
|
|
2457
|
-
declare type
|
|
1311
|
+
declare type Props_12 = {
|
|
2458
1312
|
value: number;
|
|
2459
1313
|
onChange: (value: number) => void;
|
|
2460
1314
|
/** Grubun ve girdinin erişilebilir adı. Verilmezse `labels.quantity.label`. */
|
|
@@ -2471,6 +1325,13 @@ declare type Props_13 = {
|
|
|
2471
1325
|
testId?: string;
|
|
2472
1326
|
};
|
|
2473
1327
|
|
|
1328
|
+
declare type Props_13 = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
|
|
1329
|
+
/** Şifre gizliyken düğmenin erişilebilir adı. */
|
|
1330
|
+
showLabel?: string;
|
|
1331
|
+
/** Şifre görünürken düğmenin erişilebilir adı. */
|
|
1332
|
+
hideLabel?: string;
|
|
1333
|
+
};
|
|
1334
|
+
|
|
2474
1335
|
declare type Props_14 = {
|
|
2475
1336
|
values: string[];
|
|
2476
1337
|
onChange: (values: string[]) => void;
|
|
@@ -2493,13 +1354,7 @@ declare type Props_14 = {
|
|
|
2493
1354
|
|
|
2494
1355
|
declare type Props_15 = BaseProps_2 & {
|
|
2495
1356
|
isRequired?: boolean;
|
|
2496
|
-
/**
|
|
2497
|
-
* Zorunluluk yıldızının ekran okuyucu karşılığı ("(zorunlu)").
|
|
2498
|
-
*
|
|
2499
|
-
* <p>Yıldız yalnızca GÖRSEL bir kısayol; renk ve şekil tek başına anlam
|
|
2500
|
-
* taşıyamaz (WCAG 1.4.1), o yüzden yanında okunabilir bir metin olmak
|
|
2501
|
-
* zorunda. Verilmezse `labels.required` okunur.
|
|
2502
|
-
*/
|
|
1357
|
+
/** Zorunluluk yıldızının ekran okuyucu karşılığı ("(zorunlu)"). */
|
|
2503
1358
|
requiredLabel?: string;
|
|
2504
1359
|
};
|
|
2505
1360
|
|
|
@@ -2549,13 +1404,7 @@ declare type Props_18 = {
|
|
|
2549
1404
|
* koşul yazması gerekmez.
|
|
2550
1405
|
*/
|
|
2551
1406
|
imageUrl?: string;
|
|
2552
|
-
/**
|
|
2553
|
-
* Baş harfleri büyütürken kullanılacak dil etiketi ("tr", "az").
|
|
2554
|
-
*
|
|
2555
|
-
* <p>Türkçede ZORUNLU: `toUpperCase()` "i" harfini "I" yapıyor ve "İlhan"ın
|
|
2556
|
-
* baş harfi "I" çıkıyor. `toLocaleUpperCase('tr')` doğru "İ" verir.
|
|
2557
|
-
* Verilmezse `labels.locale`, o da yoksa çalışma ortamının varsayılan dili.
|
|
2558
|
-
*/
|
|
1407
|
+
/** Baş harfleri büyütürken kullanılacak dil etiketi ("tr", "az"). */
|
|
2559
1408
|
locale?: string;
|
|
2560
1409
|
size?: 'sm' | 'md' | 'lg';
|
|
2561
1410
|
className?: string;
|
|
@@ -2600,13 +1449,7 @@ declare type Props_21 = {
|
|
|
2600
1449
|
/** Önceki/sonraki düğmelerinin erişilebilir adları. ZORUNLU. */
|
|
2601
1450
|
previousLabel: string;
|
|
2602
1451
|
nextLabel: string;
|
|
2603
|
-
/**
|
|
2604
|
-
* Sayfa göstergesinin ad üreticisi (`index` 1 tabanlı).
|
|
2605
|
-
*
|
|
2606
|
-
* <p>Verilmediğinde nokta göstergesi ÇİZİLMEZ: adsız bir nokta ekran
|
|
2607
|
-
* okuyucuda "düğme" diye okunuyor ve kullanıcı nereye gittiğini
|
|
2608
|
-
* bilmiyordu.
|
|
2609
|
-
*/
|
|
1452
|
+
/** Sayfa göstergesinin ad üreticisi (`index` 1 tabanlı). */
|
|
2610
1453
|
formatDotLabel?: (index: number, total: number) => string;
|
|
2611
1454
|
/** Bir kartın asgari genişliği. Şerit buna göre kaç kart göstereceğine karar verir. */
|
|
2612
1455
|
itemMinWidth?: number;
|
|
@@ -2617,27 +1460,14 @@ declare type Props_21 = {
|
|
|
2617
1460
|
declare type Props_22 = {
|
|
2618
1461
|
/** Gösterilecek ve panoya kopyalanacak değer. */
|
|
2619
1462
|
value: string;
|
|
2620
|
-
/**
|
|
2621
|
-
* Kopyalama düğmesinin erişilebilir adı.
|
|
2622
|
-
*
|
|
2623
|
-
* <p>Verilmezse `labels.copyField.copy(value)` çağrılır. Config bir DİZE
|
|
2624
|
-
* değil biçimlendirici tutar: ad değeri İÇERMELİ — bir listede on beş
|
|
2625
|
-
* kopyalama düğmesi var ve hepsi "Kopyala" diye okunduğunda ekran okuyucu
|
|
2626
|
-
* kullanıcısı hangisinin hangi kayıt olduğunu bilmiyordu.
|
|
2627
|
-
*/
|
|
1463
|
+
/** Kopyalama düğmesinin erişilebilir adı. */
|
|
2628
1464
|
copyLabel?: string;
|
|
2629
1465
|
/** Kopyalandıktan sonraki ad. Verilmezse `labels.copyField.copied(value)`. */
|
|
2630
1466
|
copiedLabel?: string;
|
|
2631
1467
|
/** `aria-live` ile duyurulan onay cümlesi. Verilmezse `labels.copyField.announcement`. */
|
|
2632
1468
|
copiedAnnouncement?: string;
|
|
2633
1469
|
size?: 'sm' | 'md';
|
|
2634
|
-
/**
|
|
2635
|
-
* Kopyalama düğmesini gizler.
|
|
2636
|
-
*
|
|
2637
|
-
* <p>Yalnızca değerin <em>zaten tıklanabilir bir şeyin içinde</em> olduğu
|
|
2638
|
-
* yerlerde (bir bağlantının gövdesi) verilir: iç içe etkileşim öğesi geçersiz
|
|
2639
|
-
* HTML üretir.
|
|
2640
|
-
*/
|
|
1470
|
+
/** Kopyalama düğmesini gizler. */
|
|
2641
1471
|
isReadOnly?: boolean;
|
|
2642
1472
|
className?: string;
|
|
2643
1473
|
testId?: string;
|
|
@@ -2657,20 +1487,7 @@ declare type Props_24 = {
|
|
|
2657
1487
|
action?: ReactNode;
|
|
2658
1488
|
/** İkincil eylem veya ipucu. */
|
|
2659
1489
|
secondaryAction?: ReactNode;
|
|
2660
|
-
/**
|
|
2661
|
-
* `error` — liste BOŞ değil, ÇEKİLEMEDİ.
|
|
2662
|
-
*
|
|
2663
|
-
* <p>İkisi ayrı durumlar ve ayrı görünmek zorundalar: ağ hatasını "kayıt
|
|
2664
|
-
* kalmamış" diye okuyan kullanıcı yanlış karar veriyor (ürün aramayı
|
|
2665
|
-
* bırakıyor, siparişinin silindiğini sanıyor). Varyant `role="alert"`
|
|
2666
|
-
* taşıyor ve tonu farklı — layout aynı kalıyor ki iki durum arasındaki
|
|
2667
|
-
* geçiş sıçramasın.
|
|
2668
|
-
*
|
|
2669
|
-
* <p>Ayrım ÖNCE bu bileşenin dışındaydı ("ağ hatasında bu bileşen
|
|
2670
|
-
* çizilmez") ve sonucu şuydu: her çağıran kendi hata kutusunu yazıyor,
|
|
2671
|
-
* kutular birbirinden farklı görünüyordu. Ayrım korunuyor — ama artık
|
|
2672
|
-
* BİLEŞENDE kodlu, çağıranın disiplinine bırakılmış değil.
|
|
2673
|
-
*/
|
|
1490
|
+
/** `error` — liste BOŞ değil, ÇEKİLEMEDİ. */
|
|
2674
1491
|
tone?: 'empty' | 'error';
|
|
2675
1492
|
size?: 'sm' | 'md';
|
|
2676
1493
|
className?: string;
|
|
@@ -2727,19 +1544,7 @@ declare type Props_27 = {
|
|
|
2727
1544
|
value: string;
|
|
2728
1545
|
/** Para birimi simgesi ya da kodu. Verilmezse `labels.currency`. */
|
|
2729
1546
|
currency?: string;
|
|
2730
|
-
/**
|
|
2731
|
-
* Değeri `Intl.NumberFormat` ile biçimlendirir.
|
|
2732
|
-
*
|
|
2733
|
-
* <p>`value` bu kipte de bir DİZE olarak kalıyor ve sayıya çevriliyor —
|
|
2734
|
-
* bileşen hâlâ HESAP YAPMIYOR, yalnızca ayırıcıları ve para birimi
|
|
2735
|
-
* konumunu yerel ayardan alıyor. Yerel ayar `labels.locale`den; verilmezse
|
|
2736
|
-
* biçimlendirme YAPILMAZ ve değer olduğu gibi yazılır. Yanlış yerel ayarda
|
|
2737
|
-
* biçimlendirilmiş bir tutar, biçimlendirilmemiş olandan kötü: "1,250" bir
|
|
2738
|
-
* yerde bin iki yüz elli, başka bir yerde bir tam iki yüz elli.
|
|
2739
|
-
*
|
|
2740
|
-
* <p>Para birimi simgesinin ÖN/ARKA konumu da yerel ayara bağlı ve şu anda
|
|
2741
|
-
* her zaman arkada — `Intl` açıldığında doğru konumu o veriyor.
|
|
2742
|
-
*/
|
|
1547
|
+
/** Değeri `Intl.NumberFormat` ile biçimlendirir. */
|
|
2743
1548
|
isFormatted?: boolean;
|
|
2744
1549
|
/** Üstü çizili liste fiyatı; indirim varsa verilir (biçimlenmiş). */
|
|
2745
1550
|
listValue?: string;
|
|
@@ -2757,16 +1562,7 @@ declare type Props_28 = {
|
|
|
2757
1562
|
value: number;
|
|
2758
1563
|
/** Değerlendirme sayısı; verilirse yıldızların yanında gösterilir. */
|
|
2759
1564
|
count?: number;
|
|
2760
|
-
/**
|
|
2761
|
-
* Ekran okuyucuya okunan metin.
|
|
2762
|
-
*
|
|
2763
|
-
* <p>Yıldızlar `aria-hidden`: beş ayrı ikonu tek tek duyurmak anlamsız.
|
|
2764
|
-
* Yerine bir cümle okunur ("5 üzerinden 4,5 — 12 değerlendirme") ve o cümle
|
|
2765
|
-
* hem dile hem sayı biçimine bağlı; kütüphane onu uyduramaz.
|
|
2766
|
-
*
|
|
2767
|
-
* <p>Verilmezse `labels.rating.srLabel(value, count)` çağrılır — cümle
|
|
2768
|
-
* değere bağlı olduğu için config bir DİZE değil bir biçimlendirici tutar.
|
|
2769
|
-
*/
|
|
1565
|
+
/** Ekran okuyucuya okunan metin. */
|
|
2770
1566
|
srLabel?: string;
|
|
2771
1567
|
size?: 'sm' | 'md';
|
|
2772
1568
|
className?: string;
|
|
@@ -2815,13 +1611,7 @@ declare type Props_3 = {
|
|
|
2815
1611
|
|
|
2816
1612
|
declare type Props_30 = {
|
|
2817
1613
|
children: ReactNode;
|
|
2818
|
-
/**
|
|
2819
|
-
* Kaydırılabilir bölgenin erişilebilir adı. ZORUNLU.
|
|
2820
|
-
*
|
|
2821
|
-
* <p>Bölge klavyeyle odaklanabilir olduğunda ekran okuyucu onu duyuruyor;
|
|
2822
|
-
* adsız bir bölge "bölge" diye okunuyor ve kullanıcı neyin içinde olduğunu
|
|
2823
|
-
* bilmiyordu.
|
|
2824
|
-
*/
|
|
1614
|
+
/** Kaydırılabilir bölgenin erişilebilir adı. ZORUNLU. */
|
|
2825
1615
|
label: string;
|
|
2826
1616
|
/** Kaydırma yönü. `both` iki eksende de kaydırır. */
|
|
2827
1617
|
axis?: 'vertical' | 'horizontal' | 'both';
|
|
@@ -2853,20 +1643,9 @@ declare type Props_32 = {
|
|
|
2853
1643
|
unit?: string;
|
|
2854
1644
|
/** Değişim metni ("%12", "+3"). `trend` ile birlikte anlamlı. */
|
|
2855
1645
|
delta?: string;
|
|
2856
|
-
/**
|
|
2857
|
-
* Değişimin yönü.
|
|
2858
|
-
*
|
|
2859
|
-
* <p>Yön TEK BAŞINA iyi/kötü demek değildir: "iade oranı %12 arttı" kötü,
|
|
2860
|
-
* "ciro %12 arttı" iyi. Renk kararı {@link isUpPositive} ile ayrı veriliyor.
|
|
2861
|
-
*/
|
|
1646
|
+
/** Değişimin yönü. */
|
|
2862
1647
|
trend?: StatTrend;
|
|
2863
|
-
/**
|
|
2864
|
-
* Artış İYİ mi. Varsayılan `true`.
|
|
2865
|
-
*
|
|
2866
|
-
* <p>`false` verildiğinde yukarı ok kırmızı, aşağı ok yeşil çizilir — iade
|
|
2867
|
-
* oranı, hata sayısı, terk edilen sepet gibi ölçüler için. Yönü her zaman
|
|
2868
|
-
* yeşil çizmek, kötüleşen bir ölçüyü iyi haber gibi gösteriyordu.
|
|
2869
|
-
*/
|
|
1648
|
+
/** Artış İYİ mi. Varsayılan `true`. */
|
|
2870
1649
|
isUpPositive?: boolean;
|
|
2871
1650
|
/** Değerin altındaki bir cümlelik bağlam ("geçen haftaya göre"). */
|
|
2872
1651
|
description?: ReactNode;
|
|
@@ -2875,15 +1654,6 @@ declare type Props_32 = {
|
|
|
2875
1654
|
/**
|
|
2876
1655
|
* `plain` KUTUYU kaldırır: zemin, kenarlık ve dolgu gider, yalnızca sayı
|
|
2877
1656
|
* kalır. Varsayılan `card`.
|
|
2878
|
-
*
|
|
2879
|
-
* <p>Kendi zemini olan bir bandın (kahraman, güvence şeridi) üzerinde
|
|
2880
|
-
* ölçümler kart olarak istenmiyor. Bunun tek yolu kapsayıcıda
|
|
2881
|
-
* `--hanui-surface: transparent` yazmaktı ve iki şeyi birden bozuyordu:
|
|
2882
|
-
* dolgu <em>görünmez oluyor ama YER KAPLIYOR</em> — ölçüldü, telefonda 2×2
|
|
2883
|
-
* ızgarada satır arası 48 px'e çıkıyor ve dört sayı tek bir grup gibi
|
|
2884
|
-
* okunmuyordu — ayrıca o değişken kapsayıcıdaki <strong>her</strong> hanui
|
|
2885
|
-
* yüzeyini birden düzleştiriyordu. `plain` niyeti tek yerde söyler ve
|
|
2886
|
-
* yüzey değişkenine dokunmaya gerek bırakmaz.
|
|
2887
1657
|
*/
|
|
2888
1658
|
variant?: 'card' | 'plain';
|
|
2889
1659
|
size?: 'sm' | 'md';
|
|
@@ -2901,13 +1671,7 @@ declare type Props_33 = {
|
|
|
2901
1671
|
max?: number;
|
|
2902
1672
|
/** Çubuğun erişilebilir adı ("Yükleme", "Ödeme adımı"). ZORUNLU. */
|
|
2903
1673
|
label: string;
|
|
2904
|
-
/**
|
|
2905
|
-
* Ekran okuyucuya okunan METİN karşılığı ("3 / 5 dosya").
|
|
2906
|
-
*
|
|
2907
|
-
* <p>Verilmezse ekran okuyucu ham yüzdeyi okur. Bir dosya yüklemesinde
|
|
2908
|
-
* "yüzde altmış" ile "5 dosyadan 3'ü" arasındaki fark, kullanıcının
|
|
2909
|
-
* bekleyip beklememeye karar verebilmesi.
|
|
2910
|
-
*/
|
|
1674
|
+
/** Ekran okuyucuya okunan METİN karşılığı ("3 / 5 dosya"). */
|
|
2911
1675
|
valueText?: string;
|
|
2912
1676
|
/** Yüzdeyi çubuğun yanında GÖRÜNÜR olarak yazar. */
|
|
2913
1677
|
isValueVisible?: boolean;
|
|
@@ -2919,28 +1683,14 @@ declare type Props_33 = {
|
|
|
2919
1683
|
|
|
2920
1684
|
declare type Props_34 = {
|
|
2921
1685
|
size?: 'sm' | 'md' | 'lg';
|
|
2922
|
-
/**
|
|
2923
|
-
* Ekran okuyucuya okunacak metin; görsel olarak gizli.
|
|
2924
|
-
*
|
|
2925
|
-
* <p>Verilmezse `labels.loading` okunur. Boş dizeye BİLİNÇLİ olarak izin
|
|
2926
|
-
* verilir: göstergenin <em>zaten adı olan</em> bir öğenin içinde durduğu
|
|
2927
|
-
* yerlerde (yükleniyor durumundaki bir düğme) duyurmak tekrar üretiyor.
|
|
2928
|
-
* `label=""` orada doğru olan ve config'i de bastırır.
|
|
2929
|
-
*/
|
|
1686
|
+
/** Ekran okuyucuya okunacak metin; görsel olarak gizli. */
|
|
2930
1687
|
label?: string;
|
|
2931
1688
|
className?: string;
|
|
2932
1689
|
};
|
|
2933
1690
|
|
|
2934
1691
|
declare type Props_35 = {
|
|
2935
1692
|
items: AccordionItem[];
|
|
2936
|
-
/**
|
|
2937
|
-
* Aynı anda YALNIZCA BİR bölüm açık kalır.
|
|
2938
|
-
*
|
|
2939
|
-
* <p>Varsayılan çoklu: bir SSS listesinde iki soruyu yan yana okumak
|
|
2940
|
-
* yaygın bir ihtiyaç ve tek-açık kip, kullanıcının az önce açtığı bölümü
|
|
2941
|
-
* habersizce kapatıyordu. Tek-açık yalnızca bölümler UZUN olduğunda
|
|
2942
|
-
* (mobil filtre paneli) doğru.
|
|
2943
|
-
*/
|
|
1693
|
+
/** Aynı anda YALNIZCA BİR bölüm açık kalır. */
|
|
2944
1694
|
isSingle?: boolean;
|
|
2945
1695
|
/** Kontrolsüz kullanımda açılışta açık olan bölümler. */
|
|
2946
1696
|
defaultOpenIds?: string[];
|
|
@@ -2972,26 +1722,12 @@ declare type Props_37 = {
|
|
|
2972
1722
|
items: TabItem[];
|
|
2973
1723
|
/** Kontrolsüz kullanımda açılışta seçili sekme. */
|
|
2974
1724
|
defaultTabId?: string;
|
|
2975
|
-
/**
|
|
2976
|
-
* Kontrollü kullanım: seçili sekme çağıranın durumunda.
|
|
2977
|
-
*
|
|
2978
|
-
* <p>`onChange` ile birlikte verilir. Kontrolsüz sürüm (yalnızca
|
|
2979
|
-
* `defaultTabId`) korunur — kendi durumunu tutması yeterli olan sekmelerin
|
|
2980
|
-
* dışarıdan yönetilmesi gereksiz.
|
|
2981
|
-
*/
|
|
1725
|
+
/** Kontrollü kullanım: seçili sekme çağıranın durumunda. */
|
|
2982
1726
|
activeId?: string;
|
|
2983
1727
|
onChange?: (id: string) => void;
|
|
2984
1728
|
/** Sekme çubuğunun erişilebilir adı. */
|
|
2985
1729
|
ariaLabel?: string;
|
|
2986
|
-
/**
|
|
2987
|
-
* Ok tuşu yalnızca ODAĞI taşır; seçim `Enter`/`Space` ile yapılır.
|
|
2988
|
-
*
|
|
2989
|
-
* <p>Varsayılan OTOMATİK etkinleştirme (ok tuşu odakla birlikte seçimi de
|
|
2990
|
-
* taşır) ve APG panel içeriği hazır olduğu sürece onu öneriyor. Ama panel
|
|
2991
|
-
* PAHALIYSA — her sekme bir istek atıyorsa — otomatik etkinleştirme,
|
|
2992
|
-
* kullanıcı beşinci sekmeye giderken dört istek atıyor. Manuel kipte
|
|
2993
|
-
* kullanıcı hedefine varıp `Enter`a basıyor: tek istek.
|
|
2994
|
-
*/
|
|
1730
|
+
/** Ok tuşu yalnızca ODAĞI taşır; seçim `Enter`/`Space` ile yapılır. */
|
|
2995
1731
|
isManualActivation?: boolean;
|
|
2996
1732
|
className?: string;
|
|
2997
1733
|
testId?: string;
|
|
@@ -3044,14 +1780,7 @@ declare type Props_40 = {
|
|
|
3044
1780
|
toolbar?: ReactNode;
|
|
3045
1781
|
/** Dipte duran eylem şeridi. */
|
|
3046
1782
|
footer?: ReactNode;
|
|
3047
|
-
/**
|
|
3048
|
-
* Panelin <strong>kendiliğinden kapandığı</strong> medya sorgusu.
|
|
3049
|
-
*
|
|
3050
|
-
* <p>Varsayılan mobil eşiği (`>640`), çünkü seçim kutuları o eşiğin üstünde
|
|
3051
|
-
* listeyi yapışkan panelde açıyor. Kendi eşiği daha geniş olan çağıranlar
|
|
3052
|
-
* kendi sorgusunu verir; aksi hâlde 800 px'te açılan panel pencere 641 px'i
|
|
3053
|
-
* geçtiğinde kapanıyor ya da hiç kapanmıyordu.
|
|
3054
|
-
*/
|
|
1783
|
+
/** Panelin <strong>kendiliğinden kapandığı</strong> medya sorgusu. */
|
|
3055
1784
|
closeAbove?: string;
|
|
3056
1785
|
className?: string;
|
|
3057
1786
|
testId?: string;
|
|
@@ -3061,21 +1790,10 @@ declare type Props_41 = {
|
|
|
3061
1790
|
isOpen: boolean;
|
|
3062
1791
|
onClose: () => void;
|
|
3063
1792
|
title: string;
|
|
3064
|
-
/**
|
|
3065
|
-
* Kapatma düğmesinin erişilebilir adı.
|
|
3066
|
-
*
|
|
3067
|
-
* <p>Verilmezse `HanuiProvider labels.close` okunur. Bağlama göre farklı
|
|
3068
|
-
* olması gereken pencerelerde ("Daha sonra") prop kazanır.
|
|
3069
|
-
*/
|
|
1793
|
+
/** Kapatma düğmesinin erişilebilir adı. */
|
|
3070
1794
|
closeLabel?: string;
|
|
3071
1795
|
children?: ReactNode;
|
|
3072
|
-
/**
|
|
3073
|
-
* Başlığın altındaki bir cümlelik açıklama.
|
|
3074
|
-
*
|
|
3075
|
-
* <p>`aria-describedby` ile pencereye bağlanır: ekran okuyucu pencere
|
|
3076
|
-
* açıldığında başlıkla birlikte bunu da okur. Gövdeye paragraf olarak
|
|
3077
|
-
* yazıldığında duyurulmuyordu.
|
|
3078
|
-
*/
|
|
1796
|
+
/** Başlığın altındaki bir cümlelik açıklama. */
|
|
3079
1797
|
description?: ReactNode;
|
|
3080
1798
|
/** Altta duran eylemler. Sağa yaslanır; dar ekranda tam genişliğe yayılır. */
|
|
3081
1799
|
footer?: ReactNode;
|
|
@@ -3084,13 +1802,7 @@ declare type Props_41 = {
|
|
|
3084
1802
|
/** İkon madalyonunun tonu. */
|
|
3085
1803
|
tone?: ModalTone;
|
|
3086
1804
|
size?: 'sm' | 'md' | 'lg';
|
|
3087
|
-
/**
|
|
3088
|
-
* `false` iken arka plana tıklama, Escape ve kapatma düğmesi kapatmaz.
|
|
3089
|
-
*
|
|
3090
|
-
* <p>Yalnızca <strong>sürmekte olan</strong> bir işlem için: silme isteği
|
|
3091
|
-
* gönderilmişken pencerenin kapanması, kullanıcıya işlem iptal edilmiş gibi
|
|
3092
|
-
* görünüyordu.
|
|
3093
|
-
*/
|
|
1805
|
+
/** `false` iken arka plana tıklama, Escape ve kapatma düğmesi kapatmaz. */
|
|
3094
1806
|
isDismissable?: boolean;
|
|
3095
1807
|
className?: string;
|
|
3096
1808
|
testId?: string;
|
|
@@ -3116,36 +1828,19 @@ declare type Props_43 = {
|
|
|
3116
1828
|
/**
|
|
3117
1829
|
* Onaylandığında çalışır. `Promise` dönerse düğme beklerken yükleme
|
|
3118
1830
|
* durumuna geçer ve pencere <strong>kapanmaz</strong>.
|
|
3119
|
-
*
|
|
3120
|
-
* <p>İşlem başarılıysa pencereyi kapatmak çağıranın işi: hata durumunda
|
|
3121
|
-
* pencerenin açık kalması gerekiyor ki kullanıcı tekrar deneyebilsin.
|
|
3122
1831
|
*/
|
|
3123
1832
|
onConfirm: () => void | Promise<void>;
|
|
3124
1833
|
/** Soru cümlesi. Eylem odaklı yazılır: "…silinsin mi?". */
|
|
3125
1834
|
title: string;
|
|
3126
1835
|
/** Sonucu açıklar: neyin geri alınamaz olduğu burada yazılır. */
|
|
3127
1836
|
description?: ReactNode;
|
|
3128
|
-
/**
|
|
3129
|
-
* Onay düğmesinin etiketi — ZORUNLU, config'ten okunmaz.
|
|
3130
|
-
*
|
|
3131
|
-
* <p>Eylemi TEKRARLAR: "Sil", "İptal et". Her pencerede farklı olduğu için
|
|
3132
|
-
* uygulama düzeyinde bir varsayılanı olamaz; "Tamam" gibi bir varsayılan
|
|
3133
|
-
* kullanıcıya neyi onayladığını söylemez ve `window.confirm()`ten kaçmamızın
|
|
3134
|
-
* sebeplerinden biri tam olarak buydu.
|
|
3135
|
-
*/
|
|
1837
|
+
/** Onay düğmesinin etiketi — ZORUNLU, config'ten okunmaz. */
|
|
3136
1838
|
confirmLabel: string;
|
|
3137
1839
|
/** Verilmezse `labels.cancel`. */
|
|
3138
1840
|
cancelLabel?: string;
|
|
3139
1841
|
/** Verilmezse `labels.close`. */
|
|
3140
1842
|
closeLabel?: string;
|
|
3141
|
-
/**
|
|
3142
|
-
* Onayın türü — ikon, ton ve onay düğmesinin varyantını birlikte belirler.
|
|
3143
|
-
*
|
|
3144
|
-
* <p>Ad `kind`ten `variant`a taşındı: aynı işi yapan üçüncü bir ad
|
|
3145
|
-
* kütüphanede zaten `variant` olarak duruyordu (`Button`, `Badge`) ve
|
|
3146
|
-
* tüketici her bileşende hangisinin geçerli olduğunu hatırlamak zorunda
|
|
3147
|
-
* kalıyordu. Nöbetçi: `src/__tests__/api-consistency.test.ts`.
|
|
3148
|
-
*/
|
|
1843
|
+
/** Onayın türü — ikon, ton ve onay düğmesinin varyantını birlikte belirler. */
|
|
3149
1844
|
variant?: ConfirmKind;
|
|
3150
1845
|
/** @deprecated `variant` kullanın. Bir sonraki büyük sürümde kalkacak. */
|
|
3151
1846
|
kind?: ConfirmKind;
|
|
@@ -3160,12 +1855,7 @@ declare type Props_44 = {
|
|
|
3160
1855
|
/** Kapatma düğmesinin erişilebilir adı. Verilmezse `labels.close`. */
|
|
3161
1856
|
closeLabel?: string;
|
|
3162
1857
|
children: ReactNode;
|
|
3163
|
-
/**
|
|
3164
|
-
* Panelin hangi kenardan geldiği. Mantıksal: `end` RTL'de sola açılır.
|
|
3165
|
-
*
|
|
3166
|
-
* <p>Varsayılan `end` — filtre ve ayrıntı panelleri okuma yönünün SONUNDAN
|
|
3167
|
-
* gelir; `start` gezinme panelleri içindir.
|
|
3168
|
-
*/
|
|
1858
|
+
/** Panelin hangi kenardan geldiği. Mantıksal: `end` RTL'de sola açılır. */
|
|
3169
1859
|
side?: 'start' | 'end';
|
|
3170
1860
|
size?: 'sm' | 'md' | 'lg';
|
|
3171
1861
|
/** Dipte duran eylem şeridi; gövde kaydırılırken yerinde kalır. */
|
|
@@ -3179,13 +1869,7 @@ declare type Props_44 = {
|
|
|
3179
1869
|
declare type Props_45 = BaseProps_3 & {
|
|
3180
1870
|
/** Boş (yalnızca boşluk dahil) değer gönderilemez. */
|
|
3181
1871
|
isRequired?: boolean;
|
|
3182
|
-
/**
|
|
3183
|
-
* Zorunluluk yıldızının ekran okuyucu karşılığı ("(zorunlu)").
|
|
3184
|
-
*
|
|
3185
|
-
* <p>Yıldız yalnızca GÖRSEL bir kısayol; renk ve şekil tek başına anlam
|
|
3186
|
-
* taşıyamaz (WCAG 1.4.1), o yüzden yanında okunabilir bir metin olmak
|
|
3187
|
-
* zorunda. Verilmezse `labels.required` okunur.
|
|
3188
|
-
*/
|
|
1872
|
+
/** Zorunluluk yıldızının ekran okuyucu karşılığı ("(zorunlu)"). */
|
|
3189
1873
|
requiredLabel?: string;
|
|
3190
1874
|
};
|
|
3191
1875
|
|
|
@@ -3234,22 +1918,9 @@ declare type Props_47 = {
|
|
|
3234
1918
|
* gidiyordu.
|
|
3235
1919
|
*/
|
|
3236
1920
|
hasViewportCap?: boolean;
|
|
3237
|
-
/**
|
|
3238
|
-
* Sıralanabilir bir başlığa basıldığında çağrılır.
|
|
3239
|
-
*
|
|
3240
|
-
* <p>Sıralamanın KENDİSİ burada yapılmaz: veri çağıranın ve sıralama
|
|
3241
|
-
* neredeyse her zaman sunucuda (sayfalanmış bir listede istemcide sıralamak
|
|
3242
|
-
* yalnızca görünen sayfayı sıralar — kullanıcı "en ucuz" dediğinde en ucuz
|
|
3243
|
-
* 24 ürünü değil, o sayfadaki en ucuzu görüyordu).
|
|
3244
|
-
*/
|
|
1921
|
+
/** Sıralanabilir bir başlığa basıldığında çağrılır. */
|
|
3245
1922
|
onSort?: (key: string, direction: 'ascending' | 'descending') => void;
|
|
3246
|
-
/**
|
|
3247
|
-
* Satır seçildiğinde beliren TOPLU EYLEM şeridi.
|
|
3248
|
-
*
|
|
3249
|
-
* <p>Tablonun ÜSTÜNDE ve yapışkan: kullanıcı yüzlerce satır arasında
|
|
3250
|
-
* seçim yapıp aşağı kaydırdığında eylem şeridi ekranın dışında kalıyor ve
|
|
3251
|
-
* seçimin ne işe yaradığı görünmüyordu.
|
|
3252
|
-
*/
|
|
1923
|
+
/** Satır seçildiğinde beliren TOPLU EYLEM şeridi. */
|
|
3253
1924
|
bulkBar?: ReactNode;
|
|
3254
1925
|
className?: string;
|
|
3255
1926
|
testId?: string;
|
|
@@ -3294,38 +1965,6 @@ declare type Props_5 = {
|
|
|
3294
1965
|
declare type Props_6<T extends string> = SingleProps<T> | MultipleProps<T>;
|
|
3295
1966
|
|
|
3296
1967
|
declare type Props_7<T extends string> = {
|
|
3297
|
-
options: ComboboxOption<T>[];
|
|
3298
|
-
value: T | null;
|
|
3299
|
-
onChange: (value: T | null) => void;
|
|
3300
|
-
labels: ComboboxLabels;
|
|
3301
|
-
/**
|
|
3302
|
-
* Verilirse arama <strong>sunucuda</strong> yapılır: bileşen listeyi kendisi
|
|
3303
|
-
* filtrelemez, yazılanı 300 ms bekleyip buraya bildirir. Verilmezse
|
|
3304
|
-
* filtreleme yerelde ve aksan duyarsız yapılır.
|
|
3305
|
-
*/
|
|
3306
|
-
onSearch?: (query: string) => void;
|
|
3307
|
-
isLoading?: boolean;
|
|
3308
|
-
isDisabled?: boolean;
|
|
3309
|
-
/** Seçimi kaldıran çarpı düğmesi gösterilir. */
|
|
3310
|
-
isClearable?: boolean;
|
|
3311
|
-
/**
|
|
3312
|
-
* Arama kutusu GİZLENİR.
|
|
3313
|
-
*
|
|
3314
|
-
* <p>Az sayıda, sabit seçenekli listelerde arama bir işe yaramıyor: altı
|
|
3315
|
-
* satırı taramak yazmaktan hızlı ve kutu açılışta odağı çalıp mobilde
|
|
3316
|
-
* klavyeyi açıyordu. Ok tuşlarıyla gezinme ve `Escape` yine çalışır.
|
|
3317
|
-
*/
|
|
3318
|
-
isSearchHidden?: boolean;
|
|
3319
|
-
/** Tetikleyicinin solundaki ikon. */
|
|
3320
|
-
icon?: ReactNode;
|
|
3321
|
-
id?: string;
|
|
3322
|
-
'aria-describedby'?: string;
|
|
3323
|
-
'aria-invalid'?: boolean;
|
|
3324
|
-
className?: string;
|
|
3325
|
-
testId?: string;
|
|
3326
|
-
};
|
|
3327
|
-
|
|
3328
|
-
declare type Props_8<T extends string> = {
|
|
3329
1968
|
options: SegmentOption<T>[];
|
|
3330
1969
|
value: T;
|
|
3331
1970
|
onChange: (value: T) => void;
|
|
@@ -3338,17 +1977,13 @@ declare type Props_8<T extends string> = {
|
|
|
3338
1977
|
testId?: string;
|
|
3339
1978
|
};
|
|
3340
1979
|
|
|
3341
|
-
declare type
|
|
1980
|
+
declare type Props_8<T extends string> = {
|
|
3342
1981
|
options: SelectOption<T>[];
|
|
3343
1982
|
value: T;
|
|
3344
1983
|
onChange: (value: T) => void;
|
|
3345
1984
|
/**
|
|
3346
1985
|
* Alanın adı. İki işi birden yapar: alt sayfanın başlığı olur ve
|
|
3347
1986
|
* tetikleyicinin <strong>erişilebilir adı</strong>dır.
|
|
3348
|
-
*
|
|
3349
|
-
* <p>Tetikleyici bir `<button>` ve düğmenin adı HTML-AAM'e göre
|
|
3350
|
-
* `<label>`den GELMEZ — görünür bir etiket olsa bile ekran okuyucu yalnızca
|
|
3351
|
-
* seçili değeri okur ("En yeni, düğme") ve neyi seçtiğini söylemez.
|
|
3352
1987
|
*/
|
|
3353
1988
|
label: string;
|
|
3354
1989
|
/** Seçim yokken tetikleyicide görünen metin. Verilmezse `labels.selectPlaceholder`. */
|
|
@@ -3359,12 +1994,7 @@ declare type Props_9<T extends string> = {
|
|
|
3359
1994
|
icon?: ReactNode;
|
|
3360
1995
|
/** `sm` yoğun şeritler içindir (araç çubuğu); varsayılan form ölçüsü `md`. */
|
|
3361
1996
|
size?: 'sm' | 'md';
|
|
3362
|
-
/**
|
|
3363
|
-
* Panelin hangi kenardan hizalanacağı.
|
|
3364
|
-
*
|
|
3365
|
-
* <p>Şeridin sağ ucundaki bir tetikleyicide `start` hizalama paneli sağa
|
|
3366
|
-
* doğru taşırıyordu; `end` panelin sağ kenarını tetikleyiciye yaslar.
|
|
3367
|
-
*/
|
|
1997
|
+
/** Panelin hangi kenardan hizalanacağı. */
|
|
3368
1998
|
align?: 'start' | 'end';
|
|
3369
1999
|
isDisabled?: boolean;
|
|
3370
2000
|
id?: string;
|
|
@@ -3374,32 +2004,25 @@ declare type Props_9<T extends string> = {
|
|
|
3374
2004
|
testId?: string;
|
|
3375
2005
|
};
|
|
3376
2006
|
|
|
2007
|
+
declare type Props_9 = {
|
|
2008
|
+
/** Radyo grubu adı — aynı gruptaki kartlar ok tuşlarıyla gezilir. */
|
|
2009
|
+
name: string;
|
|
2010
|
+
value: string;
|
|
2011
|
+
isSelected: boolean;
|
|
2012
|
+
isDisabled?: boolean;
|
|
2013
|
+
onChange: (value: string) => void;
|
|
2014
|
+
/** Zengin gövde: kartın içeriği çağırana aittir. */
|
|
2015
|
+
children: ReactNode;
|
|
2016
|
+
} & CommonElementProps;
|
|
2017
|
+
|
|
3377
2018
|
export declare const QuantityStepper: typeof QuantityStepper_2;
|
|
3378
2019
|
|
|
3379
|
-
/**
|
|
3380
|
-
|
|
3381
|
-
*
|
|
3382
|
-
* <p>Doğrudan yazma da desteklenir: 12 adet isteyen kullanıcının artı düğmesine
|
|
3383
|
-
* on iki kez basması kabul edilemez.
|
|
3384
|
-
*
|
|
3385
|
-
* <p>Yazılan değer <strong>odak kaybında</strong> sınırlara çekilir, her tuş
|
|
3386
|
-
* vuruşunda değil: "12" yazarken "1"i anında 1'e sabitlemek kullanıcının
|
|
3387
|
-
* yazmasını engellerdi.
|
|
3388
|
-
*/
|
|
3389
|
-
declare const QuantityStepper_2: FC<Props_13>;
|
|
2020
|
+
/** Adet seçici. */
|
|
2021
|
+
declare const QuantityStepper_2: FC<Props_12>;
|
|
3390
2022
|
|
|
3391
2023
|
export declare const Radio: typeof Radio_2;
|
|
3392
2024
|
|
|
3393
|
-
/**
|
|
3394
|
-
* Radyo düğmesi.
|
|
3395
|
-
*
|
|
3396
|
-
* <p>{@link Checkbox} ile aynı gerekçe: yerel `<input type="radio">` korunur
|
|
3397
|
-
* ve `accent-color` ile renklendirilir. Sahte bir daire çizmek ok tuşlarıyla
|
|
3398
|
-
* gezinmeyi ve grup duyurusunu elle yeniden kurmayı gerektirirdi.
|
|
3399
|
-
*
|
|
3400
|
-
* <p>Tüm satır tıklanabilir (`<label>` sarmalar): 18 px'lik daireyi
|
|
3401
|
-
* hedeflemek özellikle dokunmatik ekranda yorucu.
|
|
3402
|
-
*/
|
|
2025
|
+
/** Radyo düğmesi. */
|
|
3403
2026
|
declare const Radio_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type"> & {
|
|
3404
2027
|
label: ReactNode;
|
|
3405
2028
|
hint?: string;
|
|
@@ -3410,32 +2033,8 @@ testId?: string;
|
|
|
3410
2033
|
|
|
3411
2034
|
export declare const RadioCard: typeof RadioCard_2;
|
|
3412
2035
|
|
|
3413
|
-
/**
|
|
3414
|
-
|
|
3415
|
-
*
|
|
3416
|
-
* <h3>Neden ayrı bir öğe</h3>
|
|
3417
|
-
* Varyant seçici ve hesap seçici aynı deseni elle kuruyordu: `<label>` + gizli
|
|
3418
|
-
* radyo + gövde + seçili/pasif durum matrisi. İki kopya çoktan ayrışmıştı —
|
|
3419
|
-
* biri odak halkasını metnin üstüne, diğeri hiç çizmiyordu; biri seçili zemini
|
|
3420
|
-
* boyuyor, diğeri boyamıyordu.
|
|
3421
|
-
*
|
|
3422
|
-
* <h3>Radyo GERÇEK, daire çizim</h3>
|
|
3423
|
-
* `<input type="radio">` görsel olarak gizlenir ama DOM'da kalır: ok
|
|
3424
|
-
* tuşlarıyla grup içinde gezinme, `Space` ile seçim ve ekran okuyucu duyurusu
|
|
3425
|
-
* tarayıcıdan gelir. Yerel daire bu boyutta bir kartta görsel olarak
|
|
3426
|
-
* kaybolduğu için işaret ayrıca çizilir (`__indicator`).
|
|
3427
|
-
*
|
|
3428
|
-
* <h3>Seçim üç sinyalle</h3>
|
|
3429
|
-
* Kenarlık + zemin tinti + dolan işaret aynı anda değişir. İşaretin dolu / boş
|
|
3430
|
-
* hâli bir BİÇİM farkıdır — renk tek başına anlam taşımaz (WCAG 1.4.1).
|
|
3431
|
-
*
|
|
3432
|
-
* <p>Odak halkası kartın kendisinde (`:has(:focus-visible)`): gizli girdiye
|
|
3433
|
-
* çizilen halka görünmüyor, yalnızca metne çizilen halka da kartın nerede
|
|
3434
|
-
* bittiğini söylemiyordu.
|
|
3435
|
-
*
|
|
3436
|
-
* <p>{@link Radio} yalın satır içindir, gövde taşıyamaz — ikisi karışmaz.
|
|
3437
|
-
*/
|
|
3438
|
-
declare const RadioCard_2: FC<Props_10>;
|
|
2036
|
+
/** Seçilebilir kart — zengin gövdeli radyo. */
|
|
2037
|
+
declare const RadioCard_2: FC<Props_9>;
|
|
3439
2038
|
|
|
3440
2039
|
declare type RangeProps = {
|
|
3441
2040
|
value: DateRangeValue;
|
|
@@ -3458,86 +2057,20 @@ declare type RangeProps = {
|
|
|
3458
2057
|
|
|
3459
2058
|
export declare const RangeSlider: typeof RangeSlider_2;
|
|
3460
2059
|
|
|
3461
|
-
/**
|
|
3462
|
-
|
|
3463
|
-
*
|
|
3464
|
-
* <h3>Neden iki gerçek `<input type="range">`</h3>
|
|
3465
|
-
* Kulplar `<div>` ile çizilip sürükleme JavaScript'le yazıldığında klavye
|
|
3466
|
-
* desteği, ekran okuyucu duyurusu ve dokunma davranışı elle yeniden kurulmak
|
|
3467
|
-
* zorunda kalır — ve pratikte biri hep eksik kalır. Üst üste bindirilmiş iki
|
|
3468
|
-
* yerel aralık girdisi bunların hepsini ücretsiz getirir: ok tuşları, Home/End,
|
|
3469
|
-
* PageUp/PageDown ve aralık duyurusu kendiliğinden çalışır.
|
|
3470
|
-
*
|
|
3471
|
-
* <h3>Kulplar birbirini geçemez</h3>
|
|
3472
|
-
* Alt kulp üst değeri, üst kulp alt değeri aşamaz. Geçmelerine izin vermek
|
|
3473
|
-
* "en az 8.000, en çok 1.200" gibi anlamsız bir aralık üretiyordu.
|
|
3474
|
-
*
|
|
3475
|
-
* <h3>Sayı değil METİN duyurulur</h3>
|
|
3476
|
-
* `aria-valuetext` biçimlenmiş değeri taşır. Aksi hâlde ekran okuyucu ham
|
|
3477
|
-
* sayıyı ("bir milyon iki yüz elli bin") okuyordu.
|
|
3478
|
-
*
|
|
3479
|
-
* <h3>`onChange` ile `onCommit` ayrıdır</h3>
|
|
3480
|
-
* Kaydırırken her adımda adres çubuğuna yazmak, tek bir sürüklemede onlarca
|
|
3481
|
-
* gezinme kaydı bırakıp geri tuşunu kullanılamaz hâle getiriyordu. Ekran anında
|
|
3482
|
-
* güncellenir (`onChange`), sorgu yalnızca kulp bırakılınca yazılır.
|
|
3483
|
-
*
|
|
3484
|
-
* <h3>Klavye</h3>
|
|
3485
|
-
* <table>
|
|
3486
|
-
* <tr><td>`ArrowRight` / `ArrowUp`</td><td>bir adım artırır</td></tr>
|
|
3487
|
-
* <tr><td>`ArrowLeft` / `ArrowDown`</td><td>bir adım azaltır</td></tr>
|
|
3488
|
-
* <tr><td>`Home` / `End`</td><td>ölçeğin ucuna gider</td></tr>
|
|
3489
|
-
* <tr><td>`PageUp` / `PageDown`</td><td>büyük adım</td></tr>
|
|
3490
|
-
* </table>
|
|
3491
|
-
* Tamamı YEREL öğeden gelir — kütüphane hiçbir tuşu kendisi işlemez. Buraya
|
|
3492
|
-
* ait olan iki şey ayrıca ölçülüyor: kulpların birbirini geçmemesi ve
|
|
3493
|
-
* `onCommit`in tuş bırakıldığında (`keyup`) çalışması. Nöbetçi:
|
|
3494
|
-
* `components/__tests__/keyboard.test.tsx`.
|
|
3495
|
-
*/
|
|
3496
|
-
declare const RangeSlider_2: ({ min, max, step, value, onChange, onCommit, formatValue, label, minLabel, maxLabel, isDisabled, className, testId, }: Props_11) => JSX.Element;
|
|
2060
|
+
/** Çift kulplu aralık kaydırıcı. */
|
|
2061
|
+
declare const RangeSlider_2: ({ min, max, step, value, onChange, onCommit, formatValue, label, minLabel, maxLabel, isDisabled, className, testId, }: Props_10) => JSX.Element;
|
|
3497
2062
|
|
|
3498
2063
|
export declare type RangeValue = [number, number];
|
|
3499
2064
|
|
|
3500
2065
|
export declare const Rating: typeof Rating_2;
|
|
3501
2066
|
|
|
3502
|
-
/**
|
|
3503
|
-
* Yıldız puanı — salt gösterim.
|
|
3504
|
-
*
|
|
3505
|
-
* <p>Ortalama sunucuda hesaplanır; burada yalnızca gösterilir. Puanı
|
|
3506
|
-
* istemcide hesaplamak, sayfalama yüzünden eksik veriyle yanlış ortalama
|
|
3507
|
-
* üretirdi.
|
|
3508
|
-
*
|
|
3509
|
-
* <p>Etkileşimli kardeşi {@link RatingInput}.
|
|
3510
|
-
*/
|
|
2067
|
+
/** Yıldız puanı — salt gösterim. */
|
|
3511
2068
|
declare const Rating_2: FC<Props_28>;
|
|
3512
2069
|
|
|
3513
2070
|
export declare const RatingInput: typeof RatingInput_2;
|
|
3514
2071
|
|
|
3515
|
-
/**
|
|
3516
|
-
|
|
3517
|
-
*
|
|
3518
|
-
* <h3>Beş gerçek radyo düğmesi</h3>
|
|
3519
|
-
* Yıldızlar `<span>` ile çizilip tıklama JavaScript'e bağlanabilirdi. Bunun
|
|
3520
|
-
* yerine `<fieldset>` içinde beş yerel `<input type="radio">` kullanılır ve
|
|
3521
|
-
* yıldız görünümü etiketlerine verilir. Böylece ok tuşlarıyla gezinme, Tab
|
|
3522
|
-
* davranışı, ekran okuyucuda "5 seçenekten 4'ü seçili" duyurusu ve form
|
|
3523
|
-
* gönderimine katılma <em>bedava</em> gelir.
|
|
3524
|
-
*
|
|
3525
|
-
* <p>{@link Rating} genişletilemez: o `<span>` üretiyor ve açıkça
|
|
3526
|
-
* salt-gösterim. İkisini tek bileşende toplamak, gösterim tarafına hiç
|
|
3527
|
-
* kullanılmayan etkileşim kodu taşımak olurdu.
|
|
3528
|
-
*
|
|
3529
|
-
* <h3>Klavye (APG: radio group — tamamı YEREL)</h3>
|
|
3530
|
-
* <table>
|
|
3531
|
-
* <tr><td>`ArrowRight` / `ArrowDown`</td><td>bir sonraki yıldız</td></tr>
|
|
3532
|
-
* <tr><td>`ArrowLeft` / `ArrowUp`</td><td>bir önceki yıldız</td></tr>
|
|
3533
|
-
* <tr><td>`Tab`</td><td>grubu TEK durak olarak geçer</td></tr>
|
|
3534
|
-
* </table>
|
|
3535
|
-
* Kütüphane hiçbir tuşu işlemiyor; nöbetçi bu yüzden tuşları değil DEVRİ
|
|
3536
|
-
* ölçüyor — beş gerçek radyo, tek grup adı, okunabilir adlar
|
|
3537
|
-
* (`components/__tests__/keyboard.test.tsx`). Yıldızlar `<span>`e dönerse
|
|
3538
|
-
* test kırılır.
|
|
3539
|
-
*/
|
|
3540
|
-
declare const RatingInput_2: ({ value, onChange, label, ratingLabels, formatStarCount, isDisabled, className, testId, }: Props_12) => JSX.Element;
|
|
2072
|
+
/** Yıldızla puan girişi. */
|
|
2073
|
+
declare const RatingInput_2: ({ value, onChange, label, ratingLabels, formatStarCount, isDisabled, className, testId, }: Props_11) => JSX.Element;
|
|
3541
2074
|
|
|
3542
2075
|
/** Beş puanın her birinin ne anlama geldiği. */
|
|
3543
2076
|
export declare type RatingLabels = Record<1 | 2 | 3 | 4 | 5, string>;
|
|
@@ -3547,47 +2080,13 @@ export declare const resolveTokens: (scheme: HanuiColorScheme, config?: HanuiThe
|
|
|
3547
2080
|
|
|
3548
2081
|
declare type RowProps = HTMLAttributes<HTMLTableRowElement> & {
|
|
3549
2082
|
children: ReactNode;
|
|
3550
|
-
/**
|
|
3551
|
-
* Satır dikkat bekleyen iş taşıyor (kritik stok, karar bekleyen talep).
|
|
3552
|
-
*
|
|
3553
|
-
* <p>TEK desen: tint zemin + ilk hücrede sol kenar işareti. Önceden iki
|
|
3554
|
-
* uygulama vardı — yalnız düz uyarı zemini ve zemin + sol iç gölge. Zemin
|
|
3555
|
-
* tek başına yetmiyordu: hover vurgusu tinti ezince satırın "iş bekliyor"
|
|
3556
|
-
* bilgisi kayboluyordu ve renk tek başına zaten anlam taşıyamaz (WCAG
|
|
3557
|
-
* 1.4.1) — sol işaret hover'da da yerinde kalır.
|
|
3558
|
-
*/
|
|
2083
|
+
/** Satır dikkat bekleyen iş taşıyor (kritik stok, karar bekleyen talep). */
|
|
3559
2084
|
isWarning?: boolean;
|
|
3560
2085
|
};
|
|
3561
2086
|
|
|
3562
2087
|
export declare const ScrollArea: typeof ScrollArea_2;
|
|
3563
2088
|
|
|
3564
|
-
/**
|
|
3565
|
-
* Kaydırma kutusu — <strong>klavyeyle erişilebilir</strong> kaydırma bölgesi.
|
|
3566
|
-
*
|
|
3567
|
-
* <h3>Neden bir bileşen: `overflow: auto` TEK BAŞINA yetmiyor</h3>
|
|
3568
|
-
* Kaydırılabilir bir bölge klavyeyle ulaşılabilir olmak zorunda (WCAG 2.1.1).
|
|
3569
|
-
* İçinde odaklanabilir öğe olmayan bir kutu — uzun bir metin, bir tablo, bir
|
|
3570
|
-
* kod bloğu — `tabindex` verilmediğinde klavye kullanıcısı için
|
|
3571
|
-
* <strong>ulaşılamaz</strong>: `Tab` onu atlıyor ve ok tuşları sayfayı
|
|
3572
|
-
* kaydırıyor, kutuyu değil. Firefox bunu kendiliğinden yapıyor, Chrome ve
|
|
3573
|
-
* Safari yapmıyor.
|
|
3574
|
-
*
|
|
3575
|
-
* <p>Ama `tabindex="0"` KOŞULSUZ verilemez: içerik sığdığında kutu
|
|
3576
|
-
* kaydırılamaz olur ve gereksiz bir `Tab` durağına dönüşür. Bileşen taşmayı
|
|
3577
|
-
* ÖLÇÜYOR ve `tabindex`i yalnızca gerçekten kaydırılabilirken yazıyor.
|
|
3578
|
-
*
|
|
3579
|
-
* <h3>Kaydırma çubuğu temalı</h3>
|
|
3580
|
-
* İşletim sisteminin açık çubuğu koyu temada kutunun kenarında parlak bir
|
|
3581
|
-
* şerit bırakıyordu.
|
|
3582
|
-
*
|
|
3583
|
-
* <h3>Klavye</h3>
|
|
3584
|
-
* <table>
|
|
3585
|
-
* <tr><td>`Tab`</td><td>kaydırılabilir bölgeye odaklanır (yalnızca taşma varsa)</td></tr>
|
|
3586
|
-
* <tr><td>ok tuşları · `PageUp`/`PageDown` · `Home`/`End`</td><td>kaydırır</td></tr>
|
|
3587
|
-
* </table>
|
|
3588
|
-
* Tuşların hepsi TARAYICIDAN geliyor; bileşenin işi yalnızca bölgeyi
|
|
3589
|
-
* odaklanabilir kılmak.
|
|
3590
|
-
*/
|
|
2089
|
+
/** Kaydırma kutusu — <strong>klavyeyle erişilebilir</strong> kaydırma bölgesi. */
|
|
3591
2090
|
declare const ScrollArea_2: FC<Props_30>;
|
|
3592
2091
|
|
|
3593
2092
|
declare type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
|
|
@@ -3601,52 +2100,13 @@ declare type ScrollerProps = HTMLAttributes<HTMLDivElement> & {
|
|
|
3601
2100
|
|
|
3602
2101
|
export declare const SectionHeader: typeof SectionHeader_2;
|
|
3603
2102
|
|
|
3604
|
-
/**
|
|
3605
|
-
* Bölüm başlığı.
|
|
3606
|
-
*
|
|
3607
|
-
* <p>Başlık düzeyi (`as`) görsel boyuttan (`size`) <strong>ayrı</strong>:
|
|
3608
|
-
* sayfa hiyerarşisi anlamsal olmak zorunda ama görsel boyut bağlamla değişir.
|
|
3609
|
-
* İkisini birbirine bağlamak, doğru görünüm için yanlış başlık düzeyi seçmeye
|
|
3610
|
-
* zorlardı.
|
|
3611
|
-
*/
|
|
2103
|
+
/** Bölüm başlığı. */
|
|
3612
2104
|
declare const SectionHeader_2: FC<Props_29>;
|
|
3613
2105
|
|
|
3614
2106
|
export declare const SegmentedControl: typeof SegmentedControl_2;
|
|
3615
2107
|
|
|
3616
|
-
/**
|
|
3617
|
-
|
|
3618
|
-
*
|
|
3619
|
-
* <h3>{@link ChipGroup} ile farkı: filtre mi görünüm mü</h3>
|
|
3620
|
-
* İkisi de `radiogroup` ve ikisi de tek seçim; ayrım seçilen şeyin ne
|
|
3621
|
-
* olduğunda:
|
|
3622
|
-
*
|
|
3623
|
-
* <ul>
|
|
3624
|
-
* <li>`ChipGroup` bir FİLTRE. Seçim listeyi daraltıyor, seçenek sayısı
|
|
3625
|
-
* değişken ve "hiçbiri" geçerli bir durum — çipe ikinci kez basmak
|
|
3626
|
-
* seçimi kaldırıyor.</li>
|
|
3627
|
-
* <li><b>`SegmentedControl` bir GÖRÜNÜM anahtarı.</b> Liste/ızgara,
|
|
3628
|
-
* aylık/yıllık, gelen/giden. Seçenek sayısı 2-4 ve SABİT; <strong>seçili
|
|
3629
|
-
* durum her zaman tektir</strong> — "hiçbiri" diye bir hâl yok, çünkü
|
|
3630
|
-
* ekranda bir şey çizilmek zorunda.</li>
|
|
3631
|
-
* </ul>
|
|
3632
|
-
*
|
|
3633
|
-
* <p>Bu yüzden seçili öğeye ikinci kez basmak hiçbir şey yapmaz; `ChipGroup`ta
|
|
3634
|
-
* aynı hareket seçimi kaldırıyor. Aynı bileşeni iki iş için kullanmak, bu
|
|
3635
|
-
* davranış farkını kaybetmek olurdu.
|
|
3636
|
-
*
|
|
3637
|
-
* <h3>Neden `Tabs` değil</h3>
|
|
3638
|
-
* `Tabs` bir PANEL değiştirir ve `aria-controls` ile ona bağlanır; bölmeli
|
|
3639
|
-
* denetim aynı içeriğin başka bir SUNUMUNU seçiyor — gösterilen veri aynı.
|
|
3640
|
-
* Sekme olarak sunmak ekran okuyucuya var olmayan bir panel vaat ediyordu.
|
|
3641
|
-
*
|
|
3642
|
-
* <h3>Klavye (APG: radio group)</h3>
|
|
3643
|
-
* <table>
|
|
3644
|
-
* <tr><td>`ArrowRight` / `ArrowDown`</td><td>sonraki seçenek; uçlarda DÖNER</td></tr>
|
|
3645
|
-
* <tr><td>`ArrowLeft` / `ArrowUp`</td><td>önceki seçenek</td></tr>
|
|
3646
|
-
* <tr><td>`Tab`</td><td>grubu TEK durak olarak geçer (dönen `tabindex`)</td></tr>
|
|
3647
|
-
* </table>
|
|
3648
|
-
*/
|
|
3649
|
-
declare const SegmentedControl_2: <T extends string>({ options, value, onChange, label, isIconOnly, size, className, testId, }: Props_8<T>) => JSX.Element;
|
|
2108
|
+
/** Bölmeli denetim — <strong>görünüm</strong> değiştirme. */
|
|
2109
|
+
declare const SegmentedControl_2: <T extends string>({ options, value, onChange, label, isIconOnly, size, className, testId, }: Props_7<T>) => JSX.Element;
|
|
3650
2110
|
|
|
3651
2111
|
export declare type SegmentOption<T extends string = string> = {
|
|
3652
2112
|
value: T;
|
|
@@ -3658,43 +2118,8 @@ export declare type SegmentOption<T extends string = string> = {
|
|
|
3658
2118
|
|
|
3659
2119
|
export declare const Select: typeof Select_2;
|
|
3660
2120
|
|
|
3661
|
-
/**
|
|
3662
|
-
|
|
3663
|
-
*
|
|
3664
|
-
* <h3>Yerel `<select>` KULLANILMAZ</h3>
|
|
3665
|
-
* Yerel açılır liste her tarayıcıda başka türlü çiziliyor, seçeneklerine tek
|
|
3666
|
-
* bir stil verilemiyor (seçili değeri işaretlemek, ikon koymak, satırı
|
|
3667
|
-
* yükseltmek yok) ve mobilde ekranın ortasında beliren tekerlek uygulamanın
|
|
3668
|
-
* geri kalanına hiç benzemiyordu. Kutu baştan sona bizim: masaüstünde
|
|
3669
|
-
* tetikleyicinin altında bir panel, mobilde ekranın dibinden yükselen bir
|
|
3670
|
-
* <strong>alt sayfa</strong> açar.
|
|
3671
|
-
*
|
|
3672
|
-
* <p>Bu, "yerel öğe taklit öğeden iyidir" kuralının BİLİNÇLİ tek istisnası:
|
|
3673
|
-
* bedeli (odak yönetimi, ok tuşları, `aria-activedescendant`) bir kez ödenip
|
|
3674
|
-
* tek bileşene kapatıldı.
|
|
3675
|
-
*
|
|
3676
|
-
* <h3>Klavye — odak TEK yerde</h3>
|
|
3677
|
-
* Panel açıkken odak tetikleyicide kalır, alt sayfada ise listenin kendisine
|
|
3678
|
-
* geçer; iki durumda da etkin seçenek `aria-activedescendant` ile bildirilir.
|
|
3679
|
-
* Seçenekleri tek tek odaklanabilir yapmak, aynı bileşende iki ayrı klavye
|
|
3680
|
-
* modeli demekti (APG: listbox + activedescendant).
|
|
3681
|
-
*
|
|
3682
|
-
* <table>
|
|
3683
|
-
* <tr><td>`ArrowDown`/`ArrowUp`/`Enter`/`Space` (kapalıyken)</td><td>paneli açar</td></tr>
|
|
3684
|
-
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin seçenek bir alt/üst; uçlarda DÖNER</td></tr>
|
|
3685
|
-
* <tr><td>`Home` / `End`</td><td>ilk / son seçenek</td></tr>
|
|
3686
|
-
* <tr><td>`Enter` / `Space`</td><td>etkin seçeneği seçer</td></tr>
|
|
3687
|
-
* <tr><td>`Escape`</td><td>seçim yapmadan kapatır, odak tetikleyicide</td></tr>
|
|
3688
|
-
* <tr><td>`Tab`</td><td>kapatır, gezinme sürer</td></tr>
|
|
3689
|
-
* </table>
|
|
3690
|
-
* Etkin seçenek açılışta SEÇİLİ olandan başlar. Nöbetçi:
|
|
3691
|
-
* `components/__tests__/keyboard.test.tsx`.
|
|
3692
|
-
*
|
|
3693
|
-
* <h3>20+ seçenek varsa bu bileşen DEĞİL</h3>
|
|
3694
|
-
* Aramasız bir liste 20 satırdan sonra taranamaz hâle gelir; orada
|
|
3695
|
-
* {@link Combobox} kullanılır.
|
|
3696
|
-
*/
|
|
3697
|
-
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;
|
|
2121
|
+
/** Seçim kutusu. */
|
|
2122
|
+
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_8<T>) => JSX.Element;
|
|
3698
2123
|
|
|
3699
2124
|
export declare type SelectOption<T extends string = string> = {
|
|
3700
2125
|
value: T;
|
|
@@ -3717,17 +2142,7 @@ declare type SingleProps<T extends string> = BaseProps<T> & {
|
|
|
3717
2142
|
|
|
3718
2143
|
export declare const Skeleton: typeof Skeleton_2;
|
|
3719
2144
|
|
|
3720
|
-
/**
|
|
3721
|
-
* Yükleme iskeleti.
|
|
3722
|
-
*
|
|
3723
|
-
* <h3>Neden dönen çark yerine iskelet</h3>
|
|
3724
|
-
* İskelet gelecek içeriğin <em>şeklini</em> gösterir; kullanıcı ne beklediğini
|
|
3725
|
-
* bilir ve içerik geldiğinde yerleşim kaymaz (CLS). Dönen bir çark hem konumu
|
|
3726
|
-
* hem boyutu belirsiz bırakır.
|
|
3727
|
-
*
|
|
3728
|
-
* <p>`aria-hidden`: ekran okuyucuya "yükleniyor" bilgisini veren, iskeletin
|
|
3729
|
-
* kendisi değil onu saran bölgenin `aria-busy` özelliğidir.
|
|
3730
|
-
*/
|
|
2145
|
+
/** Yükleme iskeleti. */
|
|
3731
2146
|
declare const Skeleton_2: FC<Props_31>;
|
|
3732
2147
|
|
|
3733
2148
|
export declare const SkeletonCard: NamedExoticComponent<ShapeProps>;
|
|
@@ -3740,59 +2155,12 @@ columns?: number;
|
|
|
3740
2155
|
|
|
3741
2156
|
export declare const Spinner: typeof Spinner_2;
|
|
3742
2157
|
|
|
3743
|
-
/**
|
|
3744
|
-
* Yükleme göstergesi.
|
|
3745
|
-
*
|
|
3746
|
-
* <p>İskelet (`Skeleton`) tercih edilir; bu bileşen yalnızca <em>şekli
|
|
3747
|
-
* bilinmeyen</em> bir bekleme için — düğme içi işlem veya belirsiz süreli bir
|
|
3748
|
-
* sorgu gibi.
|
|
3749
|
-
*/
|
|
2158
|
+
/** Yükleme göstergesi. */
|
|
3750
2159
|
declare const Spinner_2: FC<Props_34>;
|
|
3751
2160
|
|
|
3752
2161
|
export declare const Stat: typeof Stat_2;
|
|
3753
2162
|
|
|
3754
|
-
/**
|
|
3755
|
-
* Ölçüm kutusu (KPI).
|
|
3756
|
-
*
|
|
3757
|
-
* <h3>Bileşen HESAP YAPMAZ</h3>
|
|
3758
|
-
* `value` ve `delta` biçimlendirilmiş dizeler. Yüzde hesabı, para birimi ve
|
|
3759
|
-
* yuvarlama çağıranın: bir gösterge panelinde "%12,5" ile "%13" arasındaki
|
|
3760
|
-
* farkı belirleyen şey ürün kararı, bileşenin varsayılanı değil. Aynı sebeple
|
|
3761
|
-
* `Price` de hesap yapmıyor.
|
|
3762
|
-
*
|
|
3763
|
-
* <h3>Yön TEK BAŞINA iyi/kötü demek DEĞİL</h3>
|
|
3764
|
-
* "İade oranı %12 arttı" kötü haber, "ciro %12 arttı" iyi. Yükselen her oku
|
|
3765
|
-
* yeşile boyamak, kötüleşen bir ölçüyü iyi gibi gösteriyordu — `isUpPositive`
|
|
3766
|
-
* bu kararı çağırana bırakıyor.
|
|
3767
|
-
*
|
|
3768
|
-
* <h3>Renk tek sinyal değil</h3>
|
|
3769
|
-
* Değişim üç şeyle birden anlatılıyor: <strong>ok yönü</strong> (biçim),
|
|
3770
|
-
* <strong>renk</strong> ve ekran okuyucuya okunan <strong>metin</strong>
|
|
3771
|
-
* ("artış" / "azalış" / "değişim yok"). Yalnızca renk kullanılsaydı renk körü
|
|
3772
|
-
* bir kullanıcı için artışla azalış aynı görünüyordu (WCAG 1.4.1).
|
|
3773
|
-
*
|
|
3774
|
-
* <h3>Rakamlar TABULAR</h3>
|
|
3775
|
-
* Alt alta duran ölçüm kutularında orantılı rakamlar sütunu tırtıklı
|
|
3776
|
-
* gösteriyor; `tabular-nums` her basamağı aynı genişlikte çiziyor.
|
|
3777
|
-
*
|
|
3778
|
-
* <h3>GENİŞLİK KARARI KAPSAYICININ</h3>
|
|
3779
|
-
* `Stat` kendine `flex` ya da `width` yazmaz ve bu bilinçli. Esnek bir sırada
|
|
3780
|
-
* içeriği kadar büzülür — yan yana dört kutu 148-177 px arasında tırtıklı
|
|
3781
|
-
* çıkabilir — ama çözüm kutuya `flex: 1` yazmak DEĞİL: aynı bileşen bir
|
|
3782
|
-
* ızgara hücresinde, bir kartın içinde ve tek başına da kullanılıyor ve orada
|
|
3783
|
-
* `flex: 1` çağıranın kararını sessizce eziyor. Eşit genişlik isteniyorsa
|
|
3784
|
-
* kapsayıcı söyler:
|
|
3785
|
-
*
|
|
3786
|
-
* ```scss
|
|
3787
|
-
* .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
|
|
3788
|
-
* ```
|
|
3789
|
-
*
|
|
3790
|
-
* <h3>Kendi zemini olan bandın üzerinde: `variant="plain"`</h3>
|
|
3791
|
-
* Kart görünümü (zemin + kenarlık + dolgu) sayfa yüzeyi için. Bir kahraman
|
|
3792
|
-
* bandının içinde ölçümler kart olarak istenmediğinde `plain` verilir; zemini
|
|
3793
|
-
* `transparent`a çevirmek dolguyu <em>görünmez</em> yapar ama kaldırmaz ve
|
|
3794
|
-
* ızgara sessizce dağılır.
|
|
3795
|
-
*/
|
|
2163
|
+
/** Ölçüm kutusu (KPI). */
|
|
3796
2164
|
declare const Stat_2: FC<Props_32>;
|
|
3797
2165
|
|
|
3798
2166
|
/** Değişimin yönü. `flat` "değişmedi" — yokluk DEĞİL. */
|
|
@@ -3807,35 +2175,7 @@ export declare type StepItem = {
|
|
|
3807
2175
|
|
|
3808
2176
|
export declare const Steps: typeof Steps_2;
|
|
3809
2177
|
|
|
3810
|
-
/**
|
|
3811
|
-
* Adım göstergesi (stepper) — çok adımlı akışta NEREDE olunduğu.
|
|
3812
|
-
*
|
|
3813
|
-
* <h3>Üç durum, ÜÇ AYRI işaret</h3>
|
|
3814
|
-
* Tamamlanan adım <strong>tik</strong>, bulunulan adım <strong>dolu
|
|
3815
|
-
* madalyon + sıra numarası</strong>, sıradaki adım <strong>boş
|
|
3816
|
-
* madalyon</strong> taşıyor. Renk bunlara EŞLİK ediyor, tek başına
|
|
3817
|
-
* anlatmıyor (WCAG 1.4.1): üçünü yalnızca renkle ayırmak, renk körü bir
|
|
3818
|
-
* kullanıcı için "üç aynı daire" demekti.
|
|
3819
|
-
*
|
|
3820
|
-
* <p>Durum ayrıca METİN olarak okunuyor — her adımın erişilebilir adına
|
|
3821
|
-
* "tamamlandı" / "şu anki adım" / "sıradaki" ekleniyor. Görsel işaret ekran
|
|
3822
|
-
* okuyucuya geçmiyor; `aria-current` tek başına yalnızca BULUNULAN adımı
|
|
3823
|
-
* söylüyor, tamamlananları değil.
|
|
3824
|
-
*
|
|
3825
|
-
* <h3>Geri dönülebilirlik AÇIKÇA bildirilir</h3>
|
|
3826
|
-
* `onStepClick` verilmediğinde adımlar `<button>` bile değil: tıklanabilir
|
|
3827
|
-
* görünüp hiçbir şey yapmayan bir adım, kullanıcıya var olmayan bir yol vaat
|
|
3828
|
-
* ediyordu. Verildiğinde yalnızca TAMAMLANMIŞ adımlar tıklanabilir — ileri
|
|
3829
|
-
* atlamak, atlanan adımın verisini toplamadan devam etmek demek.
|
|
3830
|
-
*
|
|
3831
|
-
* <h3>Klavye</h3>
|
|
3832
|
-
* <table>
|
|
3833
|
-
* <tr><td>`Tab`</td><td>tıklanabilir adımlar arasında gezinir</td></tr>
|
|
3834
|
-
* <tr><td>`Enter` / `Space`</td><td>adıma döner</td></tr>
|
|
3835
|
-
* </table>
|
|
3836
|
-
* Ok tuşu YOK: adımlar bir seçim listesi değil, her biri bağımsız bir
|
|
3837
|
-
* gezinme bağlantısı.
|
|
3838
|
-
*/
|
|
2178
|
+
/** Adım göstergesi (stepper) — çok adımlı akışta NEREDE olunduğu. */
|
|
3839
2179
|
declare const Steps_2: FC<Props_36>;
|
|
3840
2180
|
|
|
3841
2181
|
export declare const Switch: typeof Switch_2;
|
|
@@ -3843,48 +2183,12 @@ export declare const Switch: typeof Switch_2;
|
|
|
3843
2183
|
/**
|
|
3844
2184
|
* Anahtar (switch) — <strong>anında</strong> uygulanan aç/kapa.
|
|
3845
2185
|
*
|
|
3846
|
-
* <h3>`Checkbox` ile farkı: NE ZAMAN etkili olduğu</h3>
|
|
3847
|
-
* İkisi de iki durumlu ve ikisi de yerel `<input type="checkbox">` üzerine
|
|
3848
|
-
* kurulu; ayrım görünüşte değil ZAMANLAMADA:
|
|
3849
|
-
*
|
|
3850
|
-
* <ul>
|
|
3851
|
-
* <li>{@link Checkbox} bir formda <strong>gönderilecek</strong> seçimdir.
|
|
3852
|
-
* "Sözleşmeyi okudum" işaretlendiğinde hiçbir şey olmaz; karar
|
|
3853
|
-
* "Kaydet"e basıldığında geçerli olur. Geri almak için işareti kaldırıp
|
|
3854
|
-
* yeniden göndermek gerekir.</li>
|
|
3855
|
-
* <li><b>`Switch` ANINDA uygulanır.</b> "Kampanya bildirimleri" açıldığı
|
|
3856
|
-
* anda sunucuya gider. Kaydet düğmesi yoktur, olmamalıdır da —
|
|
3857
|
-
* kullanıcı anahtarı çevirdikten sonra bir düğme aramak zorunda
|
|
3858
|
-
* kalıyordu.</li>
|
|
3859
|
-
* </ul>
|
|
3860
|
-
*
|
|
3861
|
-
* <p>Ayrım keyfi değil ekran okuyucuda DUYULUYOR: `role="switch"` "açık/kapalı"
|
|
3862
|
-
* diye okunur, onay kutusu "işaretli/işaretsiz" diye. İkisi kullanıcıya farklı
|
|
3863
|
-
* bir söz veriyor.
|
|
3864
|
-
*
|
|
3865
|
-
* <h3>Yerel öğe korunur</h3>
|
|
3866
|
-
* `<input type="checkbox" role="switch">` — `Space` ile değiştirme, `Tab`
|
|
3867
|
-
* sırası, form gönderimine katılma ve `:disabled` semantiği tarayıcıdan gelir.
|
|
3868
|
-
* `<div role="switch" tabindex="0">` yazmak bunların hepsini elle yeniden
|
|
3869
|
-
* kurmak demekti.
|
|
3870
|
-
*
|
|
3871
|
-
* <h3>Durum RENKLE ANLATILMAZ</h3>
|
|
3872
|
-
* Açık ve kapalı hâl arasındaki fark yalnızca zemin rengi olsaydı renk körü
|
|
3873
|
-
* bir kullanıcı için iki durum aynı görünürdü (WCAG 1.4.1). Kulp KONUM
|
|
3874
|
-
* değiştiriyor — bu bir biçim farkı — ve zorlanmış renk kipinde çerçeve +
|
|
3875
|
-
* konum tek başına yeterli kalıyor.
|
|
3876
|
-
*
|
|
3877
|
-
* <h3>Klavye</h3>
|
|
3878
|
-
* <table>
|
|
3879
|
-
* <tr><td>`Space`</td><td>durumu değiştirir</td></tr>
|
|
3880
|
-
* </table>
|
|
3881
|
-
*
|
|
3882
2186
|
* @example
|
|
3883
2187
|
* <Switch
|
|
3884
|
-
*
|
|
3885
|
-
*
|
|
3886
|
-
*
|
|
3887
|
-
*
|
|
2188
|
+
* label="Kampanya bildirimleri"
|
|
2189
|
+
* hint="E-posta ile ayda en fazla iki ileti"
|
|
2190
|
+
* checked={isSubscribed}
|
|
2191
|
+
* onChange={event => subscribe(event.target.checked)}
|
|
3888
2192
|
* />
|
|
3889
2193
|
*/
|
|
3890
2194
|
declare const Switch_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "role" | "type"> & {
|
|
@@ -3902,52 +2206,18 @@ export declare type TabItem = {
|
|
|
3902
2206
|
label: string;
|
|
3903
2207
|
/** Etiketin yanında gösterilen sayı. */
|
|
3904
2208
|
count?: number;
|
|
3905
|
-
/**
|
|
3906
|
-
* Sekmenin paneli.
|
|
3907
|
-
*
|
|
3908
|
-
* <p>Verilmezse bileşen yalnızca <strong>sekme çubuğu</strong> çizer ve
|
|
3909
|
-
* içeriği çağıran taraf yönetir. Bir formun üç kipi tek bir panelin içinde
|
|
3910
|
-
* yaşıyorsa üç ayrı panel yazmak aynı alanları üç kez tanımlamak olurdu.
|
|
3911
|
-
*/
|
|
2209
|
+
/** Sekmenin paneli. */
|
|
3912
2210
|
content?: ReactNode;
|
|
3913
2211
|
};
|
|
3914
2212
|
|
|
3915
2213
|
export declare const Table: typeof Table_2;
|
|
3916
2214
|
|
|
3917
|
-
/**
|
|
3918
|
-
* Temel tablo — hairline satır ayrımı, `$surface-2` başlık, yoğunluk ölçeği.
|
|
3919
|
-
*
|
|
3920
|
-
* <p>Görsel kararlar (hangi hücre monospace, hangi sütun sabit) çağıranın
|
|
3921
|
-
* modülünde kalır; teknik değer hücresi `@include technical-text` ile
|
|
3922
|
-
* yazılır. Bileşen yalnızca üç tabloda üçe ayrışmış iskelet kurallarını tek
|
|
3923
|
-
* yerde toplar.
|
|
3924
|
-
*
|
|
3925
|
-
* <p>Operasyon ekranlarının durum satırlı (yükleniyor/hata/boş) sürümü için
|
|
3926
|
-
* {@link DataTable}.
|
|
3927
|
-
*/
|
|
2215
|
+
/** Temel tablo — hairline satır ayrımı, `$surface-2` başlık, yoğunluk ölçeği. */
|
|
3928
2216
|
declare const Table_2: FC<Props_46>;
|
|
3929
2217
|
|
|
3930
2218
|
export declare const TableCheckbox: typeof TableCheckbox_2;
|
|
3931
2219
|
|
|
3932
|
-
/**
|
|
3933
|
-
* Tablo hücresindeki toplu seçim kutusu.
|
|
3934
|
-
*
|
|
3935
|
-
* <h3>Neden `Checkbox` değil</h3>
|
|
3936
|
-
* Seçim sütununda etiket sütun başlığıdır ve `Checkbox` bileşeninin ürettiği
|
|
3937
|
-
* `<label>` sarmalayıcısı (yan yana kutu + metin yerleşimi) hücreyi bozar.
|
|
3938
|
-
* Doğru olan yalın `<input type="checkbox">` + `aria-label` — bu bileşen o
|
|
3939
|
-
* deseni resmileştirir ki ekranlar çıplak `<input>` yazmak zorunda kalmasın.
|
|
3940
|
-
*
|
|
3941
|
-
* <p>Renk `Checkbox` ile aynı kaynaktan: `accent-color` mavi — onay kutusu bir
|
|
3942
|
-
* seçimdir, bir dönüşüm değil.
|
|
3943
|
-
*
|
|
3944
|
-
* <h3>Klavye</h3>
|
|
3945
|
-
* <table>
|
|
3946
|
-
* <tr><td>`Space`</td><td>seçimi değiştirir</td></tr>
|
|
3947
|
-
* </table>
|
|
3948
|
-
* Yerel öğe: `Space`, `indeterminate` durumu ve form gönderimine katılma
|
|
3949
|
-
* platformdan gelir. Nöbetçi: `components/__tests__/keyboard.test.tsx`.
|
|
3950
|
-
*/
|
|
2220
|
+
/** Tablo hücresindeki toplu seçim kutusu. */
|
|
3951
2221
|
declare const TableCheckbox_2: ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "aria-label"> & {
|
|
3952
2222
|
/**
|
|
3953
2223
|
* Erişilebilir ad — ZORUNLU. Hücrede görünür etiket yok (etiket sütun
|
|
@@ -3961,15 +2231,6 @@ testId?: string;
|
|
|
3961
2231
|
/**
|
|
3962
2232
|
* Tablo kaydırma kutusu — "tablo kendi kutusunda kayar, sayfa asla yatay
|
|
3963
2233
|
* kaymaz" kuralının tek uygulaması.
|
|
3964
|
-
*
|
|
3965
|
-
* <p>Yatay kaydırma yalnızca BİLEREK kurulur: geniş tablo bu kutunun içinde
|
|
3966
|
-
* kayar; `min-width: 0` + `align-self: stretch` kutunun esnek bir kapsayıcıda
|
|
3967
|
-
* kendisinin taşmasını engeller. Üç tablonun üç ayrı elle kurulmuş (ya da hiç
|
|
3968
|
-
* kurulmamış) kaydırma stratejisi vardı; stratejisi olmayan tabloda monospace
|
|
3969
|
-
* değerler 360 px'te sayfanın kendisini yatay kaydırıyordu.
|
|
3970
|
-
*
|
|
3971
|
-
* <p>Kaydırma çubuğu TEMALI (`custom-scrollbar`): işletim sisteminin açık
|
|
3972
|
-
* çubuğu koyu temada tablonun altında parlak bir şerit bırakıyordu.
|
|
3973
2234
|
*/
|
|
3974
2235
|
export declare const TableScroller: FC<ScrollerProps>;
|
|
3975
2236
|
|
|
@@ -3979,208 +2240,40 @@ export declare const TABLET_PORTRAIT_BREAKPOINT = 768;
|
|
|
3979
2240
|
|
|
3980
2241
|
export declare const Tabs: typeof Tabs_2;
|
|
3981
2242
|
|
|
3982
|
-
/**
|
|
3983
|
-
* Sekmeler.
|
|
3984
|
-
*
|
|
3985
|
-
* <p>ARIA sekme kalıbı tam uygulanır: `role="tablist"`, `aria-selected`,
|
|
3986
|
-
* `aria-controls` ve ok tuşlarıyla gezinme. Yalnızca görsel olarak sekme gibi
|
|
3987
|
-
* duran düğmeler, klavye kullanıcısı için gezinilemez bir yapı olurdu.
|
|
3988
|
-
*
|
|
3989
|
-
* <p>Seçili olmayan panel DOM'dan çıkarılır: gizli panellerdeki bağlantılar ve
|
|
3990
|
-
* girdiler sekme sırasına girmemeli.
|
|
3991
|
-
*
|
|
3992
|
-
* <h3>İki kullanım</h3>
|
|
3993
|
-
* <ul>
|
|
3994
|
-
* <li><b>Kontrolsüz + panelli</b> — `items[].content` verilir, bileşen
|
|
3995
|
-
* seçimi kendisi tutar.</li>
|
|
3996
|
-
* <li><b>Kontrollü + panelsiz</b> — `activeId` + `onChange` verilir,
|
|
3997
|
-
* `content` verilmez; bileşen yalnızca çubuğu çizer.</li>
|
|
3998
|
-
* </ul>
|
|
3999
|
-
*
|
|
4000
|
-
* <h3>Klavye (APG: tabs, OTOMATİK etkinleştirme)</h3>
|
|
4001
|
-
* <table>
|
|
4002
|
-
* <tr><td>`ArrowRight` / `ArrowLeft`</td><td>sonraki / önceki sekme; uçlarda DÖNER</td></tr>
|
|
4003
|
-
* <tr><td>`Tab`</td><td>çubuktan panele çıkar — çubuk TEK durak</td></tr>
|
|
4004
|
-
* </table>
|
|
4005
|
-
* Ok tuşu odakla birlikte seçimi de taşır (otomatik etkinleştirme). Panel
|
|
4006
|
-
* içeriği hazır ve ucuz olduğu sürece APG'nin önerdiği budur; her sekmesi bir
|
|
4007
|
-
* istek atan pahalı bir panelde `isManualActivation` verilir — orada otomatik
|
|
4008
|
-
* etkinleştirme, kullanıcı beşinci sekmeye giderken dört istek atıyordu.
|
|
4009
|
-
* Nöbetçi: `components/__tests__/keyboard.test.tsx`.
|
|
4010
|
-
*/
|
|
2243
|
+
/** Sekmeler. */
|
|
4011
2244
|
declare const Tabs_2: FC<Props_37>;
|
|
4012
2245
|
|
|
4013
2246
|
export declare const TagInput: typeof TagInput_2;
|
|
4014
2247
|
|
|
4015
|
-
/**
|
|
4016
|
-
* Etiket girdisi — yazılan metni kaldırılabilir çiplere çevirir.
|
|
4017
|
-
*
|
|
4018
|
-
* <h3>Yerel `<input>` KORUNUR</h3>
|
|
4019
|
-
* Yazma, panodan yapıştırma, mobil klavye ve `Tab` sırası tarayıcıdan geliyor.
|
|
4020
|
-
* Çipler girdinin İÇİNDE görünüyor ama DOM'da kardeşi: `<input>` çocuk
|
|
4021
|
-
* alamıyor ve çipleri içine koymanın tek yolu girdiyi taklit etmekti.
|
|
4022
|
-
*
|
|
4023
|
-
* <h3>Neden {@link Combobox} değil</h3>
|
|
4024
|
-
* `Combobox` BİLİNEN bir listeden seçtiriyor; burada değer serbest — kullanıcı
|
|
4025
|
-
* listede olmayan bir şey yazıyor (arama terimi, OEM kodu, e-posta). Seçilecek
|
|
4026
|
-
* bir liste varsa `Combobox` doğrusu.
|
|
4027
|
-
*
|
|
4028
|
-
* <h3>Yinelenen değer sessizce YUTULMAZ</h3>
|
|
4029
|
-
* Aynı etiket ikinci kez yazıldığında eklenmiyor ama girdi de temizleniyor;
|
|
4030
|
-
* kullanıcı "yazdım, kayboldu" diyordu. Artık var olan çip bir kare
|
|
4031
|
-
* vurgulanıyor ve ekran okuyucuya "zaten ekli" duyuruluyor.
|
|
4032
|
-
*
|
|
4033
|
-
* <h3>Klavye</h3>
|
|
4034
|
-
* <table>
|
|
4035
|
-
* <tr><td>`Enter` / `,`</td><td>yazılanı etikete çevirir</td></tr>
|
|
4036
|
-
* <tr><td>`Backspace` (girdi BOŞken)</td><td>SON etiketi kaldırır</td></tr>
|
|
4037
|
-
* <tr><td>`Tab`</td><td>girdiden çıkar — yazılan metin de etikete DÖNER</td></tr>
|
|
4038
|
-
* <tr><td>çipin çarpısı</td><td>o etiketi kaldırır</td></tr>
|
|
4039
|
-
* </table>
|
|
4040
|
-
* `Tab`ta yazılanın etikete dönmesi bilinçli: yarım kalmış bir metin alanı
|
|
4041
|
-
* terk edildiğinde kayboluyordu ve kullanıcı bunu ancak gönderdikten sonra
|
|
4042
|
-
* fark ediyordu.
|
|
4043
|
-
*/
|
|
2248
|
+
/** Etiket girdisi — yazılan metni kaldırılabilir çiplere çevirir. */
|
|
4044
2249
|
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;
|
|
4045
2250
|
|
|
4046
2251
|
export declare const Textarea: typeof Textarea_2;
|
|
4047
2252
|
|
|
4048
|
-
/**
|
|
4049
|
-
* Çok satırlı metin girdisi.
|
|
4050
|
-
*
|
|
4051
|
-
* <p>Görünüm {@link Input} ile aynı gövdeden gelir: bir formda tek satırlı ve
|
|
4052
|
-
* çok satırlı alanlar yan yana durur, kenarlık ve odak davranışları ayrışırsa
|
|
4053
|
-
* form derlenmemiş görünür.
|
|
4054
|
-
*
|
|
4055
|
-
* <p>Yeniden boyutlandırma yalnızca <strong>dikey</strong>: yatayda büyütmek
|
|
4056
|
-
* alanı kapsayıcısının dışına taşırıp yerleşimi bozuyordu.
|
|
4057
|
-
*
|
|
4058
|
-
* <h3>Otomatik yükseklik neden CSS ile değil</h3>
|
|
4059
|
-
* `field-sizing: content` bu işi tek satırda yapıyor ama bugün yalnızca
|
|
4060
|
-
* Chromium'da var. Ölçüm yolu her yerde çalışıyor ve tarayıcı desteği
|
|
4061
|
-
* geldiğinde tek dosyada değiştirilecek.
|
|
4062
|
-
*/
|
|
2253
|
+
/** Çok satırlı metin girdisi. */
|
|
4063
2254
|
declare const Textarea_2: ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
4064
|
-
/**
|
|
4065
|
-
* Alan içeriğiyle birlikte BÜYÜR — kaydırma çubuğu yerine yükseklik.
|
|
4066
|
-
*
|
|
4067
|
-
* <p>Sabit yükseklikli bir alanda kullanıcı yazdığının tamamını göremiyor:
|
|
4068
|
-
* dört satırlık bir kutuya on satır yazan kişi, gönderdiğinde ne yazdığını
|
|
4069
|
-
* kontrol etmek için kutunun içinde kaydırmak zorunda kalıyordu. `maxRows`
|
|
4070
|
-
* ile tavan konur; ötesinde kaydırma geri döner (sayfa boyunca uzayan bir
|
|
4071
|
-
* alan, altındaki gönder düğmesini ekrandan çıkarıyordu).
|
|
4072
|
-
*/
|
|
2255
|
+
/** Alan içeriğiyle birlikte BÜYÜR — kaydırma çubuğu yerine yükseklik. */
|
|
4073
2256
|
isAutoSize?: boolean;
|
|
4074
2257
|
/** Otomatik büyümenin tavanı (satır). */
|
|
4075
2258
|
maxRows?: number;
|
|
4076
|
-
/**
|
|
4077
|
-
* Kalan karakter sayacını gösterir. `maxLength` ile birlikte anlamlı.
|
|
4078
|
-
*
|
|
4079
|
-
* <p>Sayaç `aria-hidden`: aynı bilgi her tuşta duyurulsaydı yazma
|
|
4080
|
-
* kesintiye uğrardı. Sınıra YAKLAŞILDIĞINDA (son %10) sayaç uyarı tonuna
|
|
4081
|
-
* geçiyor — sınıra çarpıp yazamamak, yaklaştığını görmemekten kötü.
|
|
4082
|
-
*/
|
|
2259
|
+
/** Kalan karakter sayacını gösterir. `maxLength` ile birlikte anlamlı. */
|
|
4083
2260
|
hasCounter?: boolean;
|
|
4084
2261
|
testId?: string;
|
|
4085
2262
|
} & RefAttributes<HTMLTextAreaElement>>;
|
|
4086
2263
|
|
|
4087
2264
|
export declare const TextLink: typeof TextLink_2;
|
|
4088
2265
|
|
|
4089
|
-
/**
|
|
4090
|
-
* Metin bağlantısı.
|
|
4091
|
-
*
|
|
4092
|
-
* <h3>Ok bir süs değil</h3>
|
|
4093
|
-
* Sondaki ok yalnızca <em>gezinme</em> bağlantılarında kullanılır ("Tümünü gör
|
|
4094
|
-
* →"). Bir eylemi tetikleyen bağlantıya ok koymak, kullanıcıya başka bir
|
|
4095
|
-
* sayfaya gideceğini söyler ve beklentiyi yanıltır.
|
|
4096
|
-
*
|
|
4097
|
-
* <p>Ok, üzerine gelindiğinde <strong>ilerler</strong>: hareket, bağlantının
|
|
4098
|
-
* götürdüğü yönü fiziksel olarak sezdirir.
|
|
4099
|
-
*
|
|
4100
|
-
* <h3>Alt çizgi hover'da eklenir, kaldırılmaz</h3>
|
|
4101
|
-
* Sürekli altı çizili bağlantılar yoğun bir liste sayfasında görsel gürültü
|
|
4102
|
-
* yaratıyordu. Ama alt çizginin <em>hiç</em> olmaması bağlantıyı düz metinden
|
|
4103
|
-
* ayırt edilemez kılar; renk tek başına yeterli değil (WCAG 1.4.1). Çözüm:
|
|
4104
|
-
* renk her zaman, alt çizgi etkileşimde.
|
|
4105
|
-
*/
|
|
2266
|
+
/** Metin bağlantısı. */
|
|
4106
2267
|
declare const TextLink_2: ({ href, children, hasArrow, tone, size, className, linkProps, ...rest }: Props_2) => JSX.Element;
|
|
4107
2268
|
|
|
4108
|
-
declare type ThemeState = {
|
|
4109
|
-
/**
|
|
4110
|
-
* ÇÖZÜLMÜŞ tema — ekranda çizili olan. `preference` `system` iken bu alan
|
|
4111
|
-
* işletim sisteminin o anki tercihini taşır.
|
|
4112
|
-
*/
|
|
4113
|
-
scheme: HanuiColorScheme;
|
|
4114
|
-
/**
|
|
4115
|
-
* Kullanıcının SEÇİMİ. Üç durumlu bir tema anahtarı (Açık / Koyu / Sistem)
|
|
4116
|
-
* bunu okur; `scheme` okunsaydı "Sistem" seçiliyken düğme "Koyu"yu işaretli
|
|
4117
|
-
* gösterirdi.
|
|
4118
|
-
*/
|
|
4119
|
-
preference: HanuiColorPreference;
|
|
4120
|
-
/** `'system'` verildiğinde AÇIK seçim silinir ve sistem tercihi izlenir. */
|
|
4121
|
-
setScheme: (preference: HanuiColorPreference) => void;
|
|
4122
|
-
/** Açık ↔ koyu. `system` iken ÇÖZÜLMÜŞ değerin tersine geçer. */
|
|
4123
|
-
toggle: () => void;
|
|
4124
|
-
/**
|
|
4125
|
-
* Sunucu çıktısında ve hidrasyondan önceki ilk karede `false`.
|
|
4126
|
-
*
|
|
4127
|
-
* <p>Tema anahtarı bunu bekler: sunucu hangi temanın seçili olduğunu
|
|
4128
|
-
* bilmiyor ve bir tahminle çizilen anahtar, doğru tahmin edilse bile
|
|
4129
|
-
* hidrasyonda uyuşmazlık üretiyordu. Anahtar hazır olana kadar
|
|
4130
|
-
* `aria-hidden` bir yer tutucu çizilir.
|
|
4131
|
-
*/
|
|
4132
|
-
isReady: boolean;
|
|
4133
|
-
};
|
|
4134
|
-
|
|
4135
2269
|
export declare const Tile: typeof Tile_2;
|
|
4136
2270
|
|
|
4137
|
-
/**
|
|
4138
|
-
* Karo — ikon madalyonu + etiket.
|
|
4139
|
-
*
|
|
4140
|
-
* <h3>Neden ikon, neden yuvarlak madalyon</h3>
|
|
4141
|
-
* Ana giriş noktaları metin listesi olarak verildiğinde kullanıcı satır satır
|
|
4142
|
-
* okuyor. İkon, aranan öğeyi <em>okumadan</em> bulmayı sağlar; madalyon ise
|
|
4143
|
-
* ikona sabit bir kutu verir — farklı ikonların doğal genişlikleri karoları
|
|
4144
|
-
* düzensiz hizalıyordu.
|
|
4145
|
-
*
|
|
4146
|
-
* <h3>Karonun tamamı tıklanabilir</h3>
|
|
4147
|
-
* Bağlantı yalnızca etiketi değil karonun tümünü kaplar. Küçük bir metin
|
|
4148
|
-
* bağlantısını hedeflemek, özellikle dokunmatik ekranda gereksiz bir hassasiyet
|
|
4149
|
-
* talebiydi.
|
|
4150
|
-
*
|
|
4151
|
-
* <h3>`meta` neden sayı değil `ReactNode`</h3>
|
|
4152
|
-
* "1.248 ürün" cümlesi hem sayı biçimine hem dile bağlı. Bileşen içinde
|
|
4153
|
-
* `toLocaleString` çağırmak, o kararı kütüphanenin varsayımına bağlıyordu.
|
|
4154
|
-
*/
|
|
2271
|
+
/** Karo — ikon madalyonu + etiket. */
|
|
4155
2272
|
declare const Tile_2: ({ label, icon, href, meta, isActive, linkProps, className, testId }: Props_38) => JSX.Element;
|
|
4156
2273
|
|
|
4157
2274
|
export declare const Timeline: typeof Timeline_2;
|
|
4158
2275
|
|
|
4159
|
-
/**
|
|
4160
|
-
* Zaman çizelgesi — sipariş durumu, işlem geçmişi.
|
|
4161
|
-
*
|
|
4162
|
-
* <h3>{@link Steps} ile farkı: ileri mi geri mi bakıyor</h3>
|
|
4163
|
-
* İkisi de sıralı ve durumlu; ayrım yönlerinde:
|
|
4164
|
-
*
|
|
4165
|
-
* <ul>
|
|
4166
|
-
* <li>`Steps` İLERİ bakar: kullanıcı bir akışın içinde ve kalan adımları
|
|
4167
|
-
* görüyor. Adım sayısı sabit, adımlara dönülebilir.</li>
|
|
4168
|
-
* <li><b>`Timeline` GERİ bakar:</b> olmuş şeylerin kaydı. Olay sayısı
|
|
4169
|
-
* değişken, hiçbiri tıklanabilir değil ve <strong>başarısız</strong>
|
|
4170
|
-
* diye bir durum var — bir adım "başarısız" olamaz, akış orada durur;
|
|
4171
|
-
* bir olay olabilir ve kayıtta kalır.</li>
|
|
4172
|
-
* </ul>
|
|
4173
|
-
*
|
|
4174
|
-
* <h3>Zaman biçimlendirmesi ÇAĞIRANIN</h3>
|
|
4175
|
-
* `time` biçimlendirilmiş bir dize. Kütüphane `Intl` çağırsaydı yerel ayarı
|
|
4176
|
-
* ve "3 saat önce" mi "14:32" mi yazılacağını kendisi seçmiş olurdu — ikisi
|
|
4177
|
-
* de bağlama bağlı kararlar.
|
|
4178
|
-
*
|
|
4179
|
-
* <h3>Durum renkle DEĞİL, üç şeyle birden</h3>
|
|
4180
|
-
* İşaretin <strong>biçimi</strong> (dolu / halka / tik / çarpı), rengi ve
|
|
4181
|
-
* ekran okuyucuya okunan <strong>metni</strong>. Yalnızca renk kullanılsaydı
|
|
4182
|
-
* "tamamlandı" ile "başarısız" renk körü bir kullanıcı için aynı daireydi.
|
|
4183
|
-
*/
|
|
2276
|
+
/** Zaman çizelgesi — sipariş durumu, işlem geçmişi. */
|
|
4184
2277
|
declare const Timeline_2: FC<Props_39>;
|
|
4185
2278
|
|
|
4186
2279
|
export declare type TimelineEvent = {
|
|
@@ -4200,13 +2293,6 @@ export declare type TimelineStatus = 'done' | 'current' | 'pending' | 'failed';
|
|
|
4200
2293
|
/**
|
|
4201
2294
|
* BİLDİRİM SÖZLEŞMESİ — süre, ikon ve renk kararları TEK YERDE.
|
|
4202
2295
|
*
|
|
4203
|
-
* <h3>Neden harici bir kütüphaneye sarmalayıcı DEĞİL</h3>
|
|
4204
|
-
* Tüketici `react-hot-toast` taşıyordu ve gövdeyi kendi yazmak zorunda
|
|
4205
|
-
* kalmıştı: kütüphanenin goober sınıfı bizim modül sınıfımızla AYNI
|
|
4206
|
-
* özgüllükteydi ve kazananı kaynak sırası belirliyordu — aynı bildirim
|
|
4207
|
-
* geliştirmede ve üretimde İKİ FARKLI RENKTE çıkıyordu. Bir sarmalayıcı bu
|
|
4208
|
-
* sorunu çözmez, erteler.
|
|
4209
|
-
*
|
|
4210
2296
|
* @example
|
|
4211
2297
|
* toast.success('Adres kaydedildi');
|
|
4212
2298
|
* toast.error('Kart reddedildi', { action: { label: 'Yeniden dene', onClick: retry } });
|
|
@@ -4224,25 +2310,7 @@ export declare const toast: {
|
|
|
4224
2310
|
|
|
4225
2311
|
export declare const ToastHub: typeof ToastHub_2;
|
|
4226
2312
|
|
|
4227
|
-
/**
|
|
4228
|
-
* Bildirim yığını — uygulamada <strong>BİR KEZ</strong> çizilir.
|
|
4229
|
-
*
|
|
4230
|
-
* <h3>Neden tek yığın</h3>
|
|
4231
|
-
* Birden fazla canlı bölge, ekran okuyucuların duyuruları birleştirip sırayla
|
|
4232
|
-
* okumasına ya da tamamen atlamasına yol açıyor. Yığın kök yerleşimde bir kez
|
|
4233
|
-
* durur; `toast.*` çağrıları React ağacının dışından da çalışır.
|
|
4234
|
-
*
|
|
4235
|
-
* <h3>Duyuru bölgesi HER ZAMAN DOM'da</h3>
|
|
4236
|
-
* Kapsayıcı bildirim yokken de çiziliyor. Sonradan DOM'a eklenen bir canlı
|
|
4237
|
-
* bölgenin ilk duyurusu güvenilmez — ekran okuyucu bölgeyi izlemeye
|
|
4238
|
-
* başlamadan içerik gelmiş oluyor.
|
|
4239
|
-
*
|
|
4240
|
-
* <h3>Klavye</h3>
|
|
4241
|
-
* <table>
|
|
4242
|
-
* <tr><td>`Tab`</td><td>bildirimin eylemine ve kapatma düğmesine ulaşır</td></tr>
|
|
4243
|
-
* <tr><td>odak/hover</td><td>kapanma sayacını DURDURUR</td></tr>
|
|
4244
|
-
* </table>
|
|
4245
|
-
*/
|
|
2313
|
+
/** Bildirim yığını — uygulamada <strong>BİR KEZ</strong> çizilir. */
|
|
4246
2314
|
declare const ToastHub_2: ({ closeLabel, className }: HubProps) => ReactPortal | null;
|
|
4247
2315
|
|
|
4248
2316
|
export declare type ToastOptions = {
|
|
@@ -4258,110 +2326,44 @@ export declare type ToastOptions = {
|
|
|
4258
2326
|
};
|
|
4259
2327
|
};
|
|
4260
2328
|
|
|
4261
|
-
export declare
|
|
4262
|
-
|
|
4263
|
-
export declare const Tooltip: typeof Tooltip_2;
|
|
2329
|
+
export declare const ToastPortal: typeof ToastPortal_2;
|
|
4264
2330
|
|
|
4265
2331
|
/**
|
|
4266
|
-
*
|
|
4267
|
-
*
|
|
4268
|
-
* <h3>Neden native `title` yetmiyor</h3>
|
|
4269
|
-
* Tarayıcının `title` özniteliği <strong>dokunmatikte hiç görünmez</strong>,
|
|
4270
|
-
* gecikmesi ayarlanamaz ve biçimlendirilemez. Trafiğin ağırlığı mobil olan
|
|
4271
|
-
* bir arayüzde "üzerine gelince açıklama çıkar" demek, kullanıcıların çoğu
|
|
4272
|
-
* için açıklamanın hiç olmaması demek.
|
|
4273
|
-
*
|
|
4274
|
-
* <h3>Balon PORTAL ile gövdede</h3>
|
|
4275
|
-
* Önce tetikleyicinin içinde `position: absolute` ile duruyordu ve üç yerde
|
|
4276
|
-
* birden bozuluyordu: `overflow: hidden` taşıyan bir kapsayıcının içinde
|
|
4277
|
-
* (kart, tablo hücresi, `Panel`) KIRPILIYOR, ekranın kenarında görünüm
|
|
4278
|
-
* alanının dışına TAŞIYOR, `transform` taşıyan bir atanın altında yığılma
|
|
4279
|
-
* bağlamına HAPSOLUYORDU. Konum artık `usePositioning` ile ölçülüyor;
|
|
4280
|
-
* gerekçenin tamamı orada.
|
|
4281
|
-
*
|
|
4282
|
-
* <h3>Neden yalnızca AÇIKLAMA taşır</h3>
|
|
4283
|
-
* Balonda <em>yalnızca</em> yardımcı metin durur — bağlantı, düğme veya
|
|
4284
|
-
* okunması zorunlu bir bilgi değil. İçine bir eylem konsaydı ona erişmenin
|
|
4285
|
-
* yolu olmazdı: balon `pointer-events: none` ve klavyeyle içine girilemiyor.
|
|
4286
|
-
* Eylem taşıyan yüzey `Popover`ın işi; kalıcı olması gereken metin `Field`ın
|
|
4287
|
-
* `hint`i.
|
|
4288
|
-
*
|
|
4289
|
-
* <h3>Dokunmatik: uzun basma</h3>
|
|
4290
|
-
* Dokunmatikte `hover` yok — ipucu orada hiç açılmıyordu. Uzun basma balonu
|
|
4291
|
-
* açar; ekranın herhangi bir yerine dokunmak kapatır. Bağlam menüsü
|
|
4292
|
-
* bastırılır: uzun basmada iOS'ta seçim büyüteci, Android'de kopyala menüsü
|
|
4293
|
-
* çıkıyor ve ikisi de balonun üstüne biniyordu.
|
|
2332
|
+
* `ToastHub`ı montajdan SONRA çizen sarmalayıcı.
|
|
4294
2333
|
*
|
|
4295
|
-
*
|
|
4296
|
-
*
|
|
4297
|
-
*
|
|
4298
|
-
*
|
|
4299
|
-
*
|
|
4300
|
-
* <h3>Klavye</h3>
|
|
4301
|
-
* <table>
|
|
4302
|
-
* <tr><td>`Tab`</td><td>tetikleyiciye gelince GECİKMESİZ açılır</td></tr>
|
|
4303
|
-
* <tr><td>`Escape`</td><td>kapatır; odak tetikleyicide kalır</td></tr>
|
|
4304
|
-
* </table>
|
|
4305
|
-
* Gecikme fare için var; Tab ile gelen kullanıcı zaten bilinçli olarak orada
|
|
4306
|
-
* duruyor.
|
|
2334
|
+
* ⚠ SUNUCUDA ÇİZİLMEMESİ ŞART. `ToastHub` portal kullanıyor ve `document`
|
|
2335
|
+
* olmadan çalışamaz; sunucu tarafında çizilen bir ağaçta doğrudan kullanmak
|
|
2336
|
+
* hidrasyon uyuşmazlığı üretir. Next.js kullanan iki uygulamada da aynı
|
|
2337
|
+
* sarmalayıcı BİREBİR AYNI dosya olarak yazılmıştı — çözüm uygulamaya değil
|
|
2338
|
+
* bileşene ait.
|
|
4307
2339
|
*/
|
|
2340
|
+
declare const ToastPortal_2: FC;
|
|
2341
|
+
|
|
2342
|
+
export declare type ToastTone = 'info' | 'success' | 'warning' | 'danger';
|
|
2343
|
+
|
|
2344
|
+
export declare const Tooltip: typeof Tooltip_2;
|
|
2345
|
+
|
|
2346
|
+
/** İpucu balonu. */
|
|
4308
2347
|
declare const Tooltip_2: ({ content, children, side, position, openDelay, className }: Props_3) => JSX.Element;
|
|
4309
2348
|
|
|
4310
|
-
/**
|
|
4311
|
-
* Ölçü basamakları.
|
|
4312
|
-
*
|
|
4313
|
-
* <p>`MEDIUM` ve `LARGE` dokunma hedefi kuralına uyar (WCAG 2.5.8, ≥44 px).
|
|
4314
|
-
* `SMALL` yoğun şeritler içindir ve orada görsel kutu küçülür ama tıklanabilir
|
|
4315
|
-
* alan `tap-target` ile korunur.
|
|
4316
|
-
*/
|
|
2349
|
+
/** Ölçü basamakları. */
|
|
4317
2350
|
export declare enum UISize {
|
|
4318
2351
|
SMALL = "SMALL",
|
|
4319
2352
|
MEDIUM = "MEDIUM",
|
|
4320
2353
|
LARGE = "LARGE"
|
|
4321
2354
|
}
|
|
4322
2355
|
|
|
4323
|
-
/**
|
|
4324
|
-
* Düğme ve eylem varyantları.
|
|
4325
|
-
*
|
|
4326
|
-
* <p>Sıra bir <strong>vurgu hiyerarşisi</strong>dir: bir ekranda tek bir
|
|
4327
|
-
* `PRIMARY` bulunur. İki dolu düğme yan yana durduğunda hiçbiri öne çıkmaz ve
|
|
4328
|
-
* kullanıcı hangisinin beklenen eylem olduğunu bilemez.
|
|
4329
|
-
*
|
|
4330
|
-
* <h3>Doygun dolgu = tıklanabilir</h3>
|
|
4331
|
-
* Bu kuralın karşılığı: durum etiketleri (rozet, uyarı) her zaman tint
|
|
4332
|
-
* zeminlidir, eylemler her zaman dolgulu veya çerçevelidir. İkisi karışırsa
|
|
4333
|
-
* kullanıcı bir durum etiketine tıklamayı dener.
|
|
4334
|
-
*/
|
|
2356
|
+
/** Düğme ve eylem varyantları. */
|
|
4335
2357
|
export declare enum UIVariant {
|
|
4336
|
-
/**
|
|
4337
|
-
* Ekranın tek beklenen eylemi: <strong>nötr grafit</strong> dolgu.
|
|
4338
|
-
*
|
|
4339
|
-
* <p>`CART` DEĞİL. Doygun turuncu tek bir dönüşüm noktasına ayrıldı; her
|
|
4340
|
-
* dolu düğmeyi o renge boyamak tekilliği yok eder ve kullanıcı hangi
|
|
4341
|
-
* turuncunun dönüşüm olduğunu bilemez.
|
|
4342
|
-
*/
|
|
2358
|
+
/** Ekranın tek beklenen eylemi: <strong>nötr grafit</strong> dolgu. */
|
|
4343
2359
|
PRIMARY = "PRIMARY",
|
|
4344
|
-
/**
|
|
4345
|
-
* <strong>Dönüşüm eylemi — ve yalnızca o.</strong>
|
|
4346
|
-
*
|
|
4347
|
-
* <p>Ekranda görünen tek doygun turuncu. Favori, karşılaştır, paylaş,
|
|
4348
|
-
* filtrele hepsi nötr veya mavidir. Bir kampanya bandında bu ton
|
|
4349
|
-
* kullanılırsa o ekranda dönüşüm düğmesi `PRIMARY`'ye çevrilir — ikisi aynı
|
|
4350
|
-
* anda olmaz.
|
|
4351
|
-
*
|
|
4352
|
-
* <p>Adı domain'den geliyor (kaynak sistemde "sepete ekle") ve
|
|
4353
|
-
* kasıtlı korundu: bir ekranda kaç tane olabileceğini adın kendisi
|
|
4354
|
-
* söylüyor. `ACCENT` deseydi hiyerarşi bilgisi kaybolurdu.
|
|
4355
|
-
*/
|
|
2360
|
+
/** <strong>Dönüşüm eylemi — ve yalnızca o.</strong> */
|
|
4356
2361
|
CART = "CART",
|
|
4357
2362
|
/** Nötr ikincil eylem: gri kenarlık, koyu metin ("Vazgeç"). */
|
|
4358
2363
|
SECONDARY = "SECONDARY",
|
|
4359
2364
|
/**
|
|
4360
2365
|
* Mavi çerçeveli eylem — teşvik edilen ama birincil olmayan gezinme
|
|
4361
2366
|
* ("Tümünü gör").
|
|
4362
|
-
*
|
|
4363
|
-
* <p>Çerçeveli, dolgulu değil: mavi gezinme ve keşif rengidir; dolu mavi
|
|
4364
|
-
* düğme onu bir dönüşüm noktası gibi gösterip `CART` ile yarışıyordu.
|
|
4365
2367
|
*/
|
|
4366
2368
|
OUTLINE = "OUTLINE",
|
|
4367
2369
|
/** Vurgu bandı içindeki eylem: bandın kendi yüzey merdivenini kullanır. */
|
|
@@ -4391,71 +2393,18 @@ export declare type UploadFile = {
|
|
|
4391
2393
|
*/
|
|
4392
2394
|
export declare const useAnnounce: () => ((message: string, politeness?: AnnouncePoliteness) => void);
|
|
4393
2395
|
|
|
4394
|
-
/**
|
|
4395
|
-
* Sağlayıcı ZORUNLU DEĞİL.
|
|
4396
|
-
*
|
|
4397
|
-
* <p>Sağlayıcısız kullanımda bağlantılar ham `<a>` olur ve tema
|
|
4398
|
-
* varsayılanlarda kalır — yani paket `import` edilip hiçbir kurulum
|
|
4399
|
-
* yapılmadan çalışır. Sağlayıcıyı zorunlu kılmak, tek bir `Badge` kullanmak
|
|
4400
|
-
* isteyen bir tüketiciyi de kök yerleşimi değiştirmeye zorluyordu.
|
|
4401
|
-
*/
|
|
2396
|
+
/** Sağlayıcı ZORUNLU DEĞİL. */
|
|
4402
2397
|
export declare const useHanui: () => HanuiContextValue;
|
|
4403
2398
|
|
|
4404
2399
|
/**
|
|
4405
2400
|
* Açık/koyu seçimini okur ve değiştirir.
|
|
4406
2401
|
*
|
|
4407
|
-
* <h3>KALICILIK BU KANCANIN İŞİ DEĞİL</h3>
|
|
4408
|
-
* Seçimi nereye yazacağı tüketicinin kararı: `localStorage`, bir çerez (SSR'da
|
|
4409
|
-
* okunabilmesi için), kullanıcı profili. Kütüphane `localStorage`a yazsaydı
|
|
4410
|
-
* sunucu tarafı onu okuyamayacağı için ilk boyama yine yanlış temada
|
|
4411
|
-
* olurdu — ve tüketici kendi çerezini kullanmak istediğinde iki kaynak
|
|
4412
|
-
* çatışırdı.
|
|
4413
|
-
*
|
|
4414
|
-
* <h3>Geçiş tek karede kapatılır</h3>
|
|
4415
|
-
* Şema değişirken `<html>` bir kare boyunca `hanui-theme-switching` sınıfını
|
|
4416
|
-
* taşır. Sınıfsız hâlde her yüzey aynı anda ama FARKLI sürelerde animasyon
|
|
4417
|
-
* yapıyordu (kart gölgesi 140 ms, sayfa zemini 200 ms) ve geçiş dalgalı
|
|
4418
|
-
* görünüyordu. Ani geçiş, dalgalı geçişten iyi.
|
|
4419
|
-
*
|
|
4420
2402
|
* @example
|
|
4421
2403
|
* const { scheme, toggle, isReady } = useHanuiTheme();
|
|
4422
|
-
*
|
|
4423
|
-
* useEffect(() => {
|
|
4424
|
-
* if (isReady) localStorage.setItem('theme', scheme);
|
|
4425
|
-
* }, [scheme, isReady]);
|
|
4426
2404
|
*/
|
|
4427
|
-
export declare const useHanuiTheme: () =>
|
|
2405
|
+
export declare const useHanuiTheme: () => HanuiThemeState;
|
|
4428
2406
|
|
|
4429
|
-
/**
|
|
4430
|
-
* LISTBOX KLAVYE GEZİNMESİ — `Select` ve `Combobox`ın ortak modeli.
|
|
4431
|
-
*
|
|
4432
|
-
* <h3>Neden bir kanca</h3>
|
|
4433
|
-
* İki bileşen aynı klavye modelini <strong>kopya kod</strong> olarak
|
|
4434
|
-
* taşıyordu: `ArrowDown`/`ArrowUp` uçlarda dönme, `Home`/`End`, `Enter` ile
|
|
4435
|
-
* seçme, `Escape` ile kapatma, `Tab` ile kapatıp gezinmeye devam etme ve
|
|
4436
|
-
* etkin seçeneği görünür alanda tutma. Altı davranış, iki yerde. Kopya kod
|
|
4437
|
-
* ayrışmaya açık ve ayrışma sessiz: bir bileşende `Home` çalışıp diğerinde
|
|
4438
|
-
* çalışmadığında hiçbir test kırılmıyordu — ikisinin de kendi testi vardı ve
|
|
4439
|
-
* ikisi de kendi davranışını doğruluyordu.
|
|
4440
|
-
*
|
|
4441
|
-
* <p>Kanca yalnızca <strong>gezinmeyi</strong> taşıyor. Açılma kararı (panel
|
|
4442
|
-
* mi alt sayfa mı), filtreleme ve seçim sözleşmesi (`value`/`onChange`) hâlâ
|
|
4443
|
-
* bileşenlerin: ikisi orada gerçekten farklı ve tek bir kancaya toplamak
|
|
4444
|
-
* `Select`e hiç kullanmayacağı arama koduna taşıtırdı.
|
|
4445
|
-
*
|
|
4446
|
-
* <h3>Klavye</h3>
|
|
4447
|
-
* <table>
|
|
4448
|
-
* <tr><td>`ArrowDown` / `ArrowUp`</td><td>etkin seçenek; uçlarda DÖNER</td></tr>
|
|
4449
|
-
* <tr><td>`Home` / `End`</td><td>ilk / son</td></tr>
|
|
4450
|
-
* <tr><td>`Enter` / `Space`</td><td>etkin seçeneği seçer</td></tr>
|
|
4451
|
-
* <tr><td>`Escape`</td><td>kapatır</td></tr>
|
|
4452
|
-
* <tr><td>`Tab`</td><td>kapatır, gezinme SÜRER (`preventDefault` yok)</td></tr>
|
|
4453
|
-
* </table>
|
|
4454
|
-
*
|
|
4455
|
-
* <p>`Space` yalnızca `hasSpaceSelect` ile: `Combobox`ın arama kutusunda boşluk
|
|
4456
|
-
* bir KARAKTER ve onu seçime çevirmek "fren balatası" yazmayı imkânsız
|
|
4457
|
-
* kılıyordu.
|
|
4458
|
-
*/
|
|
2407
|
+
/** LISTBOX KLAVYE GEZİNMESİ — `Select` ve `Combobox`ın ortak modeli. */
|
|
4459
2408
|
export declare const useListboxNavigation: <T extends HTMLElement = HTMLElement>({ count, isOpen, initialIndex, onSelect, onClose }: ListboxNavigationOptions, { hasSpaceSelect }?: {
|
|
4460
2409
|
hasSpaceSelect?: boolean | undefined;
|
|
4461
2410
|
}) => ListboxNavigation<T>;
|
|
@@ -4463,46 +2412,6 @@ export declare const useListboxNavigation: <T extends HTMLElement = HTMLElement>
|
|
|
4463
2412
|
/**
|
|
4464
2413
|
* ÇARPIŞMAYA DUYARLI KONUMLANDIRMA — `Tooltip`, `Popover`, `Menu` ve açılır
|
|
4465
2414
|
* listelerin ortak temeli.
|
|
4466
|
-
*
|
|
4467
|
-
* <h3>Neden var: `position: absolute` yetmiyordu</h3>
|
|
4468
|
-
* `Tooltip` balonu tetikleyicinin içinde, `position: absolute` ile duruyordu.
|
|
4469
|
-
* Üç somut sonucu vardı:
|
|
4470
|
-
*
|
|
4471
|
-
* <ul>
|
|
4472
|
-
* <li><b>Kırpılma.</b> `overflow: hidden` taşıyan her kapsayıcı (kart,
|
|
4473
|
-
* tablo kaydırma kutusu, `Panel`) balonu kesiyordu. Bir tablo hücresinde
|
|
4474
|
-
* ipucu görünmüyordu — hiç.</li>
|
|
4475
|
-
* <li><b>Taşma.</b> Ekranın sağ kenarındaki bir tetikleyicinin balonu
|
|
4476
|
-
* görünüm alanının dışına çıkıyor, yatay kaydırma açıyordu.</li>
|
|
4477
|
-
* <li><b>Yığılma bağlamı.</b> `transform` taşıyan bir ata (`Card` hover
|
|
4478
|
-
* animasyonu) yeni bir yığılma bağlamı açıyor ve `z-index` orada
|
|
4479
|
-
* hapsoluyordu; balon kendi kartının altında kalıyordu.</li>
|
|
4480
|
-
* </ul>
|
|
4481
|
-
*
|
|
4482
|
-
* <p>Çözüm portal + `position: fixed`: yüzey gövdeye taşınır, koordinat
|
|
4483
|
-
* görünüm alanına göre hesaplanır. Kırpılacak bir kapsayıcı ve yarışılacak bir
|
|
4484
|
-
* yığılma bağlamı kalmaz.
|
|
4485
|
-
*
|
|
4486
|
-
* <h3>Neden yeni bir bağımlılık YOK</h3>
|
|
4487
|
-
* `floating-ui` bu işi yapıyor ve iyi yapıyor; ama paketin tek çalışma zamanı
|
|
4488
|
-
* bağımlılığının ikon seti olması bilinçli bir karar (bkz. README). Burada
|
|
4489
|
-
* ihtiyaç duyulan şey o kütüphanenin küçük bir alt kümesi: bir kenar, bir
|
|
4490
|
-
* hizalama ve karşıt kenara düşme. Ok konumlandırma, otomatik yerleşim
|
|
4491
|
-
* (`autoPlacement`), sanal öğe ve middleware zinciri gerekmiyor — ve
|
|
4492
|
-
* gerektiğinde eklenecek yer burası.
|
|
4493
|
-
*
|
|
4494
|
-
* <h3>CSS Anchor Positioning neden kullanılmıyor</h3>
|
|
4495
|
-
* Denendi ve BUGÜN kullanılamıyor: `anchor-name` / `position-anchor` yalnızca
|
|
4496
|
-
* Chromium'da var (Safari ve Firefox'ta bayrak arkasında bile değil). İki
|
|
4497
|
-
* kod yolu tutmak — biri modern tarayıcıda, biri yedekte — konumlandırmayı iki
|
|
4498
|
-
* kez yazmak ve ikisinin ayrışmasını beklemek demek. Ölçüm tabanlı yol her
|
|
4499
|
-
* yerde çalışıyor; tarayıcı desteği geldiğinde geçiş TEK dosyada.
|
|
4500
|
-
*
|
|
4501
|
-
* <h3>Ölçüm ne zaman yenileniyor</h3>
|
|
4502
|
-
* Açılışta, pencere yeniden boyutlandığında ve <em>herhangi bir atanın</em>
|
|
4503
|
-
* kaydırılmasında. Sonuncusu için `capture: true` ile belge düzeyinde tek bir
|
|
4504
|
-
* dinleyici: kaydırma olayı baloncuklanmıyor ve her ata için ayrı dinleyici
|
|
4505
|
-
* kurmak, derin bir ağaçta onlarca dinleyici demekti.
|
|
4506
2415
|
*/
|
|
4507
2416
|
export declare const usePositioning: (anchorRef: {
|
|
4508
2417
|
current: HTMLElement | null;
|
|
@@ -4515,61 +2424,14 @@ export declare const useScrollLock: (isLocked?: boolean) => void;
|
|
|
4515
2424
|
/**
|
|
4516
2425
|
* Alt sayfayi <strong>gorunen</strong> alana yaslar.
|
|
4517
2426
|
*
|
|
4518
|
-
* <h3>Neden `dvh` ve `env()` yetmiyor</h3>
|
|
4519
|
-
* `dvh` tarayici cubuklarini hesaba katar ama <em>klavyeyi katmaz</em>;
|
|
4520
|
-
* `env(safe-area-inset-bottom)` ise cihazin centik/ana ekran cubugu payidir, o
|
|
4521
|
-
* da klavyeden habersiz. iOS'ta klavye acildiginda yerlesim gorunum alani hic
|
|
4522
|
-
* degismez: panel oldugu yerde durur, klavye uzerine biner ve alt yarisi —
|
|
4523
|
-
* arama kutusuyla birlikte — erisilemez hale gelir.
|
|
4524
|
-
*
|
|
4525
|
-
* <h3>Android'de ne oluyor</h3>
|
|
4526
|
-
* Tuketici `interactiveWidget: 'resizes-content'` verdiginde orada klavye
|
|
4527
|
-
* yerlesim alanini da kuculttugu icin fark sifir cikar ve bu kanca hicbir sey
|
|
4528
|
-
* degistirmez. Duzeltme iOS icindir, ama olcum platformdan bagimsiz dogru.
|
|
4529
|
-
*
|
|
4530
|
-
* <h3>Degiskenler `<html>` uzerinde</h3>
|
|
4531
|
-
* Panelin kendisine yazilamaz: `::backdrop` ve `<dialog>` ust katmandadir,
|
|
4532
|
-
* ayrica ayni degeri iki farkli panel paylasiyor. Kok ogeye yazmak tek kaynak
|
|
4533
|
-
* birakir.
|
|
4534
|
-
*
|
|
4535
2427
|
* @param isActive Panel acik mi. Yalnizca acikken olculur: kendisi yalnizca
|
|
4536
|
-
*
|
|
4537
|
-
*
|
|
4538
|
-
*
|
|
2428
|
+
* acikken cizilen bir panel varsayilani kullanir, ama sayfa boyunca DOM'da
|
|
2429
|
+
* duran bir panel bayraksiz cagirdiginda her kullanicida iki gorunum alani
|
|
2430
|
+
* dinleyicisi bos yere acik kaliyordu.
|
|
4539
2431
|
*/
|
|
4540
2432
|
export declare const useSheetViewport: (isActive?: boolean) => void;
|
|
4541
2433
|
|
|
4542
|
-
/**
|
|
4543
|
-
* SANALLAŞTIRMA — yalnızca görünen satırları çiz.
|
|
4544
|
-
*
|
|
4545
|
-
* <h3>Ölçülen sorun</h3>
|
|
4546
|
-
* 1121 markalı bir `Combobox` listesinde DOM 1121 satır taşıyordu. Panel
|
|
4547
|
-
* açılışı mobilde gözle görülür şekilde donuyor, her tuş vuruşunda liste
|
|
4548
|
-
* yeniden çiziliyordu. Ekran okuyucu tarafında da bedeli var: 1121 öğelik bir
|
|
4549
|
-
* `listbox`ta gezinmek pratikte imkânsız.
|
|
4550
|
-
*
|
|
4551
|
-
* <h3>Neden kütüphane içinde</h3>
|
|
4552
|
-
* `react-window` / `@tanstack/virtual` bu işi yapıyor ve iyi yapıyor; ama
|
|
4553
|
-
* paketin tek çalışma zamanı bağımlılığının ikon seti olması bilinçli bir
|
|
4554
|
-
* karar. Burada gereken şey o kütüphanelerin küçük bir alt kümesi: SABİT
|
|
4555
|
-
* yükseklikli satırlar, tek eksen, yatay yok, değişken yükseklik yok.
|
|
4556
|
-
*
|
|
4557
|
-
* <h3>SABİT satır yüksekliği — ve bu bir kısıt</h3>
|
|
4558
|
-
* Değişken yükseklikli sanallaştırma her satırın ölçülmesini ve bir konum
|
|
4559
|
-
* haritası tutulmasını gerektiriyor. Açılır liste satırları zaten sabit
|
|
4560
|
-
* yükseklikte (`min-height` + tek satır metin); ikincil satır taşıyan
|
|
4561
|
-
* seçeneklerde ölçü `rowHeight` ile verilir.
|
|
4562
|
-
*
|
|
4563
|
-
* <h3>`overscan` neden var</h3>
|
|
4564
|
-
* Yalnızca görünen satırlar çizilseydi hızlı kaydırmada alt kenarda bir kare
|
|
4565
|
-
* boyunca boşluk görünüyordu — tarayıcı kaydırma olayını boyamadan sonra
|
|
4566
|
-
* veriyor. Görünür alanın üstüne ve altına birkaç satır fazladan çizilir.
|
|
4567
|
-
*
|
|
4568
|
-
* <h3>Klavye gezinmesiyle ilişkisi</h3>
|
|
4569
|
-
* Etkin seçeneği görünür tutan `scrollIntoView`, o seçenek ÇİZİLMEMİŞSE
|
|
4570
|
-
* çalışmaz. `scrollToIndex` bu yüzden var: klavyeyle listenin dibine giden
|
|
4571
|
-
* kullanıcı için konum önce hesaplanır, satır sonra çizilir.
|
|
4572
|
-
*/
|
|
2434
|
+
/** SANALLAŞTIRMA — yalnızca görünen satırları çiz. */
|
|
4573
2435
|
export declare const useVirtualList: (count: number, { rowHeight, overscan, isEnabled }?: {
|
|
4574
2436
|
rowHeight?: number | undefined;
|
|
4575
2437
|
overscan?: number | undefined;
|