@turk.net/mui 3.0.8 → 3.0.10

package/COMPONENT_MAP.md

@@ -24,17 +24,20 @@
 | B1 | Primary / Filled Blue | `contained` | `medium` | `primary` | Blue bg (`--brand-background-1-rest`), white text, `borderRadius: 8px`, `height: 32px` |
 | B2 | Primary / Filled Large | `contained` | `large` | `primary` | Same as B1 but taller |
 | B3 | Primary / Filled Small | `contained` | `small` | `primary` | Same as B1 but smaller |
-| B4 | Secondary / Outlined | `outlined` | `medium` | `secondary` | Gray border (`--neutral-stroke-1-rest`), transparent bg, dark text |
-| B5 | Secondary / Outlined Large | `outlined` | `large` | `secondary` | Same as B4 but taller |
-| B6 | Secondary / Outlined Small | `outlined` | `small` | `secondary` | Same as B4 but smaller |
-| B7 | Text / Ghost | `text` | `medium` | `primary` | No bg, no border, blue text |
-| B8 | Text / Ghost Small | `text` | `small` | `primary` | Same as B7 but smaller |
-| B9 | Error / Danger | `contained` | `medium` | `error` | Red bg, white text |
-| B10 | Error / Outlined | `outlined` | `medium` | `error` | Red border, transparent bg, red text |
-| B11 | Icon Only (transparent) | `text` | `medium` | `primary` | No padding, transparent bg, `--neutral-background-subtle-rest` |
-| B12 | Icon Only (gray bg) | `text` | `medium` | `secondary` | Gray bg (`--neutral-background-2-rest`), border |
-| B13 | Filter Button (gray) | `text` | `medium` | `secondary` | Gray bg (`--neutral-background-2-rest`), `neutral-stroke-1` border, icon+text |
-| B14 | Filter Button (clear) | `text` | `medium` | `primary` | Transparent bg, delete icon, no text or "Temizle" |
+| B4 | Primary / Filled Extra-Small | `contained` | `extra-small` | `primary` | Compact button, used in ButtonGroup pagination selectors |
+| B5 | Primary / Filled Extra-Large | `contained` | `extra-large` | `primary` | Tallest variant |
+| B6 | Secondary / Outlined | `outlined` | `medium` | `secondary` | Gray border (`--neutral-stroke-1-rest`), transparent bg, dark text |
+| B7 | Secondary / Outlined Large | `outlined` | `large` | `secondary` | Same as B6 but taller |
+| B8 | Secondary / Outlined Small | `outlined` | `small` | `secondary` | Same as B6 but smaller |
+| B9 | Secondary / Outlined Extra-Small | `outlined` | `extra-small` | `secondary` | Compact outlined, ButtonGroup pagination |
+| B10 | Text / Ghost | `text` | `medium` | `primary` | No bg, no border, blue text |
+| B11 | Text / Ghost Small | `text` | `small` | `primary` | Same as B10 but smaller |
+| B12 | Error / Danger | `contained` | `medium` | `error` | Red bg, white text |
+| B13 | Error / Outlined | `outlined` | `medium` | `error` | Red border, transparent bg, red text |
+| B14 | Icon Only (transparent) | `text` | `medium` | `primary` | No padding, transparent bg, `--neutral-background-subtle-rest` |
+| B15 | Icon Only (gray bg) | `text` | `medium` | `secondary` | Gray bg (`--neutral-background-2-rest`), border |
+| B16 | Filter Button (gray) | `text` | `medium` | `secondary` | Gray bg (`--neutral-background-2-rest`), `neutral-stroke-1` border, icon+text |
+| B17 | Filter Button (clear) | `text` | `medium` | `primary` | Transparent bg, delete icon, no text or "Temizle" |
 
 ### Button State Tokens
 
@@ -67,14 +70,33 @@
 
 **MUI Component:** `TextField` from `@mui/material`
 
