juxscript 1.0.3 → 1.0.5

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 (73) hide show
  1. package/README.md +37 -92
  2. package/bin/cli.js +57 -56
  3. package/lib/components/alert.ts +240 -0
  4. package/lib/components/app.ts +216 -82
  5. package/lib/components/badge.ts +164 -0
  6. package/lib/components/barchart.ts +1248 -0
  7. package/lib/components/button.ts +188 -53
  8. package/lib/components/card.ts +75 -61
  9. package/lib/components/chart.ts +17 -15
  10. package/lib/components/checkbox.ts +199 -0
  11. package/lib/components/code.ts +66 -152
  12. package/lib/components/container.ts +104 -208
  13. package/lib/components/data.ts +1 -3
  14. package/lib/components/datepicker.ts +226 -0
  15. package/lib/components/dialog.ts +258 -0
  16. package/lib/components/docs-data.json +1969 -423
  17. package/lib/components/dropdown.ts +244 -0
  18. package/lib/components/element.ts +271 -0
  19. package/lib/components/fileupload.ts +319 -0
  20. package/lib/components/footer.ts +37 -18
  21. package/lib/components/header.ts +53 -33
  22. package/lib/components/heading.ts +119 -0
  23. package/lib/components/helpers.ts +34 -0
  24. package/lib/components/hero.ts +57 -31
  25. package/lib/components/include.ts +292 -0
  26. package/lib/components/input.ts +508 -77
  27. package/lib/components/layout.ts +144 -18
  28. package/lib/components/list.ts +83 -74
  29. package/lib/components/loading.ts +263 -0
  30. package/lib/components/main.ts +43 -17
  31. package/lib/components/menu.ts +108 -24
  32. package/lib/components/modal.ts +50 -21
  33. package/lib/components/nav.ts +60 -18
  34. package/lib/components/paragraph.ts +111 -0
  35. package/lib/components/progress.ts +276 -0
  36. package/lib/components/radio.ts +236 -0
  37. package/lib/components/req.ts +300 -0
  38. package/lib/components/script.ts +33 -74
  39. package/lib/components/select.ts +280 -0
  40. package/lib/components/sidebar.ts +87 -37
  41. package/lib/components/style.ts +47 -70
  42. package/lib/components/switch.ts +261 -0
  43. package/lib/components/table.ts +47 -24
  44. package/lib/components/tabs.ts +105 -63
  45. package/lib/components/theme-toggle.ts +361 -0
  46. package/lib/components/token-calculator.ts +380 -0
  47. package/lib/components/tooltip.ts +244 -0
  48. package/lib/components/view.ts +36 -20
  49. package/lib/components/write.ts +284 -0
  50. package/lib/globals.d.ts +21 -0
  51. package/lib/jux.ts +178 -68
  52. package/lib/presets/notion.css +521 -0
  53. package/lib/presets/notion.jux +27 -0
  54. package/lib/reactivity/state.ts +364 -0
  55. package/lib/themes/charts.js +126 -0
  56. package/machinery/compiler.js +126 -38
  57. package/machinery/generators/html.js +2 -3
  58. package/machinery/server.js +2 -2
  59. package/package.json +29 -3
  60. package/lib/components/import.ts +0 -430
  61. package/lib/components/node.ts +0 -200
  62. package/lib/components/reactivity.js +0 -104
  63. package/lib/components/theme.ts +0 -97
  64. package/lib/layouts/notion.css +0 -258
  65. package/lib/styles/base-theme.css +0 -186
  66. package/lib/styles/dark-theme.css +0 -144
  67. package/lib/styles/light-theme.css +0 -144
  68. package/lib/styles/tokens/dark.css +0 -86
  69. package/lib/styles/tokens/light.css +0 -86
  70. package/lib/templates/index.juxt +0 -33
  71. package/lib/themes/dark.css +0 -86
  72. package/lib/themes/light.css +0 -86
  73. /package/lib/{styles → presets}/global.css +0 -0
package/lib/components/docs-data.json CHANGED
@@ -3,24 +3,24 @@
3
3
  {
4
4
  "name": "App",
5
5
  "category": "Core",
6
- "description": "App - Configure application-level settings",
7
- "constructor": "new App()",
6
+ "description": "App component options",
7
+ "constructor": "jux.app(id: string, options?: AppOptions)",
8
8
  "fluentMethods": [
9
9
  {
10
10
  "name": "title",
11
- "params": "(title)",
11
+ "params": "(value)",
12
12
  "returns": "this",
13
13
  "description": "Set title"
14
14
  },
15
15
  {
16
16
  "name": "theme",
17
- "params": "(theme)",
17
+ "params": "(value)",
18
18
  "returns": "this",
19
19
  "description": "Set theme"
20
20
  },
21
21
  {
22
22
  "name": "favicon",
23
- "params": "(url)",
23
+ "params": "(value)",
24
24
  "returns": "this",
25
25
  "description": "Set favicon"
26
26
  },
@@ -29,111 +29,66 @@
29
29
  "params": "(name, content)",
30
30
  "returns": "this",
31
31
  "description": "Set meta"
32
- }
33
- ],
34
- "example": "jux.app('id').render()"
35
- },
36
- {
37
- "name": "Import",
38
- "category": "Core",
39
- "description": "Import - Import external resources (CSS, JS, images, fonts, etc.)",
40
- "constructor": "jux.import(url: string, options?: ImportOptions)",
41
- "fluentMethods": [
42
- {
43
- "name": "type",
44
- "params": "(type)",
45
- "returns": "this",
46
- "description": "Set type"
47
32
  },
48
33
  {
49
- "name": "href",
34
+ "name": "addStylesheet",
50
35
  "params": "(url)",
51
36
  "returns": "this",
52
- "description": "Set href"
37
+ "description": "Set addStylesheet"
53
38
  },
54
39
  {
55
- "name": "src",
40
+ "name": "addScript",
56
41
  "params": "(url)",
57
42
  "returns": "this",
58
- "description": "Set src"
59
- },
60
- {
61
- "name": "as",
62
- "params": "(value)",
63
- "returns": "this",
64
- "description": "Set as"
65
- },
66
- {
67
- "name": "crossOrigin",
68
- "params": "(value)",
69
- "returns": "this",
70
- "description": "Set crossOrigin"
71
- },
72
- {
73
- "name": "integrity",
74
- "params": "(hash)",
75
- "returns": "this",
76
- "description": "Set integrity"
77
- },
78
- {
79
- "name": "async",
80
- "params": "(value)",
81
- "returns": "this",
82
- "description": "Set async"
83
- },
84
- {
85
- "name": "defer",
86
- "params": "(value)",
87
- "returns": "this",
88
- "description": "Set defer"
89
- },
90
- {
91
- "name": "module",
92
- "params": "(value)",
93
- "returns": "this",
94
- "description": "Set module"
43
+ "description": "Set addScript"
95
44
  },
96
45
  {
97
- "name": "location",
98
- "params": "(loc)",
46
+ "name": "setup",
47
+ "params": "(options)",
99
48
  "returns": "this",
100
- "description": "Set location"
49
+ "description": "Set setup"
101
50
  },
102
51
  {
103
52
  "name": "render",
104
53
  "params": "()",
105
54
  "returns": "this",
106
55
  "description": "Set render"
107
- },
108
- {
109
- "name": "remove",
110
- "params": "()",
111
- "returns": "this",
112
- "description": "Set remove"
113
56
  }
114
57
  ],
115
- "example": "jux.import('id').render()"
58
+ "example": "jux.app('myApp').setup({"
116
59
  },
117
60
  {
118
61
  "name": "Layout",
119
62
  "category": "Core",
120
- "description": "Layout - Load a JUX layout file",
121
- "constructor": "new Layout()",
63
+ "description": "Layout component interface",
64
+ "constructor": "jux.layout(...args: any[])",
122
65
  "fluentMethods": [
123
66
  {
124
67
  "name": "file",
125
68
  "params": "(juxFile)",
126
69
  "returns": "this",
127
70
  "description": "Set file"
71
+ },
72
+ {
73
+ "name": "add",
74
+ "params": "(component)",
75
+ "returns": "this",
76
+ "description": "Set add"
77
+ },
78
+ {
79
+ "name": "render",
80
+ "params": "(target?)",
81
+ "returns": "this",
82
+ "description": "Set render"
128
83
  }
129
84
  ],
130
- "example": "jux.layout('id').render()"
85
+ "example": "// As a composition function"
131
86
  },
132
87
  {
133
88
  "name": "Script",
134
89
  "category": "Core",
135
- "description": "Script - Inject JavaScript into the document",
136
- "constructor": "new Script()",
90
+ "description": "Script - Inject inline JavaScript into the document",
91
+ "constructor": "jux.script(content: string = '')",
137
92
  "fluentMethods": [
138
93
  {
139
94
  "name": "content",
@@ -142,28 +97,16 @@
142
97
  "description": "Set content"
143
98
  },
144
99
  {
145
- "name": "src",
146
- "params": "(url)",
147
- "returns": "this",
148
- "description": "Set src"
149
- },
150
- {
151
- "name": "async",
152
- "params": "(value)",
153
- "returns": "this",
154
- "description": "Set async"
155
- },
156
- {
157
- "name": "defer",
100
+ "name": "type",
158
101
  "params": "(value)",
159
102
  "returns": "this",
160
- "description": "Set defer"
103
+ "description": "Set type"
161
104
  },
162
105
  {
163
- "name": "type",
164
- "params": "(value)",
106
+ "name": "module",
107
+ "params": "()",
165
108
  "returns": "this",
166
- "description": "Set type"
109
+ "description": "Set module"
167
110
  },
168
111
  {
169
112
  "name": "render",
@@ -178,13 +121,13 @@
178
121
  "description": "Set remove"
179
122
  }
180
123
  ],
181
- "example": "jux.script('id').render()"
124
+ "example": "jux.script('console.log(\"Hello\")');"
182
125
  },
183
126
  {
184
127
  "name": "Style",
185
128
  "category": "Core",
186
- "description": "Style component",
187
- "constructor": "new Style()",
129
+ "description": "Style - Inject inline CSS into the document",
130
+ "constructor": "jux.style(content: string = '')",
188
131
  "fluentMethods": [
189
132
  {
190
133
  "name": "content",
@@ -192,12 +135,6 @@
192
135
  "returns": "this",
193
136
  "description": "Set content"
194
137
  },
195
- {
196
- "name": "url",
197
- "params": "(href)",
198
- "returns": "this",
199
- "description": "Set url"
200
- },
201
138
  {
202
139
  "name": "append",
203
140
  "params": "(css)",
@@ -223,28 +160,13 @@
223
160
  "description": "Set remove"
224
161
  }
225
162
  ],
226
- "example": "jux.style('id').render()"
227
- },
228
- {
229
- "name": "Theme",
230
- "category": "Core",
231
- "description": "Theme - Load and apply CSS themes",
232
- "constructor": "jux.theme(name: string)",
233
- "fluentMethods": [
234
- {
235
- "name": "load",
236
- "params": "(name)",
237
- "returns": "this",
238
- "description": "Set load"
239
- }
240
- ],
241
- "example": "jux.theme('dark'); // Load vendor theme from lib/themes/"
163
+ "example": "jux.style('body { margin: 0; }');"
242
164
  },
