@app-studio/components 0.10.17 → 0.10.18

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 (141) hide show
  1. package/dist/index.d.ts +41 -0
  2. package/dist/native/components/Alert/Alert/Alert.style.js +20 -20
  3. package/dist/native/components/Alert/Alert/Alert.style.js.map +1 -1
  4. package/dist/native/components/Alert/Alert/Alert.view.native.js.map +1 -1
  5. package/dist/native/components/AudioInput/AudioInput/AudioInput.view.js +7 -4
  6. package/dist/native/components/AudioInput/AudioInput/AudioInput.view.js.map +1 -1
  7. package/dist/native/components/Background/Background/Background.view.native.js.map +1 -1
  8. package/dist/native/components/Badge/Badge/Badge.style.js +7 -11
  9. package/dist/native/components/Badge/Badge/Badge.style.js.map +1 -1
  10. package/dist/native/components/Badge/Badge/Badge.view.js +2 -6
  11. package/dist/native/components/Badge/Badge/Badge.view.js.map +1 -1
  12. package/dist/native/components/Button/Button/Button.view.js +2 -2
  13. package/dist/native/components/Button/Button/Button.view.js.map +1 -1
  14. package/dist/native/components/Button/Button/Button.view.native.js.map +1 -1
  15. package/dist/native/components/Card/Card/Card.style.js +10 -10
  16. package/dist/native/components/Card/Card/Card.style.js.map +1 -1
  17. package/dist/native/components/Carousel/Carousel/Carousel.view.native.js +10 -6
  18. package/dist/native/components/Carousel/Carousel/Carousel.view.native.js.map +1 -1
  19. package/dist/native/components/Chart/Chart/Chart.style.js +3 -3
  20. package/dist/native/components/Chart/Chart/Chart.style.js.map +1 -1
  21. package/dist/native/components/ChatInput/ChatInput/ChatInput.style.js +1 -1
  22. package/dist/native/components/ChatInput/ChatInput/ChatInput.style.js.map +1 -1
  23. package/dist/native/components/ChatWidget/ChatWidget/ChatWidget.style.js +16 -16
  24. package/dist/native/components/ChatWidget/ChatWidget/ChatWidget.style.js.map +1 -1
  25. package/dist/native/components/ChatWidget/ChatWidget/ChatWidget.view.js +2 -2
  26. package/dist/native/components/ChatWidget/ChatWidget/ChatWidget.view.js.map +1 -1
  27. package/dist/native/components/ColorPicker/ColorPicker/ColorPicker.style.js +6 -6
  28. package/dist/native/components/ColorPicker/ColorPicker/ColorPicker.style.js.map +1 -1
  29. package/dist/native/components/ColorPicker/ColorPicker/ColorPicker.view.js +1 -1
  30. package/dist/native/components/ColorPicker/ColorPicker/ColorPicker.view.js.map +1 -1
  31. package/dist/native/components/ContextMenu/ContextMenu/ContextMenu.view.native.js +4 -4
  32. package/dist/native/components/ContextMenu/ContextMenu/ContextMenu.view.native.js.map +1 -1
  33. package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.style.js +18 -20
  34. package/dist/native/components/CookieConsent/CookieConsent/CookieConsent.style.js.map +1 -1
  35. package/dist/native/components/DropZone/DropZone/DropZone.view.js +3 -3
  36. package/dist/native/components/DropZone/DropZone/DropZone.view.js.map +1 -1
  37. package/dist/native/components/DropdownMenu/DropdownMenu/DropdownMenu.view.native.js +4 -4
  38. package/dist/native/components/DropdownMenu/DropdownMenu/DropdownMenu.view.native.js.map +1 -1
  39. package/dist/native/components/EditComponent/EditPanel.js.map +1 -1
  40. package/dist/native/components/EmojiPicker/EmojiPicker/EmojiPicker.view.js +3 -3
  41. package/dist/native/components/EmojiPicker/EmojiPicker/EmojiPicker.view.js.map +1 -1
  42. package/dist/native/components/Form/Checkbox/Checkbox/Checkbox.view.native.js +1 -5
  43. package/dist/native/components/Form/Checkbox/Checkbox/Checkbox.view.native.js.map +1 -1
  44. package/dist/native/components/Form/CountryPicker/CountryPicker/CountryPicker.view.js +2 -8
  45. package/dist/native/components/Form/CountryPicker/CountryPicker/CountryPicker.view.js.map +1 -1
  46. package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.view.js +1 -7
  47. package/dist/native/components/Form/DatePicker/DatePicker/DatePicker.view.js.map +1 -1
  48. package/dist/native/components/Form/Radio/Radio/Radio.view.native.js +1 -5
  49. package/dist/native/components/Form/Radio/Radio/Radio.view.native.js.map +1 -1
  50. package/dist/native/components/Form/Select/Select/Select.view.native.js +3 -9
  51. package/dist/native/components/Form/Select/Select/Select.view.native.js.map +1 -1
  52. package/dist/native/components/Form/TextArea/TextArea/TextArea.view.native.js.map +1 -1
  53. package/dist/native/components/Form/TextField/TextField/TextField.view.native.js.map +1 -1
  54. package/dist/native/components/Gradient/Gradient/Gradient.view.native.js +2 -6
  55. package/dist/native/components/Gradient/Gradient/Gradient.view.native.js.map +1 -1
  56. package/dist/native/components/HoverCard/HoverCard/HoverCard.view.js +1 -1
  57. package/dist/native/components/HoverCard/HoverCard/HoverCard.view.js.map +1 -1
  58. package/dist/native/components/HoverCard/HoverCard/HoverCard.view.native.js.map +1 -1
  59. package/dist/native/components/Icon/Icon.js.map +1 -1
  60. package/dist/native/components/Icon/Icon.native.js.map +1 -1
  61. package/dist/native/components/IconPicker/IconPicker/IconPicker.view.js +2 -2
  62. package/dist/native/components/IconPicker/IconPicker/IconPicker.view.js.map +1 -1
  63. package/dist/native/components/Input/FieldLayout/FieldLayout.js +1 -1
  64. package/dist/native/components/Input/FieldLayout/FieldLayout.js.map +1 -1
  65. package/dist/native/components/Link/Link/Link.view.native.js +1 -3
  66. package/dist/native/components/Link/Link/Link.view.native.js.map +1 -1
  67. package/dist/native/components/Loader/Loader/Loader.view.native.js +4 -4
  68. package/dist/native/components/Loader/Loader/Loader.view.native.js.map +1 -1
  69. package/dist/native/components/Menubar/Menubar/Menubar.view.native.js +2 -2
  70. package/dist/native/components/Menubar/Menubar/Menubar.view.native.js.map +1 -1
  71. package/dist/native/components/Message/Message/Message.view.js +1 -1
  72. package/dist/native/components/Message/Message/Message.view.js.map +1 -1
  73. package/dist/native/components/Modal/Modal/Modal.style.js +1 -1
  74. package/dist/native/components/Modal/Modal/Modal.style.js.map +1 -1
  75. package/dist/native/components/NavigationMenu/NavigationMenu/NavigationMenu.view.native.js +2 -2
  76. package/dist/native/components/NavigationMenu/NavigationMenu/NavigationMenu.view.native.js.map +1 -1
  77. package/dist/native/components/OTPInput/OTPInput/OTPInput.view.native.js +18 -2
  78. package/dist/native/components/OTPInput/OTPInput/OTPInput.view.native.js.map +1 -1
  79. package/dist/native/components/ProgressBar/ProgressBar/ProgressBar.view.js +2 -2
  80. package/dist/native/components/ProgressBar/ProgressBar/ProgressBar.view.js.map +1 -1
  81. package/dist/native/components/ProgressBar/ProgressBar/ProgressBar.view.native.js +6 -3
  82. package/dist/native/components/ProgressBar/ProgressBar/ProgressBar.view.native.js.map +1 -1
  83. package/dist/native/components/Resizable/Resizable/Resizable.view.native.js +9 -1
  84. package/dist/native/components/Resizable/Resizable/Resizable.view.native.js.map +1 -1
  85. package/dist/native/components/Sidebar/Sidebar/Sidebar.style.js +11 -11
  86. package/dist/native/components/Sidebar/Sidebar/Sidebar.style.js.map +1 -1
  87. package/dist/native/components/Sidebar/Sidebar/Sidebar.view.native.js.map +1 -1
  88. package/dist/native/components/Slider/Slider/Slider.view.native.js +3 -1
  89. package/dist/native/components/Slider/Slider/Slider.view.native.js.map +1 -1
  90. package/dist/native/components/Tabs/Tabs/Tabs.view.js +10 -10
  91. package/dist/native/components/Tabs/Tabs/Tabs.view.js.map +1 -1
  92. package/dist/native/components/Tabs/Tabs/Tabs.view.native.js +2 -2
  93. package/dist/native/components/Tabs/Tabs/Tabs.view.native.js.map +1 -1
  94. package/dist/native/components/Title/Title/Title.view.native.js.map +1 -1
  95. package/dist/native/components/Title/Title/TypewriterEffect.native.js +1 -3
  96. package/dist/native/components/Title/Title/TypewriterEffect.native.js.map +1 -1
  97. package/dist/native/components/Toast/Toast/Toast.view.native.js.map +1 -1
  98. package/dist/native/components/Toggle/Toggle/Toggle.style.js +7 -7
  99. package/dist/native/components/Toggle/Toggle/Toggle.style.js.map +1 -1
  100. package/dist/native/components/Toggle/Toggle/Toggle.view.js +2 -2
  101. package/dist/native/components/Toggle/Toggle/Toggle.view.js.map +1 -1
  102. package/dist/native/components/Toggle/Toggle/Toggle.view.native.js +3 -1
  103. package/dist/native/components/Toggle/Toggle/Toggle.view.native.js.map +1 -1
  104. package/dist/native/components/Uploader/Uploader/Uploader.view.js +2 -2
  105. package/dist/native/design-system/DesignSystemProvider.d.ts +8 -1
  106. package/dist/native/design-system/DesignSystemProvider.js +10 -4
  107. package/dist/native/design-system/DesignSystemProvider.js.map +1 -1
  108. package/dist/native/design-system/configs/airbnb.json +87 -87
  109. package/dist/native/design-system/configs/apple.json +89 -89
  110. package/dist/native/design-system/configs/coinbase.json +89 -89
  111. package/dist/native/design-system/configs/default.json +556 -0
  112. package/dist/native/design-system/configs/figma.json +63 -63
  113. package/dist/native/design-system/configs/index.d.ts +6 -0
  114. package/dist/native/design-system/configs/index.js +8 -1
  115. package/dist/native/design-system/configs/index.js.map +1 -1
  116. package/dist/native/design-system/configs/linear.json +86 -86
  117. package/dist/native/design-system/configs/nike.json +60 -60
  118. package/dist/native/design-system/configs/notion.json +88 -88
  119. package/dist/native/design-system/configs/revolut.json +89 -89
  120. package/dist/native/design-system/configs/shopify.json +76 -76
  121. package/dist/native/design-system/configs/spacex.json +68 -68
  122. package/dist/native/design-system/configs/spotify.json +89 -89
  123. package/dist/native/design-system/configs/stripe.json +88 -88
  124. package/dist/native/design-system/configs/tesla.json +75 -75
  125. package/dist/native/design-system/configs/uber.json +41 -41
  126. package/dist/native/design-system/configs/vercel.json +65 -65
  127. package/dist/native/design-system/types.d.ts +28 -0
  128. package/dist/native/pages/designSystem.page.js +103 -85
  129. package/dist/native/pages/designSystem.page.js.map +1 -1
  130. package/dist/web.cjs.js +8 -8
  131. package/dist/web.cjs.js.map +1 -1
  132. package/dist/web.esm.js +11786 -10987
  133. package/dist/web.esm.js.map +1 -1
  134. package/dist/web.umd.js +10 -10
  135. package/dist/web.umd.js.map +1 -1
  136. package/docs/README.md +1 -0
  137. package/docs/app-studio/Theming.md +7 -0
  138. package/docs/design-system/component-library.md +78 -42
  139. package/docs/design-system/llm-design-system.md +426 -0
  140. package/docs/design-system/theming.md +73 -13
  141. package/package.json +4 -4
