@appaflytech/wappa-mcp 0.0.2 → 0.0.3

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 (5) hide show
  1. package/dist/base-components.d.ts +4 -0
  2. package/dist/base-components.d.ts.map +1 -1
  3. package/dist/base-components.js +1793 -339
  4. package/dist/base-components.js.map +1 -1
  5. package/package.json +1 -1
package/dist/base-components.js CHANGED
@@ -6,6 +6,10 @@
6
6
  * Keeping them here lets the MCP answer schema questions without an API call,
7
7
  * and gives you one place to update their definitions.
8
8
  *
9
+ * SOURCE OF TRUTH: wappa-admin-ui/src/components/page-builder/definitions/
10
+ * - constants.ts — shared prop blocks
11
+ * - elements.ts — component definitions
12
+ *
9
13
  * isMobile: true → available in BOTH web and mobile builders
10
14
  * isMobile: false → web builder only
11
15
  */
@@ -21,14 +25,14 @@ const GLOBAL_PROPS = [
21
25
  const CONTAINER_PROPS = [
22
26
  {
23
27
  name: "size",
24
- title: "Boyutlandırma",
28
+ title: "Kapsayıcı genişliği",
25
29
  type: "dropdown",
26
30
  options: [
27
- { label: "Full", value: "fluid" },
28
- { label: "Genişletilmiş", value: "extended" },
29
- { label: "Daratılmış", value: "wide" },
30
- { label: "Okuma modu", value: "medium" },
31
- { label: "Daraltılmış okuma modu", value: "narrow" },
31
+ { label: "Tam genişlik (fluid)", value: "fluid" },
32
+ { label: "Genişletilmiş (extended)", value: "extended" },
33
+ { label: "Geniş (wide)", value: "wide" },
34
+ { label: "Orta (medium)", value: "medium" },
35
+ { label: "Dar (narrow)", value: "narrow" },
32
36
  ],
33
37
  },
34
38
  ...GLOBAL_PROPS,
@@ -36,7 +40,7 @@ const CONTAINER_PROPS = [
36
40
  const COLUMN_OPTION_PROPS = [
37
41
  {
38
42
  name: "size",
39
- title: "Boyut ayarları",
43
+ title: "Sütun genişliği",
40
44
  type: "dropdown",
41
45
  options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((v) => ({
42
46
  label: `${v}/12`,
@@ -45,17 +49,17 @@ const COLUMN_OPTION_PROPS = [
45
49
  },
46
50
  {
47
51
  name: "align",
48
- title: "Hizalandırma ayarları",
52
+ title: "Dikey hizalama",
49
53
  type: "dropdown",
50
54
  options: [
51
- { label: "Start", value: "start" },
52
- { label: "Center", value: "center" },
53
- { label: "End", value: "end" },
55
+ { label: "Başlangıç (start)", value: "start" },
56
+ { label: "Orta (center)", value: "center" },
57
+ { label: "Son (end)", value: "end" },
54
58
  ],
55
59
  },
56
60
  {
57
61
  name: "offset",
58
- title: "Boşluklandırma ayarları",
62
+ title: "Offset (boşluk)",
59
63
  type: "dropdown",
60
64
  options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((v) => ({
61
65
  label: `${v}/12`,
@@ -64,483 +68,1933 @@ const COLUMN_OPTION_PROPS = [
64
68
  },
65
69
  {
66
70
  name: "order",
67
- title: "Sıralama ayarları",
71
+ title: "Sıralama",
68
72
  type: "dropdown",
69
73
  options: [
70
- { label: "En başta gözüksün", value: "first" },
71
- { label: "En sonda gözüksün", value: "last" },
74
+ { label: "En başta (first)", value: "first" },
75
+ { label: "En sonda (last)", value: "last" },
72
76
  ],
73
77
  },
74
78
  ];
75
79
  const COLUMN_PROPS = [
76
80
  {
77
81
  name: "xl",
78
- title: "XL ekran ayarları",
82
+ title: "XL ekran (≥1280px)",
79
83
  type: "object",
80
84
  props: COLUMN_OPTION_PROPS,
81
85
  },
82
86
  {
83
87
  name: "lg",
84
- title: "LG ekran ayarları",
88
+ title: "LG ekran (≥1024px)",
85
89
  type: "object",
86
90
  props: COLUMN_OPTION_PROPS,
87
91
  },
88
92
  {
89
93
  name: "md",
90
- title: "MD ekran ayarları",
94
+ title: "MD ekran (≥768px)",
91
95
  type: "object",
92
96
  props: COLUMN_OPTION_PROPS,
93
97
  },
94
98
  {
95
99
  name: "sm",
96
- title: "SM ekran ayarları",
100
+ title: "SM ekran (≥640px)",
97
101
  type: "object",
98
102
  props: COLUMN_OPTION_PROPS,
99
103
  },
100
104
  {
101
105
  name: "xs",
102
- title: "XS ekran ayarları",
106
+ title: "XS ekran (<640px)",
103
107
  type: "object",
104
108
  props: COLUMN_OPTION_PROPS,
105
109
  },
106
110
  ...GLOBAL_PROPS,
107
111
  ];
108
- const ROW_BREAKPOINT_PROPS = [
112
+ const ROW_SCREEN_CONFIG_PROPS = [
109
113
  {
110
114
  name: "direction",
111
- title: "Kapsayıcı tipi",
115
+ title: "Yön (flex-direction)",
112
116
  type: "dropdown",
113
117
  options: [
114
- { label: "Row", value: "row" },
115
- { label: "Row reverse", value: "row-reverse" },
116
- { label: "Column", value: "column" },
117
- { label: "Column reverse", value: "column-reverse" },
118
+ { label: "Yatay (row)", value: "row" },
119
+ { label: "Dikey (column)", value: "column" },
120
+ { label: "Yatay ters (row-reverse)", value: "row-reverse" },
121
+ { label: "Dikey ters (column-reverse)", value: "column-reverse" },
118
122
  ],
119
123
  },
120
124
  {
121
125
  name: "align",
122
- title: "Yukarı - Aşağı Hizalandırma",
126
+ title: "Dikey hizalama (align-items)",
123
127
  type: "dropdown",
124
128
  options: [
125
- { label: "Start", value: "start" },
126
- { label: "Center", value: "center" },
127
- { label: "End", value: "end" },
128
- { label: "Baseline", value: "baseline" },
129
- { label: "Stretch", value: "stretch" },
129
+ { label: "Başlangıç (start)", value: "start" },
130
+ { label: "Orta (center)", value: "center" },
131
+ { label: "Son (end)", value: "end" },
132
+ { label: "Uzat (stretch)", value: "stretch" },
130
133
  ],
131
134
  },
132
135
  {
133
136
  name: "justify",
134
- title: "Soldan - Sağa Hizalandırma",
137
+ title: "Yatay hizalama (justify-content)",
135
138
  type: "dropdown",
136
139
  options: [
137
- { label: "Start", value: "start" },
138
- { label: "Center", value: "center" },
139
- { label: "End", value: "end" },
140
- { label: "Space-around", value: "around" },
141
- { label: "Space-between", value: "between" },
142
- { label: "Space-evenly", value: "evenly" },
140
+ { label: "Başlangıç (start)", value: "start" },
141
+ { label: "Orta (center)", value: "center" },
142
+ { label: "Son (end)", value: "end" },
143
+ { label: "Aralarında boşluk (between)", value: "between" },
144
+ { label: "Çevreli boşluk (around)", value: "around" },
145
+ { label: "Eşit boşluk (evenly)", value: "evenly" },
143
146
  ],
144
147
  },
145
148
  {
146
149
  name: "wrap",
147
- title: "Yayılım ayarları",
150
+ title: "Satır kırma (flex-wrap)",
148
151
  type: "dropdown",
149
152
  options: [
150
- { label: "No wrap", value: "nowrap" },
151
- { label: "Wrap", value: "wrap" },
152
- { label: "Wrap reverse", value: "wrap-reverse" },
153
+ { label: "Kırma (nowrap)", value: "nowrap" },
154
+ { label: "Kır (wrap)", value: "wrap" },
155
+ { label: "Ters kır (wrap-reverse)", value: "wrap-reverse" },
153
156
  ],
154
157
  },
155
158
  {
156
159
  name: "gutter",
157
- title: "Boşluklandırmalar",
160
+ title: "Sütun arası boşluk (gap)",
158
161
  type: "dropdown",
159
162
  options: [
160
- { label: "Boşluklandırma yok", value: "none" },
161
- { label: "En küçük boşluklandırma", value: "xs" },
162
- { label: "Küçük boşluklandırma", value: "sm" },
163
- { label: "Orta boşluklandırma", value: "md" },
164
- { label: "Büyük boşluklandırma", value: "lg" },
165
- { label: "En büyük boşluklandırma", value: "xl" },
163
+ { label: "Yok", value: "0" },
164
+ { label: "XS (4px)", value: "xs" },
165
+ { label: "SM (8px)", value: "sm" },
166
+ { label: "MD (16px)", value: "md" },
167
+ { label: "LG (24px)", value: "lg" },
168
+ { label: "XL (32px)", value: "xl" },
169
+ { label: "2XL (48px)", value: "2xl" },
170
+ { label: "3XL (64px)", value: "3xl" },
171
+ { label: "4XL (80px)", value: "4xl" },
166
172
  ],
167
173
  },
168
174
  ];
169
- const BUTTON_PROPS = [
170
- { name: "children", title: "Metin", type: "text" },
171
- { name: "anchor", title: "Link", type: "link" },
175
+ const SPACE_OPTIONS = [
176
+ { label: "Yok (0)", value: "none" },
177
+ { label: "XS (4px)", value: "xs" },
178
+ { label: "SM (8px)", value: "sm" },
179
+ { label: "MD (16px)", value: "md" },
180
+ { label: "LG (24px)", value: "lg" },
181
+ { label: "XL (32px)", value: "xl" },
182
+ { label: "2XL (48px)", value: "2xl" },
183
+ { label: "3XL (64px)", value: "3xl" },
184
+ { label: "4XL (80px)", value: "4xl" },
185
+ ];
186
+ const HSTACK_PROPS = [
172
187
  {
173
- name: "items",
174
- title: "Items (Array)",
175
- type: "array",
176
- props: [
177
- { name: "title", title: "Item Title", type: "text" },
178
- { name: "description", title: "Item Description", type: "text" },
179
- { name: "value", title: "Item Value", type: "number" },
188
+ name: "space",
189
+ title: "Yatay boşluk (space)",
190
+ type: "dropdown",
191
+ options: SPACE_OPTIONS,
192
+ },
193
+ { name: "reversed", title: "Ters sıralama (reversed)", type: "switch" },
194
+ ...GLOBAL_PROPS,
195
+ ];
196
+ const VSTACK_PROPS = [
197
+ {
198
+ name: "space",
199
+ title: "Dikey boşluk (space)",
200
+ type: "dropdown",
201
+ options: SPACE_OPTIONS,
202
+ },
203
+ { name: "reversed", title: "Ters sıralama (reversed)", type: "switch" },
204
+ ...GLOBAL_PROPS,
205
+ ];
206
+ const HEADING_PROPS = [
207
+ { name: "children", title: "Başlık metni", type: "text" },
208
+ {
209
+ name: "nodeType",
210
+ title: "HTML etiketi",
211
+ type: "dropdown",
212
+ options: [
213
+ { value: "h1", label: "H1" },
214
+ { value: "h2", label: "H2" },
215
+ { value: "h3", label: "H3" },
216
+ { value: "h4", label: "H4" },
217
+ { value: "h5", label: "H5" },
218
+ { value: "h6", label: "H6" },
180
219
  ],
181
220
  },
182
221
  {
183
- name: "appearance",
184
- title: "Görünüm tipi",
222
+ name: "size",
223
+ title: "Boyut",
185
224
  type: "dropdown",
186
225
  options: [
187
- { label: "Varsayılan", value: "default" },
188
- { label: "Error", value: "error" },
189
- { label: "Help", value: "help" },
190
- { label: "Info", value: "info" },
191
- { label: "Success", value: "success" },
192
- { label: "Warning", value: "warning" },
226
+ { value: "xs", label: "XS" },
227
+ { value: "sm", label: "SM" },
228
+ { value: "md", label: "MD" },
229
+ { value: "lg", label: "LG" },
230
+ { value: "xl", label: "XL" },
231
+ { value: "2xl", label: "2XL" },
232
+ { value: "3xl", label: "3XL" },
233
+ { value: "4xl", label: "4XL" },
234
+ { value: "5xl", label: "5XL" },
235
+ ],
236
+ },
237
+ { name: "bold", title: "Kalın", type: "switch" },
238
+ { name: "isTruncated", title: "Taşanı kes (truncate)", type: "switch" },
239
+ { name: "numberOfLines", title: "Satır sınırı (line-clamp)", type: "number" },
240
+ ...GLOBAL_PROPS,
241
+ ];
242
+ const TEXT_PROPS = [
243
+ { name: "children", title: "Metin", type: "long-text" },
244
+ {
245
+ name: "size",
246
+ title: "Boyut",
247
+ type: "dropdown",
248
+ options: [
249
+ { value: "2xs", label: "2XS" },
250
+ { value: "xs", label: "XS" },
251
+ { value: "sm", label: "SM" },
252
+ { value: "md", label: "MD" },
253
+ { value: "lg", label: "LG" },
254
+ { value: "xl", label: "XL" },
255
+ { value: "2xl", label: "2XL" },
256
+ { value: "3xl", label: "3XL" },
257
+ { value: "4xl", label: "4XL" },
258
+ { value: "5xl", label: "5XL" },
259
+ { value: "6xl", label: "6XL" },
260
+ ],
261
+ },
262
+ { name: "bold", title: "Kalın", type: "switch" },
263
+ { name: "italic", title: "İtalik", type: "switch" },
264
+ { name: "isTruncated", title: "Taşanı kes (truncate)", type: "switch" },
265
+ { name: "numberOfLines", title: "Satır sınırı (line-clamp)", type: "number" },
266
+ ...GLOBAL_PROPS,
267
+ ];
268
+ const ICON_PROPS = [
269
+ {
270
+ name: "as",
271
+ title: "İkon adı (Lucide)",
272
+ type: "text",
273
+ description: "Lucide icon adı. Örnek: HomeIcon, UserIcon, SearchIcon",
274
+ },
275
+ {
276
+ name: "size",
277
+ title: "Boyut",
278
+ type: "dropdown",
279
+ options: [
280
+ { label: "2XS (12px)", value: "2xs" },
281
+ { label: "XS (16px)", value: "xs" },
282
+ { label: "SM (18px)", value: "sm" },
283
+ { label: "MD (20px)", value: "md" },
284
+ { label: "LG (24px)", value: "lg" },
285
+ { label: "XL (28px)", value: "xl" },
286
+ { label: "2XL (32px)", value: "2xl" },
287
+ ],
288
+ },
289
+ ...GLOBAL_PROPS,
290
+ ];
291
+ const BUTTON_PROPS = [
292
+ { name: "children", title: "Buton metni (ButtonText)", type: "text" },
293
+ { name: "anchor", title: "Link (href)", type: "link" },
294
+ {
295
+ name: "action",
296
+ title: "Renk tonu (action)",
297
+ type: "dropdown",
298
+ options: [
299
+ { label: "Primary", value: "primary" },
300
+ { label: "Secondary", value: "secondary" },
301
+ { label: "Positive", value: "positive" },
302
+ { label: "Negative", value: "negative" },
303
+ { label: "Default", value: "default" },
193
304
  ],
194
305
  },
195
306
  {
196
- name: "kind",
197
- title: "Görünüm türü",
307
+ name: "variant",
308
+ title: "Görünüm (variant)",
198
309
  type: "dropdown",
199
310
  options: [
200
- { label: "Varsayılan", value: "standard" },
201
- { label: "Contained", value: "contained" },
202
- { label: "Text", value: "text" },
203
- { label: "Outlined", value: "outlined" },
311
+ { label: "Solid", value: "solid" },
312
+ { label: "Outline", value: "outline" },
313
+ { label: "Link", value: "link" },
204
314
  ],
205
315
  },
206
316
  {
207
- name: "shape",
208
- title: "Kenarlık tipi",
317
+ name: "size",
318
+ title: "Boyut",
209
319
  type: "dropdown",
210
320
  options: [
211
- { label: "Square", value: "square" },
212
- { label: "Pill", value: "pill" },
213
- { label: "Circle", value: "circle" },
214
- { label: "None", value: "none" },
321
+ { label: "XS", value: "xs" },
322
+ { label: "SM", value: "sm" },
323
+ { label: "MD", value: "md" },
324
+ { label: "LG", value: "lg" },
325
+ { label: "XL", value: "xl" },
215
326
  ],
216
327
  },
328
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
217
329
  ];
218
330
  const CARD_PROPS = [
219
331
  { name: "title", title: "Başlık", type: "text" },
220
- { name: "subtitle", title: "Alt Başlık", type: "text" },
221
- { name: "children", title: "Kısa açıklama", type: "long-text" },
332
+ { name: "subtitle", title: "Alt başlık", type: "text" },
333
+ { name: "description", title: "Açıklama", type: "long-text" },
222
334
  { name: "image", title: "Görsel", type: "image" },
223
335
  { name: "anchor", title: "Link", type: "link" },
336
+ {
337
+ name: "size",
338
+ title: "Boyut",
339
+ type: "dropdown",
340
+ options: [
341
+ { label: "SM", value: "sm" },
342
+ { label: "MD", value: "md" },
343
+ { label: "LG", value: "lg" },
344
+ ],
345
+ },
346
+ {
347
+ name: "variant",
348
+ title: "Kart stili (variant)",
349
+ type: "dropdown",
350
+ options: [
351
+ { label: "Ghost", value: "ghost" },
352
+ { label: "Outline", value: "outline" },
353
+ { label: "Filled", value: "filled" },
354
+ { label: "Elevated", value: "elevated" },
355
+ ],
356
+ },
224
357
  ];
225
- // ─── Base Component Registry ──────────────────────────────────────────────────
226
- export const BASE_COMPONENTS = [
227
- // ── Kapsayıcılar (Wrappers) ─────────────────────────────
358
+ const AVATAR_PROPS = [
359
+ { name: "source", title: "Profil görseli (AvatarImage)", type: "image" },
228
360
  {
229
- id: "container",
230
- name: "container",
231
- title: "Container",
232
- description: "Sayfa içeriğini belirli bir genişlikte ortalayan kapsayıcı.",
233
- type: "wrapper",
234
- droppable: true,
235
- icon: "archive",
236
- isMobile: false,
237
- definition: {
238
- props: CONTAINER_PROPS,
239
- },
361
+ name: "name",
362
+ title: "İsim (AvatarFallbackText)",
363
+ type: "text",
364
+ description: "Görsel yoksa baş harfler bu isimden alınır.",
240
365
  },
241
366
  {
242
- id: "array-repeater",
243
- name: "array-repeater",
244
- title: "Dinamik Liste",
245
- description: "Bir sorgu veya vitrin sonucundaki her satır için içerik şablonunu tekrarlar. İçine eklediğiniz her bileşen query satır verilerine bağlanabilir.",
246
- type: "wrapper",
247
- droppable: true,
248
- icon: "list",
249
- isMobile: true,
250
- definition: {
251
- props: [
252
- {
253
- name: "repeater",
254
- title: "Veri Kaynağı (Tekrarlayıcı)",
255
- type: "text",
256
- description: "Hangi sorgunun sonuçlarının tekrarlanacağını belirler. Mapping butonundan Sorgu seçip sütun adlarını soyut adlara bağlayın.",
257
- },
258
- ...GLOBAL_PROPS,
259
- ],
260
- },
367
+ name: "size",
368
+ title: "Boyut",
369
+ type: "dropdown",
370
+ options: [
371
+ { label: "XS", value: "xs" },
372
+ { label: "SM", value: "sm" },
373
+ { label: "MD", value: "md" },
374
+ { label: "LG", value: "lg" },
375
+ { label: "XL", value: "xl" },
376
+ { label: "2XL", value: "2xl" },
377
+ ],
261
378
  },
262
379
  {
263
- id: "row",
264
- name: "row",
265
- title: "Row",
266
- description: "Flexbox satır kapsayıcı. Responsive kırılım noktalarına göre yön, hizalama ve boşluk ayarlanabilir.",
267
- type: "wrapper",
268
- droppable: true,
269
- icon: "export",
270
- isMobile: false,
271
- definition: {
272
- props: [
273
- {
274
- name: "xs",
275
- title: "XS ekran ayarları",
276
- type: "object",
277
- props: ROW_BREAKPOINT_PROPS,
278
- },
279
- {
280
- name: "sm",
281
- title: "SM ekran ayarları",
282
- type: "object",
283
- props: ROW_BREAKPOINT_PROPS,
284
- },
285
- {
286
- name: "md",
287
- title: "MD ekran ayarları",
288
- type: "object",
289
- props: ROW_BREAKPOINT_PROPS,
290
- },
291
- {
292
- name: "lg",
293
- title: "LG ekran ayarları",
294
- type: "object",
295
- props: ROW_BREAKPOINT_PROPS,
296
- },
297
- {
298
- name: "xl",
299
- title: "XL ekran ayarları",
300
- type: "object",
301
- props: ROW_BREAKPOINT_PROPS,
302
- },
303
- ...GLOBAL_PROPS,
304
- ],
305
- },
380
+ name: "showBadge",
381
+ title: "Online rozeti göster (AvatarBadge)",
382
+ type: "switch",
306
383
  },
384
+ ];
385
+ const BADGE_PROPS = [
386
+ { name: "text", title: "Etiket metni (BadgeText)", type: "text" },
307
387
  {
308
- id: "column",
309
- name: "column",
310
- title: "Column",
311
- description: "12-sütun ızgara sistemi. Her kırılım noktası için ayrı genişlik, offset ve sıralama tanımlanabilir.",
312
- type: "wrapper",
313
- droppable: true,
314
- icon: "dashboard",
315
- isMobile: false,
316
- definition: {
317
- props: COLUMN_PROPS,
318
- preview: { type: "number", value: "xl.size", suffix: "/12" },
319
- },
388
+ name: "action",
389
+ title: "Durum rengi (action)",
390
+ type: "dropdown",
391
+ options: [
392
+ { label: "Info", value: "info" },
393
+ { label: "Success", value: "success" },
394
+ { label: "Warning", value: "warning" },
395
+ { label: "Error", value: "error" },
396
+ { label: "Muted", value: "muted" },
397
+ ],
320
398
  },
321
399
  {
322
- id: "view",
323
- name: "view",
324
- title: "View",
325
- description: "Sayfalar üzerinde yapılacak tasarım alanıdır.",
326
- type: "wrapper",
327
- droppable: false,
328
- icon: "detail-view",
329
- isMobile: true,
330
- definition: {
331
- props: [
332
- {
333
- name: "title",
334
- title: "Gösterim başlığı",
335
- type: "text",
336
- description: "Gösterim için bir başlık giriniz.",
337
- },
338
- ...GLOBAL_PROPS,
339
- ],
340
- preview: { type: "text", value: "title" },
341
- },
400
+ name: "variant",
401
+ title: "Görünüm (variant)",
402
+ type: "dropdown",
403
+ options: [
404
+ { label: "Solid", value: "solid" },
405
+ { label: "Outline", value: "outline" },
406
+ ],
342
407
  },
343
408
  {
344
- id: "section",
345
- name: "section",
346
- title: "Section",
347
- description: "Sayfa bölümü. Başlık, açıklama, link ve iç container ayarları içerir.",
348
- type: "wrapper",
349
- droppable: true,
350
- icon: "highlights",
351
- isMobile: false,
352
- definition: {
353
- props: [
354
- { name: "title", title: "Başlık", type: "text" },
355
- { name: "description", title: "Kısa açıklama", type: "long-text" },
356
- { name: "anchor", title: "Link", type: "link" },
357
- {
358
- name: "container",
359
- title: "Kapsayıcı ayarları",
360
- type: "object",
361
- props: CONTAINER_PROPS,
362
- },
363
- ],
364
- preview: { type: "text", value: "title" },
365
- },
409
+ name: "size",
410
+ title: "Boyut",
411
+ type: "dropdown",
412
+ options: [
413
+ { label: "SM", value: "sm" },
414
+ { label: "MD", value: "md" },
415
+ { label: "LG", value: "lg" },
416
+ ],
366
417
  },
367
- // ── Elementler (Elements) ───────────────────────────────
418
+ ];
419
+ const DIVIDER_PROPS = [
368
420
  {
369
- id: "heading",
370
- name: "heading",
371
- title: "Başlık",
372
- description: "H1–H6 başlık elementi.",
373
- type: "element",
374
- droppable: false,
375
- icon: "app-switcher",
376
- isMobile: false,
377
- definition: {
378
- props: [
379
- { name: "children", title: "Başlık", type: "text" },
380
- {
381
- name: "nodeType",
382
- title: "Başlık tipi",
383
- type: "dropdown",
384
- options: [
385
- { value: "h1", label: "Heading 1" },
386
- { value: "h2", label: "Heading 2" },
387
- { value: "h3", label: "Heading 3" },
388
- { value: "h4", label: "Heading 4" },
389
- { value: "h5", label: "Heading 5" },
390
- { value: "h6", label: "Heading 6" },
391
- ],
392
- },
393
- ...GLOBAL_PROPS,
394
- ],
395
- preview: { type: "text", value: "children" },
396
- },
421
+ name: "orientation",
422
+ title: "Yön",
423
+ type: "dropdown",
424
+ options: [
425
+ { label: "Yatay (horizontal)", value: "horizontal" },
426
+ { label: "Dikey (vertical)", value: "vertical" },
427
+ ],
397
428
  },
429
+ ];
430
+ const TABLE_COLUMN_PROPS = [
431
+ { name: "header", title: "Sütun başlığı (TableHead)", type: "text" },
398
432
  {
399
- id: "paragraph",
400
- name: "paragraph",
401
- title: "Paragraf",
402
- description: "Uzun metin paragraf elementi.",
403
- type: "element",
404
- droppable: false,
405
- icon: "table",
406
- isMobile: false,
407
- definition: {
408
- props: [
409
- { name: "children", title: "Metin", type: "long-text" },
410
- ...GLOBAL_PROPS,
411
- ],
412
- preview: { type: "text", value: "children" },
413
- },
433
+ name: "key",
434
+ title: "Veri anahtarı",
435
+ type: "text",
436
+ description: "Veri nesnesinden bu key ile değer alınır.",
414
437
  },
438
+ ];
439
+ const SKELETON_PROPS = [
415
440
  {
416
- id: "html",
417
- name: "html",
418
- title: "HTML",
419
- description: "Ham HTML içerik alanı (rich text editor).",
420
- type: "element",
421
- droppable: false,
422
- icon: "component",
423
- isMobile: false,
424
- definition: {
425
- props: [
426
- { name: "content", title: "HTML İçerik", type: "editor" },
427
- ...GLOBAL_PROPS,
428
- ],
429
- preview: { type: "text", value: "content" },
430
- },
441
+ name: "variant",
442
+ title: "Şekil (variant)",
443
+ type: "dropdown",
444
+ options: [
445
+ { label: "Yuvarlatılmış (rounded)", value: "rounded" },
446
+ { label: "Keskin (sharp)", value: "sharp" },
447
+ { label: "Yuvarlak (circular)", value: "circular" },
448
+ ],
431
449
  },
432
450
  {
433
- id: "image",
434
- name: "image",
435
- title: "Görsel",
436
- description: "Görsel (resim) elementi.",
437
- type: "element",
438
- droppable: false,
439
- icon: "image",
440
- isMobile: false,
441
- definition: {
442
- props: [
443
- { name: "source", title: "Görsel", type: "image" },
444
- ...GLOBAL_PROPS,
445
- ],
446
- preview: { type: "image", value: "source.src" },
447
- },
451
+ name: "speed",
452
+ title: "Animasyon hızı (saniye)",
453
+ type: "number",
454
+ description: "Varsayılan: 2 saniye.",
448
455
  },
449
456
  {
450
- id: "video",
451
- name: "video",
452
- title: "Video",
453
- description: "Video elementi.",
454
- type: "element",
455
- droppable: false,
456
- icon: "vid-play",
457
- isMobile: false,
458
- definition: {
459
- props: [
457
+ name: "isText",
458
+ title: "Metin iskelet (SkeletonText)",
459
+ type: "switch",
460
+ description: "Etkinleştirilirse SkeletonText bileşeni kullanılır.",
461
+ },
462
+ {
463
+ name: "lines",
464
+ title: "Satır sayısı (SkeletonText)",
465
+ type: "number",
466
+ description: "SkeletonText için satır sayısı.",
467
+ },
468
+ ...GLOBAL_PROPS,
469
+ ];
470
+ const SPINNER_PROPS = [
471
+ {
472
+ name: "size",
473
+ title: "Boyut",
474
+ type: "dropdown",
475
+ options: [
476
+ { label: "Küçük (small)", value: "small" },
477
+ { label: "Büyük (large)", value: "large" },
478
+ ],
479
+ },
480
+ {
481
+ name: "color",
482
+ title: "Renk (className token)",
483
+ type: "text",
484
+ description: "Örnek: text-primary, text-error",
485
+ },
486
+ ];
487
+ const ALERT_PROPS = [
488
+ { name: "text", title: "Mesaj metni (AlertText)", type: "text" },
489
+ {
490
+ name: "action",
491
+ title: "Durum tipi (action)",
492
+ type: "dropdown",
493
+ options: [
494
+ { label: "Info", value: "info" },
495
+ { label: "Success", value: "success" },
496
+ { label: "Warning", value: "warning" },
497
+ { label: "Error", value: "error" },
498
+ { label: "Muted", value: "muted" },
499
+ ],
500
+ },
501
+ {
502
+ name: "variant",
503
+ title: "Görünüm (variant)",
504
+ type: "dropdown",
505
+ options: [
506
+ { label: "Solid", value: "solid" },
507
+ { label: "Outline", value: "outline" },
508
+ ],
509
+ },
510
+ { name: "showIcon", title: "İkon göster (AlertIcon)", type: "switch" },
511
+ ];
512
+ const PROGRESS_PROPS = [
513
+ { name: "value", title: "Değer (0-100)", type: "number" },
514
+ {
515
+ name: "size",
516
+ title: "Boyut (ProgressFilledTrack)",
517
+ type: "dropdown",
518
+ options: [
519
+ { label: "XS", value: "xs" },
520
+ { label: "SM", value: "sm" },
521
+ { label: "MD", value: "md" },
522
+ { label: "LG", value: "lg" },
523
+ { label: "XL", value: "xl" },
524
+ ],
525
+ },
526
+ { name: "showLabel", title: "Değer etiketini göster", type: "switch" },
527
+ {
528
+ name: "label",
529
+ title: "Özel etiket metni",
530
+ type: "text",
531
+ description: "Boş bırakılırsa yüzde değeri gösterilir.",
532
+ },
533
+ ];
534
+ const TOAST_PROPS = [
535
+ { name: "title", title: "Başlık (ToastTitle)", type: "text" },
536
+ { name: "description", title: "Açıklama (ToastDescription)", type: "text" },
537
+ {
538
+ name: "action",
539
+ title: "Durum tipi (action)",
540
+ type: "dropdown",
541
+ options: [
542
+ { label: "Info", value: "info" },
543
+ { label: "Success", value: "success" },
544
+ { label: "Warning", value: "warning" },
545
+ { label: "Error", value: "error" },
546
+ { label: "Muted", value: "muted" },
547
+ ],
548
+ },
549
+ {
550
+ name: "variant",
551
+ title: "Görünüm (variant)",
552
+ type: "dropdown",
553
+ options: [
554
+ { label: "Solid", value: "solid" },
555
+ { label: "Outline", value: "outline" },
556
+ ],
557
+ },
558
+ {
559
+ name: "placement",
560
+ title: "Konum (placement)",
561
+ type: "dropdown",
562
+ options: [
563
+ { label: "Üst (top)", value: "top" },
564
+ { label: "Üst sol (top left)", value: "top left" },
565
+ { label: "Üst sağ (top right)", value: "top right" },
566
+ { label: "Alt (bottom)", value: "bottom" },
567
+ { label: "Alt sol (bottom left)", value: "bottom left" },
568
+ { label: "Alt sağ (bottom right)", value: "bottom right" },
569
+ ],
570
+ },
571
+ {
572
+ name: "duration",
573
+ title: "Süre (ms)",
574
+ type: "number",
575
+ description: "Görünme süresi (ms). 0 = manuel kapatma.",
576
+ },
577
+ ...GLOBAL_PROPS,
578
+ ];
579
+ const ACCORDION_ITEM_PROPS = [
580
+ { name: "title", title: "Başlık (AccordionTrigger)", type: "text" },
581
+ { name: "content", title: "İçerik (AccordionContent)", type: "long-text" },
582
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
583
+ ];
584
+ const TABS_ITEM_PROPS = [
585
+ { name: "label", title: "Sekme etiketi (TabsTrigger)", type: "text" },
586
+ {
587
+ name: "value",
588
+ title: "Sekme değeri (value)",
589
+ type: "text",
590
+ description: "Benzersiz sekme anahtarı.",
591
+ },
592
+ {
593
+ name: "iconName",
594
+ title: "İkon adı (opsiyonel)",
595
+ type: "text",
596
+ description: "Lucide icon adı.",
597
+ },
598
+ {
599
+ name: "content",
600
+ title: "Sekme içeriği (TabsContent)",
601
+ type: "long-text",
602
+ description: "Sekme içerik metni.",
603
+ },
604
+ ];
605
+ const MODAL_PROPS = [
606
+ {
607
+ name: "title",
608
+ title: "Başlık (ModalHeader)",
609
+ type: "text",
610
+ description: "Modal başlık metni.",
611
+ },
612
+ {
613
+ name: "size",
614
+ title: "Boyut",
615
+ type: "dropdown",
616
+ options: [
617
+ { label: "XS", value: "xs" },
618
+ { label: "SM", value: "sm" },
619
+ { label: "MD", value: "md" },
620
+ { label: "LG", value: "lg" },
621
+ { label: "Tam ekran (full)", value: "full" },
622
+ ],
623
+ },
624
+ { name: "showCloseButton", title: "Kapat butonu göster", type: "switch" },
625
+ ...GLOBAL_PROPS,
626
+ ];
627
+ const DRAWER_PROPS = [
628
+ { name: "title", title: "Başlık (DrawerHeader)", type: "text" },
629
+ {
630
+ name: "placement",
631
+ title: "Açılma yönü (placement)",
632
+ type: "dropdown",
633
+ options: [
634
+ { label: "Sol (left)", value: "left" },
635
+ { label: "Sağ (right)", value: "right" },
636
+ { label: "Üst (top)", value: "top" },
637
+ { label: "Alt (bottom)", value: "bottom" },
638
+ ],
639
+ },
640
+ { name: "showCloseButton", title: "Kapat butonu göster", type: "switch" },
641
+ ...GLOBAL_PROPS,
642
+ ];
643
+ const ACTIONSHEET_ITEM_PROPS = [
644
+ { name: "text", title: "Metin (ActionsheetItemText)", type: "text" },
645
+ {
646
+ name: "iconName",
647
+ title: "İkon adı (ActionsheetIcon)",
648
+ type: "text",
649
+ description: "Lucide icon adı. Boş bırakılırsa ikon gösterilmez.",
650
+ },
651
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
652
+ ];
653
+ const FAB_PROPS = [
654
+ {
655
+ name: "label",
656
+ title: "Etiket metni (FabLabel)",
657
+ type: "text",
658
+ description: "Boş bırakılırsa yalnızca ikon gösterilir.",
659
+ },
660
+ {
661
+ name: "iconName",
662
+ title: "İkon adı (FabIcon)",
663
+ type: "text",
664
+ description: "Lucide icon adı. Örnek: PlusIcon, EditIcon",
665
+ },
666
+ {
667
+ name: "size",
668
+ title: "Boyut",
669
+ type: "dropdown",
670
+ options: [
671
+ { label: "SM", value: "sm" },
672
+ { label: "MD", value: "md" },
673
+ { label: "LG", value: "lg" },
674
+ ],
675
+ },
676
+ {
677
+ name: "placement",
678
+ title: "Konum (placement)",
679
+ type: "dropdown",
680
+ options: [
681
+ { label: "Sol Alt", value: "bottom left" },
682
+ { label: "Sağ Alt", value: "bottom right" },
683
+ { label: "Sol Üst", value: "top left" },
684
+ { label: "Sağ Üst", value: "top right" },
685
+ ],
686
+ },
687
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
688
+ ...GLOBAL_PROPS,
689
+ ];
690
+ const FORM_CONTROL_PROPS = [
691
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
692
+ { name: "isRequired", title: "Zorunlu alan", type: "switch" },
693
+ { name: "isInvalid", title: "Hatalı (invalid)", type: "switch" },
694
+ { name: "isReadOnly", title: "Salt okunur", type: "switch" },
695
+ ];
696
+ const INPUT_PROPS = [
697
+ { name: "label", title: "Etiket (FormControlLabel)", type: "text" },
698
+ { name: "placeholder", title: "Placeholder (InputField)", type: "text" },
699
+ {
700
+ name: "type",
701
+ title: "Input tipi",
702
+ type: "dropdown",
703
+ options: [
704
+ { label: "Metin (text)", value: "text" },
705
+ { label: "Şifre (password)", value: "password" },
706
+ { label: "E-posta (email)", value: "email" },
707
+ { label: "Sayı (number)", value: "number" },
708
+ ],
709
+ },
710
+ {
711
+ name: "variant",
712
+ title: "Görünüm (Input variant)",
713
+ type: "dropdown",
714
+ options: [
715
+ { label: "Outline", value: "outline" },
716
+ { label: "Underlined", value: "underlined" },
717
+ { label: "Rounded", value: "rounded" },
718
+ ],
719
+ },
720
+ {
721
+ name: "size",
722
+ title: "Boyut",
723
+ type: "dropdown",
724
+ options: [
725
+ { label: "SM", value: "sm" },
726
+ { label: "MD", value: "md" },
727
+ { label: "LG", value: "lg" },
728
+ { label: "XL", value: "xl" },
729
+ ],
730
+ },
731
+ {
732
+ name: "helperText",
733
+ title: "Yardımcı metin (FormControlHelper)",
734
+ type: "text",
735
+ },
736
+ { name: "errorText", title: "Hata metni (FormControlError)", type: "text" },
737
+ ];
738
+ const SELECT_PROPS = [
739
+ { name: "label", title: "Etiket (FormControlLabel)", type: "text" },
740
+ { name: "placeholder", title: "Placeholder (SelectTrigger)", type: "text" },
741
+ {
742
+ name: "options",
743
+ title: "Seçenekler (SelectItem)",
744
+ type: "array",
745
+ props: [
746
+ { name: "label", title: "Etiket", type: "text" },
747
+ { name: "value", title: "Değer", type: "text" },
748
+ ],
749
+ },
750
+ {
751
+ name: "variant",
752
+ title: "Görünüm (Select variant)",
753
+ type: "dropdown",
754
+ options: [
755
+ { label: "Outline", value: "outline" },
756
+ { label: "Underlined", value: "underlined" },
757
+ { label: "Rounded", value: "rounded" },
758
+ ],
759
+ },
760
+ {
761
+ name: "size",
762
+ title: "Boyut",
763
+ type: "dropdown",
764
+ options: [
765
+ { label: "SM", value: "sm" },
766
+ { label: "MD", value: "md" },
767
+ { label: "LG", value: "lg" },
768
+ { label: "XL", value: "xl" },
769
+ ],
770
+ },
771
+ {
772
+ name: "helperText",
773
+ title: "Yardımcı metin (FormControlHelper)",
774
+ type: "text",
775
+ },
776
+ ];
777
+ const SWITCH_PROPS = [
778
+ { name: "label", title: "Etiket", type: "text" },
779
+ {
780
+ name: "size",
781
+ title: "Boyut",
782
+ type: "dropdown",
783
+ options: [
784
+ { label: "SM", value: "sm" },
785
+ { label: "MD", value: "md" },
786
+ { label: "LG", value: "lg" },
787
+ ],
788
+ },
789
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
790
+ ];
791
+ const CHECKBOX_PROPS = [
792
+ { name: "label", title: "Tekil etiket (CheckboxLabel)", type: "text" },
793
+ {
794
+ name: "options",
795
+ title: "Grup seçenekleri (CheckboxGroup)",
796
+ type: "array",
797
+ props: [
798
+ { name: "label", title: "Etiket", type: "text" },
799
+ { name: "value", title: "Değer", type: "text" },
800
+ ],
801
+ },
802
+ {
803
+ name: "size",
804
+ title: "Boyut",
805
+ type: "dropdown",
806
+ options: [
807
+ { label: "SM", value: "sm" },
808
+ { label: "MD", value: "md" },
809
+ { label: "LG", value: "lg" },
810
+ ],
811
+ },
812
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
813
+ ];
814
+ const RADIO_PROPS = [
815
+ {
816
+ name: "options",
817
+ title: "Seçenekler (RadioGroup + Radio)",
818
+ type: "array",
819
+ props: [
820
+ { name: "label", title: "Etiket (RadioLabel)", type: "text" },
821
+ { name: "value", title: "Değer", type: "text" },
822
+ ],
823
+ },
824
+ {
825
+ name: "size",
826
+ title: "Boyut",
827
+ type: "dropdown",
828
+ options: [
829
+ { label: "SM", value: "sm" },
830
+ { label: "MD", value: "md" },
831
+ { label: "LG", value: "lg" },
832
+ ],
833
+ },
834
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
835
+ ];
836
+ const TEXTAREA_PROPS = [
837
+ { name: "label", title: "Etiket (FormControlLabel)", type: "text" },
838
+ { name: "placeholder", title: "Placeholder (TextareaInput)", type: "text" },
839
+ {
840
+ name: "size",
841
+ title: "Boyut",
842
+ type: "dropdown",
843
+ options: [
844
+ { label: "SM", value: "sm" },
845
+ { label: "MD", value: "md" },
846
+ { label: "LG", value: "lg" },
847
+ { label: "XL", value: "xl" },
848
+ ],
849
+ },
850
+ {
851
+ name: "numberOfLines",
852
+ title: "Satır yüksekliği",
853
+ type: "number",
854
+ description: "Varsayılan görünen satır sayısı.",
855
+ },
856
+ {
857
+ name: "helperText",
858
+ title: "Yardımcı metin (FormControlHelper)",
859
+ type: "text",
860
+ },
861
+ { name: "errorText", title: "Hata metni (FormControlError)", type: "text" },
862
+ ];
863
+ const SLIDER_PROPS = [
864
+ { name: "value", title: "Başlangıç değeri (SliderThumb)", type: "number" },
865
+ { name: "minValue", title: "Minimum değer", type: "number" },
866
+ { name: "maxValue", title: "Maksimum değer", type: "number" },
867
+ { name: "step", title: "Adım büyüklüğü", type: "number" },
868
+ {
869
+ name: "size",
870
+ title: "Boyut (SliderTrack)",
871
+ type: "dropdown",
872
+ options: [
873
+ { label: "SM", value: "sm" },
874
+ { label: "MD", value: "md" },
875
+ { label: "LG", value: "lg" },
876
+ ],
877
+ },
878
+ {
879
+ name: "orientation",
880
+ title: "Yön",
881
+ type: "dropdown",
882
+ options: [
883
+ { label: "Yatay (horizontal)", value: "horizontal" },
884
+ { label: "Dikey (vertical)", value: "vertical" },
885
+ ],
886
+ },
887
+ { name: "showLabel", title: "Değer etiketini göster", type: "switch" },
888
+ { name: "isDisabled", title: "Devre dışı", type: "switch" },
889
+ ];
890
+ const CALENDAR_PROPS = [
891
+ { name: "label", title: "Etiket (FormControlLabel)", type: "text" },
892
+ {
893
+ name: "mode",
894
+ title: "Seçim modu",
895
+ type: "dropdown",
896
+ options: [
897
+ { label: "Tekli (single)", value: "single" },
898
+ { label: "Çoklu (multiple)", value: "multiple" },
899
+ { label: "Aralık (range)", value: "range" },
900
+ ],
901
+ },
902
+ { name: "helperText", title: "Yardımcı metin", type: "text" },
903
+ ...FORM_CONTROL_PROPS,
904
+ ...GLOBAL_PROPS,
905
+ ];
906
+ const DATETIMEPICKER_PROPS = [
907
+ { name: "label", title: "Etiket (FormControlLabel)", type: "text" },
908
+ {
909
+ name: "mode",
910
+ title: "Seçim modu",
911
+ type: "dropdown",
912
+ options: [
913
+ { label: "Tarih (date)", value: "date" },
914
+ { label: "Saat (time)", value: "time" },
915
+ { label: "Tarih ve Saat (datetime)", value: "datetime" },
916
+ ],
917
+ },
918
+ { name: "helperText", title: "Yardımcı metin", type: "text" },
919
+ ...FORM_CONTROL_PROPS,
920
+ ...GLOBAL_PROPS,
921
+ ];
922
+ // ─── Base Component Registry ──────────────────────────────────────────────────
923
+ export const BASE_COMPONENTS = [
924
+ // ═══════════════════════════════════════════════════════════════
925
+ // LAYOUT — Wrappers
926
+ // ═══════════════════════════════════════════════════════════════
927
+ {
928
+ id: "container",
929
+ name: "container",
930
+ title: "Container (Box)",
931
+ description: "İçerik kapsayıcı. Max-width ve padding sağlar.",
932
+ type: "wrapper",
933
+ droppable: true,
934
+ icon: "container-software",
935
+ isMobile: false,
936
+ definition: { props: CONTAINER_PROPS },
937
+ },
938
+ {
939
+ id: "array-repeater",
940
+ name: "array-repeater",
941
+ title: "Array Repeater",
942
+ description: "Dizi verisini tekrarlayan öğe. Döngü oluşturur.",
943
+ type: "wrapper",
944
+ droppable: true,
945
+ icon: "repeat",
946
+ isMobile: true,
947
+ definition: {
948
+ props: [
949
+ {
950
+ name: "repeater",
951
+ title: "Veri kaynağı (array key)",
952
+ type: "text",
953
+ description: "Context veya sayfadan gelen array key adı.",
954
+ },
955
+ ...GLOBAL_PROPS,
956
+ ],
957
+ },
958
+ },
959
+ {
960
+ id: "box",
961
+ name: "box",
962
+ title: "Box",
963
+ description: "Temel kapsayıcı bileşen (View / div).",
964
+ type: "wrapper",
965
+ droppable: true,
966
+ icon: "square",
967
+ isMobile: true,
968
+ definition: { props: [...GLOBAL_PROPS] },
969
+ },
970
+ {
971
+ id: "center",
972
+ name: "center",
973
+ title: "Center",
974
+ description: "İçeriği yatay ve dikey olarak ortalar.",
975
+ type: "wrapper",
976
+ droppable: true,
977
+ icon: "crosshair",
978
+ isMobile: true,
979
+ definition: { props: [...GLOBAL_PROPS] },
980
+ },
981
+ {
982
+ id: "hstack",
983
+ name: "hstack",
984
+ title: "HStack",
985
+ description: "Çocukları yatay sıralar (flex-row). Boşluk ve ters sıralama desteği.",
986
+ type: "wrapper",
987
+ droppable: true,
988
+ icon: "align-horizontal-left",
989
+ isMobile: true,
990
+ definition: { props: [...HSTACK_PROPS] },
991
+ },
992
+ {
993
+ id: "vstack",
994
+ name: "vstack",
995
+ title: "VStack",
996
+ description: "Çocukları dikey sıralar (flex-column). Boşluk ve ters sıralama desteği.",
997
+ type: "wrapper",
998
+ droppable: true,
999
+ icon: "align-vertical-top",
1000
+ isMobile: true,
1001
+ definition: { props: [...VSTACK_PROPS] },
1002
+ },
1003
+ {
1004
+ id: "grid",
1005
+ name: "grid",
1006
+ title: "Grid",
1007
+ description: "CSS Grid kapsayıcı bileşen. numColumns ile ızgara oluşturur.",
1008
+ type: "wrapper",
1009
+ droppable: true,
1010
+ icon: "layout-grid",
1011
+ isMobile: true,
1012
+ definition: {
1013
+ props: [
1014
+ {
1015
+ name: "numColumns",
1016
+ title: "Sütun sayısı",
1017
+ type: "number",
1018
+ description: "Grid ızgara sütun sayısı (örn: 2, 3, 4).",
1019
+ },
1020
+ {
1021
+ name: "gap",
1022
+ title: "Boşluk (gap)",
1023
+ type: "dropdown",
1024
+ options: [
1025
+ { label: "Yok", value: "0" },
1026
+ { label: "XS", value: "xs" },
1027
+ { label: "SM", value: "sm" },
1028
+ { label: "MD", value: "md" },
1029
+ { label: "LG", value: "lg" },
1030
+ { label: "XL", value: "xl" },
1031
+ ],
1032
+ },
1033
+ ...GLOBAL_PROPS,
1034
+ ],
1035
+ },
1036
+ },
1037
+ {
1038
+ id: "pressable",
1039
+ name: "pressable",
1040
+ title: "Pressable",
1041
+ description: "Tıklanabilir kapsayıcı bileşen. İçine öğe eklenebilir.",
1042
+ type: "wrapper",
1043
+ droppable: true,
1044
+ icon: "mouse-pointer",
1045
+ isMobile: true,
1046
+ definition: { props: [...GLOBAL_PROPS] },
1047
+ },
1048
+ {
1049
+ id: "row",
1050
+ name: "row",
1051
+ title: "Row (HStack)",
1052
+ description: "Yatay düzen satırı. Sütunları barındırır. Responsive breakpoint desteği.",
1053
+ type: "wrapper",
1054
+ droppable: true,
1055
+ icon: "align-horizontal-left",
1056
+ isMobile: true,
1057
+ definition: {
1058
+ props: [
1059
+ {
1060
+ name: "xl",
1061
+ title: "XL ekran (≥1280px)",
1062
+ type: "object",
1063
+ props: ROW_SCREEN_CONFIG_PROPS,
1064
+ },
1065
+ {
1066
+ name: "lg",
1067
+ title: "LG ekran (≥1024px)",
1068
+ type: "object",
1069
+ props: ROW_SCREEN_CONFIG_PROPS,
1070
+ },
1071
+ {
1072
+ name: "md",
1073
+ title: "MD ekran (≥768px)",
1074
+ type: "object",
1075
+ props: ROW_SCREEN_CONFIG_PROPS,
1076
+ },
1077
+ {
1078
+ name: "sm",
1079
+ title: "SM ekran (≥640px)",
1080
+ type: "object",
1081
+ props: ROW_SCREEN_CONFIG_PROPS,
1082
+ },
1083
+ {
1084
+ name: "xs",
1085
+ title: "XS ekran (<640px)",
1086
+ type: "object",
1087
+ props: ROW_SCREEN_CONFIG_PROPS,
1088
+ },
1089
+ ...GLOBAL_PROPS,
1090
+ ],
1091
+ },
1092
+ },
1093
+ {
1094
+ id: "column",
1095
+ name: "column",
1096
+ title: "Column (Box)",
1097
+ description: "12-sütun ızgara sistemi. Her kırılım noktası için ayrı genişlik, offset ve sıralama.",
1098
+ type: "wrapper",
1099
+ droppable: true,
1100
+ icon: "dashboard",
1101
+ isMobile: true,
1102
+ definition: {
1103
+ props: COLUMN_PROPS,
1104
+ defaults: { xl: { size: 12 } },
1105
+ preview: { type: "number", value: "xl.size", suffix: "/12" },
1106
+ },
1107
+ },
1108
+ {
1109
+ id: "section",
1110
+ name: "section",
1111
+ title: "Section",
1112
+ description: "Sayfa bölümü (<section>). Container ile sarılı.",
1113
+ type: "wrapper",
1114
+ droppable: true,
1115
+ icon: "highlights",
1116
+ isMobile: true,
1117
+ definition: {
1118
+ groups: [{ title: "Container ayarları", props: CONTAINER_PROPS }],
1119
+ props: [
1120
+ { name: "title", title: "Başlık", type: "text" },
1121
+ { name: "description", title: "Kısa açıklama", type: "long-text" },
1122
+ { name: "anchor", title: "Bağlantı (anchor)", type: "link" },
1123
+ ...GLOBAL_PROPS,
1124
+ ],
1125
+ preview: { type: "text", value: "title" },
1126
+ },
1127
+ },
1128
+ {
1129
+ id: "view",
1130
+ name: "view",
1131
+ title: "View",
1132
+ description: "Sayfa tasarım alanı. Dinamik içerik görüntüler.",
1133
+ type: "wrapper",
1134
+ droppable: false,
1135
+ icon: "detail-view",
1136
+ isMobile: true,
1137
+ definition: {
1138
+ props: [
1139
+ {
1140
+ name: "title",
1141
+ title: "Gösterim başlığı",
1142
+ type: "text",
1143
+ description: "Admin panelinde gösterilecek başlık.",
1144
+ },
1145
+ ...GLOBAL_PROPS,
1146
+ ],
1147
+ preview: { type: "text", value: "title" },
1148
+ },
1149
+ },
1150
+ // ═══════════════════════════════════════════════════════════════
1151
+ // TYPOGRAPHY
1152
+ // ═══════════════════════════════════════════════════════════════
1153
+ {
1154
+ id: "heading",
1155
+ name: "heading",
1156
+ title: "Heading",
1157
+ description: "Başlık bileşeni. H1–H6 ve xs–5xl boyut seçeneği.",
1158
+ type: "element",
1159
+ droppable: false,
1160
+ icon: "app-switcher",
1161
+ isMobile: true,
1162
+ definition: {
1163
+ props: HEADING_PROPS,
1164
+ preview: { type: "text", value: "children" },
1165
+ },
1166
+ },
1167
+ {
1168
+ id: "paragraph",
1169
+ name: "paragraph",
1170
+ title: "Text",
1171
+ description: "Metin bileşeni. 2xs–6xl boyut, bold, italic desteği.",
1172
+ type: "element",
1173
+ droppable: false,
1174
+ icon: "table",
1175
+ isMobile: true,
1176
+ definition: {
1177
+ props: TEXT_PROPS,
1178
+ preview: { type: "text", value: "children" },
1179
+ },
1180
+ },
1181
+ {
1182
+ id: "html",
1183
+ name: "html",
1184
+ title: "HTML",
1185
+ description: "Ham HTML içerik alanı. Rich text / editor çıktısı.",
1186
+ type: "element",
1187
+ droppable: false,
1188
+ icon: "component",
1189
+ isMobile: true,
1190
+ definition: {
1191
+ props: [
1192
+ { name: "content", title: "HTML İçerik", type: "editor" },
1193
+ ...GLOBAL_PROPS,
1194
+ ],
1195
+ preview: { type: "text", value: "content" },
1196
+ },
1197
+ },
1198
+ {
1199
+ id: "icon",
1200
+ name: "icon",
1201
+ title: "Icon",
1202
+ description: "Lucide ikon bileşeni. as prop ile ikon adı verilir.",
1203
+ type: "element",
1204
+ droppable: false,
1205
+ icon: "shapes",
1206
+ isMobile: true,
1207
+ definition: {
1208
+ props: [...ICON_PROPS],
1209
+ preview: { type: "text", value: "as" },
1210
+ },
1211
+ },
1212
+ // ═══════════════════════════════════════════════════════════════
1213
+ // MEDIA
1214
+ // ═══════════════════════════════════════════════════════════════
1215
+ {
1216
+ id: "image",
1217
+ name: "image",
1218
+ title: "Image",
1219
+ description: "Görsel bileşeni. Boyut ve kırpma seçenekleri.",
1220
+ type: "element",
1221
+ droppable: false,
1222
+ icon: "image",
1223
+ isMobile: true,
1224
+ definition: {
1225
+ props: [
1226
+ { name: "source", title: "Görsel (Image src)", type: "image" },
1227
+ {
1228
+ name: "alt",
1229
+ title: "Alternatif metin",
1230
+ type: "text",
1231
+ description: "Erişilebilirlik ve SEO için.",
1232
+ },
1233
+ {
1234
+ name: "size",
1235
+ title: "Boyut",
1236
+ type: "dropdown",
1237
+ options: [
1238
+ { value: "2xs", label: "2XS (24px)" },
1239
+ { value: "xs", label: "XS (40px)" },
1240
+ { value: "sm", label: "SM (64px)" },
1241
+ { value: "md", label: "MD (80px)" },
1242
+ { value: "lg", label: "LG (96px)" },
1243
+ { value: "xl", label: "XL (128px)" },
1244
+ { value: "2xl", label: "2XL (256px)" },
1245
+ { value: "full", label: "Tam genişlik (full)" },
1246
+ { value: "none", label: "Özel (className)" },
1247
+ ],
1248
+ },
1249
+ {
1250
+ name: "resizeMode",
1251
+ title: "Yeniden boyutlandırma",
1252
+ type: "dropdown",
1253
+ options: [
1254
+ { value: "cover", label: "Cover" },
1255
+ { value: "contain", label: "Contain" },
1256
+ { value: "stretch", label: "Stretch" },
1257
+ { value: "center", label: "Center" },
1258
+ ],
1259
+ },
1260
+ {
1261
+ name: "rounded",
1262
+ title: "Yuvarlaklık (rounded)",
1263
+ type: "dropdown",
1264
+ options: [
1265
+ { value: "none", label: "Yok" },
1266
+ { value: "sm", label: "SM" },
1267
+ { value: "md", label: "MD" },
1268
+ { value: "lg", label: "LG" },
1269
+ { value: "xl", label: "XL" },
1270
+ { value: "2xl", label: "2XL" },
1271
+ { value: "3xl", label: "3XL" },
1272
+ { value: "full", label: "Tam yuvarlak" },
1273
+ ],
1274
+ },
1275
+ ...GLOBAL_PROPS,
1276
+ ],
1277
+ preview: { type: "image", value: "source.src" },
1278
+ },
1279
+ },
1280
+ {
1281
+ id: "video",
1282
+ name: "video",
1283
+ title: "Video",
1284
+ description: "Video oynatıcı bileşeni.",
1285
+ type: "element",
1286
+ droppable: false,
1287
+ icon: "vid-play",
1288
+ isMobile: true,
1289
+ definition: {
1290
+ props: [
460
1291
  { name: "source", title: "Video", type: "video" },
1292
+ { name: "autoPlay", title: "Otomatik oynat", type: "switch" },
1293
+ { name: "muted", title: "Sessiz", type: "switch" },
1294
+ { name: "loop", title: "Döngü", type: "switch" },
1295
+ { name: "controls", title: "Kontroller göster", type: "switch" },
1296
+ ...GLOBAL_PROPS,
1297
+ ],
1298
+ preview: { type: "video", value: "source.src" },
1299
+ },
1300
+ },
1301
+ {
1302
+ id: "iframe",
1303
+ name: "iframe",
1304
+ title: "Iframe",
1305
+ description: "Harici içerik yerleştirme alanı (sadece web).",
1306
+ type: "element",
1307
+ droppable: false,
1308
+ icon: "vid-full-screen-on",
1309
+ isMobile: false,
1310
+ definition: {
1311
+ props: [
1312
+ { name: "children", title: "Iframe URL", type: "long-text" },
1313
+ { name: "title", title: "Başlık (erişilebilirlik)", type: "text" },
1314
+ ...GLOBAL_PROPS,
1315
+ ],
1316
+ preview: { type: "text", value: "children" },
1317
+ },
1318
+ },
1319
+ // ═══════════════════════════════════════════════════════════════
1320
+ // INTERACTIVE
1321
+ // ═══════════════════════════════════════════════════════════════
1322
+ {
1323
+ id: "button",
1324
+ name: "button",
1325
+ title: "Button",
1326
+ description: "Buton bileşeni. ButtonText ile bütünleşik.",
1327
+ type: "element",
1328
+ droppable: false,
1329
+ icon: "archive",
1330
+ isMobile: true,
1331
+ definition: {
1332
+ props: [...BUTTON_PROPS, ...GLOBAL_PROPS],
1333
+ preview: { type: "text", value: "children" },
1334
+ },
1335
+ },
1336
+ {
1337
+ id: "link",
1338
+ name: "link",
1339
+ title: "Link",
1340
+ description: "Bağlantı bileşeni. İçine öğe eklenebilir.",
1341
+ type: "element",
1342
+ droppable: true,
1343
+ icon: "link",
1344
+ isMobile: true,
1345
+ definition: {
1346
+ props: [
1347
+ { name: "source", title: "Bağlantı (Link href)", type: "link" },
1348
+ { name: "isExternal", title: "Yeni sekmede aç", type: "switch" },
1349
+ ...GLOBAL_PROPS,
1350
+ ],
1351
+ preview: { type: "link", value: "source.href" },
1352
+ },
1353
+ },
1354
+ {
1355
+ id: "fab",
1356
+ name: "fab",
1357
+ title: "FAB",
1358
+ description: "Floating Action Button. FabIcon + FabLabel bileşeni.",
1359
+ type: "element",
1360
+ droppable: false,
1361
+ icon: "plus-circle",
1362
+ isMobile: true,
1363
+ definition: {
1364
+ props: [...FAB_PROPS],
1365
+ preview: { type: "text", value: "label" },
1366
+ },
1367
+ },
1368
+ // ═══════════════════════════════════════════════════════════════
1369
+ // DISPLAY
1370
+ // ═══════════════════════════════════════════════════════════════
1371
+ {
1372
+ id: "card",
1373
+ name: "card",
1374
+ title: "Card",
1375
+ description: "Kart bileşeni. Başlık, görsel, açıklama ve link içerir.",
1376
+ type: "element",
1377
+ droppable: true,
1378
+ icon: "issue",
1379
+ isMobile: true,
1380
+ definition: {
1381
+ props: [...CARD_PROPS, ...GLOBAL_PROPS],
1382
+ preview: { type: "text", value: "title" },
1383
+ },
1384
+ },
1385
+ {
1386
+ id: "card-list",
1387
+ name: "card-list",
1388
+ title: "Card List",
1389
+ description: "Kart listesi. Grid düzeninde çoklu kart gösterir.",
1390
+ type: "element",
1391
+ droppable: false,
1392
+ icon: "issues",
1393
+ isMobile: true,
1394
+ definition: {
1395
+ groups: [{ title: "Grid sütun ayarları (Column)", props: COLUMN_PROPS }],
1396
+ props: [
1397
+ {
1398
+ name: "cards",
1399
+ title: "Kart verileri",
1400
+ type: "array",
1401
+ props: CARD_PROPS,
1402
+ },
1403
+ ...GLOBAL_PROPS,
1404
+ ],
1405
+ },
1406
+ },
1407
+ {
1408
+ id: "avatar",
1409
+ name: "avatar",
1410
+ title: "Avatar",
1411
+ description: "Profil resmi. Avatar + AvatarImage + AvatarFallbackText.",
1412
+ type: "element",
1413
+ droppable: false,
1414
+ icon: "user-avatar-circle",
1415
+ isMobile: true,
1416
+ definition: {
1417
+ props: [...AVATAR_PROPS, ...GLOBAL_PROPS],
1418
+ preview: { type: "text", value: "name" },
1419
+ },
1420
+ },
1421
+ {
1422
+ id: "badge",
1423
+ name: "badge",
1424
+ title: "Badge",
1425
+ description: "Durum etiketi. Badge + BadgeText bileşeni.",
1426
+ type: "element",
1427
+ droppable: false,
1428
+ icon: "label",
1429
+ isMobile: true,
1430
+ definition: {
1431
+ props: [...BADGE_PROPS, ...GLOBAL_PROPS],
1432
+ preview: { type: "text", value: "text" },
1433
+ },
1434
+ },
1435
+ {
1436
+ id: "divider",
1437
+ name: "divider",
1438
+ title: "Divider",
1439
+ description: "Ayırıcı çizgi. Yatay veya dikey.",
1440
+ type: "element",
1441
+ droppable: false,
1442
+ icon: "subtract",
1443
+ isMobile: true,
1444
+ definition: { props: [...DIVIDER_PROPS, ...GLOBAL_PROPS] },
1445
+ },
1446
+ {
1447
+ id: "table",
1448
+ name: "table",
1449
+ title: "Table",
1450
+ description: "Tablo bileşeni. TableHeader, TableBody, TableRow, TableHead, TableData.",
1451
+ type: "element",
1452
+ droppable: false,
1453
+ icon: "table",
1454
+ isMobile: true,
1455
+ definition: {
1456
+ props: [
1457
+ {
1458
+ name: "dataKey",
1459
+ title: "Veri kaynağı (array key)",
1460
+ type: "array",
1461
+ description: "Context veya sayfadan gelen array key adı.",
1462
+ },
1463
+ {
1464
+ name: "columns",
1465
+ title: "Sütunlar (TableHead)",
1466
+ type: "array",
1467
+ props: TABLE_COLUMN_PROPS,
1468
+ },
1469
+ {
1470
+ name: "showCaption",
1471
+ title: "Alt açıklama göster (TableCaption)",
1472
+ type: "switch",
1473
+ },
1474
+ { name: "caption", title: "Alt açıklama metni", type: "text" },
1475
+ ...GLOBAL_PROPS,
1476
+ ],
1477
+ },
1478
+ },
1479
+ {
1480
+ id: "skeleton",
1481
+ name: "skeleton",
1482
+ title: "Skeleton",
1483
+ description: "Yükleniyor iskelet animasyonu. Skeleton / SkeletonText bileşeni.",
1484
+ type: "element",
1485
+ droppable: false,
1486
+ icon: "loading",
1487
+ isMobile: true,
1488
+ definition: { props: [...SKELETON_PROPS] },
1489
+ },
1490
+ // ═══════════════════════════════════════════════════════════════
1491
+ // FEEDBACK
1492
+ // ═══════════════════════════════════════════════════════════════
1493
+ {
1494
+ id: "spinner",
1495
+ name: "spinner",
1496
+ title: "Spinner",
1497
+ description: "Yükleniyor göstergesi.",
1498
+ type: "element",
1499
+ droppable: false,
1500
+ icon: "refresh",
1501
+ isMobile: true,
1502
+ definition: { props: [...SPINNER_PROPS, ...GLOBAL_PROPS] },
1503
+ },
1504
+ {
1505
+ id: "alert",
1506
+ name: "alert",
1507
+ title: "Alert",
1508
+ description: "Uyarı mesajı. Alert + AlertIcon + AlertText bileşeni.",
1509
+ type: "element",
1510
+ droppable: false,
1511
+ icon: "warning",
1512
+ isMobile: true,
1513
+ definition: {
1514
+ groups: [
1515
+ {
1516
+ title: "AlertIcon",
1517
+ props: [
1518
+ {
1519
+ name: "iconName",
1520
+ title: "İkon adı",
1521
+ type: "text",
1522
+ description: "Lucide icon adı. Boş bırakılırsa varsayılan durum ikonu.",
1523
+ },
1524
+ ],
1525
+ },
1526
+ ],
1527
+ props: [...ALERT_PROPS, ...GLOBAL_PROPS],
1528
+ preview: { type: "text", value: "text" },
1529
+ },
1530
+ },
1531
+ {
1532
+ id: "progress",
1533
+ name: "progress",
1534
+ title: "Progress",
1535
+ description: "İlerleme çubuğu. Progress + ProgressFilledTrack.",
1536
+ type: "element",
1537
+ droppable: false,
1538
+ icon: "graph-bar",
1539
+ isMobile: true,
1540
+ definition: {
1541
+ props: [...PROGRESS_PROPS, ...GLOBAL_PROPS],
1542
+ preview: { type: "number", value: "value", suffix: "%" },
1543
+ },
1544
+ },
1545
+ {
1546
+ id: "toast",
1547
+ name: "toast",
1548
+ title: "Toast",
1549
+ description: "Bildirim mesajı. ToastTitle + ToastDescription. action, variant, placement desteği.",
1550
+ type: "element",
1551
+ droppable: false,
1552
+ icon: "notification",
1553
+ isMobile: true,
1554
+ definition: {
1555
+ props: [...TOAST_PROPS],
1556
+ preview: { type: "text", value: "title" },
1557
+ },
1558
+ },
1559
+ // ═══════════════════════════════════════════════════════════════
1560
+ // DISCLOSURE
1561
+ // ═══════════════════════════════════════════════════════════════
1562
+ {
1563
+ id: "accordion",
1564
+ name: "accordion",
1565
+ title: "Accordion",
1566
+ description: "Açılır kapanır içerik. AccordionItem + AccordionContent.",
1567
+ type: "element",
1568
+ droppable: false,
1569
+ icon: "chevron-down",
1570
+ isMobile: true,
1571
+ definition: {
1572
+ props: [
1573
+ {
1574
+ name: "type",
1575
+ title: "Açılma modu",
1576
+ type: "dropdown",
1577
+ options: [
1578
+ { label: "Tek (single)", value: "single" },
1579
+ { label: "Çoklu (multiple)", value: "multiple" },
1580
+ ],
1581
+ },
1582
+ {
1583
+ name: "variant",
1584
+ title: "Görünüm (variant)",
1585
+ type: "dropdown",
1586
+ options: [
1587
+ { label: "Dolu (filled)", value: "filled" },
1588
+ { label: "Çerçevesiz (unfilled)", value: "unfilled" },
1589
+ ],
1590
+ },
1591
+ {
1592
+ name: "items",
1593
+ title: "Öğeler (AccordionItem)",
1594
+ type: "array",
1595
+ props: ACCORDION_ITEM_PROPS,
1596
+ },
461
1597
  ...GLOBAL_PROPS,
462
1598
  ],
463
- preview: { type: "video", value: "source.src" },
464
1599
  },
465
1600
  },
466
1601
  {
467
- id: "iframe",
468
- name: "iframe",
469
- title: "Iframe",
470
- description: "Harici URL iframe elementi.",
1602
+ id: "tabs",
1603
+ name: "tabs",
1604
+ title: "Tabs",
1605
+ description: "Sekme bileşeni. TabsList, TabsTrigger, TabsContent, TabsIndicator.",
471
1606
  type: "element",
472
1607
  droppable: false,
473
- icon: "vid-full-screen-on",
474
- isMobile: false,
1608
+ icon: "tab",
1609
+ isMobile: true,
475
1610
  definition: {
476
1611
  props: [
477
- { name: "children", title: "Iframe Adresi", type: "long-text" },
1612
+ {
1613
+ name: "variant",
1614
+ title: "Görünüm (variant)",
1615
+ type: "dropdown",
1616
+ options: [
1617
+ { label: "Altı çizgili (underlined)", value: "underlined" },
1618
+ { label: "Dolu (filled)", value: "filled" },
1619
+ { label: "Çerçeveli (enclosed)", value: "enclosed" },
1620
+ ],
1621
+ },
1622
+ {
1623
+ name: "orientation",
1624
+ title: "Yön (orientation)",
1625
+ type: "dropdown",
1626
+ options: [
1627
+ { label: "Yatay (horizontal)", value: "horizontal" },
1628
+ { label: "Dikey (vertical)", value: "vertical" },
1629
+ ],
1630
+ },
1631
+ {
1632
+ name: "size",
1633
+ title: "Boyut",
1634
+ type: "dropdown",
1635
+ options: [
1636
+ { label: "SM", value: "sm" },
1637
+ { label: "MD", value: "md" },
1638
+ { label: "LG", value: "lg" },
1639
+ ],
1640
+ },
1641
+ {
1642
+ name: "items",
1643
+ title: "Sekmeler (TabsTrigger + TabsContent)",
1644
+ type: "array",
1645
+ props: TABS_ITEM_PROPS,
1646
+ },
478
1647
  ...GLOBAL_PROPS,
479
1648
  ],
480
1649
  },
481
1650
  },
1651
+ // ═══════════════════════════════════════════════════════════════
1652
+ // OVERLAY
1653
+ // ═══════════════════════════════════════════════════════════════
482
1654
  {
483
- id: "button",
484
- name: "button",
485
- title: "Button",
486
- description: "Tıklanabilir buton elementi.",
1655
+ id: "modal",
1656
+ name: "modal",
1657
+ title: "Modal",
1658
+ description: "Modal diyalog. ModalBackdrop, ModalContent, ModalHeader, ModalBody, ModalFooter.",
1659
+ type: "wrapper",
1660
+ droppable: true,
1661
+ icon: "popup",
1662
+ isMobile: true,
1663
+ definition: {
1664
+ props: [...MODAL_PROPS],
1665
+ preview: { type: "text", value: "title" },
1666
+ },
1667
+ },
1668
+ {
1669
+ id: "drawer",
1670
+ name: "drawer",
1671
+ title: "Drawer",
1672
+ description: "Yan panel bileşeni. DrawerBackdrop, DrawerContent, DrawerHeader, DrawerBody.",
1673
+ type: "wrapper",
1674
+ droppable: true,
1675
+ icon: "side-panel-open",
1676
+ isMobile: true,
1677
+ definition: {
1678
+ props: [...DRAWER_PROPS],
1679
+ preview: { type: "text", value: "title" },
1680
+ },
1681
+ },
1682
+ {
1683
+ id: "actionsheet",
1684
+ name: "actionsheet",
1685
+ title: "Actionsheet",
1686
+ description: "Alt eylem paneli. ActionsheetContent, ActionsheetItem, ActionsheetItemText.",
487
1687
  type: "element",
488
1688
  droppable: false,
489
- icon: "archive",
490
- isMobile: false,
1689
+ icon: "overflow-menu-vertical",
1690
+ isMobile: true,
491
1691
  definition: {
492
- props: [...BUTTON_PROPS, ...GLOBAL_PROPS],
493
- preview: { type: "text", value: "children" },
1692
+ props: [
1693
+ {
1694
+ name: "snapPoints",
1695
+ title: "Snap noktaları (snapPoints)",
1696
+ type: "text",
1697
+ description: "Yüzde değerleri, virgülle ayrılmış. Örnek: 50,80. Boş = tam yükseklik.",
1698
+ },
1699
+ {
1700
+ name: "items",
1701
+ title: "Öğeler (ActionsheetItem)",
1702
+ type: "array",
1703
+ props: ACTIONSHEET_ITEM_PROPS,
1704
+ },
1705
+ ...GLOBAL_PROPS,
1706
+ ],
494
1707
  },
495
1708
  },
496
1709
  {
497
- id: "link",
498
- name: "link",
499
- title: "Link",
500
- description: "Tıklanabilir link kapsayıcı.",
1710
+ id: "menu",
1711
+ name: "menu",
1712
+ title: "Menu",
1713
+ description: "Açılır menü bileşeni. MenuBackdrop, MenuItem, MenuItemLabel.",
501
1714
  type: "element",
502
- droppable: true,
503
- icon: "archive",
504
- isMobile: false,
1715
+ droppable: false,
1716
+ icon: "list",
1717
+ isMobile: true,
505
1718
  definition: {
506
- props: [{ name: "source", title: "Link", type: "link" }, ...GLOBAL_PROPS],
507
- preview: { type: "link", value: "source.href" },
1719
+ props: [
1720
+ {
1721
+ name: "placement",
1722
+ title: "Konum (placement)",
1723
+ type: "dropdown",
1724
+ options: [
1725
+ { label: "Üst", value: "top" },
1726
+ { label: "Alt", value: "bottom" },
1727
+ { label: "Sol", value: "left" },
1728
+ { label: "Sağ", value: "right" },
1729
+ ],
1730
+ },
1731
+ {
1732
+ name: "items",
1733
+ title: "Menü öğeleri (MenuItem)",
1734
+ type: "array",
1735
+ props: [
1736
+ { name: "label", title: "Etiket (MenuItemLabel)", type: "text" },
1737
+ { name: "key", title: "Anahtar", type: "text" },
1738
+ { name: "iconName", title: "İkon adı (opsiyonel)", type: "text" },
1739
+ ],
1740
+ },
1741
+ ...GLOBAL_PROPS,
1742
+ ],
508
1743
  },
509
1744
  },
510
1745
  {
511
- id: "card",
512
- name: "card",
513
- title: "Card",
514
- description: "Başlık, alt başlık, açıklama, görsel ve link içeren kart elementi.",
1746
+ id: "popover",
1747
+ name: "popover",
1748
+ title: "Popover",
1749
+ description: "Açılır bilgi balonu. PopoverContent, PopoverArrow, PopoverHeader, PopoverBody.",
515
1750
  type: "element",
516
1751
  droppable: false,
517
- icon: "issue",
518
- isMobile: false,
1752
+ icon: "chat",
1753
+ isMobile: true,
519
1754
  definition: {
520
- props: [...CARD_PROPS, ...GLOBAL_PROPS],
1755
+ props: [
1756
+ { name: "title", title: "Başlık (PopoverHeader)", type: "text" },
1757
+ { name: "body", title: "İçerik (PopoverBody)", type: "long-text" },
1758
+ {
1759
+ name: "placement",
1760
+ title: "Konum (placement)",
1761
+ type: "dropdown",
1762
+ options: [
1763
+ { label: "Üst", value: "top" },
1764
+ { label: "Alt", value: "bottom" },
1765
+ { label: "Sol", value: "left" },
1766
+ { label: "Sağ", value: "right" },
1767
+ ],
1768
+ },
1769
+ {
1770
+ name: "showArrow",
1771
+ title: "Ok göster (PopoverArrow)",
1772
+ type: "switch",
1773
+ },
1774
+ ...GLOBAL_PROPS,
1775
+ ],
521
1776
  preview: { type: "text", value: "title" },
522
1777
  },
523
1778
  },
524
1779
  {
525
- id: "card-list",
526
- name: "card-list",
527
- title: "Card List",
528
- description: "Birden fazla kartı listeleyen element.",
1780
+ id: "alert-dialog",
1781
+ name: "alert-dialog",
1782
+ title: "AlertDialog",
1783
+ description: "Onay diyaloğu. AlertDialogContent, AlertDialogHeader, AlertDialogBody, AlertDialogFooter.",
529
1784
  type: "element",
530
1785
  droppable: false,
531
- icon: "issues",
532
- isMobile: false,
1786
+ icon: "warning",
1787
+ isMobile: true,
533
1788
  definition: {
534
1789
  props: [
1790
+ { name: "title", title: "Başlık (AlertDialogHeader)", type: "text" },
1791
+ { name: "body", title: "Mesaj (AlertDialogBody)", type: "long-text" },
1792
+ { name: "confirmText", title: "Onay butonu metni", type: "text" },
1793
+ { name: "cancelText", title: "İptal butonu metni", type: "text" },
535
1794
  {
536
- name: "cards",
537
- title: "Card verileri",
538
- type: "array",
539
- props: CARD_PROPS,
1795
+ name: "size",
1796
+ title: "Boyut",
1797
+ type: "dropdown",
1798
+ options: [
1799
+ { label: "XS", value: "xs" },
1800
+ { label: "SM", value: "sm" },
1801
+ { label: "MD", value: "md" },
1802
+ { label: "LG", value: "lg" },
1803
+ { label: "Tam ekran (full)", value: "full" },
1804
+ ],
1805
+ },
1806
+ ...GLOBAL_PROPS,
1807
+ ],
1808
+ preview: { type: "text", value: "title" },
1809
+ },
1810
+ },
1811
+ {
1812
+ id: "tooltip",
1813
+ name: "tooltip",
1814
+ title: "Tooltip",
1815
+ description: "Bilgi balonu. TooltipContent, TooltipText bileşeni.",
1816
+ type: "element",
1817
+ droppable: false,
1818
+ icon: "information",
1819
+ isMobile: true,
1820
+ definition: {
1821
+ props: [
1822
+ { name: "text", title: "Tooltip metni (TooltipText)", type: "text" },
1823
+ {
1824
+ name: "placement",
1825
+ title: "Konum (placement)",
1826
+ type: "dropdown",
1827
+ options: [
1828
+ { label: "Üst", value: "top" },
1829
+ { label: "Alt", value: "bottom" },
1830
+ { label: "Sol", value: "left" },
1831
+ { label: "Sağ", value: "right" },
1832
+ ],
1833
+ },
1834
+ ...GLOBAL_PROPS,
1835
+ ],
1836
+ preview: { type: "text", value: "text" },
1837
+ },
1838
+ },
1839
+ // ═══════════════════════════════════════════════════════════════
1840
+ // FORM
1841
+ // ═══════════════════════════════════════════════════════════════
1842
+ {
1843
+ id: "form-control",
1844
+ name: "form-control",
1845
+ title: "FormControl",
1846
+ description: "Form sarmalayıcı. FormControlLabel, FormControlHelper, FormControlError içerir. İçine form öğesi sürüklenebilir.",
1847
+ type: "wrapper",
1848
+ droppable: true,
1849
+ icon: "form",
1850
+ isMobile: true,
1851
+ definition: {
1852
+ props: [
1853
+ { name: "label", title: "Etiket (FormControlLabel)", type: "text" },
1854
+ {
1855
+ name: "helperText",
1856
+ title: "Yardımcı metin (FormControlHelper)",
1857
+ type: "text",
1858
+ },
1859
+ {
1860
+ name: "errorText",
1861
+ title: "Hata metni (FormControlError)",
1862
+ type: "text",
540
1863
  },
1864
+ ...FORM_CONTROL_PROPS,
541
1865
  ...GLOBAL_PROPS,
542
1866
  ],
543
- groups: [{ title: "Sütun ayarları", props: COLUMN_PROPS }],
1867
+ },
1868
+ },
1869
+ {
1870
+ id: "input",
1871
+ name: "input",
1872
+ title: "Input",
1873
+ description: "Metin giriş alanı. FormControl + Input + InputField.",
1874
+ type: "element",
1875
+ droppable: false,
1876
+ icon: "edit",
1877
+ isMobile: true,
1878
+ definition: {
1879
+ groups: [{ title: "FormControl (Durum)", props: FORM_CONTROL_PROPS }],
1880
+ props: [...INPUT_PROPS, ...GLOBAL_PROPS],
1881
+ preview: { type: "text", value: "label" },
1882
+ },
1883
+ },
1884
+ {
1885
+ id: "select",
1886
+ name: "select",
1887
+ title: "Select",
1888
+ description: "Açılır liste. FormControl + Select + SelectTrigger + SelectItem.",
1889
+ type: "element",
1890
+ droppable: false,
1891
+ icon: "chevron-down",
1892
+ isMobile: true,
1893
+ definition: {
1894
+ groups: [{ title: "FormControl (Durum)", props: FORM_CONTROL_PROPS }],
1895
+ props: [...SELECT_PROPS, ...GLOBAL_PROPS],
1896
+ preview: { type: "text", value: "label" },
1897
+ },
1898
+ },
1899
+ {
1900
+ id: "switch",
1901
+ name: "switch",
1902
+ title: "Switch",
1903
+ description: "Toggle anahtar bileşeni.",
1904
+ type: "element",
1905
+ droppable: false,
1906
+ icon: "switcher",
1907
+ isMobile: true,
1908
+ definition: {
1909
+ props: [...SWITCH_PROPS, ...GLOBAL_PROPS],
1910
+ preview: { type: "text", value: "label" },
1911
+ },
1912
+ },
1913
+ {
1914
+ id: "checkbox",
1915
+ name: "checkbox",
1916
+ title: "Checkbox",
1917
+ description: "Çoklu seçim. Checkbox + CheckboxLabel + CheckboxGroup.",
1918
+ type: "element",
1919
+ droppable: false,
1920
+ icon: "checkbox",
1921
+ isMobile: true,
1922
+ definition: {
1923
+ groups: [{ title: "FormControl (Durum)", props: FORM_CONTROL_PROPS }],
1924
+ props: [...CHECKBOX_PROPS, ...GLOBAL_PROPS],
1925
+ preview: { type: "text", value: "label" },
1926
+ },
1927
+ },
1928
+ {
1929
+ id: "radio",
1930
+ name: "radio",
1931
+ title: "Radio",
1932
+ description: "Tek seçim grubu. RadioGroup + Radio + RadioLabel.",
1933
+ type: "element",
1934
+ droppable: false,
1935
+ icon: "radio",
1936
+ isMobile: true,
1937
+ definition: {
1938
+ groups: [{ title: "FormControl (Durum)", props: FORM_CONTROL_PROPS }],
1939
+ props: [...RADIO_PROPS, ...GLOBAL_PROPS],
1940
+ },
1941
+ },
1942
+ {
1943
+ id: "textarea",
1944
+ name: "textarea",
1945
+ title: "Textarea",
1946
+ description: "Çok satırlı metin. FormControl + Textarea + TextareaInput.",
1947
+ type: "element",
1948
+ droppable: false,
1949
+ icon: "edit",
1950
+ isMobile: true,
1951
+ definition: {
1952
+ groups: [{ title: "FormControl (Durum)", props: FORM_CONTROL_PROPS }],
1953
+ props: [...TEXTAREA_PROPS, ...GLOBAL_PROPS],
1954
+ preview: { type: "text", value: "label" },
1955
+ },
1956
+ },
1957
+ {
1958
+ id: "slider",
1959
+ name: "slider",
1960
+ title: "Slider",
1961
+ description: "Kaydırma çubuğu. Slider + SliderTrack + SliderFilledTrack + SliderThumb.",
1962
+ type: "element",
1963
+ droppable: false,
1964
+ icon: "slider",
1965
+ isMobile: true,
1966
+ definition: {
1967
+ groups: [{ title: "FormControl (Durum)", props: FORM_CONTROL_PROPS }],
1968
+ props: [...SLIDER_PROPS, ...GLOBAL_PROPS],
1969
+ preview: { type: "number", value: "value" },
1970
+ },
1971
+ },
1972
+ {
1973
+ id: "calendar",
1974
+ name: "calendar",
1975
+ title: "Calendar",
1976
+ description: "Takvim bileşeni. Tekli, çoklu veya aralık seçimi.",
1977
+ type: "element",
1978
+ droppable: false,
1979
+ icon: "calendar",
1980
+ isMobile: true,
1981
+ definition: {
1982
+ props: [...CALENDAR_PROPS],
1983
+ preview: { type: "text", value: "label" },
1984
+ },
1985
+ },
1986
+ {
1987
+ id: "date-time-picker",
1988
+ name: "date-time-picker",
1989
+ title: "DateTimePicker",
1990
+ description: "Tarih ve saat seçici. Tarih, saat veya her ikisi için seçim.",
1991
+ type: "element",
1992
+ droppable: false,
1993
+ icon: "time",
1994
+ isMobile: true,
1995
+ definition: {
1996
+ props: [...DATETIMEPICKER_PROPS],
1997
+ preview: { type: "text", value: "label" },
544
1998
  },
545
1999
  },
546
2000
  ];