@turk.net/mui 3.0.7 → 3.0.8

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.
Files changed (23) hide show
  1. package/.opencode/rules/design-compliance.md +119 -0
  2. package/.opencode/skills/onehub-design-verification/SKILL.md +315 -0
  3. package/.opencode/skills/turknet-onehub-component-usage/SKILL.md +16 -16
  4. package/COMPONENT_GLOSSARY.md +500 -0
  5. package/COMPONENT_MAP.md +567 -0
  6. package/DESIGN_RULES.md +399 -0
  7. package/DESIGN_SOURCES.md +198 -0
  8. package/DESIGN_TOKENS_MAP.md +271 -0
  9. package/ESLINT_DESIGN_RULES.md +392 -0
  10. package/LLM_EXAMPLES.md +183 -169
  11. package/LLM_GUIDELINES.md +192 -192
  12. package/PAGE_PATTERNS.md +509 -0
  13. package/SKILL_SETUP.md +237 -200
  14. package/dist/index.js +1 -0
  15. package/dist/index.js.map +1 -1
  16. package/dist/index.mjs +1 -0
  17. package/dist/index.mjs.map +1 -1
  18. package/dist/theme/index.js +1 -0
  19. package/dist/theme/index.js.map +1 -1
  20. package/dist/theme/index.mjs +1 -0
  21. package/dist/theme/index.mjs.map +1 -1
  22. package/package.json +20 -3
  23. package/scripts/verify-design.js +351 -0
package/LLM_GUIDELINES.md CHANGED
@@ -1,209 +1,209 @@
1
- # LLM Guidelines - @turknet/onehub Material UI Tema Paketi
1
+ # LLM Guidelines - @turknet/onehub Material UI Theme Package
2
2
 
3
- > **⚠️ ÖNEMLI**: Bu belgeyi mutlaka okuyun. Material UI bileşenlerini bu tema paketi kurallarına göre kullanmak **zorunludur**.
3
+ > **MANDATORY**: You MUST read this document in its entirety. Using Material UI components according to the rules defined in this theme package is **mandatory**.
4
4
 
5
5
  ---
6
6
 
7
- ## 📋 İçindekiler
7
+ ## Table of Contents
8
8
 
