@texturehq/edges 0.0.19 → 0.0.21
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.
|
@@ -1,5 +1,942 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.0.
|
|
3
|
-
"generatedAt": "2025-08-
|
|
4
|
-
"components": [
|
|
2
|
+
"version": "0.0.21",
|
|
3
|
+
"generatedAt": "2025-08-14T15:00:59.001Z",
|
|
4
|
+
"components": [
|
|
5
|
+
{
|
|
6
|
+
"name": "Autocomplete",
|
|
7
|
+
"importRoot": "@texturehq/edges",
|
|
8
|
+
"importPath": "@texturehq/edges/components/Autocomplete",
|
|
9
|
+
"description": "Autocomplete Text input with typeahead suggestions and keyboard navigation.",
|
|
10
|
+
"props": [
|
|
11
|
+
{
|
|
12
|
+
"name": "label",
|
|
13
|
+
"type": "string"
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
"name": "staticItems",
|
|
17
|
+
"type": "Item[]"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"name": "sections",
|
|
21
|
+
"type": "Section[]"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "selectedKey",
|
|
25
|
+
"type": "Key | null"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"name": "defaultSelectedKey",
|
|
29
|
+
"type": "Key | null"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "onSelectionChange",
|
|
33
|
+
"type": "(key: Key | null) => void"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "requestConfig",
|
|
37
|
+
"type": "AutocompleteRequestConfig"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "defaultFilter",
|
|
41
|
+
"type": "(textValue: string, inputValue: string) => boolean"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"name": "placeholder",
|
|
45
|
+
"type": "string"
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "renderItem",
|
|
49
|
+
"type": "(item: Item) => React.ReactNode"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"name": "renderLeftIcon",
|
|
53
|
+
"type": "(isLoading: boolean) => React.ReactNode"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"name": "errorMessage",
|
|
57
|
+
"type": "string | ((validation: ValidationResult) => string)"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "description",
|
|
61
|
+
"type": "string"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"name": "size",
|
|
65
|
+
"type": "Size"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"name": "tooltip",
|
|
69
|
+
"type": "string"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"name": "isRequired",
|
|
73
|
+
"type": "boolean"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"name": "isDisabled",
|
|
77
|
+
"type": "boolean"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "isInvalid",
|
|
81
|
+
"type": "boolean"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"name": "validationResult",
|
|
85
|
+
"type": "ValidationResult"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"name": "showErrors",
|
|
89
|
+
"type": "boolean"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"name": "autoFocus",
|
|
93
|
+
"type": "boolean"
|
|
94
|
+
}
|
|
95
|
+
]
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"name": "Button",
|
|
99
|
+
"importRoot": "@texturehq/edges",
|
|
100
|
+
"importPath": "@texturehq/edges/components/Button",
|
|
101
|
+
"description": "Renders an Edges Button. When `href` is provided, renders a link-styled button using the same visual system.",
|
|
102
|
+
"props": [
|
|
103
|
+
{
|
|
104
|
+
"name": "variant",
|
|
105
|
+
"type": "\"default\" | \"primary\" | \"secondary\" | \"destructive\" | \"icon\" | \"link\" | \"unstyled\" | \"ghost\""
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"name": "size",
|
|
109
|
+
"type": "Size"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"name": "badgeNumber",
|
|
113
|
+
"type": "number"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"name": "badgeVariant",
|
|
117
|
+
"type": "\"primary\" | \"destructive\""
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"name": "badgePosition",
|
|
121
|
+
"type": "\"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\""
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "fullWidth",
|
|
125
|
+
"type": "boolean"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"name": "icon",
|
|
129
|
+
"type": "IconName"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"name": "iconWeight",
|
|
133
|
+
"type": "\"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\""
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"name": "iconPosition",
|
|
137
|
+
"type": "\"left\" | \"right\""
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"name": "isLoading",
|
|
141
|
+
"type": "boolean"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"name": "loadingText",
|
|
145
|
+
"type": "string"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"name": "loadingIndicator",
|
|
149
|
+
"type": "React.ReactNode"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"name": "className",
|
|
153
|
+
"type": "string"
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "href",
|
|
157
|
+
"type": "string"
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"name": "target",
|
|
161
|
+
"type": "string"
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
"name": "rel",
|
|
165
|
+
"type": "string"
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"name": "style",
|
|
169
|
+
"type": "React.CSSProperties"
|
|
170
|
+
}
|
|
171
|
+
]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"name": "Calendar",
|
|
175
|
+
"importRoot": "@texturehq/edges",
|
|
176
|
+
"importPath": "@texturehq/edges/components/Calendar",
|
|
177
|
+
"description": "Calendar Single-date calendar primitive with Edges styling.",
|
|
178
|
+
"props": []
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"name": "Card",
|
|
182
|
+
"importRoot": "@texturehq/edges",
|
|
183
|
+
"importPath": "@texturehq/edges/components/Card",
|
|
184
|
+
"description": "",
|
|
185
|
+
"props": [
|
|
186
|
+
{
|
|
187
|
+
"name": "heading",
|
|
188
|
+
"type": "React.ReactNode"
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"name": "upperRightText",
|
|
192
|
+
"type": "React.ReactNode"
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"name": "withPadding",
|
|
196
|
+
"type": "boolean"
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"name": "isGhost",
|
|
200
|
+
"type": "boolean"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"name": "children",
|
|
204
|
+
"type": "React.ReactNode"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"name": "className",
|
|
208
|
+
"type": "string"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"name": "isLoading",
|
|
212
|
+
"type": "boolean"
|
|
213
|
+
}
|
|
214
|
+
]
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"name": "Checkbox",
|
|
218
|
+
"importRoot": "@texturehq/edges",
|
|
219
|
+
"importPath": "@texturehq/edges/components/Checkbox",
|
|
220
|
+
"description": "Checkbox Single checkbox with Edges visuals.",
|
|
221
|
+
"props": [
|
|
222
|
+
{
|
|
223
|
+
"name": "children",
|
|
224
|
+
"type": "ReactNode | ((props: CheckboxRenderProps) => ReactNode)"
|
|
225
|
+
}
|
|
226
|
+
]
|
|
227
|
+
},
|
|
228
|
+
{
|
|
229
|
+
"name": "DateField",
|
|
230
|
+
"importRoot": "@texturehq/edges",
|
|
231
|
+
"importPath": "@texturehq/edges/components/DateField",
|
|
232
|
+
"description": "DateField Segmented date input with Edges styling.",
|
|
233
|
+
"props": []
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"name": "DateRangePicker",
|
|
237
|
+
"importRoot": "@texturehq/edges",
|
|
238
|
+
"importPath": "@texturehq/edges/components/DateRangePicker",
|
|
239
|
+
"description": "DateRangePicker Composed date range input with popover calendar.",
|
|
240
|
+
"props": []
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
"name": "Dialog",
|
|
244
|
+
"importRoot": "@texturehq/edges",
|
|
245
|
+
"importPath": "@texturehq/edges/components/Dialog",
|
|
246
|
+
"description": "Dialog Generic modal/dialog surface with Edges defaults.",
|
|
247
|
+
"props": []
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"name": "DialogHeader",
|
|
251
|
+
"importRoot": "@texturehq/edges",
|
|
252
|
+
"importPath": "@texturehq/edges/components/DialogHeader",
|
|
253
|
+
"description": "",
|
|
254
|
+
"props": []
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"name": "Drawer",
|
|
258
|
+
"importRoot": "@texturehq/edges",
|
|
259
|
+
"importPath": "@texturehq/edges/components/Drawer",
|
|
260
|
+
"description": "",
|
|
261
|
+
"props": [
|
|
262
|
+
{
|
|
263
|
+
"name": "title",
|
|
264
|
+
"type": "string"
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"name": "headerContent",
|
|
268
|
+
"type": "React.ReactNode"
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"name": "children",
|
|
272
|
+
"type": "React.ReactNode"
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": "isOpen",
|
|
276
|
+
"type": "boolean"
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"name": "slideInFrom",
|
|
280
|
+
"type": "\"left\" | \"right\""
|
|
281
|
+
},
|
|
282
|
+
{
|
|
283
|
+
"name": "transparentOverlay",
|
|
284
|
+
"type": "boolean"
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"name": "onClose",
|
|
288
|
+
"type": "() => void"
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
"name": "className",
|
|
292
|
+
"type": "string"
|
|
293
|
+
},
|
|
294
|
+
{
|
|
295
|
+
"name": "primaryAction",
|
|
296
|
+
"type": "DrawerAction"
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"name": "secondaryAction",
|
|
300
|
+
"type": "DrawerAction"
|
|
301
|
+
},
|
|
302
|
+
{
|
|
303
|
+
"name": "footerContent",
|
|
304
|
+
"type": "React.ReactNode"
|
|
305
|
+
}
|
|
306
|
+
]
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
"name": "ErrorBoundary",
|
|
310
|
+
"importRoot": "@texturehq/edges",
|
|
311
|
+
"importPath": "@texturehq/edges/components/ErrorBoundary",
|
|
312
|
+
"description": "",
|
|
313
|
+
"props": []
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"name": "Form",
|
|
317
|
+
"importRoot": "@texturehq/edges",
|
|
318
|
+
"importPath": "@texturehq/edges/components/Form",
|
|
319
|
+
"description": "Form Accessibility-first form wrapper with consistent spacing.",
|
|
320
|
+
"props": []
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
"name": "Heading",
|
|
324
|
+
"importRoot": "@texturehq/edges",
|
|
325
|
+
"importPath": "@texturehq/edges/components/Heading",
|
|
326
|
+
"description": "Heading Typography component for page/section headings with size and height options.",
|
|
327
|
+
"props": [
|
|
328
|
+
{
|
|
329
|
+
"name": "tag",
|
|
330
|
+
"type": "keyof JSX.IntrinsicElements"
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
"name": "size",
|
|
334
|
+
"type": "HeadingSize"
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"name": "height",
|
|
338
|
+
"type": "HeadingHeight"
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
"name": "className",
|
|
342
|
+
"type": "string"
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"name": "children",
|
|
346
|
+
"type": "React.ReactNode"
|
|
347
|
+
}
|
|
348
|
+
]
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"name": "Icon",
|
|
352
|
+
"importRoot": "@texturehq/edges",
|
|
353
|
+
"importPath": "@texturehq/edges/components/Icon",
|
|
354
|
+
"description": "",
|
|
355
|
+
"props": []
|
|
356
|
+
},
|
|
357
|
+
{
|
|
358
|
+
"name": "ListBox",
|
|
359
|
+
"importRoot": "@texturehq/edges",
|
|
360
|
+
"importPath": "@texturehq/edges/components/ListBox",
|
|
361
|
+
"description": "ListBox Styled wrapper around `react-aria-components` ListBox and related parts used in dropdowns and menus.",
|
|
362
|
+
"props": []
|
|
363
|
+
},
|
|
364
|
+
{
|
|
365
|
+
"name": "ListBoxItem",
|
|
366
|
+
"importRoot": "@texturehq/edges",
|
|
367
|
+
"importPath": "@texturehq/edges/components/ListBoxItem",
|
|
368
|
+
"description": "ListBoxItem A styled wrapper around `react-aria-components` ListBoxItem with size variants that align with Edges typography.",
|
|
369
|
+
"props": [
|
|
370
|
+
{
|
|
371
|
+
"name": "size",
|
|
372
|
+
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\""
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
"name": "className",
|
|
376
|
+
"type": "string"
|
|
377
|
+
}
|
|
378
|
+
]
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
"name": "Loader",
|
|
382
|
+
"importRoot": "@texturehq/edges",
|
|
383
|
+
"importPath": "@texturehq/edges/components/Loader",
|
|
384
|
+
"description": "",
|
|
385
|
+
"props": [
|
|
386
|
+
{
|
|
387
|
+
"name": "className",
|
|
388
|
+
"type": "string"
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "size",
|
|
392
|
+
"type": "number"
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
"name": "color",
|
|
396
|
+
"type": "string"
|
|
397
|
+
}
|
|
398
|
+
]
|
|
399
|
+
},
|
|
400
|
+
{
|
|
401
|
+
"name": "Logo",
|
|
402
|
+
"importRoot": "@texturehq/edges",
|
|
403
|
+
"importPath": "@texturehq/edges/components/Logo",
|
|
404
|
+
"description": "",
|
|
405
|
+
"props": [
|
|
406
|
+
{
|
|
407
|
+
"name": "className",
|
|
408
|
+
"type": "string"
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"name": "showWordmark",
|
|
412
|
+
"type": "boolean"
|
|
413
|
+
}
|
|
414
|
+
]
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"name": "NumberField",
|
|
418
|
+
"importRoot": "@texturehq/edges",
|
|
419
|
+
"importPath": "@texturehq/edges/components/NumberField",
|
|
420
|
+
"description": "NumberField Numeric input with stepper controls and validation.",
|
|
421
|
+
"props": [
|
|
422
|
+
{
|
|
423
|
+
"name": "value",
|
|
424
|
+
"type": "number"
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
"name": "defaultValue",
|
|
428
|
+
"type": "number"
|
|
429
|
+
},
|
|
430
|
+
{
|
|
431
|
+
"name": "onChange",
|
|
432
|
+
"type": "(value: number) => void"
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"name": "minValue",
|
|
436
|
+
"type": "number"
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"name": "maxValue",
|
|
440
|
+
"type": "number"
|
|
441
|
+
},
|
|
442
|
+
{
|
|
443
|
+
"name": "step",
|
|
444
|
+
"type": "number"
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
"name": "formatOptions",
|
|
448
|
+
"type": "Intl.NumberFormatOptions"
|
|
449
|
+
},
|
|
450
|
+
{
|
|
451
|
+
"name": "id",
|
|
452
|
+
"type": "string"
|
|
453
|
+
},
|
|
454
|
+
{
|
|
455
|
+
"name": "label",
|
|
456
|
+
"type": "string"
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
"name": "description",
|
|
460
|
+
"type": "string"
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
"name": "errorMessage",
|
|
464
|
+
"type": "string | ((validation: ValidationResult) => string)"
|
|
465
|
+
},
|
|
466
|
+
{
|
|
467
|
+
"name": "tooltip",
|
|
468
|
+
"type": "string"
|
|
469
|
+
},
|
|
470
|
+
{
|
|
471
|
+
"name": "isRequired",
|
|
472
|
+
"type": "boolean"
|
|
473
|
+
},
|
|
474
|
+
{
|
|
475
|
+
"name": "className",
|
|
476
|
+
"type": "string"
|
|
477
|
+
},
|
|
478
|
+
{
|
|
479
|
+
"name": "validationResult",
|
|
480
|
+
"type": "ValidationResult"
|
|
481
|
+
}
|
|
482
|
+
]
|
|
483
|
+
},
|
|
484
|
+
{
|
|
485
|
+
"name": "PlaceSearch",
|
|
486
|
+
"importRoot": "@texturehq/edges",
|
|
487
|
+
"importPath": "@texturehq/edges/components/PlaceSearch",
|
|
488
|
+
"description": "PlaceSearch Location search component with autocomplete; emits a `Place` value on selection.",
|
|
489
|
+
"props": [
|
|
490
|
+
{
|
|
491
|
+
"name": "label",
|
|
492
|
+
"type": "string"
|
|
493
|
+
},
|
|
494
|
+
{
|
|
495
|
+
"name": "selectedKey",
|
|
496
|
+
"type": "Key | null"
|
|
497
|
+
},
|
|
498
|
+
{
|
|
499
|
+
"name": "defaultSelectedKey",
|
|
500
|
+
"type": "Key | null"
|
|
501
|
+
},
|
|
502
|
+
{
|
|
503
|
+
"name": "onSelectionChange",
|
|
504
|
+
"type": "(key: Key | null) => void"
|
|
505
|
+
},
|
|
506
|
+
{
|
|
507
|
+
"name": "placeholder",
|
|
508
|
+
"type": "string"
|
|
509
|
+
},
|
|
510
|
+
{
|
|
511
|
+
"name": "errorMessage",
|
|
512
|
+
"type": "string | ((validation: ValidationResult) => string)"
|
|
513
|
+
},
|
|
514
|
+
{
|
|
515
|
+
"name": "description",
|
|
516
|
+
"type": "string"
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
"name": "size",
|
|
520
|
+
"type": "\"sm\" | \"md\" | \"lg\" | \"xl\""
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
"name": "tooltip",
|
|
524
|
+
"type": "string"
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"name": "isRequired",
|
|
528
|
+
"type": "boolean"
|
|
529
|
+
},
|
|
530
|
+
{
|
|
531
|
+
"name": "isDisabled",
|
|
532
|
+
"type": "boolean"
|
|
533
|
+
},
|
|
534
|
+
{
|
|
535
|
+
"name": "showErrors",
|
|
536
|
+
"type": "boolean"
|
|
537
|
+
},
|
|
538
|
+
{
|
|
539
|
+
"name": "autoFocus",
|
|
540
|
+
"type": "boolean"
|
|
541
|
+
},
|
|
542
|
+
{
|
|
543
|
+
"name": "onSelect",
|
|
544
|
+
"type": "(place: Place) => void"
|
|
545
|
+
},
|
|
546
|
+
{
|
|
547
|
+
"name": "searchTypes",
|
|
548
|
+
"type": "SearchType[]"
|
|
549
|
+
},
|
|
550
|
+
{
|
|
551
|
+
"name": "defaultFilter",
|
|
552
|
+
"type": "(textValue: string, inputValue: string) => boolean"
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"name": "validationResult",
|
|
556
|
+
"type": "ValidationResult"
|
|
557
|
+
},
|
|
558
|
+
{
|
|
559
|
+
"name": "countryRestrictions",
|
|
560
|
+
"type": "string[]"
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"name": "proximity",
|
|
564
|
+
"type": "\"ip\" | [number, number]"
|
|
565
|
+
}
|
|
566
|
+
]
|
|
567
|
+
},
|
|
568
|
+
{
|
|
569
|
+
"name": "Popover",
|
|
570
|
+
"importRoot": "@texturehq/edges",
|
|
571
|
+
"importPath": "@texturehq/edges/components/Popover",
|
|
572
|
+
"description": "Popover Positioned overlay container with optional arrow, built on `react-aria-components` Popover.",
|
|
573
|
+
"props": [
|
|
574
|
+
{
|
|
575
|
+
"name": "showArrow",
|
|
576
|
+
"type": "boolean"
|
|
577
|
+
},
|
|
578
|
+
{
|
|
579
|
+
"name": "children",
|
|
580
|
+
"type": "React.ReactNode"
|
|
581
|
+
}
|
|
582
|
+
]
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
"name": "ProgressBar",
|
|
586
|
+
"importRoot": "@texturehq/edges",
|
|
587
|
+
"importPath": "@texturehq/edges/components/ProgressBar",
|
|
588
|
+
"description": "ProgressBar Linear progress indicator with optional labels.",
|
|
589
|
+
"props": [
|
|
590
|
+
{
|
|
591
|
+
"name": "label",
|
|
592
|
+
"type": "string"
|
|
593
|
+
},
|
|
594
|
+
{
|
|
595
|
+
"name": "rightLabel",
|
|
596
|
+
"type": "string"
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"name": "progressWidth",
|
|
600
|
+
"type": "number"
|
|
601
|
+
},
|
|
602
|
+
{
|
|
603
|
+
"name": "hideLabels",
|
|
604
|
+
"type": "boolean"
|
|
605
|
+
}
|
|
606
|
+
]
|
|
607
|
+
},
|
|
608
|
+
{
|
|
609
|
+
"name": "RangeCalendar",
|
|
610
|
+
"importRoot": "@texturehq/edges",
|
|
611
|
+
"importPath": "@texturehq/edges/components/RangeCalendar",
|
|
612
|
+
"description": "RangeCalendar Calendar allowing selection of a date range.",
|
|
613
|
+
"props": []
|
|
614
|
+
},
|
|
615
|
+
{
|
|
616
|
+
"name": "Select",
|
|
617
|
+
"importRoot": "@texturehq/edges",
|
|
618
|
+
"importPath": "@texturehq/edges/components/Select",
|
|
619
|
+
"description": "Whether to use transparent background",
|
|
620
|
+
"props": []
|
|
621
|
+
},
|
|
622
|
+
{
|
|
623
|
+
"name": "Skeleton",
|
|
624
|
+
"importRoot": "@texturehq/edges",
|
|
625
|
+
"importPath": "@texturehq/edges/components/Skeleton",
|
|
626
|
+
"description": "",
|
|
627
|
+
"props": []
|
|
628
|
+
},
|
|
629
|
+
{
|
|
630
|
+
"name": "Switch",
|
|
631
|
+
"importRoot": "@texturehq/edges",
|
|
632
|
+
"importPath": "@texturehq/edges/components/Switch",
|
|
633
|
+
"description": "",
|
|
634
|
+
"props": [
|
|
635
|
+
{
|
|
636
|
+
"name": "children",
|
|
637
|
+
"type": "React.ReactNode"
|
|
638
|
+
}
|
|
639
|
+
]
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"name": "Tab",
|
|
643
|
+
"importRoot": "@texturehq/edges",
|
|
644
|
+
"importPath": "@texturehq/edges/components/Tab",
|
|
645
|
+
"description": "Tabs Tabbed interface with styled tabs and panels.",
|
|
646
|
+
"props": []
|
|
647
|
+
},
|
|
648
|
+
{
|
|
649
|
+
"name": "TabList",
|
|
650
|
+
"importRoot": "@texturehq/edges",
|
|
651
|
+
"importPath": "@texturehq/edges/components/TabList",
|
|
652
|
+
"description": "TabList container.",
|
|
653
|
+
"props": []
|
|
654
|
+
},
|
|
655
|
+
{
|
|
656
|
+
"name": "TabPanel",
|
|
657
|
+
"importRoot": "@texturehq/edges",
|
|
658
|
+
"importPath": "@texturehq/edges/components/TabPanel",
|
|
659
|
+
"description": "TabPanel content area.",
|
|
660
|
+
"props": []
|
|
661
|
+
},
|
|
662
|
+
{
|
|
663
|
+
"name": "Tabs",
|
|
664
|
+
"importRoot": "@texturehq/edges",
|
|
665
|
+
"importPath": "@texturehq/edges/components/Tabs",
|
|
666
|
+
"description": "Tabs Tabbed interface with styled tabs and panels.",
|
|
667
|
+
"props": []
|
|
668
|
+
},
|
|
669
|
+
{
|
|
670
|
+
"name": "TextArea",
|
|
671
|
+
"importRoot": "@texturehq/edges",
|
|
672
|
+
"importPath": "@texturehq/edges/components/TextArea",
|
|
673
|
+
"description": "TextArea Multi-line text input with Edges styling, label, description, and error.",
|
|
674
|
+
"props": [
|
|
675
|
+
{
|
|
676
|
+
"name": "label",
|
|
677
|
+
"type": "string"
|
|
678
|
+
},
|
|
679
|
+
{
|
|
680
|
+
"name": "description",
|
|
681
|
+
"type": "string"
|
|
682
|
+
},
|
|
683
|
+
{
|
|
684
|
+
"name": "errorMessage",
|
|
685
|
+
"type": "string | ((validation: ValidationResult) => string)"
|
|
686
|
+
},
|
|
687
|
+
{
|
|
688
|
+
"name": "tooltip",
|
|
689
|
+
"type": "string"
|
|
690
|
+
},
|
|
691
|
+
{
|
|
692
|
+
"name": "size",
|
|
693
|
+
"type": "Size"
|
|
694
|
+
},
|
|
695
|
+
{
|
|
696
|
+
"name": "isInvalid",
|
|
697
|
+
"type": "boolean"
|
|
698
|
+
},
|
|
699
|
+
{
|
|
700
|
+
"name": "validationResult",
|
|
701
|
+
"type": "ValidationResult"
|
|
702
|
+
}
|
|
703
|
+
]
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"name": "TextField",
|
|
707
|
+
"importRoot": "@texturehq/edges",
|
|
708
|
+
"importPath": "@texturehq/edges/components/TextField",
|
|
709
|
+
"description": "Renders an Edges TextField with label, description, validation states and optional search/clear/password affordances.",
|
|
710
|
+
"props": [
|
|
711
|
+
{
|
|
712
|
+
"name": "label",
|
|
713
|
+
"type": "string"
|
|
714
|
+
},
|
|
715
|
+
{
|
|
716
|
+
"name": "description",
|
|
717
|
+
"type": "string"
|
|
718
|
+
},
|
|
719
|
+
{
|
|
720
|
+
"name": "errorMessage",
|
|
721
|
+
"type": "string | ((validation: ValidationResult) => string)"
|
|
722
|
+
},
|
|
723
|
+
{
|
|
724
|
+
"name": "placeholder",
|
|
725
|
+
"type": "string"
|
|
726
|
+
},
|
|
727
|
+
{
|
|
728
|
+
"name": "tooltip",
|
|
729
|
+
"type": "string"
|
|
730
|
+
},
|
|
731
|
+
{
|
|
732
|
+
"name": "isRequired",
|
|
733
|
+
"type": "boolean"
|
|
734
|
+
},
|
|
735
|
+
{
|
|
736
|
+
"name": "className",
|
|
737
|
+
"type": "string"
|
|
738
|
+
},
|
|
739
|
+
{
|
|
740
|
+
"name": "validationResult",
|
|
741
|
+
"type": "ValidationResult"
|
|
742
|
+
}
|
|
743
|
+
]
|
|
744
|
+
},
|
|
745
|
+
{
|
|
746
|
+
"name": "TextLink",
|
|
747
|
+
"importRoot": "@texturehq/edges",
|
|
748
|
+
"importPath": "@texturehq/edges/components/TextLink",
|
|
749
|
+
"description": "",
|
|
750
|
+
"props": [
|
|
751
|
+
{
|
|
752
|
+
"name": "href",
|
|
753
|
+
"type": "string"
|
|
754
|
+
},
|
|
755
|
+
{
|
|
756
|
+
"name": "children",
|
|
757
|
+
"type": "ReactNode"
|
|
758
|
+
},
|
|
759
|
+
{
|
|
760
|
+
"name": "className",
|
|
761
|
+
"type": "string"
|
|
762
|
+
},
|
|
763
|
+
{
|
|
764
|
+
"name": "external",
|
|
765
|
+
"type": "boolean"
|
|
766
|
+
},
|
|
767
|
+
{
|
|
768
|
+
"name": "title",
|
|
769
|
+
"type": "string"
|
|
770
|
+
},
|
|
771
|
+
{
|
|
772
|
+
"name": "variant",
|
|
773
|
+
"type": "\"default\" | \"primary\" | \"muted\""
|
|
774
|
+
},
|
|
775
|
+
{
|
|
776
|
+
"name": "onClick",
|
|
777
|
+
"type": "(e: React.MouseEvent<HTMLAnchorElement>) => void"
|
|
778
|
+
},
|
|
779
|
+
{
|
|
780
|
+
"name": "asButton",
|
|
781
|
+
"type": "boolean"
|
|
782
|
+
},
|
|
783
|
+
{
|
|
784
|
+
"name": "onPress",
|
|
785
|
+
"type": "() => void"
|
|
786
|
+
},
|
|
787
|
+
{
|
|
788
|
+
"name": "showArrow",
|
|
789
|
+
"type": "boolean"
|
|
790
|
+
}
|
|
791
|
+
]
|
|
792
|
+
},
|
|
793
|
+
{
|
|
794
|
+
"name": "TimeField",
|
|
795
|
+
"importRoot": "@texturehq/edges",
|
|
796
|
+
"importPath": "@texturehq/edges/components/TimeField",
|
|
797
|
+
"description": "Renders an Edges TimeField composed from segmented date parts.",
|
|
798
|
+
"props": [
|
|
799
|
+
{
|
|
800
|
+
"name": "label",
|
|
801
|
+
"type": "string"
|
|
802
|
+
},
|
|
803
|
+
{
|
|
804
|
+
"name": "description",
|
|
805
|
+
"type": "string"
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
"name": "errorMessage",
|
|
809
|
+
"type": "string | ((validation: ValidationResult) => string)"
|
|
810
|
+
},
|
|
811
|
+
{
|
|
812
|
+
"name": "placeholder",
|
|
813
|
+
"type": "string"
|
|
814
|
+
},
|
|
815
|
+
{
|
|
816
|
+
"name": "tooltip",
|
|
817
|
+
"type": "string"
|
|
818
|
+
},
|
|
819
|
+
{
|
|
820
|
+
"name": "isRequired",
|
|
821
|
+
"type": "boolean"
|
|
822
|
+
},
|
|
823
|
+
{
|
|
824
|
+
"name": "className",
|
|
825
|
+
"type": "string"
|
|
826
|
+
},
|
|
827
|
+
{
|
|
828
|
+
"name": "validationResult",
|
|
829
|
+
"type": "ValidationResult"
|
|
830
|
+
}
|
|
831
|
+
]
|
|
832
|
+
},
|
|
833
|
+
{
|
|
834
|
+
"name": "ToggleButton",
|
|
835
|
+
"importRoot": "@texturehq/edges",
|
|
836
|
+
"importPath": "@texturehq/edges/components/ToggleButton",
|
|
837
|
+
"description": "Value used for group selection state",
|
|
838
|
+
"props": [
|
|
839
|
+
{
|
|
840
|
+
"name": "variant",
|
|
841
|
+
"type": "\"default\" | \"primary\""
|
|
842
|
+
},
|
|
843
|
+
{
|
|
844
|
+
"name": "size",
|
|
845
|
+
"type": "Size"
|
|
846
|
+
},
|
|
847
|
+
{
|
|
848
|
+
"name": "className",
|
|
849
|
+
"type": "string"
|
|
850
|
+
},
|
|
851
|
+
{
|
|
852
|
+
"name": "children",
|
|
853
|
+
"type": "React.ReactNode"
|
|
854
|
+
},
|
|
855
|
+
{
|
|
856
|
+
"name": "onChange",
|
|
857
|
+
"type": "(isSelected: boolean) => void"
|
|
858
|
+
},
|
|
859
|
+
{
|
|
860
|
+
"name": "onPress",
|
|
861
|
+
"type": "() => void"
|
|
862
|
+
},
|
|
863
|
+
{
|
|
864
|
+
"name": "isSelected",
|
|
865
|
+
"type": "boolean"
|
|
866
|
+
},
|
|
867
|
+
{
|
|
868
|
+
"name": "isDisabled",
|
|
869
|
+
"type": "boolean"
|
|
870
|
+
},
|
|
871
|
+
{
|
|
872
|
+
"name": "borderRadius",
|
|
873
|
+
"type": "\"left\" | \"right\""
|
|
874
|
+
},
|
|
875
|
+
{
|
|
876
|
+
"name": "borderRight",
|
|
877
|
+
"type": "boolean"
|
|
878
|
+
},
|
|
879
|
+
{
|
|
880
|
+
"name": "borderLeft",
|
|
881
|
+
"type": "boolean"
|
|
882
|
+
},
|
|
883
|
+
{
|
|
884
|
+
"name": "icon",
|
|
885
|
+
"type": "IconName"
|
|
886
|
+
},
|
|
887
|
+
{
|
|
888
|
+
"name": "iconWeight",
|
|
889
|
+
"type": "\"thin\" | \"light\" | \"regular\" | \"bold\" | \"fill\" | \"duotone\""
|
|
890
|
+
},
|
|
891
|
+
{
|
|
892
|
+
"name": "iconPosition",
|
|
893
|
+
"type": "\"left\" | \"right\""
|
|
894
|
+
},
|
|
895
|
+
{
|
|
896
|
+
"name": "value",
|
|
897
|
+
"type": "string"
|
|
898
|
+
},
|
|
899
|
+
{
|
|
900
|
+
"name": "isLoading",
|
|
901
|
+
"type": "boolean"
|
|
902
|
+
},
|
|
903
|
+
{
|
|
904
|
+
"name": "loadingText",
|
|
905
|
+
"type": "string"
|
|
906
|
+
},
|
|
907
|
+
{
|
|
908
|
+
"name": "loadingIndicator",
|
|
909
|
+
"type": "React.ReactNode"
|
|
910
|
+
},
|
|
911
|
+
{
|
|
912
|
+
"name": "badgeNumber",
|
|
913
|
+
"type": "number"
|
|
914
|
+
},
|
|
915
|
+
{
|
|
916
|
+
"name": "badgeVariant",
|
|
917
|
+
"type": "\"primary\" | \"destructive\""
|
|
918
|
+
},
|
|
919
|
+
{
|
|
920
|
+
"name": "badgePosition",
|
|
921
|
+
"type": "\"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\""
|
|
922
|
+
}
|
|
923
|
+
]
|
|
924
|
+
},
|
|
925
|
+
{
|
|
926
|
+
"name": "Tooltip",
|
|
927
|
+
"importRoot": "@texturehq/edges",
|
|
928
|
+
"importPath": "@texturehq/edges/components/Tooltip",
|
|
929
|
+
"description": "Tooltip Lightweight content container that appears on hover/focus/press.",
|
|
930
|
+
"props": [
|
|
931
|
+
{
|
|
932
|
+
"name": "children",
|
|
933
|
+
"type": "React.ReactNode"
|
|
934
|
+
},
|
|
935
|
+
{
|
|
936
|
+
"name": "content",
|
|
937
|
+
"type": "React.ReactNode"
|
|
938
|
+
}
|
|
939
|
+
]
|
|
940
|
+
}
|
|
941
|
+
]
|
|
5
942
|
}
|
package/package.json
CHANGED
|
@@ -36,14 +36,11 @@ function extractExportsFromIndex(indexContent) {
|
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
function findComponentFile(relPath) {
|
|
39
|
-
//
|
|
40
|
-
const base = path.join(SRC_DIR, relPath);
|
|
41
|
-
const dir = path.dirname(base);
|
|
42
|
-
const compName = path.basename(base);
|
|
39
|
+
// Components are in directories like Button/Button.tsx or Button/index.ts
|
|
40
|
+
const base = path.join(SRC_DIR, "components", relPath);
|
|
43
41
|
const candidates = [
|
|
44
|
-
path.join(
|
|
45
|
-
path.join(
|
|
46
|
-
path.join(base, `${compName}.tsx`),
|
|
42
|
+
path.join(base, `${relPath}.tsx`),
|
|
43
|
+
path.join(base, `${relPath}.ts`),
|
|
47
44
|
path.join(base, `index.tsx`),
|
|
48
45
|
path.join(base, `index.ts`),
|
|
49
46
|
];
|
|
@@ -16,7 +16,8 @@ const setupCursorRules = () => {
|
|
|
16
16
|
// ignore
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
const
|
|
19
|
+
const cursorTemplatesDir = path.join(path.dirname(new URL(import.meta.url).pathname), '../templates/cursor-rules');
|
|
20
|
+
const claudeTemplatesDir = path.join(path.dirname(new URL(import.meta.url).pathname), '../templates/claude-rules');
|
|
20
21
|
const cursorDir = path.join(cwd, '.cursor');
|
|
21
22
|
const rulesDir = path.join(cursorDir, 'rules');
|
|
22
23
|
|
|
@@ -24,43 +25,64 @@ const setupCursorRules = () => {
|
|
|
24
25
|
fs.mkdirSync(cursorDir, { recursive: true });
|
|
25
26
|
fs.mkdirSync(rulesDir, { recursive: true });
|
|
26
27
|
|
|
27
|
-
//
|
|
28
|
-
if (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
28
|
+
// Setup Cursor rules
|
|
29
|
+
if (fs.existsSync(cursorTemplatesDir)) {
|
|
30
|
+
const templateFiles = fs.readdirSync(cursorTemplatesDir).filter(file => file.endsWith('.mdc'));
|
|
31
|
+
|
|
32
|
+
if (templateFiles.length > 0) {
|
|
33
|
+
let copiedCount = 0;
|
|
34
|
+
|
|
35
|
+
templateFiles.forEach(file => {
|
|
36
|
+
const templatePath = path.join(cursorTemplatesDir, file);
|
|
37
|
+
const targetPath = path.join(rulesDir, file);
|
|
38
|
+
|
|
39
|
+
// Backup existing rule before overwriting
|
|
40
|
+
if (fs.existsSync(targetPath)) {
|
|
41
|
+
const backupsDir = path.join(rulesDir, "_backups");
|
|
42
|
+
fs.mkdirSync(backupsDir, { recursive: true });
|
|
43
|
+
const ts = new Date().toISOString().replace(/[:.]/g, "-");
|
|
44
|
+
fs.copyFileSync(targetPath, path.join(backupsDir, `${file}.${ts}.bak`));
|
|
45
|
+
}
|
|
46
|
+
// Always copy to ensure latest version
|
|
47
|
+
fs.copyFileSync(templatePath, targetPath);
|
|
48
|
+
copiedCount++;
|
|
49
|
+
console.log(`✅ Updated .cursor/rules/${file}`);
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
if (copiedCount > 0) {
|
|
53
|
+
console.log(`🎨 Added ${copiedCount} cursor rule(s) for @texturehq/edges design system`);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
39
56
|
}
|
|
40
57
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
const templatePath = path.join(templatesDir, file);
|
|
45
|
-
const targetPath = path.join(rulesDir, file);
|
|
58
|
+
// Setup Claude rules
|
|
59
|
+
if (fs.existsSync(claudeTemplatesDir)) {
|
|
60
|
+
const claudeTemplateFiles = fs.readdirSync(claudeTemplatesDir).filter(file => file.endsWith('.md') || file === '.claude');
|
|
46
61
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
62
|
+
if (claudeTemplateFiles.length > 0) {
|
|
63
|
+
let claudeCopiedCount = 0;
|
|
64
|
+
|
|
65
|
+
claudeTemplateFiles.forEach(file => {
|
|
66
|
+
const templatePath = path.join(claudeTemplatesDir, file);
|
|
67
|
+
const targetPath = path.join(cwd, file);
|
|
68
|
+
|
|
69
|
+
// Backup existing file before overwriting
|
|
70
|
+
if (fs.existsSync(targetPath)) {
|
|
71
|
+
const backupPath = `${targetPath}.${new Date().toISOString().replace(/[:.]/g, "-")}.bak`;
|
|
72
|
+
fs.copyFileSync(targetPath, backupPath);
|
|
73
|
+
console.log(`📋 Backed up existing ${file} to ${backupPath}`);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Always copy to ensure latest version
|
|
77
|
+
fs.copyFileSync(templatePath, targetPath);
|
|
78
|
+
claudeCopiedCount++;
|
|
79
|
+
console.log(`✅ Updated ${file} for Claude`);
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
if (claudeCopiedCount > 0) {
|
|
83
|
+
console.log(`🤖 Added ${claudeCopiedCount} Claude rule(s) for @texturehq/edges design system`);
|
|
84
|
+
}
|
|
53
85
|
}
|
|
54
|
-
// Always copy to ensure latest version
|
|
55
|
-
fs.copyFileSync(templatePath, targetPath);
|
|
56
|
-
copiedCount++;
|
|
57
|
-
console.log(`✅ Updated .cursor/rules/${file}`);
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
if (copiedCount > 0) {
|
|
61
|
-
console.log(`🎨 Added ${copiedCount} cursor rule(s) for @texturehq/edges design system`);
|
|
62
|
-
} else {
|
|
63
|
-
console.log('ℹ️ All cursor rules already exist');
|
|
64
86
|
}
|
|
65
87
|
|
|
66
88
|
// Also render edges-components.mdc from manifest when present
|
|
@@ -71,33 +93,115 @@ const setupCursorRules = () => {
|
|
|
71
93
|
if (manifestPath) {
|
|
72
94
|
try {
|
|
73
95
|
const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
|
|
74
|
-
|
|
96
|
+
|
|
97
|
+
// Generate Cursor components list
|
|
98
|
+
const cursorLines = [
|
|
75
99
|
'---',
|
|
76
100
|
'alwaysApply: true',
|
|
77
101
|
'---',
|
|
78
102
|
'',
|
|
79
103
|
`## @texturehq/edges Components (v${manifest.version || 'unknown'})`,
|
|
104
|
+
'',
|
|
105
|
+
'### Quick Reference',
|
|
80
106
|
''
|
|
81
107
|
];
|
|
108
|
+
|
|
109
|
+
// Add quick reference list
|
|
82
110
|
for (const c of manifest.components || []) {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
111
|
+
cursorLines.push(`- **${c.name}** - ${c.description || 'Component'}`);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
cursorLines.push('');
|
|
115
|
+
cursorLines.push('### Detailed Component Reference');
|
|
116
|
+
cursorLines.push('');
|
|
117
|
+
|
|
118
|
+
for (const c of manifest.components || []) {
|
|
119
|
+
cursorLines.push(`#### ${c.name}`);
|
|
120
|
+
if (c.description) {
|
|
121
|
+
cursorLines.push(`${c.description}`);
|
|
122
|
+
}
|
|
123
|
+
cursorLines.push('');
|
|
124
|
+
cursorLines.push('**Imports:**');
|
|
125
|
+
cursorLines.push(`- \`import { ${c.name} } from "@texturehq/edges"\``);
|
|
126
|
+
cursorLines.push(`- \`import { ${c.name} } from "@texturehq/edges/components/${c.name}"\``);
|
|
127
|
+
cursorLines.push('');
|
|
128
|
+
|
|
86
129
|
if (c.props && c.props.length) {
|
|
87
|
-
|
|
88
|
-
|
|
130
|
+
cursorLines.push('**Props:**');
|
|
131
|
+
c.props.forEach(prop => {
|
|
132
|
+
cursorLines.push(`- \`${prop.name}: ${prop.type}\``);
|
|
133
|
+
});
|
|
134
|
+
cursorLines.push('');
|
|
89
135
|
}
|
|
136
|
+
cursorLines.push('---');
|
|
137
|
+
cursorLines.push('');
|
|
90
138
|
}
|
|
91
|
-
const
|
|
139
|
+
const cursorOutPath = path.join(rulesDir, 'edges-components.mdc');
|
|
92
140
|
// Backup existing components manifest before overwriting
|
|
93
|
-
if (fs.existsSync(
|
|
141
|
+
if (fs.existsSync(cursorOutPath)) {
|
|
94
142
|
const backupsDir = path.join(rulesDir, "_backups");
|
|
95
143
|
fs.mkdirSync(backupsDir, { recursive: true });
|
|
96
144
|
const ts = new Date().toISOString().replace(/[:.]/g, "-");
|
|
97
|
-
fs.copyFileSync(
|
|
145
|
+
fs.copyFileSync(cursorOutPath, path.join(backupsDir, `edges-components.mdc.${ts}.bak`));
|
|
98
146
|
}
|
|
99
|
-
fs.writeFileSync(
|
|
147
|
+
fs.writeFileSync(cursorOutPath, cursorLines.join('\n'), "utf8");
|
|
100
148
|
console.log(`✅ Wrote .cursor/rules/edges-components.mdc from manifest (${manifest.components?.length || 0} components)`);
|
|
149
|
+
|
|
150
|
+
// Generate Claude components list
|
|
151
|
+
const claudeLines = [];
|
|
152
|
+
claudeLines.push('### Quick Reference');
|
|
153
|
+
claudeLines.push('');
|
|
154
|
+
|
|
155
|
+
// Add quick reference list
|
|
156
|
+
for (const c of manifest.components || []) {
|
|
157
|
+
claudeLines.push(`- **${c.name}** - ${c.description || 'Component'}`);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
claudeLines.push('');
|
|
161
|
+
claudeLines.push('### Detailed Component Reference');
|
|
162
|
+
claudeLines.push('');
|
|
163
|
+
|
|
164
|
+
for (const c of manifest.components || []) {
|
|
165
|
+
claudeLines.push(`#### ${c.name}`);
|
|
166
|
+
if (c.description) {
|
|
167
|
+
claudeLines.push(`${c.description}`);
|
|
168
|
+
}
|
|
169
|
+
claudeLines.push('');
|
|
170
|
+
claudeLines.push('**Imports:**');
|
|
171
|
+
claudeLines.push(`- \`import { ${c.name} } from "@texturehq/edges"\``);
|
|
172
|
+
claudeLines.push(`- \`import { ${c.name} } from "@texturehq/edges/components/${c.name}"\``);
|
|
173
|
+
claudeLines.push('');
|
|
174
|
+
|
|
175
|
+
if (c.props && c.props.length) {
|
|
176
|
+
claudeLines.push('**Props:**');
|
|
177
|
+
c.props.forEach(prop => {
|
|
178
|
+
claudeLines.push(`- \`${prop.name}: ${prop.type}\``);
|
|
179
|
+
});
|
|
180
|
+
claudeLines.push('');
|
|
181
|
+
}
|
|
182
|
+
claudeLines.push('---');
|
|
183
|
+
claudeLines.push('');
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// Update Claude templates with components list
|
|
187
|
+
const claudeTemplates = ['claude.md', '.claude'];
|
|
188
|
+
|
|
189
|
+
claudeTemplates.forEach(templateName => {
|
|
190
|
+
const claudeTemplatePath = path.join(claudeTemplatesDir, templateName);
|
|
191
|
+
if (fs.existsSync(claudeTemplatePath)) {
|
|
192
|
+
let claudeContent = fs.readFileSync(claudeTemplatePath, 'utf8');
|
|
193
|
+
claudeContent = claudeContent.split("{{COMPONENTS_LIST}}").join(claudeLines.join("\n"));
|
|
194
|
+
const claudeOutPath = path.join(cwd, templateName);
|
|
195
|
+
// Backup existing file before overwriting
|
|
196
|
+
if (fs.existsSync(claudeOutPath)) {
|
|
197
|
+
const backupPath = `${claudeOutPath}.${new Date().toISOString().replace(/[:.]/g, "-")}.bak`;
|
|
198
|
+
fs.copyFileSync(claudeOutPath, backupPath);
|
|
199
|
+
console.log(`📋 Backed up existing ${templateName} to ${backupPath}`);
|
|
200
|
+
}
|
|
201
|
+
fs.writeFileSync(claudeOutPath, claudeContent, "utf8");
|
|
202
|
+
console.log(`✅ Wrote ${templateName} with components list (${manifest.components?.length || 0} components)`);
|
|
203
|
+
}
|
|
204
|
+
});
|
|
101
205
|
} catch (err) {
|
|
102
206
|
console.log('⚠️ Failed to read components.manifest.json:', err.message);
|
|
103
207
|
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# @texturehq/edges Design System
|
|
2
|
+
|
|
3
|
+
This project uses the @texturehq/edges design system with Tailwind 4. The theme CSS file contains all design system variables that automatically become available as Tailwind classes.
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
The theme is imported via CSS:
|
|
8
|
+
```css
|
|
9
|
+
@import "@texturehq/edges/theme.css";
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## How It Works
|
|
13
|
+
|
|
14
|
+
- CSS variables in the theme file automatically become Tailwind classes
|
|
15
|
+
- `--color-brand-primary` becomes available as `bg-brand-primary`, `text-brand-primary`, `border-brand-primary`, etc.
|
|
16
|
+
- `--spacing-md` becomes available as `p-md`, `m-md`, `gap-md`, etc.
|
|
17
|
+
- `--text-lg` becomes available as `text-lg`
|
|
18
|
+
- `--radius-lg` becomes available as `rounded-lg`
|
|
19
|
+
|
|
20
|
+
## Usage Guidelines
|
|
21
|
+
|
|
22
|
+
- **Use semantic classes over arbitrary values**
|
|
23
|
+
- Prefer: `bg-brand-primary`, `text-text-body`, `p-md`, `rounded-lg`
|
|
24
|
+
- Avoid: `bg-[#444ae1]`, `text-[#333333]`, `p-[1rem]`, `rounded-[0.5rem]`
|
|
25
|
+
|
|
26
|
+
## Naming Conventions
|
|
27
|
+
|
|
28
|
+
- Brand colors: `brand-primary`, `brand-light`, `brand-dark`
|
|
29
|
+
- Text colors: `text-body`, `text-heading`, `text-muted`, `text-caption`
|
|
30
|
+
- Background colors: `background-body`, `background-surface`, `background-muted`
|
|
31
|
+
- Border colors: `border-default`, `border-focus`, `border-muted`
|
|
32
|
+
- Action colors: `action-primary`, `action-secondary`, `action-destructive`
|
|
33
|
+
- Feedback colors: `feedback-success`, `feedback-error`, `feedback-warning`, `feedback-info`
|
|
34
|
+
- Spacing: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
|
|
35
|
+
- Typography: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
|
|
36
|
+
- Border radius: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
|
|
37
|
+
|
|
38
|
+
## Examples
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<!-- ✅ Good - Uses semantic classes -->
|
|
42
|
+
<div class="bg-brand-primary text-text-on-primary p-md rounded-lg shadow-md">
|
|
43
|
+
<h2 class="text-text-heading text-lg font-medium">Title</h2>
|
|
44
|
+
<p class="text-text-body text-base">Content</p>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- ❌ Avoid - Uses arbitrary values -->
|
|
48
|
+
<div class="bg-[#444ae1] text-[#ffffff] p-[1rem] rounded-[0.5rem]">
|
|
49
|
+
<h2 class="text-[#111827] text-[1.125rem] font-[500]">Title</h2>
|
|
50
|
+
<p class="text-[#333333] text-[1rem]">Content</p>
|
|
51
|
+
</div>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Dark Mode
|
|
55
|
+
|
|
56
|
+
All colors automatically adapt to dark mode when `.dark` class is present.
|
|
57
|
+
|
|
58
|
+
## Available Variables
|
|
59
|
+
|
|
60
|
+
All CSS variables from the theme file are automatically available. The theme includes:
|
|
61
|
+
- Complete color system (brand, text, background, border, action, feedback, device states, data visualization)
|
|
62
|
+
- Spacing scale
|
|
63
|
+
- Typography scale
|
|
64
|
+
- Border radius scale
|
|
65
|
+
- Shadow system
|
|
66
|
+
- Animation definitions
|
|
67
|
+
- Form control specifications
|
|
68
|
+
|
|
69
|
+
## Available Components
|
|
70
|
+
|
|
71
|
+
The following components are available from @texturehq/edges:
|
|
72
|
+
|
|
73
|
+
{{COMPONENTS_LIST}}
|
|
74
|
+
|
|
75
|
+
## Import Examples
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
// Import from package root
|
|
79
|
+
import { Button, TextField, Card } from "@texturehq/edges";
|
|
80
|
+
|
|
81
|
+
// Import individual components for tree-shaking
|
|
82
|
+
import { Button } from "@texturehq/edges/components/Button";
|
|
83
|
+
import { TextField } from "@texturehq/edges/components/TextField";
|
|
84
|
+
import { Card } from "@texturehq/edges/components/Card";
|
|
85
|
+
```
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# @texturehq/edges Design System
|
|
2
|
+
|
|
3
|
+
This project uses the @texturehq/edges design system with Tailwind 4. The theme CSS file contains all design system variables that automatically become available as Tailwind classes.
|
|
4
|
+
|
|
5
|
+
## Setup
|
|
6
|
+
|
|
7
|
+
The theme is imported via CSS:
|
|
8
|
+
```css
|
|
9
|
+
@import "@texturehq/edges/theme.css";
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## How It Works
|
|
13
|
+
|
|
14
|
+
- CSS variables in the theme file automatically become Tailwind classes
|
|
15
|
+
- `--color-brand-primary` becomes available as `bg-brand-primary`, `text-brand-primary`, `border-brand-primary`, etc.
|
|
16
|
+
- `--spacing-md` becomes available as `p-md`, `m-md`, `gap-md`, etc.
|
|
17
|
+
- `--text-lg` becomes available as `text-lg`
|
|
18
|
+
- `--radius-lg` becomes available as `rounded-lg`
|
|
19
|
+
|
|
20
|
+
## Usage Guidelines
|
|
21
|
+
|
|
22
|
+
- **Use semantic classes over arbitrary values**
|
|
23
|
+
- Prefer: `bg-brand-primary`, `text-text-body`, `p-md`, `rounded-lg`
|
|
24
|
+
- Avoid: `bg-[#444ae1]`, `text-[#333333]`, `p-[1rem]`, `rounded-[0.5rem]`
|
|
25
|
+
|
|
26
|
+
## Naming Conventions
|
|
27
|
+
|
|
28
|
+
- Brand colors: `brand-primary`, `brand-light`, `brand-dark`
|
|
29
|
+
- Text colors: `text-body`, `text-heading`, `text-muted`, `text-caption`
|
|
30
|
+
- Background colors: `background-body`, `background-surface`, `background-muted`
|
|
31
|
+
- Border colors: `border-default`, `border-focus`, `border-muted`
|
|
32
|
+
- Action colors: `action-primary`, `action-secondary`, `action-destructive`
|
|
33
|
+
- Feedback colors: `feedback-success`, `feedback-error`, `feedback-warning`, `feedback-info`
|
|
34
|
+
- Spacing: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
|
|
35
|
+
- Typography: `xs`, `sm`, `base`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
|
|
36
|
+
- Border radius: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`
|
|
37
|
+
|
|
38
|
+
## Examples
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<!-- ✅ Good - Uses semantic classes -->
|
|
42
|
+
<div class="bg-brand-primary text-text-on-primary p-md rounded-lg shadow-md">
|
|
43
|
+
<h2 class="text-text-heading text-lg font-medium">Title</h2>
|
|
44
|
+
<p class="text-text-body text-base">Content</p>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- ❌ Avoid - Uses arbitrary values -->
|
|
48
|
+
<div class="bg-[#444ae1] text-[#ffffff] p-[1rem] rounded-[0.5rem]">
|
|
49
|
+
<h2 class="text-[#111827] text-[1.125rem] font-[500]">Title</h2>
|
|
50
|
+
<p class="text-[#333333] text-[1rem]">Content</p>
|
|
51
|
+
</div>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Dark Mode
|
|
55
|
+
|
|
56
|
+
All colors automatically adapt to dark mode when `.dark` class is present.
|
|
57
|
+
|
|
58
|
+
## Available Variables
|
|
59
|
+
|
|
60
|
+
All CSS variables from the theme file are automatically available. The theme includes:
|
|
61
|
+
- Complete color system (brand, text, background, border, action, feedback, device states, data visualization)
|
|
62
|
+
- Spacing scale
|
|
63
|
+
- Typography scale
|
|
64
|
+
- Border radius scale
|
|
65
|
+
- Shadow system
|
|
66
|
+
- Animation definitions
|
|
67
|
+
- Form control specifications
|
|
68
|
+
|
|
69
|
+
## Available Components
|
|
70
|
+
|
|
71
|
+
The following components are available from @texturehq/edges:
|
|
72
|
+
|
|
73
|
+
{{COMPONENTS_LIST}}
|
|
74
|
+
|
|
75
|
+
## Import Examples
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
// Import from package root
|
|
79
|
+
import { Button, TextField, Card } from "@texturehq/edges";
|
|
80
|
+
|
|
81
|
+
// Import individual components for tree-shaking
|
|
82
|
+
import { Button } from "@texturehq/edges/components/Button";
|
|
83
|
+
import { TextField } from "@texturehq/edges/components/TextField";
|
|
84
|
+
import { Card } from "@texturehq/edges/components/Card";
|
|
85
|
+
```
|