Renkler

Tek isimle erişim - bg-primary, text-primary-hover, border-app-border, bg-app-surface-2 vb. emerald-50/100 tint tokenları (primary-light, primary-50, success-bg) kaldırıldı (2026-05-03); hover/chip/active için bg-app-surface-2, success vurgusu için text-success + bg-primary-400 dot.

Tipografi

Panel default 12px (text-app). Başlık 24px (text-h2). Marketing display clamp(2.5–6rem).

Buton

3 boyut × 5 varyant. Sayfa kendi class'ını yazmıyor - Button primitive'i kullan.

Note surface

Teslimat notu, ürün notu, müşteri açıklaması - uyarı değil, ek bilgi. Tek class: note-surface. bg-amber-50 yerine bunu kullan.

Data chip

Sipariş kartı / modal satırlarında kullanılan dar info etiketi. Pill primitive'i fazla büyük kalan yerlerde tercih et. Şekil utility'si - renk DS token'ı (bg-info-bg/text-info, bg-app-surface-2/text-success, bg-warning-bg/text-warning) ile gelir.

Pill - sipariş durumu

Kanonik isimler: Yeni · Hazırlanıyor · Hazır · Yolda · Teslim Edildi · İptal Edildi

Badge

Küçük etiket, ikon destekler.

Input

Panel ve marketing modu, prefix/suffix, helper/error text.

Card

Surface + border + radius'a karar vermiyorsun. Variant seç.

Stat card

Tek metrik için karekök bileşen. Genel bakış / raporlar / sadakat panelinde kullan. tabular-nums + tutarlı tipografi baked in. tone = full bg tint, accent = top stripe.

Metric grid

Anatomi spec'i baked in: 88px min-height, 22px/700 value, tabular-nums, divider lines. StatCard'dan farkı: gridded, divider line'lı dashboard summary için.

Tabs

In-page navigation. Underline active state, font-medium, px-3 py-2. role=tablist + aria-selected. Sayfa içi panel değişimi için - filtre/toggle değil.

Segmented control

Filtre/view toggle için - tab DEĞİL. Aynı panelde parametre değiştirir (tarih aralığı, daily/monthly). role=radiogroup.

İkon

Heroicons v2 outline, stroke-1.5, inline. Library install yok.

Radius

Aynı rolde aynı radius. Kart kanban → lg. Sektör kart → 2xl. CTA → pill.

Telefon mockup (WhatsApp)