9
- 1. [Başlangıç & Uyarı](#başlangıç--uyarı)
10
- 2. [Temel Kurallar](#temel-kurallar)
11
- 3. [Renk Sistemi](#renk-sistemi)
12
- 4. [Paper Elevation Seçenekleri](#paper-elevation-seçenekleri)
13
- 5. [Typography Sistem](#typography-sistem)
14
- 6. [Kapsamlı Component Tablosu](#kapsamlı-component-tablosu)
15
- 7. [Kaynaklar](#kaynaklar)
9
+ 1. [Getting Started & Warning](#getting-started--warning)
10
+ 2. [Core Rules](#core-rules)
11
+ 3. [Color System](#color-system)
12
+ 4. [Paper Elevation Options](#paper-elevation-options)
13
+ 5. [Typography System](#typography-system)
14
+ 6. [Comprehensive Component Table](#comprehensive-component-table)
15
+ 7. [Resources](#resources)
16
16
 
17
17
  ---
18
18
 
19
- ## 🎯 Başlangıç & Uyarı
19
+ ## Getting Started & Warning
20
20
 
21
- ### Bu Paketin Amacı
21
+ ### Purpose of This Package
22
22
 
23
- `@turknet/onehub` Material UI bileşenlerini **tema yapılandırması** yoluyla özelleştiren bir tema paketidir. **Kendi bileşenlerini sunmaz** - Material UI'ın temel bileşenlerini bu tema üzerinden kullanırsınız.
23
+ `@turknet/onehub` is a theme package that customizes Material UI components through **theme configuration**. It does **NOT** provide its own components — you use Material UI's base components through this theme.
24
24
 
25
- ### Kritik Kurallar
25
+ ### Critical Rules
26
26
 
27
- 1. **Material UI bileşenlerini SADECE bu tema kurallarıyla kullan**
28
- 2. **Custom component yazmayın** - Material UI bileşenleri yeterlidir
29
- 3. **Tanımlı olmayan variant/size/color kombinasyonları kullanmayın**
30
- 4. **Her zaman tema tarafından sağlanan renkler ve stilleri tercih edin**
31
- 5. **Inline style yazmayın** - tema kullanın
27
+ 1. **You MUST use Material UI components ONLY with the rules defined in this theme**
28
+ 2. **NEVER write custom components** — Material UI components are sufficient
29
+ 3. **NEVER use variant/size/color combinations that are not defined**
30
+ 4. **You MUST always prefer colors and styles provided by the theme**
31
+ 5. **NEVER write inline styles** — use the theme
32
32
 
33
33
  ---
34
34
 
35
- ## ✅ Temel Kurallar
35
+ ## Core Rules
36
36
 
37
- ### YAPMALISIN ✅
37
+ ### YOU MUST ✅
38
38
 
39
39
  ```tsx
40
- // ✅ Material UI bileşeni + tema kuralları
40
+ // ✅ Material UI component + theme rules
41
41
  <Button variant="contained" color="primary" size="medium">
42
- Tıkla
42
+ Click
43
43
  </Button>
44
44
 
45
- // ✅ Customized typography variant'ı
45
+ // ✅ Customized typography variant
46
46
  <Typography variant="text.md.semibold">
47
- Metin
47
+ Text
48
48
  </Typography>
49
49
 
50
- // ✅ Tema palette'lerini kullan
50
+ // ✅ Use theme palettes
51
51
  <TextField color="neutral" size="medium" />
52
52
 
53
- // ✅ Alt bileşenleri düzgün compose et
53
+ // ✅ Properly compose sub-components
54
54
  <List>
55
55
  <ListItem>
56
56
  <ListItemIcon><StarIcon /></ListItemIcon>
57
- <ListItemText primary="Başlık" secondary="Açıklama" />
57
+ <ListItemText primary="Title" secondary="Description" />
58
58
  </ListItem>
59
59
  </List>
60
60
 
61
- // ✅ Renk palette'lerini doğru kullan (neutral, brand, danger)
61
+ // ✅ Use color palettes correctly (neutral, brand, danger)
62
62
  <Button color="error" variant="contained">
63
- Sil
63
+ Delete
64
64
  </Button>
65
65
 
66
- // ✅ Paper elevation'ı (0-24 arası)
66
+ // ✅ Paper elevation (between 0-24)
67
67
  <Paper elevation={8}>
68
- <Typography>İçerik</Typography>
68
+ <Typography>Content</Typography>
69
69
  </Paper>
70
70
  ```
71
71
 
72
- ### YAPMAMALSIN ❌
72
+ ### YOU MUST NOT ❌
73
73
 
74
74
  ```tsx
75
- // ❌ Custom button component yazma
75
+ // ❌ NEVER write a custom button component
76
76
  function CustomButton() {
77
- return <div style={{...}}>Özel Buton</div>;
77
+ return <div style={{...}}>Custom Button</div>;
78
78
  }
79
79
 
80
- // ❌ Tanımlı olmayan variant/size/color
80
+ // ❌ NEVER use undefined variant/size/color
81
81
  <Button variant="gradient" size="huge" color="unknown">
82
- Buton
82
+ Button
83
83
  </Button>
84
84
 
85
- // ❌ Inline style
85
+ // ❌ NEVER use inline styles
86
86
  <Button style={{backgroundColor: '#FF0000', padding: '20px'}}>
87
- Buton
87
+ Button
88
88
  </Button>
89
89
 
90
- // ❌ Typography olmadan metin
91
- <div>Bu sadece metin</div>
90
+ // ❌ NEVER render text without Typography
91
+ <div>This is just text</div>
92
92
 
93
- // ❌ MUI dışı alternative UI library'leri
93
+ // ❌ NEVER use alternative UI libraries outside of MUI
94
94
  import { Button } from 'chakra-ui';
95
95
 
96
- // ❌ Shared colors'u doğrudan component'lerde
97
- // (sadece tasarım ihtiyacı varsa custom component'lerde)
96
+ // ❌ NEVER use shared colors directly on components
97
+ // (ONLY in custom components when there is a design requirement)
98
98
  <Button style={{backgroundColor: theme.palette.shared.red[3]}}>
99
- Buton
99
+ Button
100
100
  </Button>
101
101
  ```
102
102
 
103
103
  ---
104
104
 
105
- ## 🎨 Renk Sistemi
105
+ ## Color System
106
106
 
107
- ### Palette Yapısı
107
+ ### Palette Structure
108
108
 
109
- Tema 3 ana palette'ye sahiptir:
109
+ The theme has 3 main palettes:
110
110
 
111
111
  ```
112
112
  colorSchemes.light.palette / dark.palette:
113
- ├── neutral → Default UI renkleri (arka plan, metin, kenar)
114
- ├── brand → Primary/marka renkleri (ana aksiyonlar)
115
- ├── danger → Error/destructive renkleri (silme, uyarı)
116
- └── shared → Temel renkler (red, green, orange, yellow, purple, pink, cyan, lime)
113
+ ├── neutral → Default UI colors (background, text, borders)
114
+ ├── brand → Primary/brand colors (main actions)
115
+ ├── danger → Error/destructive colors (deletion, warnings)
116
+ └── shared → Base colors (red, green, orange, yellow, purple, pink, cyan, lime)
117
117
  ```
118
118
 
119
- ### Her Palette İçindeki Yapı
119
+ ### Structure Within Each Palette
120
120
 
121
121
  ```
122
122
  palette.[neutral|brand|danger]:
123
- ├── background → Arka plan renkleri
124
- │ ├── 1, 2, 3, 4, 5, 6 → Yoğunluk seviyeleri
123
+ ├── background → Background colors
124
+ │ ├── 1, 2, 3, 4, 5, 6 → Intensity levels
125
125
  │ └── alpha, disabled, inverted, transparent, overlay, static, subtle, stencil
126
- ├── foreground → Ön plan/metin renkleri
127
- │ ├── 1, 2, 3, 4 → Yoğunluk seviyeleri
126
+ ├── foreground → Foreground/text colors
127
+ │ ├── 1, 2, 3, 4 → Intensity levels
128
128
  │ └── disabled, inverted, compound, link, on.brand
129
- └── stroke → Kenar/border renkleri
130
- ├── 1, 2, 3 → Yoğunluk seviyeleri
129
+ └── stroke → Border colors
130
+ ├── 1, 2, 3 → Intensity levels
131
131
  └── alpha, disabled, inverted, transparent, accessible, on.brand, focus, compound
132
132
  ```
133
133
 
134
- ### Component'lerde Renk Kullanımı
134
+ ### Color Usage in Components
135
135
 
136
- | Component | Geçerli Renkler |
136
+ | Component | Valid Colors |
137
137
  |---|---|
138
138
  | **Button** | primary, secondary, error |
139
139
  | **TextField** | neutral, brand, danger |
140
- | **Select** | neutral, brand, danger (TextField üzerinden) |
140
+ | **Select** | neutral, brand, danger (via TextField) |
141
141
  | **Checkbox** | primary, error |
142
142
  | **Radio** | primary, error |
143
143
  | **Switch** | primary, error |
144
144
  | **Chip** | primary, secondary, error |
145
- | **Alert** | success, warning, error, info (MUI varsayılanları) |
145
+ | **Alert** | success, warning, error, info (MUI defaults) |
146
146
  | **Badge** | primary, secondary, error, success, warning, info |
147
147
  | **Typography** | (default) |
148
148
 
149
- ### ⚠️ Shared Colors (Temel Renkler)
149
+ ### Shared Colors (Base Colors)
150
150
 
151
- `palette.shared` altındaki renkler:
151
+ Colors under `palette.shared`:
152
152
  - `red`, `green`, `orange`, `yellow`, `purple`, `pink`, `cyan`, `lime`
153
153
 
154
- **Kullanım:** Sadece **tasarım ihtiyacı varsa custom component'lerde** kullanılır. Button, TextField gibi standart MUI component'lerinde **kullanılmaz**.
154
+ **Usage:** You MUST ONLY use these in custom components when there is a design requirement. You MUST NOT use them on standard MUI components such as Button or TextField.
155
155
 
156
156
  ```tsx
157
- // ❌ YALNLIŞ: Shared color'ı component prop'u olarak
157
+ // ❌ WRONG: Shared color as a component prop
158
158
  <Button style={{backgroundColor: theme.palette.shared.red[3]}}>
159
- Buton
159
+ Button
160
160
  </Button>
161
161
 
162
- // ✅ DOĞRU: Custom component'lerde gerektiğinde
162
+ // ✅ CORRECT: In custom components when required
163
163
  const CustomBadge = () => (
164
164
  <div style={{backgroundColor: theme.palette.shared.purple[3]}}>
165
- Custom İçerik
165
+ Custom Content
166
166
  </div>
167
167
  );
168
168
  ```
169
169
 
170
170
  ---
171
171
 
172
- ## 📏 Paper Elevation Seçenekleri
172
+ ## Paper Elevation Options
173
173
 
174
- Paper bileşeni `elevation` prop'u ile gölge seviyeleri alır.
174
+ The Paper component accepts shadow levels via the `elevation` prop.
175
175
 
176
- **Geçerli değerler: 0-24**
176
+ **Valid values: 0-24**
177
177
 
178
- | Elevation | Kullanım | Örnek |
178
+ | Elevation | Usage | Example |
179
179
  |---|---|---|
180
- | `0` | Flat, gölgesiz | Arka plan kapsayıcıları |
181
- | `2` | Minimal gölge | İnce vurgulama |
182
- | `4` | Küçük gölge | Card bileşenleri |
183
- | `8` | Orta gölge | Dialog üstelikleri |
184
- | `16` | Büyük gölge | Modal pencereleri |
185
- | `24` | Maksimum gölge | Üst seviye katmanlar (Popper, Tooltip) |
180
+ | `0` | Flat, no shadow | Background containers |
181
+ | `2` | Minimal shadow | Subtle emphasis |
182
+ | `4` | Small shadow | Card components |
183
+ | `8` | Medium shadow | Dialog overlays |
184
+ | `16` | Large shadow | Modal windows |
185
+ | `24` | Maximum shadow | Top-level layers (Popper, Tooltip) |
186
186
 
187
187
  ```tsx
188
- // ✅ DOĞRU: Paper elevation kullanımı
188
+ // ✅ CORRECT: Paper elevation usage
189
189
  <Paper elevation={4}>
190
- <Typography>Kart içeriği</Typography>
190
+ <Typography>Card content</Typography>
191
191
  </Paper>
192
192
 
193
193
  <Paper elevation={0}>
194
- <Typography>Flat arka plan</Typography>
194
+ <Typography>Flat background</Typography>
195
195
  </Paper>
196
196
  ```
197
197
 
198
198
  ---
199
199
 
200
- ## 📝 Typography Sistem
200
+ ## Typography System
201
201
 
202
- Tema özel typography variant'ları sunar. **Material UI'ın varsayılan** `h1`, `h2`, `body1` gibi variant'ları **kullanmayın**.
202
+ The theme provides custom typography variants. You MUST NOT use Material UI's default variants such as `h1`, `h2`, or `body1`.
203
203
 
204
- ### Display Variant'ları
204
+ ### Display Variants
205
205
 
206
- Büyük başlıklar ve önemli başlıklar için:
206
+ For large headings and important titles:
207
207
 
208
208
  ```
209
209
  display.xl2.{regular|medium|semibold|bold} → 72px
@@ -214,9 +214,9 @@ display.sm.{regular|medium|semibold|bold} → 30px
214
214
  display.xs.{regular|medium|semibold|bold} → 24px
215
215
  ```
216
216
 
217
- ### Text Variant'ları
217
+ ### Text Variants
218
218
 
219
- Gövde metni ve açıklamalar için:
219
+ For body text and descriptions:
220
220
 
221
221
  ```
222
222
  text.xl.{regular|medium|semibold|bold} → 20px
@@ -226,170 +226,170 @@ text.sm.{regular|medium|semibold|bold} → 14px
226
226
  text.xs.{regular|medium|semibold|bold} → 12px
227
227
  ```
228
228
 
229
- ### Kullanım Örnekleri
229
+ ### Usage Examples
230
230
 
231
231
  ```tsx
232
- // ✅ Sayfanın ana başlığı
232
+ // ✅ Page main heading
233
233
  <Typography variant="display.lg.bold">
234
- Sayfanın Başlığı
234
+ Page Title
235
235
  </Typography>
236
236
 
237
- // ✅ Alt başlık
237
+ // ✅ Sub-heading
238
238
  <Typography variant="display.md.semibold">
239
- Alt Başlık
239
+ Sub Title
240
240
  </Typography>
241
241
 
242
- // ✅ Normal metin
242
+ // ✅ Normal text
243
243
  <Typography variant="text.md.regular">
244
- Gövde metni, açıklamalar
244
+ Body text, descriptions
245
245
  </Typography>
246
246
 
247
- // ✅ Vurgu yapmak gerekirse
247
+ // ✅ When emphasis is needed
248
248
  <Typography variant="text.md.semibold">
249
- Önemli metin
249
+ Important text
250
250
  </Typography>
251
251
 
252
- // ✅ Küçük açıklama metni
252
+ // ✅ Small description text
253
253
  <Typography variant="text.sm.regular">
254
- Yardımcı bilgi
254
+ Helper info
255
255
  </Typography>
256
256
  ```
257
257
 
258
258
  ---
259
259
 
260
- ## 📊 Kapsamlı Component Tablosu
260
+ ## Comprehensive Component Table
261
261
 
262
- ### Form Bileşenleri
262
+ ### Form Components
263
263
 
264
- | Component | MUI Doc | Alt Bileşenler | Variants | Sizes | Renkler | Typography | Amaç |
264
+ | Component | MUI Doc | Sub-Components | Variants | Sizes | Colors | Typography | Purpose |
265
265
  |---|---|---|---|---|---|---|---|
266
- | **Button** | [docs](https://mui.com/api/button/) | - | contained, outlined, text | extra-small, small, medium, large, extra-large | primary, secondary, error | text.xs.medium - text.lg.medium | Ana aksiyon butonları |
267
- | **TextField** | [docs](https://mui.com/api/text-field/) | InputBase, InputLabel, FilledInput, OutlinedInput, Input | filled, outlined, standard | small, medium, large | neutral, brand, danger | text.sm (label), text.xs (helper) | Form input alanları |
268
- | **Select** | [docs](https://mui.com/api/select/) | MenuItem, FormControl, InputLabel | filled, outlined, standard | small, medium, large | neutral, brand, danger | text.sm - text.md | Seçim alanları, dropdown |
269
- | **MenuItem** | [docs](https://mui.com/api/menu-item/) | ListItemIcon, ListItemText | - | small, medium | - | text.sm - text.md | Select/Menu içindeki seçenekler |
270
- | **Checkbox** | [docs](https://mui.com/api/checkbox/) | FormControlLabel | - | small, medium | primary, error | - | İkili seçim kutusu |
271
- | **Radio** | [docs](https://mui.com/api/radio/) | RadioGroup, FormControlLabel | - | small, medium | primary, error | - | Tek seçim çiftleme |
272
- | **RadioGroup** | [docs](https://mui.com/api/radio-group/) | Radio, FormControlLabel | - | - | - | - | Birden fazla radio gruplaması |
273
- | **Switch** | [docs](https://mui.com/api/switch/) | FormControlLabel | - | small, medium | primary, error | - | Açma/kapama toggle'ı |
274
- | **Slider** | [docs](https://mui.com/api/slider/) | - | - | small, medium | primary, error | - | Kaydırmalı sayı girişi |
275
- | **Autocomplete** | [docs](https://mui.com/api/autocomplete/) | - | filled, outlined, standard | small, medium | neutral, brand, danger | text.sm - text.md | Otomatik tamamlama girişi |
276
-
277
- ### Input Alt Bileşenleri
278
-
279
- | Component | MUI Doc | Kullanım Yeri | Variants | Sizes | Amaç |
266
+ | **Button** | [docs](https://mui.com/api/button/) | - | contained, outlined, text | extra-small, small, medium, large, extra-large | primary, secondary, error | text.xs.medium - text.lg.medium | Primary action buttons |
267
+ | **TextField** | [docs](https://mui.com/api/text-field/) | InputBase, InputLabel, FilledInput, OutlinedInput, Input | filled, outlined, standard | small, medium, large | neutral, brand, danger | text.sm (label), text.xs (helper) | Form input fields |
268
+ | **Select** | [docs](https://mui.com/api/select/) | MenuItem, FormControl, InputLabel | filled, outlined, standard | small, medium, large | neutral, brand, danger | text.sm - text.md | Selection fields, dropdown |
269
+ | **MenuItem** | [docs](https://mui.com/api/menu-item/) | ListItemIcon, ListItemText | - | small, medium | - | text.sm - text.md | Options inside Select/Menu |
270
+ | **Checkbox** | [docs](https://mui.com/api/checkbox/) | FormControlLabel | - | small, medium | primary, error | - | Binary selection box |
271
+ | **Radio** | [docs](https://mui.com/api/radio/) | RadioGroup, FormControlLabel | - | small, medium | primary, error | - | Single selection pairing |
272
+ | **RadioGroup** | [docs](https://mui.com/api/radio-group/) | Radio, FormControlLabel | - | - | - | - | Multiple radio grouping |
273
+ | **Switch** | [docs](https://mui.com/api/switch/) | FormControlLabel | - | small, medium | primary, error | - | On/off toggle |
274
+ | **Slider** | [docs](https://mui.com/api/slider/) | - | - | small, medium | primary, error | - | Sliding number input |
275
+ | **Autocomplete** | [docs](https://mui.com/api/autocomplete/) | - | filled, outlined, standard | small, medium | neutral, brand, danger | text.sm - text.md | Autocomplete input |
276
+
277
+ ### Input Sub-Components
278
+
279
+ | Component | MUI Doc | Use Case | Variants | Sizes | Purpose |
280
280
  |---|---|---|---|---|---|
281
- | **InputBase** | [docs](https://mui.com/api/input-base/) | Temel input yapısı | filled, outlined, standard | small, medium | Özel input bileşenleri için base |
282
- | **InputLabel** | [docs](https://mui.com/api/input-label/) | Form input etiketi | - | small, medium | Input üzerinde etiket |
283
- | **OutlinedInput** | [docs](https://mui.com/api/outlined-input/) | TextField/Select içinde | outlined | small, medium | Çerçeveli input stili |
284
- | **FilledInput** | [docs](https://mui.com/api/filled-input/) | TextField/Select içinde | filled | small, medium | Doldurulmuş input stili |
285
- | **Input** | [docs](https://mui.com/api/input/) | TextField/Select içinde | standard | small, medium | Standart input stili |
286
- | **InputAdornment** | [docs](https://mui.com/api/input-adornment/) | Input içinde başında/sonunda | - | - | Icon veya metin dekorasyon |
287
- | **FormControl** | [docs](https://mui.com/api/form-control/) | Form alanlarını kapsa | filled, outlined, standard | small, medium | Form bileşenlerini grupla |
288
- | **FormLabel** | [docs](https://mui.com/api/form-label/) | FormControl içinde | - | - | Form etiketi |
289
- | **FormControlLabel** | [docs](https://mui.com/api/form-control-label/) | Checkbox, Radio, Switch | - | - | Form kontrolü etiketi |
290
- | **FormHelperText** | [docs](https://mui.com/api/form-helper-text/) | TextField altında | - | - | Hata/yardımcı mesaj |
291
-
292
- ### Gösterim Bileşenleri
293
-
294
- | Component | MUI Doc | Variants | Sizes | Renkler | Typography | Amaç |
281
+ | **InputBase** | [docs](https://mui.com/api/input-base/) | Base input structure | filled, outlined, standard | small, medium | Base for custom input components |
282
+ | **InputLabel** | [docs](https://mui.com/api/input-label/) | Form input label | - | small, medium | Label on input |
283
+ | **OutlinedInput** | [docs](https://mui.com/api/outlined-input/) | Inside TextField/Select | outlined | small, medium | Outlined input style |
284
+ | **FilledInput** | [docs](https://mui.com/api/filled-input/) | Inside TextField/Select | filled | small, medium | Filled input style |
285
+ | **Input** | [docs](https://mui.com/api/input/) | Inside TextField/Select | standard | small, medium | Standard input style |
286
+ | **InputAdornment** | [docs](https://mui.com/api/input-adornment/) | Prefix/suffix inside Input | - | - | Icon or text decoration |
287
+ | **FormControl** | [docs](https://mui.com/api/form-control/) | Wrap form fields | filled, outlined, standard | small, medium | Group form components |
288
+ | **FormLabel** | [docs](https://mui.com/api/form-label/) | Inside FormControl | - | - | Form label |
289
+ | **FormControlLabel** | [docs](https://mui.com/api/form-control-label/) | Checkbox, Radio, Switch | - | - | Form control label |
290
+ | **FormHelperText** | [docs](https://mui.com/api/form-helper-text/) | Below TextField | - | - | Error/helper message |
291
+
292
+ ### Display Components
293
+
294
+ | Component | MUI Doc | Variants | Sizes | Colors | Typography | Purpose |
295
295
  |---|---|---|---|---|---|---|
296
- | **Typography** | [docs](https://mui.com/api/typography/) | display.*.*, text.*.* | - | (default) | display.xl2-xs, text.xl-xs | Metin gösterimi, başlık |
297
- | **Chip** | [docs](https://mui.com/api/chip/) | filled, outlined | small, medium | primary, secondary, error | text.xs - text.md | Etiket, kategori, tag |
298
- | **Badge** | [docs](https://mui.com/api/badge/) | - | small, medium | primary, secondary, error, success, warning, info | - | Bilgi rozetası, sayaç |
299
- | **Avatar** | [docs](https://mui.com/api/avatar/) | - | small, medium, large | - | - | Kullanıcı profil resmi |
300
- | **AvatarGroup** | [docs](https://mui.com/api/avatar-group/) | - | - | - | - | Avatar gruplaması |
301
- | **Tooltip** | [docs](https://mui.com/api/tooltip/) | - | - | - | text.xs - text.sm | Yardımcı bilgi metni |
296
+ | **Typography** | [docs](https://mui.com/api/typography/) | display.*.*, text.*.* | - | (default) | display.xl2-xs, text.xl-xs | Text display, headings |
297
+ | **Chip** | [docs](https://mui.com/api/chip/) | filled, outlined | small, medium | primary, secondary, error | text.xs - text.md | Label, category, tag |
298
+ | **Badge** | [docs](https://mui.com/api/badge/) | - | small, medium | primary, secondary, error, success, warning, info | - | Info badge, counter |
299
+ | **Avatar** | [docs](https://mui.com/api/avatar/) | - | small, medium, large | - | - | User profile picture |
300
+ | **AvatarGroup** | [docs](https://mui.com/api/avatar-group/) | - | - | - | - | Avatar grouping |
301
+ | **Tooltip** | [docs](https://mui.com/api/tooltip/) | - | - | - | text.xs - text.sm | Helper info text |
302
302
 
303
- ### Container Bileşenleri
303
+ ### Container Components
304
304
 
305
- | Component | MUI Doc | Alt Bileşenler | Elevation | Amaç |
305
+ | Component | MUI Doc | Sub-Components | Elevation | Purpose |
306
306
  |---|---|---|---|---|
307
- | **Paper** | [docs](https://mui.com/api/paper/) | - | 0-24 | Yükseltilmiş kapsayıcı |
308
- | **Card** | [docs](https://mui.com/api/card/) | CardContent, CardHeader, CardMedia, CardActions | - | İçerik kartı |
309
- | **CardContent** | [docs](https://mui.com/api/card-content/) | - | - | Card ana içeriği |
310
- | **CardHeader** | [docs](https://mui.com/api/card-header/) | CardMedia (subheader) | - | Card başlığı |
311
- | **CardActions** | [docs](https://mui.com/api/card-actions/) | Button | - | Card aksiyon butonları |
312
- | **Dialog** | [docs](https://mui.com/api/dialog/) | DialogTitle, DialogContent, DialogActions | - | Modal penceresi |
313
- | **DialogTitle** | [docs](https://mui.com/api/dialog-title/) | - | - | Dialog başlığı |
314
- | **DialogContent** | [docs](https://mui.com/api/dialog-content/) | - | - | Dialog ana içeriği |
315
- | **DialogActions** | [docs](https://mui.com/api/dialog-actions/) | Button | - | Dialog buton alanı |
316
-
317
- ### Menu Bileşenleri
318
-
319
- | Component | MUI Doc | Alt Bileşenler | Amaç |
307
+ | **Paper** | [docs](https://mui.com/api/paper/) | - | 0-24 | Elevated container |
308
+ | **Card** | [docs](https://mui.com/api/card/) | CardContent, CardHeader, CardMedia, CardActions | - | Content card |
309
+ | **CardContent** | [docs](https://mui.com/api/card-content/) | - | - | Card main content |
310
+ | **CardHeader** | [docs](https://mui.com/api/card-header/) | CardMedia (subheader) | - | Card header |
311
+ | **CardActions** | [docs](https://mui.com/api/card-actions/) | Button | - | Card action buttons |
312
+ | **Dialog** | [docs](https://mui.com/api/dialog/) | DialogTitle, DialogContent, DialogActions | - | Modal window |
313
+ | **DialogTitle** | [docs](https://mui.com/api/dialog-title/) | - | - | Dialog title |
314
+ | **DialogContent** | [docs](https://mui.com/api/dialog-content/) | - | - | Dialog main content |
315
+ | **DialogActions** | [docs](https://mui.com/api/dialog-actions/) | Button | - | Dialog button area |
316
+
317
+ ### Menu Components
318
+
319
+ | Component | MUI Doc | Sub-Components | Purpose |
320
320
  |---|---|---|---|
321
- | **Menu** | [docs](https://mui.com/api/menu/) | MenuItem, MenuList | Açılır/bağlam menüsü |
322
- | **MenuList** | [docs](https://mui.com/api/menu-list/) | MenuItem | Menu öğeleri listesi |
321
+ | **Menu** | [docs](https://mui.com/api/menu/) | MenuItem, MenuList | Dropdown/context menu |
322
+ | **MenuList** | [docs](https://mui.com/api/menu-list/) | MenuItem | Menu item list |
323
323
 
324
- ### Liste Bileşenleri
324
+ ### List Components
325
325
 
326
- | Component | MUI Doc | Alt Bileşenler | Sizes | Typography | Amaç |
326
+ | Component | MUI Doc | Sub-Components | Sizes | Typography | Purpose |
327
327
  |---|---|---|---|---|---|
328
- | **List** | [docs](https://mui.com/api/list/) | ListItem, ListItemText, ListItemIcon, ListItemButton | dense, normal | text.sm - text.md | Öğe listesi |
329
- | **ListItem** | [docs](https://mui.com/api/list-item/) | ListItemIcon, ListItemText, ListItemButton | dense, normal | text.sm | List içindeki tek öğe |
330
- | **ListItemText** | [docs](https://mui.com/api/list-item-text/) | - | - | text.sm - text.md | List öğesi metni (primary, secondary) |
331
- | **ListItemIcon** | [docs](https://mui.com/api/list-item-icon/) | - | - | - | List öğesi ikonu |
332
- | **ListItemButton** | [docs](https://mui.com/api/list-item-button/) | ListItemIcon, ListItemText | dense, normal | text.sm | Tıklanabilir list öğesi |
328
+ | **List** | [docs](https://mui.com/api/list/) | ListItem, ListItemText, ListItemIcon, ListItemButton | dense, normal | text.sm - text.md | Item list |
329
+ | **ListItem** | [docs](https://mui.com/api/list-item/) | ListItemIcon, ListItemText, ListItemButton | dense, normal | text.sm | Single item within List |
330
+ | **ListItemText** | [docs](https://mui.com/api/list-item-text/) | - | - | text.sm - text.md | List item text (primary, secondary) |
331
+ | **ListItemIcon** | [docs](https://mui.com/api/list-item-icon/) | - | - | - | List item icon |
332
+ | **ListItemButton** | [docs](https://mui.com/api/list-item-button/) | ListItemIcon, ListItemText | dense, normal | text.sm | Clickable list item |
333
333
 
334
- ### Tablo Bileşenleri
334
+ ### Table Components
335
335
 
336
- | Component | MUI Doc | Alt Bileşenler | Sizes | Typography | Amaç |
336
+ | Component | MUI Doc | Sub-Components | Sizes | Typography | Purpose |
337
337
  |---|---|---|---|---|---|
338
- | **Table** | [docs](https://mui.com/api/table/) | TableHead, TableBody, TableRow, TableCell | small, medium | text.sm | Veri tablosu |
339
- | **TableHead** | [docs](https://mui.com/api/table-head/) | TableRow, TableCell | - | text.sm.semibold | Tablo başlık satırı |
340
- | **TableBody** | [docs](https://mui.com/api/table-body/) | TableRow, TableCell | - | text.sm | Tablo body satırları |
341
- | **TableRow** | [docs](https://mui.com/api/table-row/) | TableCell | - | - | Tablo satırı |
342
- | **TableCell** | [docs](https://mui.com/api/table-cell/) | - | small, medium | text.sm | Tablo hücresi |
338
+ | **Table** | [docs](https://mui.com/api/table/) | TableHead, TableBody, TableRow, TableCell | small, medium | text.sm | Data table |
339
+ | **TableHead** | [docs](https://mui.com/api/table-head/) | TableRow, TableCell | - | text.sm.semibold | Table header row |
340
+ | **TableBody** | [docs](https://mui.com/api/table-body/) | TableRow, TableCell | - | text.sm | Table body rows |
341
+ | **TableRow** | [docs](https://mui.com/api/table-row/) | TableCell | - | - | Table row |
342
+ | **TableCell** | [docs](https://mui.com/api/table-cell/) | - | small, medium | text.sm | Table cell |
343
343
 
344
- ### Bildirim Bileşenleri
344
+ ### Notification Components
345
345
 
346
- | Component | MUI Doc | Severity Seçenekleri | Typography | Amaç |
346
+ | Component | MUI Doc | Severity Options | Typography | Purpose |
347
347
  |---|---|---|---|---|
348
- | **Alert** | [docs](https://mui.com/api/alert/) | success, warning, error, info | text.sm - text.md | Bilgilendirme/uyarı mesajları |
349
- | **Snackbar** | [docs](https://mui.com/api/snackbar/) | (MUI varsayılanları) | text.sm | Geçici bildirim mesajları |
348
+ | **Alert** | [docs](https://mui.com/api/alert/) | success, warning, error, info | text.sm - text.md | Informational/warning messages |
349
+ | **Snackbar** | [docs](https://mui.com/api/snackbar/) | (MUI defaults) | text.sm | Temporary notification messages |
350
350
 
351
- ### Sayfalama & Diğer
351
+ ### Pagination & Other
352
352
 
353
- | Component | MUI Doc | Variants | Sizes | Renkler | Amaç |
353
+ | Component | MUI Doc | Variants | Sizes | Colors | Purpose |
354
354
  |---|---|---|---|---|---|
355
- | **Pagination** | [docs](https://mui.com/api/pagination/) | - | small, medium | primary | Sayfalama kontrol |
356
- | **PaginationItem** | [docs](https://mui.com/api/pagination-item/) | text, outlined | small, medium | primary | Sayfalama öğesi |
357
- | **ButtonBase** | [docs](https://mui.com/api/button-base/) | - | - | - | Temel buton yapısı |
358
- | **ButtonGroup** | [docs](https://mui.com/api/button-group/) | contained, outlined, text | small, medium, large | primary, secondary, error | Gruplandırılmış butonlar |
359
- | **CssBaseline** | [docs](https://mui.com/api/css-baseline/) | - | - | - | Global CSS normalizasyonu |
355
+ | **Pagination** | [docs](https://mui.com/api/pagination/) | - | small, medium | primary | Pagination control |
356
+ | **PaginationItem** | [docs](https://mui.com/api/pagination-item/) | text, outlined | small, medium | primary | Pagination item |
357
+ | **ButtonBase** | [docs](https://mui.com/api/button-base/) | - | - | - | Base button structure |
358
+ | **ButtonGroup** | [docs](https://mui.com/api/button-group/) | contained, outlined, text | small, medium, large | primary, secondary, error | Grouped buttons |
359
+ | **CssBaseline** | [docs](https://mui.com/api/css-baseline/) | - | - | - | Global CSS normalization |
360
360
 
361
361
  ---
362
362
 
363
- ## 🔗 Kaynaklar
363
+ ## Resources
364
364
 
365
- - **Material UI Resmi Dokümantasyon**: https://mui.com
365
+ - **Material UI Official Documentation**: https://mui.com
366
366
  - **Material UI Theme**: https://mui.com/material-ui/customization/theming/
367
367
  - **Material UI Components API**: https://mui.com/material-ui/api/
368
- - **@turknet/onehub Repository**: Projenizin repo linki
369
- - **Örnek Kullanımlar**: Lütfen `LLM_EXAMPLES.md` dosyasını okuyunuz
368
+ - **@turknet/onehub Repository**: Your project's repository link
369
+ - **Usage Examples**: You MUST read the `LLM_EXAMPLES.md` file
370
370
 
371
371
  ---
372
372
 
373
- ## 📌 Hızlı Referans
373
+ ## Quick Reference
374
374
 
375
- ### En Sık Kullanılan Kombinasyonlar
375
+ ### Most Frequently Used Combinations
376
376
 
377
377
  ```tsx
378
- // Button Kombinasyonları
378
+ // Button Combinations
379
379
  <Button variant="contained" color="primary" size="medium" />
380
380
  <Button variant="outlined" color="secondary" size="small" />
381
381
  <Button variant="text" color="error" size="large" />
382
382
 
383
- // TextField Kombinasyonları
383
+ // TextField Combinations
384
384
  <TextField variant="outlined" color="neutral" size="medium" />
385
385
  <TextField variant="filled" color="brand" size="small" />
386
386
 
387
- // Typography Kombinasyonları
387
+ // Typography Combinations
388
388
  <Typography variant="display.lg.bold" />
389
389
  <Typography variant="text.md.semibold" />
390
390
  <Typography variant="text.xs.regular" />
391
391
 
392
- // Alert Kombinasyonları
392
+ // Alert Combinations
393
393
  <Alert severity="success" />
394
394
  <Alert severity="error" />
395
395
  <Alert severity="warning" />
@@ -398,6 +398,6 @@ text.xs.{regular|medium|semibold|bold} → 12px
398
398
 
399
399
  ---
400
400
 
401
- **Son Güncelleme**: Mayıs 2026
402
- **Versiyon**: 2.0+
403
- **Paket**: @turknet/onehub
401
+ **Last Updated**: May 2026
402
+ **Version**: 2.0+
403
+ **Package**: @turknet/onehub