package/dist/native/design-system/configs/uber.json CHANGED
@@ -10,17 +10,17 @@
10
10
  ]
11
11
  },
12
12
  "theme": {
13
- "primary": "#000000",
13
+ "primary": "color-black",
14
14
  "secondary": "#efefef",
15
15
  "success": "#06C167",
16
16
  "warning": "#e2e2e2",
17
17
  "error": "#000000",
18
- "canvas": "#ffffff",
19
- "surface": "#ffffff",
20
- "text": "#000000",
21
- "muted": "#4b4b4b",
22
- "border": "#e2e2e2",
23
- "onPrimary": "#ffffff"
18
+ "canvas": "color-white",
19
+ "surface": "color-gray-50",
20
+ "text": "color-black",
21
+ "muted": "color-gray-500",
22
+ "border": "color-gray-200",
23
+ "onPrimary": "color-white"
24
24
  },
25
25
  "tokens": {
26
26
  "rawCssVars": {
@@ -224,7 +224,7 @@
224
224
  "size": "md",
225
225
  "shape": "square",
226
226
  "color": "theme-primary",
227
- "textColor": "theme-canvas",
227
+ "textColor": "theme-onPrimary",
228
228
  "views": {
229
229
  "container": {
230
230
  "borderRadius": 0,
@@ -252,7 +252,7 @@
252
252
  "views": {
253
253
  "container": {
254
254
  "backgroundColor": "theme-secondary",
255
- "color": "theme-canvas",
255
+ "color": "color-white",
256
256
  "borderColor": "theme-secondary",
257
257
  "borderRadius": 0,
258
258
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
@@ -273,7 +273,7 @@
273
273
  "shape": "square",
274
274
  "views": {
275
275
  "container": {
276
- "backgroundColor": "theme-canvas",
276
+ "backgroundColor": "color-white",
277
277
  "borderColor": "theme-warning",
278
278
  "color": "theme-primary",
279
279
  "borderRadius": 4,
@@ -288,7 +288,7 @@
288
288
  "borderColor": "theme-warning"
289
289
  },
290
290
  "content": {
291
- "color": "theme-muted",
291
+ "color": "color-gray-500",
292
292
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
293
293
  },
294
294
  "footer": {
@@ -302,7 +302,7 @@
302
302
  "variant": "default",
303
303
  "views": {
304
304
  "container": {
305
- "backgroundColor": "theme-canvas",
305
+ "backgroundColor": "color-white",
306
306
  "borderColor": "theme-warning",
307
307
  "color": "theme-primary",
308
308
  "borderRadius": 2,
@@ -332,7 +332,7 @@
332
332
  "variant": "default",
333
333
  "views": {
334
334
  "container": {
335
- "backgroundColor": "theme-canvas",
335
+ "backgroundColor": "color-white",
336
336
  "borderColor": "theme-warning",
337
337
  "color": "theme-primary",
338
338
  "borderRadius": 2,
@@ -362,7 +362,7 @@
362
362
  "variant": "default",
363
363
  "views": {
364
364
  "container": {
365
- "backgroundColor": "theme-canvas",
365
+ "backgroundColor": "color-white",
366
366
  "borderColor": "theme-warning",
367
367
  "color": "theme-primary",
368
368
  "borderRadius": 2,
@@ -393,7 +393,7 @@
393
393
  "views": {
394
394
  "checkbox": {
395
395
  "borderColor": "theme-warning",
396
- "backgroundColor": "theme-canvas",
396
+ "backgroundColor": "color-white",
397
397
  "_checked": {
398
398
  "backgroundColor": "theme-primary",
399
399
  "borderColor": "theme-primary"
@@ -408,7 +408,7 @@
408
408
  "fontStyle": "normal"
409
409
  },
410
410
  "infoText": {
411
- "color": "theme-muted"
411
+ "color": "color-gray-500"
412
412
  },
413
413
  "container": {
414
414
  "borderRadius": 0
@@ -420,7 +420,7 @@
420
420
  "views": {
421
421
  "radio": {
422
422
  "borderColor": "theme-warning",
423
- "backgroundColor": "theme-canvas"
423
+ "backgroundColor": "color-white"
424
424
  },
425
425
  "dot": {
426
426
  "backgroundColor": "theme-primary"
@@ -433,7 +433,7 @@
433
433
  "fontStyle": "normal"
434
434
  },
435
435
  "infoText": {
436
- "color": "theme-muted"
436
+ "color": "color-gray-500"
437
437
  },
438
438
  "container": {
439
439
  "borderRadius": "50%"
@@ -447,7 +447,7 @@
447
447
  "backgroundColor": "theme-warning"
448
448
  },
449
449
  "circle": {
450
- "backgroundColor": "theme-canvas"
450
+ "backgroundColor": "color-white"
451
451
  },
452
452
  "label": {
453
453
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif",
@@ -475,13 +475,13 @@
475
475
  },
476
476
  "thumb": {
477
477
  "borderColor": "theme-primary",
478
- "backgroundColor": "theme-canvas"
478
+ "backgroundColor": "color-white"
479
479
  },
480
480
  "label": {
481
481
  "color": "theme-primary"
482
482
  },
483
483
  "valueLabel": {
484
- "color": "theme-muted"
484
+ "color": "color-gray-500"
485
485
  }
486
486
  }
487
487
  },
@@ -492,7 +492,7 @@
492
492
  "borderColor": "theme-warning"
493
493
  },
494
494
  "tab": {
495
- "color": "theme-muted",
495
+ "color": "color-gray-500",
496
496
  "fontWeight": 700,
497
497
  "letterSpacing": "-0.01em",
498
498
  "textTransform": "none",
@@ -507,7 +507,7 @@
507
507
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
508
508
  },
509
509
  "activeText": {
510
- "color": "theme-canvas"
510
+ "color": "color-white"
511
511
  },
512
512
  "content": {
513
513
  "color": "theme-primary"
@@ -521,7 +521,7 @@
521
521
  "views": {
522
522
  "container": {
523
523
  "borderColor": "theme-warning",
524
- "backgroundColor": "theme-canvas",
524
+ "backgroundColor": "color-white",
525
525
  "color": "theme-primary",
526
526
  "borderRadius": 0
527
527
  },
@@ -530,24 +530,24 @@
530
530
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
531
531
  },
532
532
  "content": {
533
- "color": "theme-muted"
533
+ "color": "color-gray-500"
534
534
  }
535
535
  }
536
536
  },
537
537
  "table": {
538
538
  "views": {
539
539
  "table": {
540
- "backgroundColor": "theme-canvas",
540
+ "backgroundColor": "color-white",
541
541
  "color": "theme-primary",
542
542
  "borderColor": "theme-warning",
543
543
  "borderRadius": 4
544
544
  },
545
545
  "thead": {
546
- "backgroundColor": "theme-canvas",
546
+ "backgroundColor": "color-white",
547
547
  "color": "theme-primary"
548
548
  },
549
549
  "th": {
550
- "color": "theme-muted",
550
+ "color": "color-gray-500",
551
551
  "borderColor": "theme-warning",
552
552
  "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
553
553
  "fontWeight": 700,
@@ -565,7 +565,7 @@
565
565
  "fontStyle": "normal"
566
566
  },
567
567
  "caption": {
568
- "color": "theme-muted",
568
+ "color": "color-gray-500",
569
569
  "fontStyle": "italic",
570
570
  "letterSpacing": "-0.01em"
571
571
  }
@@ -574,7 +574,7 @@
574
574
  "avatar": {
575
575
  "views": {
576
576
  "container": {
577
- "backgroundColor": "theme-canvas",
577
+ "backgroundColor": "color-white",
578
578
  "borderColor": "theme-warning",
579
579
  "color": "theme-primary",
580
580
  "borderRadius": "50%"
@@ -588,7 +588,7 @@
588
588
  "alert": {
589
589
  "views": {
590
590
  "container": {
591
- "backgroundColor": "theme-canvas",
591
+ "backgroundColor": "color-white",
592
592
  "borderColor": "theme-warning",
593
593
  "borderRadius": 4
594
594
  },
@@ -601,7 +601,7 @@
601
601
  "fontStyle": "normal"
602
602
  },
603
603
  "description": {
604
- "color": "theme-muted",
604
+ "color": "color-gray-500",
605
605
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
606
606
  },
607
607
  "icon": {
@@ -647,7 +647,7 @@
647
647
  "borderColor": "theme-warning"
648
648
  },
649
649
  "label": {
650
- "color": "theme-muted",
650
+ "color": "color-gray-500",
651
651
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
652
652
  }
653
653
  }
@@ -655,13 +655,13 @@
655
655
  "navigation": {
656
656
  "views": {
657
657
  "container": {
658
- "backgroundColor": "theme-canvas",
658
+ "backgroundColor": "color-white",
659
659
  "borderColor": "theme-warning",
660
660
  "color": "theme-primary",
661
661
  "borderRadius": 0
662
662
  },
663
663
  "item": {
664
- "color": "theme-muted"
664
+ "color": "color-gray-500"
665
665
  },
666
666
  "activeItem": {
667
667
  "color": "theme-primary",
@@ -672,35 +672,35 @@
672
672
  "hero": {
673
673
  "views": {
674
674
  "container": {
675
- "backgroundColor": "theme-canvas",
675
+ "backgroundColor": "color-white",
676
676
  "color": "theme-primary",
677
677
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
678
678
  },
679
679
  "eyebrow": {
680
- "color": "theme-muted"
680
+ "color": "color-gray-500"
681
681
  },
682
682
  "title": {
683
683
  "color": "theme-primary",
684
684
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
685
685
  },
686
686
  "description": {
687
- "color": "theme-muted"
687
+ "color": "color-gray-500"
688
688
  }
689
689
  }
690
690
  },
691
691
  "page": {
692
692
  "views": {
693
693
  "container": {
694
- "backgroundColor": "theme-canvas",
694
+ "backgroundColor": "color-white",
695
695
  "color": "theme-primary",
696
696
  "fontFamily": "'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif"
697
697
  },
698
698
  "section": {
699
- "backgroundColor": "theme-canvas",
699
+ "backgroundColor": "color-white",
700
700
  "borderColor": "theme-warning"
701
701
  },
702
702
  "surface": {
703
- "backgroundColor": "theme-canvas",
703
+ "backgroundColor": "color-white",
704
704
  "borderColor": "theme-warning",
705
705
  "color": "theme-primary"
706
706
  }