Renkler

Tek isimle erişim — bg-primary, text-primary-hover, border-border, bg-success-bg vb.

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-success-bg/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, emlak, 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).

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.

Shadow