Marketing sayfalarında ve template önizlemelerde tek kullanılması gereken bileşen. WhatsApp özel hex'leri sadece bu primitive'in içinde yaşıyor - sayfalarda bg-[#00a884] yazma.

Checkbox

Form onay ve liste seçim. Tek başına input, ya da label/description ile etiketli row. Inline checkbox veya Input type="checkbox" yazma - bu primitive'i kullan.

Wordmark

Nexberry brand wordmark - `/public/nexberry-logo.png` üzerinde Next/Image wrapper. 'primary' (default, beyaz on dark) veya 'inverted' (light surface). Min height 24px (sm), default 28-32px (md, marketing nav).

SectorMark

Sektöre özel "nexberry [sektör]" mark - restoran, perakende, saglik, mobilya, home. Auth ekranları, sektör sayfaları için. <SectorAuthLogo> bunu wrap eder.

Alert

Sayfa-içi kalıcı bildirim bandı: 4 ton (info/success/warning/danger), opsiyonel title + dismiss + custom icon. Toast vs Alert: transient mi (Toast) yoksa kalıcı bağlam mı (Alert)? Inline `border-amber-200 bg-amber-50` boilerplate yazma.

ListItem

Generic liste satırı: leading (avatar/icon) + title/subtitle + trailing (pill/buton). Selected/disabled state, klavye-erişilebilir (Enter/Space). Domain-rich satırlar (sohbet konuşma, kanban kart) için custom kalır - bu primitive option list / feature list / basit content row için.

SearchInput

Arama input'u: sol arama ikonu + Input + (value varsa) sağ X butonu. Inline `<svg + Input + clear button>` boilerplate yazma. 3 boyut (sm/md/lg).

NumberStepper

Sınırlı tam sayı girişi: [-] [değer + suffix] [+]. Dropdown'un hantal, slider'ın imprecise kaldığı yerlerde (teslimat dakikası, adet). Değer min/max aralığına clamp + tam sayıya yuvarlanır; orta alan klavyeden de düzenlenebilir. 3 boyut (sm/md/lg).

Avatar

Daire avatar - name'den initial türetir veya src ile resim. 5 boyut (xs/sm/md/lg/xl), 2 ton (primary/neutral). className ile özel bg override edebilir.

Table

Minimal tablo primitive'i: Head/Body/Row/HeadCell/Cell compound. Tutarlı tipografi (text-sm body, text-xs uppercase head), divider çizgileri, align + tabular-nums shortcut. Sıralanabilir/sayfalı tablolar bunu wrap eder, replace etmez.

PageHeader

Sayfa-üstü başlık bandı: title + subtitle + actions + (children: tabs/filters). Inline `<header className="border-b border-gray-200 bg-white px-6 py-4">` yazma - bu primitive'i kullan. max-w-[960px] panel canon'u default.

EmptyState

"Henüz veri yok" placeholder. Liste boş olduğunda kullan. Shorthand `<EmptyState>Veri yok</EmptyState>` veya icon+title+description+action zenginleştirilmiş.

Spinner

Yükleniyor göstergesi. 5 boyut (xs/sm/md/lg/xl), 3 ton (primary/neutral/white). Inline `<div animate-spin rounded-full border-2 border-gray-300 border-t-primary>` yazma - bu primitive'i kullan.

Skeleton

Yükleniyor placeholder'ı (animate-pulse). Boyutu className ile ver. Kısa yollar: Skeleton.Text, Skeleton.Card, Skeleton.Circle.

Field

Form alan wrapper'ı: label + control + helper/error. Input/Select/Textarea'nın kendi label prop'u zaten var; bunu özel kontroller (RadioGroup, multi-input row) veya horizontal hizalama için kullan. Required asterisk + a11y aria-describedby otomatik.

FormSection

Çok-bölümlü formlar için (Bilgiler / İçerik / Hedef Kitle ...) - başlık + opsiyonel subtitle + opsiyonel step badge. Children space-y-4 ile dikey istiflenir, step varsa pl-10 indent.

DateRangeFilter

Tarih aralığı filtre widget'ı. Collapsed: pill (Bugün / 19 Nis → 21 Nis) + Aralık seç butonu. Expanded: 2 date input + Uygula + Bugüne dön. Sipariş listeleri, raporlar, kampanyalar gibi tarih-scope'lu ekranlarda kullan.

Tooltip

Hover/focus ile çıkan kısa açıklama. Native `title=""` browser'ın yavaş, stilsiz tooltip'ini gösterir; bu primitive DS'ye uyumlu, hızlı, klavye-erişilebilir. Yeni kod için zorunlu, mevcut native title'lar gradual migrate olur.

Popover

Trigger'ın yanında çıkan kart - emoji picker, değişken seçici, hızlı yanıt vb. Inline `useRef + useEffect mousedown` yazma; bu primitive ESC + outside click + animation hepsini yapar.

Toast

Sayfa-üstü transient bildirim. ToastProvider layout'ta mount edilmiş; her sayfa useToast() hook'uyla success/error/warning/info yayınlar. Inline `fixed bottom-6 right-6` toast yazma - bu primitive'i kullan.

Drawer

Sağdan / soldan kayan slide-over. Müşteri detay, lead detay vb. uzun içerik için Modal yerine Drawer kullan. ESC + backdrop click + scroll-lock + animation primitive seviyesinde.

Modal

Tüm modal'lar DS Modal primitive'ini kullanır. 4 boyut (sm/md/lg/xl), Header/Body/Footer compound. ESC + backdrop click + scroll-lock ücretsiz gelir. Inline modal yazma - bu örnekleri kopyala.

Switch

On/off toggle. Çift size (sm 20px, md 24px). Knob beyaz kalır - track rengi rolü taşır.

RadioCardGroup

Üç-beş seçenek için kart şeklinde radio. Tek seçim, mobilde grid'i kolonlara bölünür.

TierCard

Sadakat / segment dashboard'larında bir tier kovasının özetini gösteren tıklanabilir tile. Gradient data-driven, selected = aria-pressed + beyaz inset ring.

ChannelBadge

Inbox satırı / mesaj metadata için kanal-tinted rozet. Tek doğruluk kaynağı.

ThemeToggle

Açık / Koyu / Sistem 3'lü seçici. Sayfanın sağ üst köşesinde sabit bir tane var (canlı), bu da inline demo.

PageBody

Panel sayfa gövdesi için max-w-[960px] + padding. Tüm panel sayfaları bunu sarar.

Accordion

Native <details>/<summary>. SSS, ayar grupları, sipariş detayı için. bordered (default kart) + flush (mevcut karta gömük) + inline (chrome-less micro-disclosure, hata kart içi 'Olası Sebepler' gibi).

Pagination

Akıllı ellipsis. Aktif ± siblingCount + ilk + son. ≥10 sayfada ilk/son butonu otomatik. Klavye: ←→ / Home / End.

Breadcrumb

Sayfa konum izi. Home ikon + orta nokta · separator. 4'ten fazlasında orta katlanır. Son segment aria-current=page span.

Radio + RadioGroup

Tekli radio + grup. RadioGroup `name` paylaşımı, value/onChange/disabled propagate eder. Görsel kart için RadioCardGroup tercih et.

Stepper

Onboarding, checkout, sipariş yaşam döngüsü. horizontal (≤5) + vertical (timeline). status auto-derive: index < current → done, == → now, > → todo. error override.

Progress + ProgressRing

Spinner ile Stepper arası boşluk. Linear bar (sm/md/lg, indeterminate); circular determinate ring. role=progressbar + aria-valuenow.

DatePicker

Tek tarih. TR locale, Pazartesi başlangıç, Türkçe ay isimleri. min/max + Bugün + Temizle. role=dialog.

TimePicker

24h HH:mm string. Configurable step (1/5/10/15/30/60). Listbox semantics, Şimdi/Tamam.

FileUpload

Drag & drop dropzone. accept (mime + group/*) + maxSize. onReject Türkçe sebep. role=button + Enter/Space.

Slider

Native input range, marka skin'i ile. formatValue → aria-valuetext + opsiyonel bubble. Klavye ←→ / Shift / Home / End bedava.

CommandPalette

⌘K / Ctrl+K. Layout'a globalde mount edilmiş, her sayfada ulaşılır. Inline buton sadece demo amaçlı.

Shadow

DateDivider

Sohbet/zaman akışında günler arası geçişi belirginleştiren yatay ayırıcı. WhatsApp benzeri sohbet ekranlarında günleri ayırmak için kullanılır. role="separator" otomatik.

IconBadge

Tek bir ikonu çerçeveleyen kare/yuvarlak tinted alan. Signal kartlarının başında, aksiyon tile'larında, "leading icon badge" pattern'inde kullan. 9 ton × 3 boyut. Tinted bg opacity-modifier (bg-info/10) ile geliyor — light/dark theme'de tek başına çalışıyor.

Note

"Ek bilgi / not" container'ı: teslimat notu, ürün notu, müşteri açıklaması, kurye iletisi. Uyarı (Alert) değil; statik metadata. Label opsiyonel — label={null} ile sadece body.

PressableCard

Toggle/seçilebilir kart — aria-pressed semantics built-in. Card primitive'inden farkı: tüm yüzey clickable + active state taşıyor. Ayar gruplarında, gateway seçicilerinde (cash/card), tier picker'larda kullan.