-| # | Figma Pattern | Color | Size | Key Visual Traits |
-|---|--------------|-------|------|-------------------|
-| T1 | Default Input | `neutral` | `medium` | Gray border, white bg |
-| T2 | Brand Input | `brand` | `medium` | Blue border/focus |
-| T3 | Error Input | `danger` | `medium` | Red border, error text |
-| T4 | Large Input | `neutral` | `large` | Taller input field |
-| T5 | Disabled Input | `neutral` | `medium` | Gray bg, disabled border |
-| T6 | Read-only Input | `neutral` | `medium` | No border, subtle bg |
+**Valid variants:** `outlined` (standart), `filled` (login formları, özel sayfalar)
+
+| # | Figma Pattern | Color | Size | Variant | Key Visual Traits |
+|---|--------------|-------|------|---------|-------------------|
+| T1 | Default Input | `neutral` | `medium` | `outlined` | Gray border, white bg |
+| T2 | Brand Input | `brand` | `medium` | `outlined` | Blue border/focus |
+| T3 | Error Input | `danger` | `medium` | `outlined` | Red border, error text |
+| T4 | Large Input | `neutral` | `large` | `outlined` | Taller input field |
+| T5 | Disabled Input | `neutral` | `medium` | `outlined` | Gray bg, disabled border |
+| T6 | Read-only Input | `neutral` | `medium` | `outlined` | No border, subtle bg |
+| T7 | Filled Login Input | `neutral` | `medium` | `filled` | Gray fill bg, no border, used in login/authentication forms |
+
+### TextField Variant Guidelines
+
+- `variant="outlined"` → Varsayılan, form ve veri giriş sayfalarında kullanılır
+- `variant="filled"` → Login, parola, kimlik doğrulama gibi özel sayfalarda kullanılır
+
+```tsx
+// ✅ CORRECT — Standart veri formu
+<TextField label="E-posta" variant="outlined" color="neutral" size="medium" fullWidth />
+
+// ✅ CORRECT — Login formu
+<TextField label="E-posta" variant="filled" color="neutral" size="medium" autoFocus fullWidth name="email" />
+
+// ❌ WRONG — variant="standard" tema override'ı yok
+<TextField variant="standard" />
+```
 
 ### TextField Label
 
@@ -191,6 +213,22 @@ Figma's "Radio" uses the same `CheckboxBase` component with `rounded-[8px]` for
 
 **MUI Component:** `Chip` from `@mui/material`
 
+### Chip Colors (Tema Tanımlı)
+
+Chip için tema override'ı olan geçerli `color` değerleri:
+
+| Color | Kullanım Amacı | Görsel |
+|-------|---------------|--------|
+| `primary` | Varsayılan marka rengi (mavi) | Blue bg/fill |
+| `secondary` | İkincil/nötr durumlar | Gray bg/fill |
+| `error` / `danger` | Hata/kritik durumlar | Red bg/fill |
+| `success` | Başarılı/tamamlanan durumlar | Green bg/fill |
+| `informative` | Bilgilendirme/sayım etiketleri | Neutral blue bg |
+| `brand` | Marka vurgusu (primary ile aynı palette) | Brand blue |
+| `severewarning` | Ciddi uyarı durumları | Orange/amber |
+| `warning` | Genel uyarı durumları | Yellow |
+| `important` | Seçili/aktif filtre | Vurgulu renk |
+
 ### Chip Variants
 
 | # | Figma Pattern | Variant | Color | Size |
@@ -201,6 +239,36 @@ Figma's "Radio" uses the same `CheckboxBase` component with `rounded-[8px]` for
 | CH4 | Ghost (text only) | `ghost` | `primary` | `medium` |
 | CH5 | Filled Error | `filled` | `error` | `medium` |
 | CH6 | Tint Error | `tint` | `error` | `medium` |
+| CH7 | Status: Aktif | `tint` | `success` | `small` |
+| CH8 | Status: Hizmet dışı | `tint` | `danger` | `small` |
+| CH9 | Status: Dondurulmuş | `tint` | `severewarning` | `small` |
+| CH10 | Status: Devam ediyor | `tint` | `brand` | `small` |
+| CH11 | Count/info label | `filled` | `informative` | `small` |
+| CH12 | Filter pill (selected) | `filled` | `important` | `small` |
+| CH13 | Filter pill (unselected) | `outline` | `informative` | `small` |
+
+### Gerçek Proje Kullanım Örnekleri
+
+```tsx
+// ✅ CORRECT — Status chip'leri
+<Chip size="small" variant="tint" color="success" label="Aktif" />
+<Chip size="small" variant="tint" color="danger" label="Hizmet dışı" />
+<Chip size="small" variant="tint" color="severewarning" label="Dondurulmuş" />
+<Chip size="small" variant="tint" color="brand" label="Devam ediyor" />
+
+// ✅ CORRECT — Bilgi/sayım chip'i
+<Chip label={`${unreadCount} okunmamış`} size="small" variant="filled" color="informative" />
+
+// ✅ CORRECT — Filtre chip'leri
+<Chip size="small" variant="filled" color="important" label="Hepsi" onClick={handleFilter} />
+<Chip size="small" variant="outline" color="informative" label="Tamamlanan" onClick={handleFilter} icon={<Dot />} />
+
+// ✅ CORRECT — Silinebilir chip
+<Chip label="Filtre" variant="tint" color="primary" size="small" onDelete={handleDelete} />
+
+// ❌ WRONG — color="warning" on Chip (use severewarning or use Alert)
+<Chip color="warning" label="Warning" />
+```
 
 ### Filter Tags (from Figma)
 