243
165
  {
244
166
  "name": "Chart",
245
167
  "category": "Data Components",
246
168
  "description": "Chart component options",
247
- "constructor": "jux.chart(componentId: string, options: ChartOptions = {})",
169
+ "constructor": "jux.chart(id: string, options: ChartOptions = {})",
248
170
  "fluentMethods": [
249
171
  {
250
172
  "name": "type",
@@ -291,7 +213,7 @@
291
213
  "name": "List",
292
214
  "category": "Data Components",
293
215
  "description": "List item interface",
294
- "constructor": "jux.list(componentId: string, options: ListOptions = {})",
216
+ "constructor": "jux.list(id: string, options: ListOptions = {})",
295
217
  "fluentMethods": [
296
218
  {
297
219
  "name": "items",
@@ -323,6 +245,18 @@
323
245
  "returns": "this",
324
246
  "description": "Set selectable"
325
247
  },
248
+ {
249
+ "name": "style",
250
+ "params": "(value)",
251
+ "returns": "this",
252
+ "description": "Set style"
253
+ },
254
+ {
255
+ "name": "class",
256
+ "params": "(value)",
257
+ "returns": "this",
258
+ "description": "Set class"
259
+ },
326
260
  {
327
261
  "name": "add",
328
262
  "params": "(item, index?)",
@@ -372,7 +306,7 @@
372
306
  "name": "Table",
373
307
  "category": "Data Components",
374
308
  "description": "Table column configuration",
375
- "constructor": "jux.table(componentId: string, options: TableOptions = {})",
309
+ "constructor": "jux.table(id: string, options: TableOptions = {})",
376
310
  "fluentMethods": [
377
311
  {
378
312
  "name": "columns",
@@ -410,6 +344,18 @@
410
344
  "returns": "this",
411
345
  "description": "Set allowHtml"
412
346
  },
347
+ {
348
+ "name": "style",
349
+ "params": "(value)",
350
+ "returns": "this",
351
+ "description": "Set style"
352
+ },
353
+ {
354
+ "name": "class",
355
+ "params": "(value)",
356
+ "returns": "this",
357
+ "description": "Set class"
358
+ },
413
359
  {
414
360
  "name": "render",
415
361
  "params": "(targetId?)",
@@ -426,16 +372,16 @@
426
372
  "example": "// Auto-generate columns from data"
427
373
  },
428
374
  {
429
- "name": "Button",
375
+ "name": "Alert",
430
376
  "category": "UI Components",
431
- "description": "Button component options",
432
- "constructor": "jux.button(componentId: string, options: ButtonOptions = {})",
377
+ "description": "Alert component options",
378
+ "constructor": "jux.alert(id: string, options: AlertOptions = {})",
433
379
  "fluentMethods": [
434
380
  {
435
- "name": "label",
381
+ "name": "message",
436
382
  "params": "(value)",
437
383
  "returns": "this",
438
- "description": "Set label"
384
+ "description": "Set message"
439
385
  },
440
386
  {
441
387
  "name": "variant",
@@ -444,10 +390,40 @@
444
390
  "description": "Set variant"
445
391
  },
446
392
  {
447
- "name": "disabled",
393
+ "name": "title",
448
394
  "params": "(value)",
449
395
  "returns": "this",
450
- "description": "Set disabled"
396
+ "description": "Set title"
397
+ },
398
+ {
399
+ "name": "dismissible",
400
+ "params": "(value)",
401
+ "returns": "this",
402
+ "description": "Set dismissible"
403
+ },
404
+ {
405
+ "name": "icon",
406
+ "params": "(value)",
407
+ "returns": "this",
408
+ "description": "Set icon"
409
+ },
410
+ {
411
+ "name": "style",
412
+ "params": "(value)",
413
+ "returns": "this",
414
+ "description": "Set style"
415
+ },
416
+ {
417
+ "name": "class",
418
+ "params": "(value)",
419
+ "returns": "this",
420
+ "description": "Set class"
421
+ },
422
+ {
423
+ "name": "autoDismiss",
424
+ "params": "(delay)",
425
+ "returns": "this",
426
+ "description": "Set autoDismiss"
451
427
  },
452
428
  {
453
429
  "name": "render",
@@ -462,49 +438,49 @@
462
438
  "description": "Set renderTo"
463
439
  }
464
440
  ],
465
- "example": "const btn = jux.button('myButton', { label: 'Click Me', onClick: () => console.log('clicked') });"
441
+ "example": "jux.alert('my-alert', {"
466
442
  },
467
443
  {
468
- "name": "Card",
444
+ "name": "Badge",
469
445
  "category": "UI Components",
470
- "description": "Action configuration for card actions",
471
- "constructor": "jux.card(componentId: string, options: CardOptions = {})",
446
+ "description": "Badge component options",
447
+ "constructor": "jux.badge(id: string, options: BadgeOptions = {})",
472
448
  "fluentMethods": [
473
449
  {
474
- "name": "title",
450
+ "name": "text",
475
451
  "params": "(value)",
476
452
  "returns": "this",
477
- "description": "Set title"
453
+ "description": "Set text"
478
454
  },
479
455
  {
480
- "name": "subtitle",
456
+ "name": "variant",
481
457
  "params": "(value)",
482
458
  "returns": "this",
483
- "description": "Set subtitle"
459
+ "description": "Set variant"
484
460
  },
485
461
  {
486
- "name": "content",
462
+ "name": "size",
487
463
  "params": "(value)",
488
464
  "returns": "this",
489
- "description": "Set content"
465
+ "description": "Set size"
490
466
  },
491
467
  {
492
- "name": "image",
468
+ "name": "pill",
493
469
  "params": "(value)",
494
470
  "returns": "this",
495
- "description": "Set image"
471
+ "description": "Set pill"
496
472
  },
497
473
  {
498
- "name": "actions",
474
+ "name": "style",
499
475
  "params": "(value)",
500
476
  "returns": "this",
501
- "description": "Set actions"
477
+ "description": "Set style"
502
478
  },
503
479
  {
504
- "name": "variant",
480
+ "name": "class",
505
481
  "params": "(value)",
506
482
  "returns": "this",
507
- "description": "Set variant"
483
+ "description": "Set class"
508
484
  },
509
485
  {
510
486
  "name": "render",
@@ -519,25 +495,37 @@
519
495
  "description": "Set renderTo"
520
496
  }
521
497
  ],
522
- "example": "const card = jux.card('myCard', {"
498
+ "example": "jux.badge('status', {"
523
499
  },
524
500
  {
525
- "name": "Code",
501
+ "name": "Barchart",
526
502
  "category": "UI Components",
527
- "description": "Code component options",
528
- "constructor": "jux.code(componentId: string, options: CodeOptions = {})",
503
+ "description": "Bar chart data point",
504
+ "constructor": "jux.barchart(id: string, options: BarChartOptions = {})",
529
505
  "fluentMethods": [
530
506
  {
531
- "name": "code",
532
- "params": "(value)",
507
+ "name": "bindTheme",
508
+ "params": "(stateObj)",
533
509
  "returns": "this",
534
- "description": "Set code"
510
+ "description": "Set bindTheme"
535
511
  },
536
512
  {
537
- "name": "language",
513
+ "name": "bindStyleMode",
514
+ "params": "(stateObj)",
515
+ "returns": "this",
516
+ "description": "Set bindStyleMode"
517
+ },
518
+ {
519
+ "name": "bindBorderRadius",
520
+ "params": "(stateObj)",
521
+ "returns": "this",
522
+ "description": "Set bindBorderRadius"
523
+ },
524
+ {
525
+ "name": "data",
538
526
  "params": "(value)",
539
527
  "returns": "this",
540
- "description": "Set language"
528
+ "description": "Set data"
541
529
  },
542
530
  {
543
531
  "name": "title",
@@ -546,172 +534,238 @@
546
534
  "description": "Set title"
547
535
  },
548
536
  {
549
- "name": "showLineNumbers",
537
+ "name": "subtitle",
550
538
  "params": "(value)",
551
539
  "returns": "this",
552
- "description": "Set showLineNumbers"
540
+ "description": "Set subtitle"
553
541
  },
554
542
  {
555
- "name": "highlightLines",
543
+ "name": "xAxisLabel",
556
544
  "params": "(value)",
557
545
  "returns": "this",
558
- "description": "Set highlightLines"
546
+ "description": "Set xAxisLabel"
559
547
  },
560
548
  {
561
- "name": "maxHeight",
549
+ "name": "yAxisLabel",
562
550
  "params": "(value)",
563
551
  "returns": "this",
564
- "description": "Set maxHeight"
552
+ "description": "Set yAxisLabel"
565
553
  },
566
554
  {
567
- "name": "wrap",
555
+ "name": "showTicksX",
568
556
  "params": "(value)",
569
557
  "returns": "this",
570
- "description": "Set wrap"
558
+ "description": "Set showTicksX"
571
559
  },
572
560
  {
573
- "name": "render",
574
- "params": "(targetId?)",
561
+ "name": "showTicksY",
562
+ "params": "(value)",
575
563
  "returns": "this",
576
- "description": "Set render"
564
+ "description": "Set showTicksY"
577
565
  },
578
566
  {
579
- "name": "renderTo",
580
- "params": "(juxComponent)",
581
- "returns": "this",
582
- "description": "Set renderTo"
583
- }
584
- ],
585
- "example": "const codeBlock = jux.code('myCode', {"
586
- },
587
- {
588
- "name": "Container",
589
- "category": "UI Components",
590
- "description": "Container options",
591
- "constructor": "jux.container(componentId: string, options: ContainerOptions = {})",
592
- "fluentMethods": [
593
- {
594
- "name": "direction",
567
+ "name": "showScaleX",
595
568
  "params": "(value)",
596
569
  "returns": "this",
597
- "description": "Set direction"
570
+ "description": "Set showScaleX"
598
571
  },
599
572
  {
600
- "name": "layout",
573
+ "name": "showScaleY",
601
574
  "params": "(value)",
602
575
  "returns": "this",
603
- "description": "Set layout"
576
+ "description": "Set showScaleY"
604
577
  },
605
578
  {
606
- "name": "minWidth",
579
+ "name": "scaleXUnit",
607
580
  "params": "(value)",
608
581
  "returns": "this",
609
- "description": "Set minWidth"
582
+ "description": "Set scaleXUnit"
610
583
  },
611
584
  {
612
- "name": "gap",
585
+ "name": "scaleYUnit",
613
586
  "params": "(value)",
614
587
  "returns": "this",
615
- "description": "Set gap"
588
+ "description": "Set scaleYUnit"
616
589
  },
617
590
  {
618
- "name": "justify",
591
+ "name": "showLegend",
619
592
  "params": "(value)",
620
593
  "returns": "this",
621
- "description": "Set justify"
594
+ "description": "Set showLegend"
622
595
  },
623
596
  {
624
- "name": "align",
597
+ "name": "legendOrientation",
625
598
  "params": "(value)",
626
599
  "returns": "this",
627
- "description": "Set align"
600
+ "description": "Set legendOrientation"
628
601
  },
629
602
  {
630
- "name": "wrap",
603
+ "name": "showDataTable",
631
604
  "params": "(value)",
632
605
  "returns": "this",
633
- "description": "Set wrap"
606
+ "description": "Set showDataTable"
634
607
  },
635
608
  {
636
- "name": "add",
637
- "params": "(component)",
609
+ "name": "showDataLabels",
610
+ "params": "(value)",
638
611
  "returns": "this",
639
- "description": "Set add"
640
- }
641
- ],
642
- "example": "const container = jux.container('myContainer', {"
643
- },
644
- {
645
- "name": "Footer",
646
- "category": "UI Components",
647
- "description": "Footer component options",
648
- "constructor": "jux.footer(componentId: string, options: FooterOptions = {})",
649
- "fluentMethods": [
612
+ "description": "Set showDataLabels"
613
+ },
650
614
  {
651
- "name": "content",
615
+ "name": "animate",
652
616
  "params": "(value)",
653
617
  "returns": "this",
654
- "description": "Set content"
618
+ "description": "Set animate"
655
619
  },
656
620
  {
657
- "name": "copyright",
621
+ "name": "animationDuration",
658
622
  "params": "(value)",
659
623
  "returns": "this",
660
- "description": "Set copyright"
624
+ "description": "Set animationDuration"
661
625
  },
662
626
  {
663
- "name": "links",
627
+ "name": "chartOrientation",
664
628
  "params": "(value)",
665
629
  "returns": "this",
666
- "description": "Set links"
630
+ "description": "Set chartOrientation"
667
631
  },
668
632
  {
669
- "name": "render",
670
- "params": "(targetId?)",
633
+ "name": "chartDirection",
634
+ "params": "(value)",
671
635
  "returns": "this",
672
- "description": "Set render"
636
+ "description": "Set chartDirection"
673
637
  },
674
638
  {
675
- "name": "renderTo",
676
- "params": "(juxComponent)",
639
+ "name": "width",
640
+ "params": "(value)",
677
641
  "returns": "this",
678
- "description": "Set renderTo"
679
- }
680
- ],
681
- "example": "const footer = jux.footer('myFooter', {"
682
- },
683
- {
684
- "name": "Header",
685
- "category": "UI Components",
686
- "description": "Header component options",
687
- "constructor": "jux.header(componentId: string, options: HeaderOptions = {})",
688
- "fluentMethods": [
642
+ "description": "Set width"
643
+ },
689
644
  {
690
- "name": "title",
645
+ "name": "height",
691
646
  "params": "(value)",
692
647
  "returns": "this",
693
- "description": "Set title"
648
+ "description": "Set height"
694
649
  },
695
650
  {
696
- "name": "logo",
651
+ "name": "colors",
697
652
  "params": "(value)",
698
653
  "returns": "this",
699
- "description": "Set logo"
654
+ "description": "Set colors"
700
655
  },
701
656
  {
702
- "name": "navigation",
657
+ "name": "class",
703
658
  "params": "(value)",
704
659
  "returns": "this",
705
- "description": "Set navigation"
660
+ "description": "Set class"
706
661
  },
707
662
  {
708
- "name": "sticky",
663
+ "name": "style",
709
664
  "params": "(value)",
710
665
  "returns": "this",
711
- "description": "Set sticky"
666
+ "description": "Set style"
712
667
  },
713
668
  {
714
- "name": "render",
669
+ "name": "theme",
670
+ "params": "(value)",
671
+ "returns": "this",
672
+ "description": "Set theme"
673
+ },
674
+ {
675
+ "name": "styleMode",
676
+ "params": "(value)",
677
+ "returns": "this",
678
+ "description": "Set styleMode"
679
+ },
680
+ {
681
+ "name": "borderRadius",
682
+ "params": "(value)",
683
+ "returns": "this",
684
+ "description": "Set borderRadius"
685
+ },
686
+ {
687
+ "name": "render",
688
+ "params": "(targetId?)",
689
+ "returns": "this",
690
+ "description": "Set render"
691
+ }
692
+ ],
693
+ "example": "jux.barchart('sales-chart')"
694
+ },
695
+ {
696
+ "name": "Button",
697
+ "category": "UI Components",
698
+ "description": "Button component options",
699
+ "constructor": "jux.button(id: string, options?: ButtonOptions)",
700
+ "fluentMethods": [
701
+ {
702
+ "name": "label",
703
+ "params": "(value)",
704
+ "returns": "this",
705
+ "description": "Set label"
706
+ },
707
+ {
708
+ "name": "icon",
709
+ "params": "(value)",
710
+ "returns": "this",
711
+ "description": "Set icon"
712
+ },
713
+ {
714
+ "name": "variant",
715
+ "params": "(value)",
716
+ "returns": "this",
717
+ "description": "Set variant"
718
+ },
719
+ {
720
+ "name": "size",
721
+ "params": "(value)",
722
+ "returns": "this",
723
+ "description": "Set size"
724
+ },
725
+ {
726
+ "name": "disabled",
727
+ "params": "(value)",
728
+ "returns": "this",
729
+ "description": "Set disabled"
730
+ },
731
+ {
732
+ "name": "loading",
733
+ "params": "(value)",
734
+ "returns": "this",
735
+ "description": "Set loading"
736
+ },
737
+ {
738
+ "name": "iconPosition",
739
+ "params": "(value)",
740
+ "returns": "this",
741
+ "description": "Set iconPosition"
742
+ },
743
+ {
744
+ "name": "fullWidth",
745
+ "params": "(value)",
746
+ "returns": "this",
747
+ "description": "Set fullWidth"
748
+ },
749
+ {
750
+ "name": "type",
751
+ "params": "(value)",
752
+ "returns": "this",
753
+ "description": "Set type"
754
+ },
755
+ {
756
+ "name": "style",
757
+ "params": "(value)",
758
+ "returns": "this",
759
+ "description": "Set style"
760
+ },
761
+ {
762
+ "name": "class",
763
+ "params": "(value)",
764
+ "returns": "this",
765
+ "description": "Set class"
766
+ },
767
+ {
768
+ "name": "render",
715
769
  "params": "(targetId?)",
716
770
  "returns": "this",
717
771
  "description": "Set render"
@@ -723,13 +777,13 @@
723
777
  "description": "Set renderTo"
724
778
  }
725
779
  ],
726
- "example": "const header = jux.header('myHeader', {"
780
+ "example": "jux.button('myButton').label('Click Me').click(() => console.log('hi')).render();"
727
781
  },
728
782
  {
729
- "name": "Hero",
783
+ "name": "Card",
730
784
  "category": "UI Components",
731
- "description": "Hero component options",
732
- "constructor": "jux.hero(componentId: string, options: HeroOptions = {})",
785
+ "description": "Card component options",
786
+ "constructor": "jux.card(id: string, options: CardOptions = {})",
733
787
  "fluentMethods": [
734
788
  {
735
789
  "name": "title",
@@ -738,34 +792,1511 @@
738
792
  "description": "Set title"
739
793
  },
740
794
  {
741
- "name": "subtitle",
795
+ "name": "subtitle",
796
+ "params": "(value)",
797
+ "returns": "this",
798
+ "description": "Set subtitle"
799
+ },
800
+ {
801
+ "name": "content",
802
+ "params": "(value)",
803
+ "returns": "this",
804
+ "description": "Set content"
805
+ },
806
+ {
807
+ "name": "image",
808
+ "params": "(value)",
809
+ "returns": "this",
810
+ "description": "Set image"
811
+ },
812
+ {
813
+ "name": "variant",
814
+ "params": "(value)",
815
+ "returns": "this",
816
+ "description": "Set variant"
817
+ },
818
+ {
819
+ "name": "style",
820
+ "params": "(value)",
821
+ "returns": "this",
822
+ "description": "Set style"
823
+ },
824
+ {
825
+ "name": "class",
826
+ "params": "(value)",
827
+ "returns": "this",
828
+ "description": "Set class"
829
+ },
830
+ {
831
+ "name": "withActions",
832
+ "params": "()",
833
+ "returns": "this",
834
+ "description": "Set withActions"
835
+ },
836
+ {
837
+ "name": "render",
838
+ "params": "(targetId?)",
839
+ "returns": "this",
840
+ "description": "Set render"
841
+ },
842
+ {
843
+ "name": "renderTo",
844
+ "params": "(juxComponent)",
845
+ "returns": "this",
846
+ "description": "Set renderTo"
847
+ }
848
+ ],
849
+ "example": "const card = jux.card('myCard', {"
850
+ },
851
+ {
852
+ "name": "Checkbox",
853
+ "category": "UI Components",
854
+ "description": "Two-way binding to state",
855
+ "constructor": "jux.checkbox(id: string, options: CheckboxOptions = {})",
856
+ "fluentMethods": [
857
+ {
858
+ "name": "label",
859
+ "params": "(value)",
860
+ "returns": "this",
861
+ "description": "Set label"
862
+ },
863
+ {
864
+ "name": "checked",
865
+ "params": "(value)",
866
+ "returns": "this",
867
+ "description": "Set checked"
868
+ },
869
+ {
870
+ "name": "disabled",
871
+ "params": "(value)",
872
+ "returns": "this",
873
+ "description": "Set disabled"
874
+ },
875
+ {
876
+ "name": "name",
877
+ "params": "(value)",
878
+ "returns": "this",
879
+ "description": "Set name"
880
+ },
881
+ {
882
+ "name": "value",
883
+ "params": "(value)",
884
+ "returns": "this",
885
+ "description": "Set value"
886
+ },
887
+ {
888
+ "name": "style",
889
+ "params": "(value)",
890
+ "returns": "this",
891
+ "description": "Set style"
892
+ },
893
+ {
894
+ "name": "class",
895
+ "params": "(value)",
896
+ "returns": "this",
897
+ "description": "Set class"
898
+ },
899
+ {
900
+ "name": "bind",
901
+ "params": "(stateObj)",
902
+ "returns": "this",
903
+ "description": "Set bind"
904
+ },
905
+ {
906
+ "name": "render",
907
+ "params": "(targetId?)",
908
+ "returns": "this",
909
+ "description": "Set render"
910
+ },
911
+ {
912
+ "name": "renderTo",
913
+ "params": "(juxComponent)",
914
+ "returns": "this",
915
+ "description": "Set renderTo"
916
+ }
917
+ ],
918
+ "example": "jux.checkbox('id').render()"
919
+ },
920
+ {
921
+ "name": "Code",
922
+ "category": "UI Components",
923
+ "description": "Code component options",
924
+ "constructor": "jux.code(id: string, content?: string, language?: string)",
925
+ "fluentMethods": [
926
+ {
927
+ "name": "code",
928
+ "params": "(value)",
929
+ "returns": "this",
930
+ "description": "Set code"
931
+ },
932
+ {
933
+ "name": "language",
934
+ "params": "(value)",
935
+ "returns": "this",
936
+ "description": "Set language"
937
+ },
938
+ {
939
+ "name": "lineNumbers",
940
+ "params": "(value)",
941
+ "returns": "this",
942
+ "description": "Set lineNumbers"
943
+ },
944
+ {
945
+ "name": "highlight",
946
+ "params": "(value)",
947
+ "returns": "this",
948
+ "description": "Set highlight"
949
+ },
950
+ {
951
+ "name": "style",
952
+ "params": "(value)",
953
+ "returns": "this",
954
+ "description": "Set style"
955
+ },
956
+ {
957
+ "name": "class",
958
+ "params": "(value)",
959
+ "returns": "this",
960
+ "description": "Set class"
961
+ },
962
+ {
963
+ "name": "render",
964
+ "params": "(targetId?)",
965
+ "returns": "this",
966
+ "description": "Set render"
967
+ },
968
+ {
969
+ "name": "renderTo",
970
+ "params": "(juxComponent)",
971
+ "returns": "this",
972
+ "description": "Set renderTo"
973
+ }
974
+ ],
975
+ "example": "const code = jux.code('myCode', 'console.log(\"hello\")', 'javascript');"
976
+ },
977
+ {
978
+ "name": "Container",
979
+ "category": "UI Components",
980
+ "description": "Container options",
981
+ "constructor": "jux.container(id: string, options: ContainerOptions = {})",
982
+ "fluentMethods": [
983
+ {
984
+ "name": "class",
985
+ "params": "(value)",
986
+ "returns": "this",
987
+ "description": "Set class"
988
+ },
989
+ {
990
+ "name": "style",
991
+ "params": "(value)",
992
+ "returns": "this",
993
+ "description": "Set style"
994
+ },
995
+ {
996
+ "name": "direction",
997
+ "params": "(value)",
998
+ "returns": "this",
999
+ "description": "Set direction"
1000
+ },
1001
+ {
1002
+ "name": "gap",
1003
+ "params": "(value)",
1004
+ "returns": "this",
1005
+ "description": "Set gap"
1006
+ },
1007
+ {
1008
+ "name": "align",
1009
+ "params": "(value)",
1010
+ "returns": "this",
1011
+ "description": "Set align"
1012
+ },
1013
+ {
1014
+ "name": "justify",
1015
+ "params": "(value)",
1016
+ "returns": "this",
1017
+ "description": "Set justify"
1018
+ },
1019
+ {
1020
+ "name": "render",
1021
+ "params": "(targetId?)",
1022
+ "returns": "this",
1023
+ "description": "Set render"
1024
+ }
1025
+ ],
1026
+ "example": "// Plain container"
1027
+ },
1028
+ {
1029
+ "name": "Datepicker",
1030
+ "category": "UI Components",
1031
+ "description": "DatePicker component options",
1032
+ "constructor": "jux.datepicker(id: string, options: DatePickerOptions = {})",
1033
+ "fluentMethods": [
1034
+ {
1035
+ "name": "value",
1036
+ "params": "(value)",
1037
+ "returns": "this",
1038
+ "description": "Set value"
1039
+ },
1040
+ {
1041
+ "name": "min",
1042
+ "params": "(value)",
1043
+ "returns": "this",
1044
+ "description": "Set min"
1045
+ },
1046
+ {
1047
+ "name": "max",
1048
+ "params": "(value)",
1049
+ "returns": "this",
1050
+ "description": "Set max"
1051
+ },
1052
+ {
1053
+ "name": "placeholder",
1054
+ "params": "(value)",
1055
+ "returns": "this",
1056
+ "description": "Set placeholder"
1057
+ },
1058
+ {
1059
+ "name": "disabled",
1060
+ "params": "(value)",
1061
+ "returns": "this",
1062
+ "description": "Set disabled"
1063
+ },
1064
+ {
1065
+ "name": "name",
1066
+ "params": "(value)",
1067
+ "returns": "this",
1068
+ "description": "Set name"
1069
+ },
1070
+ {
1071
+ "name": "style",
1072
+ "params": "(value)",
1073
+ "returns": "this",
1074
+ "description": "Set style"
1075
+ },
1076
+ {
1077
+ "name": "class",
1078
+ "params": "(value)",
1079
+ "returns": "this",
1080
+ "description": "Set class"
1081
+ },
1082
+ {
1083
+ "name": "bind",
1084
+ "params": "(stateObj)",
1085
+ "returns": "this",
1086
+ "description": "Set bind"
1087
+ },
1088
+ {
1089
+ "name": "render",
1090
+ "params": "(targetId?)",
1091
+ "returns": "this",
1092
+ "description": "Set render"
1093
+ },
1094
+ {
1095
+ "name": "renderTo",
1096
+ "params": "(juxComponent)",
1097
+ "returns": "this",
1098
+ "description": "Set renderTo"
1099
+ }
1100
+ ],
1101
+ "example": "jux.datepicker('start-date', {"
1102
+ },
1103
+ {
1104
+ "name": "Dialog",
1105
+ "category": "UI Components",
1106
+ "description": "Dialog component options",
1107
+ "constructor": "jux.dialog(id: string, options: DialogOptions = {})",
1108
+ "fluentMethods": [
1109
+ {
1110
+ "name": "title",
1111
+ "params": "(value)",
1112
+ "returns": "this",
1113
+ "description": "Set title"
1114
+ },
1115
+ {
1116
+ "name": "message",
1117
+ "params": "(value)",
1118
+ "returns": "this",
1119
+ "description": "Set message"
1120
+ },
1121
+ {
1122
+ "name": "confirmText",
1123
+ "params": "(value)",
1124
+ "returns": "this",
1125
+ "description": "Set confirmText"
1126
+ },
1127
+ {
1128
+ "name": "cancelText",
1129
+ "params": "(value)",
1130
+ "returns": "this",
1131
+ "description": "Set cancelText"
1132
+ },
1133
+ {
1134
+ "name": "variant",
1135
+ "params": "(value)",
1136
+ "returns": "this",
1137
+ "description": "Set variant"
1138
+ },
1139
+ {
1140
+ "name": "style",
1141
+ "params": "(value)",
1142
+ "returns": "this",
1143
+ "description": "Set style"
1144
+ },
1145
+ {
1146
+ "name": "class",
1147
+ "params": "(value)",
1148
+ "returns": "this",
1149
+ "description": "Set class"
1150
+ },
1151
+ {
1152
+ "name": "render",
1153
+ "params": "(targetId?)",
1154
+ "returns": "this",
1155
+ "description": "Set render"
1156
+ },
1157
+ {
1158
+ "name": "renderTo",
1159
+ "params": "(juxComponent)",
1160
+ "returns": "this",
1161
+ "description": "Set renderTo"
1162
+ }
1163
+ ],
1164
+ "example": "jux.dialog('confirm-delete', {"
1165
+ },
1166
+ {
1167
+ "name": "Dropdown",
1168
+ "category": "UI Components",
1169
+ "description": "Dropdown menu item",
1170
+ "constructor": "jux.dropdown(id: string, options: DropdownOptions = {})",
1171
+ "fluentMethods": [
1172
+ {
1173
+ "name": "items",
1174
+ "params": "(value)",
1175
+ "returns": "this",
1176
+ "description": "Set items"
1177
+ },
1178
+ {
1179
+ "name": "addItem",
1180
+ "params": "(item)",
1181
+ "returns": "this",
1182
+ "description": "Set addItem"
1183
+ },
1184
+ {
1185
+ "name": "trigger",
1186
+ "params": "(value)",
1187
+ "returns": "this",
1188
+ "description": "Set trigger"
1189
+ },
1190
+ {
1191
+ "name": "position",
1192
+ "params": "(value)",
1193
+ "returns": "this",
1194
+ "description": "Set position"
1195
+ },
1196
+ {
1197
+ "name": "style",
1198
+ "params": "(value)",
1199
+ "returns": "this",
1200
+ "description": "Set style"
1201
+ },
1202
+ {
1203
+ "name": "class",
1204
+ "params": "(value)",
1205
+ "returns": "this",
1206
+ "description": "Set class"
1207
+ },
1208
+ {
1209
+ "name": "render",
1210
+ "params": "(targetId?)",
1211
+ "returns": "this",
1212
+ "description": "Set render"
1213
+ },
1214
+ {
1215
+ "name": "renderTo",
1216
+ "params": "(juxComponent)",
1217
+ "returns": "this",
1218
+ "description": "Set renderTo"
1219
+ }
1220
+ ],
1221
+ "example": "jux.dropdown('actions', {"
1222
+ },
1223
+ {
1224
+ "name": "Element",
1225
+ "category": "UI Components",
1226
+ "description": "Element component options",
1227
+ "constructor": "jux.element(id: string, options: ElementOptions = {})",
1228
+ "fluentMethods": [
1229
+ {
1230
+ "name": "render",
1231
+ "params": "(targetId?: string)",
1232
+ "returns": "Element",
1233
+ "description": "Render component to DOM"
1234
+ }
1235
+ ],
1236
+ "example": "const div = jux.element('myDiv', { tagType: 'div', className: 'container' });"
1237
+ },
1238
+ {
1239
+ "name": "Fileupload",
1240
+ "category": "UI Components",
1241
+ "description": "FileUpload component options",
1242
+ "constructor": "jux.fileupload(id: string, options: FileUploadOptions = {})",
1243
+ "fluentMethods": [
1244
+ {
1245
+ "name": "accept",
1246
+ "params": "(value)",
1247
+ "returns": "this",
1248
+ "description": "Set accept"
1249
+ },
1250
+ {
1251
+ "name": "multiple",
1252
+ "params": "(value)",
1253
+ "returns": "this",
1254
+ "description": "Set multiple"
1255
+ },
1256
+ {
1257
+ "name": "maxSize",
1258
+ "params": "(value)",
1259
+ "returns": "this",
1260
+ "description": "Set maxSize"
1261
+ },
1262
+ {
1263
+ "name": "disabled",
1264
+ "params": "(value)",
1265
+ "returns": "this",
1266
+ "description": "Set disabled"
1267
+ },
1268
+ {
1269
+ "name": "text",
1270
+ "params": "(value)",
1271
+ "returns": "this",
1272
+ "description": "Set text"
1273
+ },
1274
+ {
1275
+ "name": "dragText",
1276
+ "params": "(value)",
1277
+ "returns": "this",
1278
+ "description": "Set dragText"
1279
+ },
1280
+ {
1281
+ "name": "style",
1282
+ "params": "(value)",
1283
+ "returns": "this",
1284
+ "description": "Set style"
1285
+ },
1286
+ {
1287
+ "name": "class",
1288
+ "params": "(value)",
1289
+ "returns": "this",
1290
+ "description": "Set class"
1291
+ },
1292
+ {
1293
+ "name": "render",
1294
+ "params": "(targetId?)",
1295
+ "returns": "this",
1296
+ "description": "Set render"
1297
+ },
1298
+ {
1299
+ "name": "renderTo",
1300
+ "params": "(juxComponent)",
1301
+ "returns": "this",
1302
+ "description": "Set renderTo"
1303
+ }
1304
+ ],
1305
+ "example": "jux.fileupload('docs', {"
1306
+ },
1307
+ {
1308
+ "name": "Footer",
1309
+ "category": "UI Components",
1310
+ "description": "Footer component options",
1311
+ "constructor": "jux.footer(id: string, options: FooterOptions = {})",
1312
+ "fluentMethods": [
1313
+ {
1314
+ "name": "content",
1315
+ "params": "(value)",
1316
+ "returns": "this",
1317
+ "description": "Set content"
1318
+ },
1319
+ {
1320
+ "name": "copyright",
1321
+ "params": "(value)",
1322
+ "returns": "this",
1323
+ "description": "Set copyright"
1324
+ },
1325
+ {
1326
+ "name": "links",
1327
+ "params": "(value)",
1328
+ "returns": "this",
1329
+ "description": "Set links"
1330
+ },
1331
+ {
1332
+ "name": "class",
1333
+ "params": "(value)",
1334
+ "returns": "this",
1335
+ "description": "Set class"
1336
+ },
1337
+ {
1338
+ "name": "style",
1339
+ "params": "(value)",
1340
+ "returns": "this",
1341
+ "description": "Set style"
1342
+ },
1343
+ {
1344
+ "name": "render",
1345
+ "params": "(targetId?)",
1346
+ "returns": "this",
1347
+ "description": "Set render"
1348
+ },
1349
+ {
1350
+ "name": "renderTo",
1351
+ "params": "(juxComponent)",
1352
+ "returns": "this",
1353
+ "description": "Set renderTo"
1354
+ }
1355
+ ],
1356
+ "example": "const footer = jux.footer('myFooter', {"
1357
+ },
1358
+ {
1359
+ "name": "Header",
1360
+ "category": "UI Components",
1361
+ "description": "Header component options",
1362
+ "constructor": "jux.header(id: string, options: HeaderOptions = {})",
1363
+ "fluentMethods": [
1364
+ {
1365
+ "name": "title",
1366
+ "params": "(value)",
1367
+ "returns": "this",
1368
+ "description": "Set title"
1369
+ },
1370
+ {
1371
+ "name": "logo",
1372
+ "params": "(value)",
1373
+ "returns": "this",
1374
+ "description": "Set logo"
1375
+ },
1376
+ {
1377
+ "name": "navigation",
1378
+ "params": "(value)",
1379
+ "returns": "this",
1380
+ "description": "Set navigation"
1381
+ },
1382
+ {
1383
+ "name": "sticky",
1384
+ "params": "(value)",
1385
+ "returns": "this",
1386
+ "description": "Set sticky"
1387
+ },
1388
+ {
1389
+ "name": "class",
1390
+ "params": "(value)",
1391
+ "returns": "this",
1392
+ "description": "Set class"
1393
+ },
1394
+ {
1395
+ "name": "style",
1396
+ "params": "(value)",
1397
+ "returns": "this",
1398
+ "description": "Set style"
1399
+ },
1400
+ {
1401
+ "name": "render",
1402
+ "params": "(targetId?)",
1403
+ "returns": "this",
1404
+ "description": "Set render"
1405
+ },
1406
+ {
1407
+ "name": "renderTo",
1408
+ "params": "(juxComponent)",
1409
+ "returns": "this",
1410
+ "description": "Set renderTo"
1411
+ }
1412
+ ],
1413
+ "example": "const header = jux.header('myHeader', {"
1414
+ },
1415
+ {
1416
+ "name": "Heading",
1417
+ "category": "UI Components",
1418
+ "description": "Heading options",
1419
+ "constructor": "jux.heading(id: string, options: HeadingOptions = {})",
1420
+ "fluentMethods": [
1421
+ {
1422
+ "name": "level",
1423
+ "params": "(value)",
1424
+ "returns": "this",
1425
+ "description": "Set level"
1426
+ },
1427
+ {
1428
+ "name": "text",
1429
+ "params": "(value)",
1430
+ "returns": "this",
1431
+ "description": "Set text"
1432
+ },
1433
+ {
1434
+ "name": "class",
1435
+ "params": "(value)",
1436
+ "returns": "this",
1437
+ "description": "Set class"
1438
+ },
1439
+ {
1440
+ "name": "style",
1441
+ "params": "(value)",
1442
+ "returns": "this",
1443
+ "description": "Set style"
1444
+ },
1445
+ {
1446
+ "name": "render",
1447
+ "params": "(targetId?)",
1448
+ "returns": "this",
1449
+ "description": "Set render"
1450
+ }
1451
+ ],
1452
+ "example": "jux.heading('title', { level: 1, text: 'Welcome' }).render('#app');"
1453
+ },
1454
+ {
1455
+ "name": "Helpers",
1456
+ "category": "UI Components",
1457
+ "description": "Component helper utilities",
1458
+ "constructor": "jux.helpers(id: string)",
1459
+ "fluentMethods": [],
1460
+ "example": "jux.helpers('id').render()"
1461
+ },
1462
+ {
1463
+ "name": "Hero",
1464
+ "category": "UI Components",
1465
+ "description": "Hero component options",
1466
+ "constructor": "jux.hero(id: string, options: HeroOptions = {})",
1467
+ "fluentMethods": [
1468
+ {
1469
+ "name": "title",
1470
+ "params": "(value)",
1471
+ "returns": "this",
1472
+ "description": "Set title"
1473
+ },
1474
+ {
1475
+ "name": "subtitle",
1476
+ "params": "(value)",
1477
+ "returns": "this",
1478
+ "description": "Set subtitle"
1479
+ },
1480
+ {
1481
+ "name": "cta",
1482
+ "params": "(value)",
1483
+ "returns": "this",
1484
+ "description": "Set cta"
1485
+ },
1486
+ {
1487
+ "name": "ctaLink",
1488
+ "params": "(value)",
1489
+ "returns": "this",
1490
+ "description": "Set ctaLink"
1491
+ },
1492
+ {
1493
+ "name": "backgroundImage",
1494
+ "params": "(value)",
1495
+ "returns": "this",
1496
+ "description": "Set backgroundImage"
1497
+ },
1498
+ {
1499
+ "name": "variant",
1500
+ "params": "(value)",
1501
+ "returns": "this",
1502
+ "description": "Set variant"
1503
+ },
1504
+ {
1505
+ "name": "style",
1506
+ "params": "(value)",
1507
+ "returns": "this",
1508
+ "description": "Set style"
1509
+ },
1510
+ {
1511
+ "name": "class",
1512
+ "params": "(value)",
1513
+ "returns": "this",
1514
+ "description": "Set class"
1515
+ },
1516
+ {
1517
+ "name": "render",
1518
+ "params": "(targetId?)",
1519
+ "returns": "this",
1520
+ "description": "Set render"
1521
+ },
1522
+ {
1523
+ "name": "renderTo",
1524
+ "params": "(juxComponent)",
1525
+ "returns": "this",
1526
+ "description": "Set renderTo"
1527
+ }
1528
+ ],
1529
+ "example": "const hero = jux.hero('myHero', {"
1530
+ },
1531
+ {
1532
+ "name": "Include",
1533
+ "category": "UI Components",
1534
+ "description": "Include - Include external resources (CSS, JS, images, fonts, etc.)",
1535
+ "constructor": "jux.include(urlOrFile: string)",
1536
+ "fluentMethods": [
1537
+ {
1538
+ "name": "withCss",
1539
+ "params": "()",
1540
+ "returns": "this",
1541
+ "description": "Set withCss"
1542
+ },
1543
+ {
1544
+ "name": "withJs",
1545
+ "params": "(options?)",
1546
+ "returns": "this",
1547
+ "description": "Set withJs"
1548
+ },
1549
+ {
1550
+ "name": "withModule",
1551
+ "params": "()",
1552
+ "returns": "this",
1553
+ "description": "Set withModule"
1554
+ },
1555
+ {
1556
+ "name": "withImage",
1557
+ "params": "()",
1558
+ "returns": "this",
1559
+ "description": "Set withImage"
1560
+ },
1561
+ {
1562
+ "name": "withFont",
1563
+ "params": "()",
1564
+ "returns": "this",
1565
+ "description": "Set withFont"
1566
+ },
1567
+ {
1568
+ "name": "withPreload",
1569
+ "params": "(as?)",
1570
+ "returns": "this",
1571
+ "description": "Set withPreload"
1572
+ },
1573
+ {
1574
+ "name": "withPrefetch",
1575
+ "params": "()",
1576
+ "returns": "this",
1577
+ "description": "Set withPrefetch"
1578
+ },
1579
+ {
1580
+ "name": "with",
1581
+ "params": "(options)",
1582
+ "returns": "this",
1583
+ "description": "Set with"
1584
+ },
1585
+ {
1586
+ "name": "inHead",
1587
+ "params": "()",
1588
+ "returns": "this",
1589
+ "description": "Set inHead"
1590
+ },
1591
+ {
1592
+ "name": "inBody",
1593
+ "params": "()",
1594
+ "returns": "this",
1595
+ "description": "Set inBody"
1596
+ },
1597
+ {
1598
+ "name": "async",
1599
+ "params": "()",
1600
+ "returns": "this",
1601
+ "description": "Set async"
1602
+ },
1603
+ {
1604
+ "name": "defer",
1605
+ "params": "()",
1606
+ "returns": "this",
1607
+ "description": "Set defer"
1608
+ },
1609
+ {
1610
+ "name": "crossOrigin",
1611
+ "params": "(value)",
1612
+ "returns": "this",
1613
+ "description": "Set crossOrigin"
1614
+ },
1615
+ {
1616
+ "name": "integrity",
1617
+ "params": "(hash)",
1618
+ "returns": "this",
1619
+ "description": "Set integrity"
1620
+ },
1621
+ {
1622
+ "name": "render",
1623
+ "params": "()",
1624
+ "returns": "this",
1625
+ "description": "Set render"
1626
+ },
1627
+ {
1628
+ "name": "remove",
1629
+ "params": "()",
1630
+ "returns": "this",
1631
+ "description": "Set remove"
1632
+ }
1633
+ ],
1634
+ "example": "jux.include('styles.css');"
1635
+ },
1636
+ {
1637
+ "name": "Input",
1638
+ "category": "UI Components",
1639
+ "description": "Input component options",
1640
+ "constructor": "jux.input(id: string, options: InputOptions = {})",
1641
+ "fluentMethods": [
1642
+ {
1643
+ "name": "type",
1644
+ "params": "(value)",
1645
+ "returns": "this",
1646
+ "description": "Set type"
1647
+ },
1648
+ {
1649
+ "name": "value",
1650
+ "params": "(value)",
1651
+ "returns": "this",
1652
+ "description": "Set value"
1653
+ },
1654
+ {
1655
+ "name": "placeholder",
1656
+ "params": "(value)",
1657
+ "returns": "this",
1658
+ "description": "Set placeholder"
1659
+ },
1660
+ {
1661
+ "name": "label",
1662
+ "params": "(value)",
1663
+ "returns": "this",
1664
+ "description": "Set label"
1665
+ },
1666
+ {
1667
+ "name": "required",
1668
+ "params": "(value)",
1669
+ "returns": "this",
1670
+ "description": "Set required"
1671
+ },
1672
+ {
1673
+ "name": "disabled",
1674
+ "params": "(value)",
1675
+ "returns": "this",
1676
+ "description": "Set disabled"
1677
+ },
1678
+ {
1679
+ "name": "name",
1680
+ "params": "(value)",
1681
+ "returns": "this",
1682
+ "description": "Set name"
1683
+ },
1684
+ {
1685
+ "name": "rows",
1686
+ "params": "(value)",
1687
+ "returns": "this",
1688
+ "description": "Set rows"
1689
+ },
1690
+ {
1691
+ "name": "min",
1692
+ "params": "(value)",
1693
+ "returns": "this",
1694
+ "description": "Set min"
1695
+ },
1696
+ {
1697
+ "name": "max",
1698
+ "params": "(value)",
1699
+ "returns": "this",
1700
+ "description": "Set max"
1701
+ },
1702
+ {
1703
+ "name": "step",
1704
+ "params": "(value)",
1705
+ "returns": "this",
1706
+ "description": "Set step"
1707
+ },
1708
+ {
1709
+ "name": "minLength",
1710
+ "params": "(value)",
1711
+ "returns": "this",
1712
+ "description": "Set minLength"
1713
+ },
1714
+ {
1715
+ "name": "maxLength",
1716
+ "params": "(value)",
1717
+ "returns": "this",
1718
+ "description": "Set maxLength"
1719
+ },
1720
+ {
1721
+ "name": "pattern",
1722
+ "params": "(value)",
1723
+ "returns": "this",
1724
+ "description": "Set pattern"
1725
+ },
1726
+ {
1727
+ "name": "style",
1728
+ "params": "(value)",
1729
+ "returns": "this",
1730
+ "description": "Set style"
1731
+ },
1732
+ {
1733
+ "name": "class",
1734
+ "params": "(value)",
1735
+ "returns": "this",
1736
+ "description": "Set class"
1737
+ },
1738
+ {
1739
+ "name": "bind",
1740
+ "params": "(stateObj)",
1741
+ "returns": "this",
1742
+ "description": "Set bind"
1743
+ },
1744
+ {
1745
+ "name": "render",
1746
+ "params": "(targetId?)",
1747
+ "returns": "this",
1748
+ "description": "Set render"
1749
+ },
1750
+ {
1751
+ "name": "renderTo",
1752
+ "params": "(juxComponent)",
1753
+ "returns": "this",
1754
+ "description": "Set renderTo"
1755
+ }
1756
+ ],
1757
+ "example": "jux.input('username')"
1758
+ },
1759
+ {
1760
+ "name": "Loading",
1761
+ "category": "UI Components",
1762
+ "description": "Loading component options",
1763
+ "constructor": "jux.loading(id: string, options: LoadingOptions = {})",
1764
+ "fluentMethods": [
1765
+ {
1766
+ "name": "variant",
1767
+ "params": "(value)",
1768
+ "returns": "this",
1769
+ "description": "Set variant"
1770
+ },
1771
+ {
1772
+ "name": "size",
1773
+ "params": "(value)",
1774
+ "returns": "this",
1775
+ "description": "Set size"
1776
+ },
1777
+ {
1778
+ "name": "text",
1779
+ "params": "(value)",
1780
+ "returns": "this",
1781
+ "description": "Set text"
1782
+ },
1783
+ {
1784
+ "name": "fullscreen",
1785
+ "params": "(value)",
1786
+ "returns": "this",
1787
+ "description": "Set fullscreen"
1788
+ },
1789
+ {
1790
+ "name": "style",
1791
+ "params": "(value)",
1792
+ "returns": "this",
1793
+ "description": "Set style"
1794
+ },
1795
+ {
1796
+ "name": "class",
1797
+ "params": "(value)",
1798
+ "returns": "this",
1799
+ "description": "Set class"
1800
+ },
1801
+ {
1802
+ "name": "render",
1803
+ "params": "(targetId?)",
1804
+ "returns": "this",
1805
+ "description": "Set render"
1806
+ },
1807
+ {
1808
+ "name": "renderTo",
1809
+ "params": "(juxComponent)",
1810
+ "returns": "this",
1811
+ "description": "Set renderTo"
1812
+ }
1813
+ ],
1814
+ "example": "jux.loading('my-spinner', {"
1815
+ },
1816
+ {
1817
+ "name": "Main",
1818
+ "category": "UI Components",
1819
+ "description": "Main component options",
1820
+ "constructor": "jux.main(id: string, options: MainOptions = {})",
1821
+ "fluentMethods": [
1822
+ {
1823
+ "name": "content",
1824
+ "params": "(value)",
1825
+ "returns": "this",
1826
+ "description": "Set content"
1827
+ },
1828
+ {
1829
+ "name": "padding",
1830
+ "params": "(value)",
1831
+ "returns": "this",
1832
+ "description": "Set padding"
1833
+ },
1834
+ {
1835
+ "name": "style",
1836
+ "params": "(value)",
1837
+ "returns": "this",
1838
+ "description": "Set style"
1839
+ },
1840
+ {
1841
+ "name": "class",
1842
+ "params": "(value)",
1843
+ "returns": "this",
1844
+ "description": "Set class"
1845
+ },
1846
+ {
1847
+ "name": "render",
1848
+ "params": "(targetId?)",
1849
+ "returns": "this",
1850
+ "description": "Set render"
1851
+ },
1852
+ {
1853
+ "name": "renderTo",
1854
+ "params": "(juxComponent)",
1855
+ "returns": "this",
1856
+ "description": "Set renderTo"
1857
+ }
1858
+ ],
1859
+ "example": "const main = jux.main('myMain', {"
1860
+ },
1861
+ {
1862
+ "name": "Menu",
1863
+ "category": "UI Components",
1864
+ "description": "Menu item configuration",
1865
+ "constructor": "jux.menu(id: string, options: MenuOptions = {})",
1866
+ "fluentMethods": [
1867
+ {
1868
+ "name": "items",
1869
+ "params": "(value)",
1870
+ "returns": "this",
1871
+ "description": "Set items"
1872
+ },
1873
+ {
1874
+ "name": "addItem",
1875
+ "params": "(item)",
1876
+ "returns": "this",
1877
+ "description": "Set addItem"
1878
+ },
1879
+ {
1880
+ "name": "orientation",
1881
+ "params": "(value)",
1882
+ "returns": "this",
1883
+ "description": "Set orientation"
1884
+ },
1885
+ {
1886
+ "name": "style",
1887
+ "params": "(value)",
1888
+ "returns": "this",
1889
+ "description": "Set style"
1890
+ },
1891
+ {
1892
+ "name": "class",
1893
+ "params": "(value)",
1894
+ "returns": "this",
1895
+ "description": "Set class"
1896
+ },
1897
+ {
1898
+ "name": "render",
1899
+ "params": "(targetId?)",
1900
+ "returns": "this",
1901
+ "description": "Set render"
1902
+ },
1903
+ {
1904
+ "name": "renderTo",
1905
+ "params": "(juxComponent)",
1906
+ "returns": "this",
1907
+ "description": "Set renderTo"
1908
+ }
1909
+ ],
1910
+ "example": "const menu = jux.menu('myMenu', {"
1911
+ },
1912
+ {
1913
+ "name": "Modal",
1914
+ "category": "UI Components",
1915
+ "description": "Modal component options",
1916
+ "constructor": "jux.modal(id: string, options: ModalOptions = {})",
1917
+ "fluentMethods": [
1918
+ {
1919
+ "name": "title",
1920
+ "params": "(value)",
1921
+ "returns": "this",
1922
+ "description": "Set title"
1923
+ },
1924
+ {
1925
+ "name": "content",
1926
+ "params": "(value)",
1927
+ "returns": "this",
1928
+ "description": "Set content"
1929
+ },
1930
+ {
1931
+ "name": "showCloseButton",
1932
+ "params": "(value)",
1933
+ "returns": "this",
1934
+ "description": "Set showCloseButton"
1935
+ },
1936
+ {
1937
+ "name": "closeOnBackdropClick",
1938
+ "params": "(value)",
1939
+ "returns": "this",
1940
+ "description": "Set closeOnBackdropClick"
1941
+ },
1942
+ {
1943
+ "name": "size",
1944
+ "params": "(value)",
1945
+ "returns": "this",
1946
+ "description": "Set size"
1947
+ },
1948
+ {
1949
+ "name": "style",
1950
+ "params": "(value)",
1951
+ "returns": "this",
1952
+ "description": "Set style"
1953
+ },
1954
+ {
1955
+ "name": "class",
1956
+ "params": "(value)",
1957
+ "returns": "this",
1958
+ "description": "Set class"
1959
+ },
1960
+ {
1961
+ "name": "open",
1962
+ "params": "()",
1963
+ "returns": "this",
1964
+ "description": "Set open"
1965
+ },
1966
+ {
1967
+ "name": "close",
1968
+ "params": "()",
1969
+ "returns": "this",
1970
+ "description": "Set close"
1971
+ },
1972
+ {
1973
+ "name": "render",
1974
+ "params": "(targetId?)",
1975
+ "returns": "this",
1976
+ "description": "Set render"
1977
+ },
1978
+ {
1979
+ "name": "renderTo",
1980
+ "params": "(juxComponent)",
1981
+ "returns": "this",
1982
+ "description": "Set renderTo"
1983
+ }
1984
+ ],
1985
+ "example": "const modal = jux.modal('myModal', {"
1986
+ },
1987
+ {
1988
+ "name": "Nav",
1989
+ "category": "UI Components",
1990
+ "description": "Nav item configuration",
1991
+ "constructor": "jux.nav(id: string, options: NavOptions = {})",
1992
+ "fluentMethods": [
1993
+ {
1994
+ "name": "items",
1995
+ "params": "(value)",
1996
+ "returns": "this",
1997
+ "description": "Set items"
1998
+ },
1999
+ {
2000
+ "name": "addItem",
2001
+ "params": "(item)",
2002
+ "returns": "this",
2003
+ "description": "Set addItem"
2004
+ },
2005
+ {
2006
+ "name": "variant",
2007
+ "params": "(value)",
2008
+ "returns": "this",
2009
+ "description": "Set variant"
2010
+ },
2011
+ {
2012
+ "name": "style",
2013
+ "params": "(value)",
2014
+ "returns": "this",
2015
+ "description": "Set style"
2016
+ },
2017
+ {
2018
+ "name": "class",
2019
+ "params": "(value)",
2020
+ "returns": "this",
2021
+ "description": "Set class"
2022
+ },
2023
+ {
2024
+ "name": "render",
2025
+ "params": "(targetId?)",
2026
+ "returns": "this",
2027
+ "description": "Set render"
2028
+ },
2029
+ {
2030
+ "name": "renderTo",
2031
+ "params": "(juxComponent)",
2032
+ "returns": "this",
2033
+ "description": "Set renderTo"
2034
+ }
2035
+ ],
2036
+ "example": "const nav = jux.nav('myNav', {"
2037
+ },
2038
+ {
2039
+ "name": "Paragraph",
2040
+ "category": "UI Components",
2041
+ "description": "Paragraph options",
2042
+ "constructor": "jux.paragraph(id: string, options: ParagraphOptions = {})",
2043
+ "fluentMethods": [
2044
+ {
2045
+ "name": "text",
2046
+ "params": "(value)",
2047
+ "returns": "this",
2048
+ "description": "Set text"
2049
+ },
2050
+ {
2051
+ "name": "class",
2052
+ "params": "(value)",
2053
+ "returns": "this",
2054
+ "description": "Set class"
2055
+ },
2056
+ {
2057
+ "name": "style",
2058
+ "params": "(value)",
2059
+ "returns": "this",
2060
+ "description": "Set style"
2061
+ },
2062
+ {
2063
+ "name": "render",
2064
+ "params": "(targetId?)",
2065
+ "returns": "this",
2066
+ "description": "Set render"
2067
+ }
2068
+ ],
2069
+ "example": "jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');"
2070
+ },
2071
+ {
2072
+ "name": "Progress",
2073
+ "category": "UI Components",
2074
+ "description": "Progress component options",
2075
+ "constructor": "jux.progress(id: string, options: ProgressOptions = {})",
2076
+ "fluentMethods": [
2077
+ {
2078
+ "name": "value",
2079
+ "params": "(value)",
2080
+ "returns": "this",
2081
+ "description": "Set value"
2082
+ },
2083
+ {
2084
+ "name": "max",
2085
+ "params": "(value)",
2086
+ "returns": "this",
2087
+ "description": "Set max"
2088
+ },
2089
+ {
2090
+ "name": "label",
2091
+ "params": "(value)",
2092
+ "returns": "this",
2093
+ "description": "Set label"
2094
+ },
2095
+ {
2096
+ "name": "showPercentage",
2097
+ "params": "(value)",
2098
+ "returns": "this",
2099
+ "description": "Set showPercentage"
2100
+ },
2101
+ {
2102
+ "name": "variant",
2103
+ "params": "(value)",
2104
+ "returns": "this",
2105
+ "description": "Set variant"
2106
+ },
2107
+ {
2108
+ "name": "size",
2109
+ "params": "(value)",
2110
+ "returns": "this",
2111
+ "description": "Set size"
2112
+ },
2113
+ {
2114
+ "name": "striped",
2115
+ "params": "(value)",
2116
+ "returns": "this",
2117
+ "description": "Set striped"
2118
+ },
2119
+ {
2120
+ "name": "animated",
2121
+ "params": "(value)",
2122
+ "returns": "this",
2123
+ "description": "Set animated"
2124
+ },
2125
+ {
2126
+ "name": "style",
2127
+ "params": "(value)",
2128
+ "returns": "this",
2129
+ "description": "Set style"
2130
+ },
2131
+ {
2132
+ "name": "class",
2133
+ "params": "(value)",
2134
+ "returns": "this",
2135
+ "description": "Set class"
2136
+ },
2137
+ {
2138
+ "name": "bind",
2139
+ "params": "(stateObj)",
2140
+ "returns": "this",
2141
+ "description": "Set bind"
2142
+ },
2143
+ {
2144
+ "name": "render",
2145
+ "params": "(targetId?)",
2146
+ "returns": "this",
2147
+ "description": "Set render"
2148
+ },
2149
+ {
2150
+ "name": "renderTo",
2151
+ "params": "(juxComponent)",
2152
+ "returns": "this",
2153
+ "description": "Set renderTo"
2154
+ }
2155
+ ],
2156
+ "example": "jux.progress('upload', {"
2157
+ },
2158
+ {
2159
+ "name": "Radio",
2160
+ "category": "UI Components",
2161
+ "description": "Radio option",
2162
+ "constructor": "jux.radio(id: string, options: RadioOptions = {})",
2163
+ "fluentMethods": [
2164
+ {
2165
+ "name": "options",
2166
+ "params": "(value)",
2167
+ "returns": "this",
2168
+ "description": "Set options"
2169
+ },
2170
+ {
2171
+ "name": "addOption",
2172
+ "params": "(option)",
2173
+ "returns": "this",
2174
+ "description": "Set addOption"
2175
+ },
2176
+ {
2177
+ "name": "value",
2178
+ "params": "(value)",
2179
+ "returns": "this",
2180
+ "description": "Set value"
2181
+ },
2182
+ {
2183
+ "name": "name",
2184
+ "params": "(value)",
2185
+ "returns": "this",
2186
+ "description": "Set name"
2187
+ },
2188
+ {
2189
+ "name": "orientation",
2190
+ "params": "(value)",
2191
+ "returns": "this",
2192
+ "description": "Set orientation"
2193
+ },
2194
+ {
2195
+ "name": "style",
2196
+ "params": "(value)",
2197
+ "returns": "this",
2198
+ "description": "Set style"
2199
+ },
2200
+ {
2201
+ "name": "class",
2202
+ "params": "(value)",
2203
+ "returns": "this",
2204
+ "description": "Set class"
2205
+ },
2206
+ {
2207
+ "name": "bind",
2208
+ "params": "(stateObj)",
2209
+ "returns": "this",
2210
+ "description": "Set bind"
2211
+ },
2212
+ {
2213
+ "name": "render",
2214
+ "params": "(targetId?)",
2215
+ "returns": "this",
2216
+ "description": "Set render"
2217
+ },
2218
+ {
2219
+ "name": "renderTo",
2220
+ "params": "(juxComponent)",
2221
+ "returns": "this",
2222
+ "description": "Set renderTo"
2223
+ }
2224
+ ],
2225
+ "example": "jux.radio('size', {"
2226
+ },
2227
+ {
2228
+ "name": "Req",
2229
+ "category": "UI Components",
2230
+ "description": "Request information and utilities",
2231
+ "constructor": "jux.req()",
2232
+ "fluentMethods": [],
2233
+ "example": "jux.req('id').render()"
2234
+ },
2235
+ {
2236
+ "name": "Select",
2237
+ "category": "UI Components",
2238
+ "description": "Two-way binding to state",
2239
+ "constructor": "jux.select(id: string, options: SelectOptions = {})",
2240
+ "fluentMethods": [
2241
+ {
2242
+ "name": "options",
2243
+ "params": "(value)",
2244
+ "returns": "this",
2245
+ "description": "Set options"
2246
+ },
2247
+ {
2248
+ "name": "addOption",
2249
+ "params": "(option)",
2250
+ "returns": "this",
2251
+ "description": "Set addOption"
2252
+ },
2253
+ {
2254
+ "name": "value",
2255
+ "params": "(value)",
2256
+ "returns": "this",
2257
+ "description": "Set value"
2258
+ },
2259
+ {
2260
+ "name": "placeholder",
2261
+ "params": "(value)",
2262
+ "returns": "this",
2263
+ "description": "Set placeholder"
2264
+ },
2265
+ {
2266
+ "name": "label",
2267
+ "params": "(value)",
2268
+ "returns": "this",
2269
+ "description": "Set label"
2270
+ },
2271
+ {
2272
+ "name": "disabled",
742
2273
  "params": "(value)",
743
2274
  "returns": "this",
744
- "description": "Set subtitle"
2275
+ "description": "Set disabled"
745
2276
  },
746
2277
  {
747
- "name": "cta",
2278
+ "name": "name",
748
2279
  "params": "(value)",
749
2280
  "returns": "this",
750
- "description": "Set cta"
2281
+ "description": "Set name"
751
2282
  },
752
2283
  {
753
- "name": "ctaLink",
2284
+ "name": "style",
754
2285
  "params": "(value)",
755
2286
  "returns": "this",
756
- "description": "Set ctaLink"
2287
+ "description": "Set style"
757
2288
  },
758
2289
  {
759
- "name": "backgroundImage",
2290
+ "name": "class",
760
2291
  "params": "(value)",
761
2292
  "returns": "this",
762
- "description": "Set backgroundImage"
2293
+ "description": "Set class"
763
2294
  },
764
2295
  {
765
- "name": "variant",
766
- "params": "(value)",
2296
+ "name": "bind",
2297
+ "params": "(stateObj)",
767
2298
  "returns": "this",
768
- "description": "Set variant"
2299
+ "description": "Set bind"
769
2300
  },
770
2301
  {
771
2302
  "name": "render",
@@ -780,49 +2311,61 @@
780
2311
  "description": "Set renderTo"
781
2312
  }
782
2313
  ],
783
- "example": "const hero = jux.hero('myHero', {"
2314
+ "example": "jux.select('id').render()"
784
2315
  },
785
2316
  {
786
- "name": "Input",
2317
+ "name": "Sidebar",
787
2318
  "category": "UI Components",
788
- "description": "Input component options",
789
- "constructor": "jux.input(componentId: string, options: InputOptions = {})",
2319
+ "description": "Sidebar component options",
2320
+ "constructor": "jux.sidebar(id: string, options: SidebarOptions = {})",
790
2321
  "fluentMethods": [
791
2322
  {
792
- "name": "type",
2323
+ "name": "title",
793
2324
  "params": "(value)",
794
2325
  "returns": "this",
795
- "description": "Set type"
2326
+ "description": "Set title"
796
2327
  },
797
2328
  {
798
- "name": "label",
2329
+ "name": "width",
799
2330
  "params": "(value)",
800
2331
  "returns": "this",
801
- "description": "Set label"
2332
+ "description": "Set width"
802
2333
  },
803
2334
  {
804
- "name": "placeholder",
2335
+ "name": "position",
805
2336
  "params": "(value)",
806
2337
  "returns": "this",
807
- "description": "Set placeholder"
2338
+ "description": "Set position"
808
2339
  },
809
2340
  {
810
- "name": "value",
2341
+ "name": "collapsible",
811
2342
  "params": "(value)",
812
2343
  "returns": "this",
813
- "description": "Set value"
2344
+ "description": "Set collapsible"
814
2345
  },
815
2346
  {
816
- "name": "required",
2347
+ "name": "collapsed",
817
2348
  "params": "(value)",
818
2349
  "returns": "this",
819
- "description": "Set required"
2350
+ "description": "Set collapsed"
820
2351
  },
821
2352
  {
822
- "name": "disabled",
2353
+ "name": "style",
823
2354
  "params": "(value)",
824
2355
  "returns": "this",
825
- "description": "Set disabled"
2356
+ "description": "Set style"
2357
+ },
2358
+ {
2359
+ "name": "class",
2360
+ "params": "(value)",
2361
+ "returns": "this",
2362
+ "description": "Set class"
2363
+ },
2364
+ {
2365
+ "name": "toggle",
2366
+ "params": "()",
2367
+ "returns": "this",
2368
+ "description": "Set toggle"
826
2369
  },
827
2370
  {
828
2371
  "name": "render",
@@ -837,64 +2380,61 @@
837
2380
  "description": "Set renderTo"
838
2381
  }
839
2382
  ],
840
- "example": "const input = jux.input('myInput', {"
2383
+ "example": "const sidebar = jux.sidebar('mySidebar', {"
841
2384
  },
842
2385
  {
843
- "name": "Main",
2386
+ "name": "Switch",
844
2387
  "category": "UI Components",
845
- "description": "Main component options",
846
- "constructor": "jux.main(componentId: string, options: MainOptions = {})",
2388
+ "description": "Switch component options",
2389
+ "constructor": "jux.switch(id: string, options: SwitchOptions = {})",
847
2390
  "fluentMethods": [
848
2391
  {
849
- "name": "content",
2392
+ "name": "label",
850
2393
  "params": "(value)",
851
2394
  "returns": "this",
852
- "description": "Set content"
2395
+ "description": "Set label"
853
2396
  },
854
2397
  {
855
- "name": "padding",
2398
+ "name": "checked",
856
2399
  "params": "(value)",
857
2400
  "returns": "this",
858
- "description": "Set padding"
2401
+ "description": "Set checked"
859
2402
  },
860
2403
  {
861
- "name": "render",
862
- "params": "(targetId?)",
2404
+ "name": "disabled",
2405
+ "params": "(value)",
863
2406
  "returns": "this",
864
- "description": "Set render"
2407
+ "description": "Set disabled"
865
2408
  },
866
2409
  {
867
- "name": "renderTo",
868
- "params": "(juxComponent)",
2410
+ "name": "name",
2411
+ "params": "(value)",
869
2412
  "returns": "this",
870
- "description": "Set renderTo"
871
- }
872
- ],
873
- "example": "const main = jux.main('myMain', {"
874
- },
875
- {
876
- "name": "Menu",
877
- "category": "UI Components",
878
- "description": "Menu item configuration",
879
- "constructor": "jux.menu(componentId: string, options: MenuOptions = {})",
880
- "fluentMethods": [
2413
+ "description": "Set name"
2414
+ },
881
2415
  {
882
- "name": "items",
2416
+ "name": "style",
883
2417
  "params": "(value)",
884
2418
  "returns": "this",
885
- "description": "Set items"
2419
+ "description": "Set style"
886
2420
  },
887
2421
  {
888
- "name": "addItem",
889
- "params": "(item)",
2422
+ "name": "class",
2423
+ "params": "(value)",
890
2424
  "returns": "this",
891
- "description": "Set addItem"
2425
+ "description": "Set class"
892
2426
  },
893
2427
  {
894
- "name": "orientation",
895
- "params": "(value)",
2428
+ "name": "bind",
2429
+ "params": "(stateObj)",
896
2430
  "returns": "this",
897
- "description": "Set orientation"
2431
+ "description": "Set bind"
2432
+ },
2433
+ {
2434
+ "name": "toggle",
2435
+ "params": "()",
2436
+ "returns": "this",
2437
+ "description": "Set toggle"
898
2438
  },
899
2439
  {
900
2440
  "name": "render",
@@ -909,55 +2449,43 @@
909
2449
  "description": "Set renderTo"
910
2450
  }
911
2451
  ],
912
- "example": "const menu = jux.menu('myMenu', {"
2452
+ "example": "jux.switch('notifications', {"
913
2453
  },
914
2454
  {
915
- "name": "Modal",
2455
+ "name": "Tabs",
916
2456
  "category": "UI Components",
917
- "description": "Modal component options",
918
- "constructor": "jux.modal(componentId: string, options: ModalOptions = {})",
2457
+ "description": "Tab configuration",
2458
+ "constructor": "jux.tabs(id: string, options: TabsOptions = {})",
919
2459
  "fluentMethods": [
920
2460
  {
921
- "name": "title",
2461
+ "name": "tabs",
922
2462
  "params": "(value)",
923
2463
  "returns": "this",
924
- "description": "Set title"
2464
+ "description": "Set tabs"
925
2465
  },
926
2466
  {
927
- "name": "content",
928
- "params": "(value)",
2467
+ "name": "addTab",
2468
+ "params": "(tab)",
929
2469
  "returns": "this",
930
- "description": "Set content"
2470
+ "description": "Set addTab"
931
2471
  },
932
2472
  {
933
- "name": "showCloseButton",
2473
+ "name": "activeTab",
934
2474
  "params": "(value)",
935
2475
  "returns": "this",
936
- "description": "Set showCloseButton"
2476
+ "description": "Set activeTab"
937
2477
  },
938
2478
  {
939
- "name": "closeOnBackdropClick",
2479
+ "name": "style",
940
2480
  "params": "(value)",
941
2481
  "returns": "this",
942
- "description": "Set closeOnBackdropClick"
2482
+ "description": "Set style"
943
2483
  },
944
2484
  {
945
- "name": "size",
2485
+ "name": "class",
946
2486
  "params": "(value)",
947
2487
  "returns": "this",
948
- "description": "Set size"
949
- },
950
- {
951
- "name": "open",
952
- "params": "()",
953
- "returns": "this",
954
- "description": "Set open"
955
- },
956
- {
957
- "name": "close",
958
- "params": "()",
959
- "returns": "this",
960
- "description": "Set close"
2488
+ "description": "Set class"
961
2489
  },
962
2490
  {
963
2491
  "name": "render",
@@ -972,25 +2500,31 @@
972
2500
  "description": "Set renderTo"
973
2501
  }
974
2502
  ],
975
- "example": "const modal = jux.modal('myModal', {"
2503
+ "example": "const tabs = jux.tabs('myTabs', {"
976
2504
  },
977
2505
  {
978
- "name": "Nav",
2506
+ "name": "Theme-toggle",
979
2507
  "category": "UI Components",
980
- "description": "Nav item configuration",
981
- "constructor": "jux.nav(componentId: string, options: NavOptions = {})",
2508
+ "description": "Theme configuration",
2509
+ "constructor": "jux.theme-toggle(id: string, options: ThemeToggleOptions = {})",
982
2510
  "fluentMethods": [
983
2511
  {
984
- "name": "items",
985
- "params": "(value)",
2512
+ "name": "setTheme",
2513
+ "params": "(themeId)",
986
2514
  "returns": "this",
987
- "description": "Set items"
2515
+ "description": "Set setTheme"
988
2516
  },
989
2517
  {
990
- "name": "addItem",
991
- "params": "(item)",
2518
+ "name": "addTheme",
2519
+ "params": "(theme)",
992
2520
  "returns": "this",
993
- "description": "Set addItem"
2521
+ "description": "Set addTheme"
2522
+ },
2523
+ {
2524
+ "name": "themes",
2525
+ "params": "(value)",
2526
+ "returns": "this",
2527
+ "description": "Set themes"
994
2528
  },
995
2529
  {
996
2530
  "name": "variant",
@@ -998,6 +2532,24 @@
998
2532
  "returns": "this",
999
2533
  "description": "Set variant"
1000
2534
  },
2535
+ {
2536
+ "name": "showLabel",
2537
+ "params": "(value)",
2538
+ "returns": "this",
2539
+ "description": "Set showLabel"
2540
+ },
2541
+ {
2542
+ "name": "style",
2543
+ "params": "(value)",
2544
+ "returns": "this",
2545
+ "description": "Set style"
2546
+ },
2547
+ {
2548
+ "name": "class",
2549
+ "params": "(value)",
2550
+ "returns": "this",
2551
+ "description": "Set class"
2552
+ },
1001
2553
  {
1002
2554
  "name": "render",
1003
2555
  "params": "(targetId?)",
@@ -1011,130 +2563,106 @@
1011
2563
  "description": "Set renderTo"
1012
2564
  }
1013
2565
  ],
1014
- "example": "const nav = jux.nav('myNav', {"
2566
+ "example": "// Simple light/dark toggle"
1015
2567
  },
1016
2568
  {
1017
- "name": "Node",
2569
+ "name": "Token-calculator",
1018
2570
  "category": "UI Components",
1019
- "description": "Node component options",
1020
- "constructor": "jux.node(componentId: string, options: NodeOptions = {})",
2571
+ "description": "Token Calculator component - Compare framework token costs",
2572
+ "constructor": "jux.token-calculator(id: string, options: TokenCalculatorOptions = {})",
1021
2573
  "fluentMethods": [
1022
2574
  {
1023
- "name": "tagType",
2575
+ "name": "lines",
1024
2576
  "params": "(value)",
1025
2577
  "returns": "this",
1026
- "description": "Set tagType"
2578
+ "description": "Set lines"
1027
2579
  },
1028
2580
  {
1029
- "name": "className",
1030
- "params": "(value)",
1031
- "returns": "this",
1032
- "description": "Set className"
1033
- },
1034
- {
1035
- "name": "addClass",
1036
- "params": "(value)",
2581
+ "name": "multiplier",
2582
+ "params": "(framework, value)",
1037
2583
  "returns": "this",
1038
- "description": "Set addClass"
2584
+ "description": "Set multiplier"
1039
2585
  },
1040
2586
  {
1041
- "name": "removeClass",
2587
+ "name": "tokensPerLine",
1042
2588
  "params": "(value)",
1043
2589
  "returns": "this",
1044
- "description": "Set removeClass"
2590
+ "description": "Set tokensPerLine"
1045
2591
  },
1046
2592
  {
1047
- "name": "textContent",
2593
+ "name": "showComparison",
1048
2594
  "params": "(value)",
1049
2595
  "returns": "this",
1050
- "description": "Set textContent"
2596
+ "description": "Set showComparison"
1051
2597
  },
1052
2598
  {
1053
- "name": "innerHTML",
2599
+ "name": "animated",
1054
2600
  "params": "(value)",
1055
2601
  "returns": "this",
1056
- "description": "Set innerHTML"
1057
- },
1058
- {
1059
- "name": "attr",
1060
- "params": "(name, value)",
1061
- "returns": "this",
1062
- "description": "Set attr"
1063
- },
1064
- {
1065
- "name": "attrs",
1066
- "params": "(attributes, string>)",
1067
- "returns": "this",
1068
- "description": "Set attrs"
2602
+ "description": "Set animated"
1069
2603
  },
1070
2604
  {
1071
2605
  "name": "style",
1072
- "params": "(property, value)",
2606
+ "params": "(value)",
1073
2607
  "returns": "this",
1074
2608
  "description": "Set style"
1075
2609
  },
1076
2610
  {
1077
- "name": "styles",
1078
- "params": "(styles, string>)",
2611
+ "name": "class",
2612
+ "params": "(value)",
1079
2613
  "returns": "this",
1080
- "description": "Set styles"
2614
+ "description": "Set class"
1081
2615
  },
1082
2616
  {
1083
2617
  "name": "render",
1084
2618
  "params": "(targetId?)",
1085
2619
  "returns": "this",
1086
2620
  "description": "Set render"
1087
- },
1088
- {
1089
- "name": "renderTo",
1090
- "params": "(juxComponent)",
1091
- "returns": "this",
1092
- "description": "Set renderTo"
1093
2621
  }
1094
2622
  ],
1095
- "example": "const div = jux.node('myDiv', { tagType: 'div', className: 'container' });"
2623
+ "example": "jux.token-calculator('id').render()"
1096
2624
  },
1097
2625
  {
1098
- "name": "Sidebar",
2626
+ "name": "Tooltip",
1099
2627
  "category": "UI Components",
1100
- "description": "Sidebar component options",
1101
- "constructor": "jux.sidebar(componentId: string, options: SidebarOptions = {})",
2628
+ "description": "Tooltip component options",
2629
+ "constructor": "jux.tooltip(id: string, options: TooltipOptions = {})",
1102
2630
  "fluentMethods": [
1103
2631
  {
1104
- "name": "title",
2632
+ "name": "text",
1105
2633
  "params": "(value)",
1106
2634
  "returns": "this",
1107
- "description": "Set title"
2635
+ "description": "Set text"
1108
2636
  },
1109
2637
  {
1110
- "name": "width",
2638
+ "name": "position",
1111
2639
  "params": "(value)",
1112
2640
  "returns": "this",
1113
- "description": "Set width"
2641
+ "description": "Set position"
1114
2642
  },
1115
2643
  {
1116
- "name": "position",
2644
+ "name": "trigger",
1117
2645
  "params": "(value)",
1118
2646
  "returns": "this",
1119
- "description": "Set position"
2647
+ "description": "Set trigger"
1120
2648
  },
1121
2649
  {
1122
- "name": "collapsible",
2650
+ "name": "style",
1123
2651
  "params": "(value)",
1124
2652
  "returns": "this",
1125
- "description": "Set collapsible"
2653
+ "description": "Set style"
1126
2654
  },
1127
2655
  {
1128
- "name": "collapsed",
2656
+ "name": "class",
1129
2657
  "params": "(value)",
1130
2658
  "returns": "this",
1131
- "description": "Set collapsed"
2659
+ "description": "Set class"
1132
2660
  },
1133
2661
  {
1134
- "name": "toggle",
1135
- "params": "()",
2662
+ "name": "attachTo",
2663
+ "params": "(target)",
1136
2664
  "returns": "this",
1137
- "description": "Set toggle"
2665
+ "description": "Set attachTo"
1138
2666
  },
1139
2667
  {
1140
2668
  "name": "render",
@@ -1149,63 +2677,81 @@
1149
2677
  "description": "Set renderTo"
1150
2678
  }
1151
2679
  ],
1152
- "example": "const sidebar = jux.sidebar('mySidebar', {"
2680
+ "example": "// Attach to existing element"
1153
2681
  },
1154
2682
  {
1155
- "name": "Tabs",
2683
+ "name": "View",
1156
2684
  "category": "UI Components",
1157
- "description": "Tab configuration",
1158
- "constructor": "jux.tabs(componentId: string, options: TabsOptions = {})",
2685
+ "description": "View component options",
2686
+ "constructor": "jux.view(id: string, options: ViewOptions = {})",
1159
2687
  "fluentMethods": [
1160
2688
  {
1161
- "name": "tabs",
2689
+ "name": "title",
1162
2690
  "params": "(value)",
1163
2691
  "returns": "this",
1164
- "description": "Set tabs"
2692
+ "description": "Set title"
1165
2693
  },
1166
2694
  {
1167
- "name": "addTab",
1168
- "params": "(tab)",
2695
+ "name": "description",
2696
+ "params": "(value)",
1169
2697
  "returns": "this",
1170
- "description": "Set addTab"
2698
+ "description": "Set description"
1171
2699
  },
1172
2700
  {
1173
- "name": "activeTab",
1174
- "params": "(value)",
2701
+ "name": "add",
2702
+ "params": "(component)",
1175
2703
  "returns": "this",
1176
- "description": "Set activeTab"
2704
+ "description": "Set add"
1177
2705
  }
1178
2706
  ],
1179
- "example": "const tabs = jux.tabs('myTabs', {"
2707
+ "example": "const view = jux.view('myView', {"
1180
2708
  },
1181
2709
  {
1182
- "name": "View",
2710
+ "name": "Write",
1183
2711
  "category": "UI Components",
1184
- "description": "View component options",
1185
- "constructor": "jux.view(componentId: string, options: ViewOptions = {})",
2712
+ "description": "Write - Simple content writer with no component tracking",
2713
+ "constructor": "jux.write(content: string, options: WriteOptions = {})",
1186
2714
  "fluentMethods": [
1187
2715
  {
1188
- "name": "title",
1189
- "params": "(value)",
2716
+ "name": "render",
2717
+ "params": "(targetSelector?)",
1190
2718
  "returns": "this",
1191
- "description": "Set title"
2719
+ "description": "Set render"
1192
2720
  },
1193
2721
  {
1194
- "name": "description",
1195
- "params": "(value)",
2722
+ "name": "replace",
2723
+ "params": "(targetSelector?)",
1196
2724
  "returns": "this",
1197
- "description": "Set description"
2725
+ "description": "Set replace"
1198
2726
  },
1199
2727
  {
1200
- "name": "add",
1201
- "params": "(component)",
2728
+ "name": "before",
2729
+ "params": "(targetSelector)",
1202
2730
  "returns": "this",
1203
- "description": "Set add"
2731
+ "description": "Set before"
2732
+ },
2733
+ {
2734
+ "name": "after",
2735
+ "params": "(targetSelector)",
2736
+ "returns": "this",
2737
+ "description": "Set after"
2738
+ },
2739
+ {
2740
+ "name": "prepend",
2741
+ "params": "(targetSelector?)",
2742
+ "returns": "this",
2743
+ "description": "Set prepend"
2744
+ },
2745
+ {
2746
+ "name": "append",
2747
+ "params": "(targetSelector?)",
2748
+ "returns": "this",
2749
+ "description": "Set append"
1204
2750
  }
1205
2751
  ],
1206
- "example": "const view = jux.view('myView', {"
2752
+ "example": "// Write text (defaults to body)"
1207
2753
  }
1208
2754
  ],
1209
2755
  "version": "1.0.0",
1210
- "lastUpdated": "2026-01-16T23:06:56.674Z"
2756
+ "lastUpdated": "2026-01-20T22:56:26.548Z"
1211
2757
  }