@@ -234,6 +302,16 @@ Figma shows "Badge" with `rounded-[16px]`, `brand-background-2-rest` bg, `brand-
 | BD6 | Important Badge | `important` | `medium` |
 | BD7 | Dot Badge (6px) | `default` | `dot` |
 | BD8 | Small Badge | `default` | `small` |
+| BD9 | Extra-Large Badge (bildirim sayısı) | `danger` | `extra-large` |
+
+### Gerçek Proje Kullanımı
+
+```tsx
+// ✅ CORRECT — Bildirim ikonu üzerinde sayı
+<Badge size="extra-large" color="danger" badgeContent={unreadNotificationCount}>
+  <Bell01Icon />
+</Badge>
+```
 
 ### Dot Badge (from Figma)
 
@@ -339,7 +417,63 @@ Tooltip styling is handled by theme overrides. Use standard MUI Tooltip API.
 
 ## Table / Data Grid
 
-OneHub tables are **not** MUI `Table` — they use custom styled `Box` rows with flex layout.
+OneHub'da iki tablo yaklaşımı kullanılır:
+
+1. **MUI Table** — Standart veri tabloları için (gerçek projelerde en yaygın kullanım)
+2. **Custom Box tablosu** — Karmaşık, özel tasarım tablolar için (Figma spesifikasyonlarına birebir uyması gerektiğinde)
+
+### Yaklaşım 1: MUI Table (Tercih Edilen)
+
+```tsx
+import TableContainer from "@mui/material/TableContainer";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableBody from "@mui/material/TableBody";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+import Paper from "@mui/material/Paper";
+
+// ✅ CORRECT — Standart veri tablosu (gerçek projelerdeki kullanım)
+<TableContainer component={Paper}>
+  <Table sx={{ minWidth: "100%" }}>
+    <TableHead sx={{
+      height: "40px",
+      "& > tr > th": {
+        padding: (t) => t.spacing(3, 6),
+        ...(t) => t.typography["text.xs.medium"],
+      },
+    }}>
+      <TableRow>
+        <TableCell>Müşteri No</TableCell>
+        <TableCell>Ad Soyad</TableCell>
+        {/* ... */}
+      </TableRow>
+    </TableHead>
+    <TableBody sx={{
+      "& > tr > td": {
+        height: "56px",
+        padding: (t) => t.spacing(2, 6),
+        ...(t) => t.typography["text.sm.regular"],
+        color: "neutral.foreground.3.rest",
+      },
+      "& > tr:hover": {
+        background: "var(--palette-neutral-background-1-hover)"
+      }
+    }}>
+      {items.map((row) => (
+        <TableRow key={row.id}>
+          <TableCell>{row.customerNo}</TableCell>
+          <TableCell>{row.name}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </Table>
+</TableContainer>
+```
+
+### Yaklaşım 2: Custom Box Tablosu (Figma Birebir)
+
+Figma spesifikasyonlarına birebir uyulması gereken karmaşık tablolarda kullanılır. Bu durumda `Box` bileşenleri ile özel yapı kurulur.
 
 ### Table Structure (from Figma)
 
@@ -348,7 +482,8 @@ OneHub tables are **not** MUI `Table` — they use custom styled `Box` rows with
 | **Table Header** | `40px` | `--neutral-background-2-rest` (`#fafafa`) | Bottom: `--neutral-stroke-3-rest` |
 | **Table Row** | `56px` | `--neutral-background-1-rest` (white) | Bottom: `--neutral-stroke-3-rest` |
 | **Table Row Hover** | `56px` | — | Bottom: `--neutral-stroke-3-rest` |
-| **Table Cell Padding** | — | — | `paddingLeft: 32px, paddingRight: 32px` |
+| **TableCell Horizontal Padding** | — | — | `theme.spacing(8)` (32px) |
+| **TableCell Vertical Padding** | — | — | `theme.spacing(2)` (8px) for data, `theme.spacing(3)` for header |
 | **Pagination Row** | `56px` | `--neutral-background-1-rest` | Top: `--neutral-stroke-3-rest` |
 
 ### Table Typography
@@ -361,8 +496,46 @@ OneHub tables are **not** MUI `Table` — they use custom styled `Box` rows with
 | Date number (large) | `text.lg.medium` (`18px`, `500`) | `neutral.foreground[2].rest` |
 | Date month (small) | `text.sm.regular` (`14px`, `400`) | `neutral.foreground[4].rest` |
 
+### Table Loading (Skeleton)
+
+```tsx
+import Skeleton from "@mui/material/Skeleton";
+
+// ✅ CORRECT — Tablo yükleme durumu gösterimi
+<TableBody>
+  {isLoading && Array.from({ length: pageSize }).map((_, i) => (
+    <TableRow key={i}>
+      {Array.from({ length: columnCount }).map((_, j) => (
+        <TableCell key={j}>
+          <Skeleton variant="text" sx={{ fontSize: "14px" }} />
+        </TableCell>
+      ))}
+    </TableRow>
+  ))}
+</TableBody>
+```
+
 ### Search & Filter Bar
 
+**İki yaklaşım vardır:**
+
+#### InputBase ile (ince tasarım)
+```tsx
+import InputBase from "@mui/material/InputBase";
+import TuneIcon from "@/components/ui/icon";
+
+<Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 2, py: 1 }}>
+  <TuneIcon name="search-md" size="20px" />
+  <InputBase
+    placeholder="Ara..."
+    value={search}
+    onChange={(e) => setSearch(e.target.value)}
+    sx={{ fontSize: "14px", color: "neutral.foreground.3.rest" }}
+  />
+</Box>
+```
+
+#### TextField ile (standart)
 | Element | MUI Component(s) | Notes |
 |---------|-----------------|-------|
 | Search Input | `TextField` color="neutral" size="medium" + search icon | `placeholder="Ara"` |
@@ -374,7 +547,45 @@ OneHub tables are **not** MUI `Table` — they use custom styled `Box` rows with
 
 | Element | MUI Component |
 |---------|---------------|
-| Pagination controls | `Pagination` or `TablePagination` from `@mui/material` |
+| Pagination | `Pagination` from `@mui/material` |
+| Page size selector | `ButtonGroup` variant="outlined" color="secondary" size="extra-small" |
+| Navigation buttons | Custom `Button` or icon buttons with Geri/İleri text |
+
+```tsx
+import Pagination from "@mui/material/Pagination";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+
+// ✅ CORRECT — Gerçek proje pagination pattern'i
+<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", p: 2 }}>
+  <ButtonGroup variant="outlined" color="secondary" size="extra-small">
+    {[10, 50, 100].map((size) => (
+      <Button key={size}
+        sx={{ backgroundColor: size === pageSize ? "neutral.background.1.selected" : "unset" }}
+        onClick={() => setPageSize(size)}
+      >
+        {size}
+      </Button>
+    ))}
+  </ButtonGroup>
+
+  <Pagination
+    count={totalPages}
+    page={page + 1}
+    onChange={handlePageChange}
+    shape="rounded"
+  />
+
+  <Box sx={{ display: "flex", gap: 1 }}>
+    <Button disabled={!hasPrevious} onClick={handlePrev}>
+      <ArrowNarrowLeftIcon /> Geri
+    </Button>
+    <Button disabled={!hasNext} onClick={handleNext}>
+      İleri <ArrowNarrowRightIcon />
+    </Button>
+  </Box>
+</Box>
+```
 
 ---
 
@@ -392,40 +603,150 @@ Tab styling is handled by theme overrides. Use standard MUI Tabs API.
 
 ---
 
-## Cards
+## Card / Container → Paper
 
-**MUI Component:** `Card` / `Paper` from `@mui/material`
+**MUI Component:** `Paper` from `@mui/material`
 
-| Property | Value |
-|----------|-------|
+### Figma Detection Rule
+
+**When you see a Figma layer named `"Card"` or `"Container"`** with these style characteristics:
+
+- Background: `var(--Neutral-Background-2-Rest, #FAFAFA)` or white
+- Box Shadow: `0 0 2px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.14)` (Figma `shadow2`)
+
+→ **Use `<Paper elevation={2}>`**
+
+```tsx
+// ✅ CORRECT — Figma "Card" / "Container" layer → Paper elevation={2}
+<Paper elevation={2} sx={{ /* sadece ihtiyaç varsa override */ }}>
+  {/* card content */}
+</Paper>
+```
+
+### Figma Styles → MUI Mapping
+
+| Figma Style | MUI Prop | Value |
+|-------------|----------|-------|
+| `shadow2` (0 0 2px + 0 1px 2px) | `elevation` | `{2}` |
+| `background: #FAFAFA` / white | background | `neutral.background[1].rest` (tema default) |
+| `borderRadius: 8px` | borderRadius | `theme.shape.borderRadius` (tema default) |
+| `borderRadius: 0px` (köşeli tasarım) | `sx` | `sx={{ borderRadius: 0 }}` ile override |
+
+### Corner Radius Behavior
+
+- Tema default olarak `borderRadius: 8px` uygular
+- Figma'daki layer köşeli (0px borderRadius) ise: `<Paper elevation={2} sx={{ borderRadius: 0 }}>`
+- Figma'daki layer daha yuvarlaksa: `sx={{ borderRadius: ... }}` ile override edilebilir
+
+### Paper Default Properties (from Theme)
+
+| Property | Theme Value |
+|----------|-------------|
 | **Border Radius** | `theme.shape.borderRadius` (8px) |
-| **Background** | `--neutral-background-1-rest` |
-| **Default Elevation** | `theme.shadows[0]` (none) |
-| **Elevated** | `theme.shadows[3]` (4px blur) |
+| **Background** | `var(--palette-neutral-background-1-rest)` |
+| **Border** | `1px solid var(--palette-neutral-stroke-3-rest)` |
+| **Elevation 0** | Flat (no shadow) |
+| **Elevation 2** | Very subtle shadow (Figma shadow2 equivalent) |
+| **Elevation 4** | Dropdown level |
+| **Elevation 8** | Dialog level |
 
 ---
 
-## Paper
+## Cards (Alternative)
 
-**MUI Component:** `Paper` from `@mui/material`
+**MUI Component:** `Card` from `@mui/material`
+
+`Card` extends `Paper` with the same styling. Use `Card` when you need `CardContent`, `CardHeader`, `CardActions`, `CardMedia` sub-components. Otherwise prefer `Paper`.
 
 | Property | Value |
 |----------|-------|
 | **Border Radius** | `theme.shape.borderRadius` (8px) |
-| **Border** | `--neutral-stroke-3-rest` (`1px solid #f0f0f0`) |
 | **Background** | `--neutral-background-1-rest` |
+| **Default Elevation** | `theme.shadows[0]` (none) |
+| **Elevated** | Use `elevation` prop |
 
 ---
 
 ## Sidebar / Navigation
 
-**Layout Component:** `WithSidebarLayout` from `@turknet/onehub/layouts/page/WithSidebar`
+**Layout Pattern:** Dashboard layout with custom `DashboardSidebar` component.
 
-| Property | Figma Spec |
-|----------|-----------|
-| Width | `256px` (collapsed: `64px`) |
-| Background | Varies (light/dark) |
+Modül seviyesinde özel sidebar component'i oluşturulur. Sidebar; içerik alanı, kullanıcı menüsü ve daraltılabilir navigasyon öğelerini içerir.
+
+```tsx
+// Tipik dashboard layout yapısı
+import DashboardSidebar from "@/components/ui/dashboardSidebar/dashboardSidebar";
+
+const DashboardLayout = ({ children }: { children: ReactNode }) => (
+  <Box sx={{ display: "flex", height: "100vh" }}>
+    <Box sx={{ width: "256px", flexShrink: 0 }}>
+      <DashboardSidebar />
+    </Box>
+    <Box sx={{ flexGrow: 1, overflow: "auto" }}>
+      {children}
+    </Box>
+  </Box>
+);
+```
+
+| Property | Spec |
+|----------|------|
+| Width | `256px` |
+| Collapsed width | Modüle göre değişir |
+| Background | Tema varsayılan |
 | Nav items | `CollapsableListItem` |
+| User menu | `UserDropdownMenu` |
+
+---
+
+## TabBased Layout Recognition
+
+**When you see a Figma layer named `"Header tab navigation"`:**
+
+This is the **TabBased layout header** — a 56px toolbar with navigation buttons (menu, plus, notifications, calendar, settings, help, bug).
+
+**CRITICAL RULE:** AI agents MUST NOT implement this header as part of a page component. The page content MUST be designed as a **tab within the existing TabBased layout**.
+
+```tsx
+// ❌ WRONG — Sayfa içinde Header tab navigation'ı tekrar oluşturma
+function MyPage() {
+  return (
+    <Box>
+      {/* Header tab navigation'ı burada oluşturma! */}
+      <AppBar>...</AppBar>
+      <Box>sayfa içeriği</Box>
+    </Box>
+  );
+}
+
+// ✅ CORRECT — Sayfa içeriğini TabBased layout'ta bir sekme olarak oluştur
+// Sayfa, redux tabSlice üzerinden açılır, layout otomatik sağlanır
+function MyPageContent() {
+  return (
+    <Box sx={{ p: theme.spacing(4) }}>
+      {/* sadece sayfa içeriği — header/AppBar YOK */}
+      <Typography variant="display.xs.bold">Sayfa Başlığı</Typography>
+      ...
+    </Box>
+  );
+}
+```
+
+### TabBased Layout Header Specs (from Figma)
+
+| Element | Spec |
+|---------|------|
+| **Height** | `56px` |
+| **Horizontal Padding** | `32px` |
+| **Left content** | Navigation buttons (menu toggle, add tab) |
+| **Right content** | Action buttons (notifications, calendar, settings, help, bug report) |
+| **Background** | Theme-handled |
+| **Layout** | `@turk.net/mui/layouts/app/TabBased` |
+
+### What This Means for Page Development
+
+- **Header tab navigation layer varsa:** Bu sayfa bir TabBased sekmesidir. Sayfa içeriğini geliştir, header'ı layout'a bırak.
+- **Header tab navigation layer yoksa:** Sayfa bağımsız bir sayfadır (örn. login, ayarlar). Kendi header/footer'ını içerebilir.
 
 ---
 
@@ -471,15 +792,33 @@ Slider styling is handled by theme overrides.
 
 ## Icon
 
-**Icons:** Import from `@turknet/onehub/icons` (SVG React components) or the project's Tune icon font.
+**Icons:** İki kaynaktan import edilir:
 
-```typescript
-// Preferred: SVG icon from theme package
-import { CheckIcon, ChevronDownIcon, SearchIcon } from '@turknet/onehub/icons'
+1. `@turk.net/mui/icons/*` — SVG React bileşenleri (tercih edilen)
+2. Projeye özel `TuneIcon` bileşeni — Icon font tabanlı (eski projelerde)
 
-// Alternative: Tune icon font (if project uses it)
-import { TuneIcon } from '@/components/ui/icon'
-<TuneIcon name="check" />
+```typescript
+// ✅ CORRECT — SVG ikon (tercih edilen yöntem)
+import Settings01Icon from "@turk.net/mui/icons/Settings01Icon";
+import Menu01Icon from "@turk.net/mui/icons/Menu01Icon";
+import Bell01Icon from "@turk.net/mui/icons/Bell01Icon";
+import ArrowRightIcon from "@turk.net/mui/icons/ArrowRightIcon";
+import ArrowNarrowLeftIcon from "@turk.net/mui/icons/ArrowNarrowLeftIcon";
+import ArrowNarrowRightIcon from "@turk.net/mui/icons/ArrowNarrowRightIcon";
+import RefreshCcw01Icon from "@turk.net/mui/icons/RefreshCcw01Icon";
+import DotsVerticalIcon from "@turk.net/mui/icons/DotsVerticalIcon";
+import EyeIcon from "@turk.net/mui/icons/EyeIcon";
+import EyeOffIcon from "@turk.net/mui/icons/EyeOffIcon";
+import SearchMdIcon from "@turk.net/mui/icons/SearchMdIcon";
+
+// ✅ CORRECT — TuneIcon (eski projelerde, icon font)
+import TuneIcon from "@/components/ui/icon";
+<TuneIcon name="search-md" size="20px" />
+<TuneIcon name="arrow-right" />
+<TuneIcon name="trash-01" size="24px" />
+
+// ⚠️ İSTİSNA — MUI ikonları sadece belirli durumlarda
+import Error from "@mui/icons-material/Error"; // Alert içinde ikon override
 ```
 
 ---
@@ -525,6 +864,266 @@ See `DESIGN_TOKENS_MAP.md#typography-token-map` for the complete variant list.
 
 ---
 
+## Drawer (Sağ Panel)
+
+**MUI Component:** `Drawer` from `@mui/material`
+
+Form şablonu düzenleme, görev atama gibi sağdan açılan paneller için kullanılır.
+
+```tsx
+import Drawer from "@mui/material/Drawer";
+import { drawerClasses } from "@mui/material";
+
+// ✅ CORRECT — Sağ panel
+<Drawer
+  open={isOpen}
+  onClose={() => setOpen(false)}
+  anchor="right"
+  slotProps={{
+    paper: { sx: { borderRadius: "0" } },
+    backdrop: {
+      sx: {
+        backdropFilter: "blur(8px)",
+        backgroundColor: "neutral.background.overlay.background",
+      },
+    },
+  }}
+>
+  <Box sx={{ width: "600px", p: 6 }}>
+    {/* Drawer içeriği */}
+  </Box>
+</Drawer>
+```
+
+| Property | Value |
+|----------|-------|
+| Anchor | `right` (standart sağ panel) |
+| Paper borderRadius | `0` (tam ekran yükseklik) |
+| Backdrop | `blur(8px)` + overlay rengi |
+| Genişlik | Değişken (tipik: `400px`-`800px`) |
+
+---
+
+## Modal
+
+**MUI Component:** `Modal` from `@mui/material`
+
+Tüm onay, bilgi ve detay modal pencereleri için kullanılır. Redux-tabanlı modal yönetim sistemi ile çalışır.
+
+```tsx
+import { Modal, CircularProgress } from "@mui/material";
+import { Suspense } from "react";
+
+// ✅ CORRECT — Modal pattern'i (Redux modal sistemi ile)
+<Modal
+  sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}
+  slotProps={{
+    backdrop: {
+      sx: {
+        background: "var(--palette-neutral-background-overlay-background, rgba(0,0,0,0.40))",
+        backdropFilter: "blur(8px)",
+      },
+    },
+  }}
+  open={modalOpen}
+  onClose={handleClose}
+>
+  <Suspense fallback={<CircularProgress disableShrink />}>
+    <ModalComponent {...props} />
+  </Suspense>
+</Modal>
+```
+
+Modal içeriği `Paper` ile sarılır (DefaultModalLayout pattern'i):
+
+```tsx
+import Paper from "@mui/material/Paper";
+import Grow from "@mui/material/Grow";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+// ✅ CORRECT — Modal içerik layout'u
+<Grow in={open}>
+  <Paper sx={{ width: "800px", boxShadow: "var(--shadow-16)" }}>
+    <Box sx={{ p: 6, display: "flex", flexDirection: "column", gap: 4 }}>
+      <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+        <TuneIcon name="trash-01" size="24px" />
+        <Button onClick={onClose} variant="text" color="secondary">
+          <TuneIcon name="x-close" size="24px" />
+        </Button>
+      </Box>
+      <Typography variant="text.lg.semibold">Başlık</Typography>
+      <Typography variant="text.sm.regular" sx={{ color: "var(--palette-neutral-foreground-4-rest)" }}>
+        Açıklama metni
+      </Typography>
+    </Box>
+    <Box sx={{ display: "flex", gap: 3, p: 6, pt: 0 }}>
+      <Button variant="outlined" size="medium" color="secondary" onClick={onClose}>İptal</Button>
+      <Button variant="contained" size="medium" color="error" onClick={handleConfirm}>Onayla</Button>
+    </Box>
+  </Paper>
+</Grow>
+```
+
+---
+
+## InputBase (Arama Alanı - İnce Tasarım)
+
+**MUI Component:** `InputBase` from `@mui/material`
+
+Tablo üstü arama çubuklarında, TextField'dan daha hafif/ince bir görünüm için kullanılır.
+
+```tsx
+import InputBase from "@mui/material/InputBase";
+import Box from "@mui/material/Box";
+import TuneIcon from "@/components/ui/icon";
+
+// ✅ CORRECT — İnce arama alanı
+<Box sx={{ display: "flex", alignItems: "center", gap: 1, px: 2, py: 1, borderBottom: "1px solid", borderColor: "var(--palette-neutral-stroke-3-rest)" }}>
+  <TuneIcon name="search-md" size="20px" />
+  <InputBase
+    placeholder="Ara..."
+    value={searchQuery}
+    onChange={(e) => handleSearch(e.target.value)}
+    sx={{ fontSize: "14px", color: "neutral.foreground.3.rest", width: "100%" }}
+  />
+</Box>
+```
+
+---
+
+## IconButton + Tooltip
+
+**MUI Components:** `IconButton` + `Tooltip` from `@mui/material`
+
+```tsx
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+
+// ✅ CORRECT
+<Tooltip arrow title="Yenile">
+  <IconButton size="small" onClick={() => refetch()}>
+    <RefreshCcw01Icon />
+  </IconButton>
+</Tooltip>
+```
+
+---
+
+## ButtonGroup (Sayfa Boyutu Seçici)
+
+**MUI Component:** `ButtonGroup` from `@mui/material`
+
+```tsx
+import ButtonGroup from "@mui/material/ButtonGroup";
+import Button from "@mui/material/Button";
+
+// ✅ CORRECT — Sayfa boyutu seçici
+<ButtonGroup variant="outlined" color="secondary" size="extra-small">
+  {[10, 50, 100].map((size) => (
+    <Button key={size}
+      sx={{
+        backgroundColor: size === pageSize
+          ? "neutral.background.1.selected"
+          : "unset"
+      }}
+      onClick={() => setPageSize(size)}
+    >
+      {size}
+    </Button>
+  ))}
+</ButtonGroup>
+```
+
+---
+
+## Skeleton (Yükleme Göstergesi)
+
+**MUI Component:** `Skeleton` from `@mui/material`
+
+```tsx
+import Skeleton from "@mui/material/Skeleton";
+
+// ✅ CORRECT — Tablo yükleme skeleton'ı
+<TableBody>
+  {isLoading && Array.from({ length: pageSize }).map((_, i) => (
+    <TableRow key={i}>
+      {Array.from({ length: 8 }).map((_, j) => (
+        <TableCell key={j}>
+          <Skeleton variant="text" sx={{ fontSize: "14px" }} />
+        </TableCell>
+      ))}
+    </TableRow>
+  ))}
+</TableBody>
+
+// ✅ CORRECT — Metin skeleton
+<Skeleton variant="text" sx={{ fontSize: "14px" }} width="200px" />
+```
+
+---
+
+## LinearProgress
+
+**MUI Component:** `LinearProgress` from `@mui/material`
+
+```tsx
+import LinearProgress from "@mui/material/LinearProgress";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+// ✅ CORRECT — İlerleme çubuğu (örn: form tamamlanma yüzdesi)
+<Stack direction="row" sx={{ alignItems: "center" }} spacing={3}>
+  <LinearProgress
+    variant="determinate"
+    color="warning"
+    value={percentage}
+    sx={{
+      height: "8px",
+      borderRadius: "4px",
+      width: "100px",
+      backgroundColor: "neutral.background.5.rest",
+    }}
+  />
+  <Typography variant="text.sm.regular" sx={{ color: "neutral.foreground.3.rest" }}>
+    %{percentage.toFixed(1)}
+  </Typography>
+</Stack>
+```
+
+---
+
+## Kompakt Sayfa Layout Bileşenleri
+
+Gerçek projelerde sayfa düzeni için özel wrapper bileşenler kullanılır:
+
+### PageContentContainer
+
+```tsx
+import Box from "@mui/material/Box";
+
+// Sayfa içeriğini sarmalayan container
+const PageContentContainer = ({ children }: { children: React.ReactNode }) => (
+  <Box sx={{ display: "flex", flexDirection: "column", gap: 6, p: 8 }}>
+    {children}
+  </Box>
+);
+```
+
+### PageContentHeader
+
+```tsx
+// Sayfa başlık ve aksiyon barı
+const PageContentHeader = ({ title, actions }: { title: string; actions?: React.ReactNode }) => (
+  <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+    <Typography variant="text.xl.medium">{title}</Typography>
+    {actions && <Box sx={{ display: "flex", gap: 2 }}>{actions}</Box>}
+  </Box>
+);
+```
+
+---
+
 ## Components NOT Allowed (No Theme Override)
 
 The following MUI components do NOT have theme overrides and MUST NOT be used:
@@ -537,6 +1136,11 @@ The following MUI components do NOT have theme overrides and MUST NOT be used:
 | `BottomNavigation` | Not overridden | Custom solution |
 | `MobileStepper` | Not overridden | Custom solution |
 | `ImageList` | Not overridden | CSS Grid/Flex |
+| `AppBar` | Not overridden | Use TabBased layout from @turk.net/mui |
+| `Drawer` (MUI) | Not overridden | Use `slotProps` ile manuel stil (izin verilir) |
+| `Breadcrumbs` | Not overridden | Custom solution |
+| `Accordion` | Not overridden | Custom solution |
+| `Timeline` | Not overridden | Custom solution |
 
 ---
 
@@ -544,24 +1148,41 @@ The following MUI components do NOT have theme overrides and MUST NOT be used:
 
 | If you see in Figma... | Use this MUI component |
 |------------------------|----------------------|
-| A filled blue button | `Button variant="contained" color="primary"` |
-| An outlined gray button | `Button variant="outlined" color="secondary"` |
-| A text-only button | `Button variant="text" color="primary"` |
-| A text input field | `TextField color="neutral"` |
+| A filled blue button | `Button variant="contained" color="primary" size="medium"` |
+| An outlined gray button | `Button variant="outlined" color="secondary" size="medium"` |
+| A text-only button | `Button variant="text" color="primary" size="medium"` |
+| A compact button (pagination) | `Button variant="outlined" color="secondary" size="extra-small"` |
+| A text input field | `TextField variant="outlined" color="neutral"` |
+| A login form input | `TextField variant="filled" color="neutral"` |
 | A dropdown selector | `Select color="neutral"` |
-| A checkbox | `Checkbox color="primary"` |
-| A radio button | `Radio color="primary"` |
+| A checkbox | `Checkbox color="primary" size="small"` |
+| A radio button | `Radio color="primary" size="small"` |
 | A toggle switch | `Switch color="primary"` |
 | A blue tag/chip | `Chip variant="tint" color="primary"` |
-| A red error chip | `Chip variant="tint" color="error"` |
-| A filter pill with X | `Chip variant="tint" color="primary" onDelete={...}` |
+| A red error chip | `Chip variant="tint" color="danger"` |
+| A green success chip | `Chip variant="tint" color="success"` |
+| Active filter pill (selected) | `Chip variant="filled" color="important"` |
+| Inactive filter pill | `Chip variant="outline" color="informative"` |
+| A filter pill with X | `Chip variant="tint" color="primary" size="small" onDelete={...}` |
 | A status dot (6px) | `Badge size="dot" color="..."` |
-| A table header | Custom Box with `text.xs.medium` |
-| A table data row | Custom Box with `text.sm.medium` / `text.sm.regular` |
+| Notification count badge | `Badge size="extra-large" color="danger" badgeContent={count}` |
+| A standard data table | `TableContainer` > `Table` > `TableHead`/`TableBody` |
+| A table header | `TableCell` with `text.xs.medium` |
+| A table data row | `TableCell` with `text.sm.regular` |
+| A table loading state | `Skeleton variant="text"` inside `TableCell` |
+| A search input (thin) | `InputBase` with search icon |
+| A search input (standard) | `TextField color="neutral" size="medium"` |
+| A page size selector | `ButtonGroup variant="outlined" size="extra-small"` |
+| Pagination controls | `Pagination shape="rounded"` |
+| A progress bar | `LinearProgress variant="determinate"` |
 | A success message | `Alert severity="success"` |
-| A modal/dialog | `Dialog` |
-| A tooltip on hover | `Tooltip` |
+| A modal/dialog | `Modal` + `Paper` (Redux modal sistemi ile) |
+| A confirmation dialog | `Modal` + `DefaultModalLayout` |
+| A right-side panel | `Drawer anchor="right"` |
+| A tooltip on hover | `Tooltip` + `IconButton` |
 | A date picker | `DatePicker` (from `@mui/x-date-pickers`) |
 | A search with dropdown | `Autocomplete` |
 | Navigation tabs | `Tabs` + `Tab` |
-| A card container | `Card` / `Paper` |
+| A card/container (layer name "Card" / "Container") | `Paper elevation={2}` |
+| A card container (generic) | `Card` / `Paper` |
+| "Header tab navigation" layer | DO NOT implement — use TabBased layout instead |