@webstudio-is/sdk-components-react-radix 0.87.1 → 0.89.0

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 (192) hide show
  1. package/lib/__generated__/accordion.props.js +605 -114
  2. package/lib/__generated__/button.props.js +158 -47
  3. package/lib/__generated__/checkbox.props.js +1083 -0
  4. package/lib/__generated__/collapsible.props.js +234 -44
  5. package/lib/__generated__/dialog.props.js +611 -121
  6. package/lib/__generated__/input.props.js +264 -47
  7. package/lib/__generated__/label.props.js +123 -23
  8. package/lib/__generated__/navigation-menu.props.js +2565 -0
  9. package/lib/__generated__/popover.props.js +129 -28
  10. package/lib/__generated__/radio-group.props.js +1627 -0
  11. package/lib/__generated__/select.props.js +3678 -0
  12. package/lib/__generated__/sheet.props.js +591 -121
  13. package/lib/__generated__/switch.props.js +1083 -0
  14. package/lib/__generated__/tabs.props.js +906 -68
  15. package/lib/__generated__/textarea.props.js +177 -31
  16. package/lib/__generated__/tooltip.props.js +131 -29
  17. package/lib/accordion.js +11 -4
  18. package/lib/accordion.ws.js +88 -72
  19. package/lib/checkbox.js +13 -0
  20. package/lib/checkbox.ws.js +153 -0
  21. package/lib/cjs/__generated__/accordion.props.js +605 -114
  22. package/lib/cjs/__generated__/button.props.js +158 -47
  23. package/lib/cjs/__generated__/checkbox.props.js +1103 -0
  24. package/lib/cjs/__generated__/collapsible.props.js +234 -44
  25. package/lib/cjs/__generated__/dialog.props.js +611 -121
  26. package/lib/cjs/__generated__/input.props.js +264 -47
  27. package/lib/cjs/__generated__/label.props.js +123 -23
  28. package/lib/cjs/__generated__/navigation-menu.props.js +2585 -0
  29. package/lib/cjs/__generated__/popover.props.js +129 -28
  30. package/lib/cjs/__generated__/radio-group.props.js +1647 -0
  31. package/lib/cjs/__generated__/select.props.js +3698 -0
  32. package/lib/cjs/__generated__/sheet.props.js +591 -121
  33. package/lib/cjs/__generated__/switch.props.js +1103 -0
  34. package/lib/cjs/__generated__/tabs.props.js +906 -68
  35. package/lib/cjs/__generated__/textarea.props.js +177 -31
  36. package/lib/cjs/__generated__/tooltip.props.js +131 -29
  37. package/lib/cjs/accordion.js +11 -4
  38. package/lib/cjs/accordion.ws.js +86 -71
  39. package/lib/cjs/{textarea.js → checkbox.js} +9 -6
  40. package/lib/cjs/checkbox.ws.js +174 -0
  41. package/lib/cjs/collapsible.ws.js +5 -1
  42. package/lib/cjs/components.js +27 -14
  43. package/lib/cjs/dialog.ws.js +18 -17
  44. package/lib/cjs/hooks.js +5 -1
  45. package/lib/cjs/label.ws.js +2 -1
  46. package/lib/cjs/metas.js +29 -14
  47. package/lib/cjs/navigation-menu.js +107 -0
  48. package/lib/cjs/navigation-menu.ws.js +514 -0
  49. package/lib/cjs/popover.ws.js +13 -9
  50. package/lib/cjs/props-descriptions.js +56 -0
  51. package/lib/cjs/props.js +27 -14
  52. package/lib/cjs/{button.js → radio-group.js} +10 -8
  53. package/lib/cjs/radio-group.ws.js +191 -0
  54. package/lib/cjs/select.js +83 -0
  55. package/lib/cjs/select.ws.js +350 -0
  56. package/lib/cjs/sheet.ws.js +88 -176
  57. package/lib/cjs/{input.js → switch.js} +8 -9
  58. package/lib/cjs/switch.ws.js +173 -0
  59. package/lib/cjs/tabs.js +2 -3
  60. package/lib/cjs/tabs.ws.js +14 -18
  61. package/lib/cjs/theme/styles.js +100 -0
  62. package/lib/cjs/theme/tailwind-classes.js +125 -16
  63. package/lib/cjs/theme/tailwind-colors.js +1 -0
  64. package/lib/cjs/tooltip.ws.js +12 -8
  65. package/lib/collapsible.ws.js +5 -1
  66. package/lib/components.js +44 -22
  67. package/lib/dialog.ws.js +18 -17
  68. package/lib/hooks.js +5 -1
  69. package/lib/label.ws.js +2 -1
  70. package/lib/metas.js +58 -24
  71. package/lib/navigation-menu.js +85 -0
  72. package/lib/navigation-menu.ws.js +501 -0
  73. package/lib/popover.ws.js +13 -9
  74. package/lib/props-descriptions.js +36 -0
  75. package/lib/props.js +56 -24
  76. package/lib/radio-group.js +11 -0
  77. package/lib/radio-group.ws.js +173 -0
  78. package/lib/select.js +75 -0
  79. package/lib/select.ws.js +338 -0
  80. package/lib/sheet.ws.js +89 -194
  81. package/lib/switch.js +7 -0
  82. package/lib/switch.ws.js +145 -0
  83. package/lib/tabs.js +3 -5
  84. package/lib/tabs.ws.js +15 -19
  85. package/lib/theme/styles.js +70 -0
  86. package/lib/theme/tailwind-classes.js +125 -16
  87. package/lib/theme/tailwind-colors.js +1 -0
  88. package/lib/tooltip.ws.js +12 -8
  89. package/lib/types/__generated__/checkbox.props.d.ts +3 -0
  90. package/lib/types/__generated__/navigation-menu.props.d.ts +8 -0
  91. package/lib/types/__generated__/radio-group.props.d.ts +4 -0
  92. package/lib/types/__generated__/select.props.d.ts +9 -0
  93. package/lib/types/__generated__/switch.props.d.ts +3 -0
  94. package/lib/types/checkbox.d.ts +6 -0
  95. package/lib/types/checkbox.stories.d.ts +11 -0
  96. package/lib/types/checkbox.ws.d.ts +5 -0
  97. package/lib/types/components.d.ts +5 -4
  98. package/lib/types/metas.d.ts +6 -4
  99. package/lib/types/navigation-menu.d.ts +15 -0
  100. package/lib/types/navigation-menu.ws.d.ts +15 -0
  101. package/lib/types/props-descriptions.d.ts +29 -0
  102. package/lib/types/props.d.ts +5 -4
  103. package/lib/types/radio-group.d.ts +5 -0
  104. package/lib/types/radio-group.stories.d.ts +9 -0
  105. package/lib/types/radio-group.ws.d.ts +7 -0
  106. package/lib/types/select.d.ts +14 -0
  107. package/lib/types/select.ws.d.ts +17 -0
  108. package/lib/types/sheet.ws.d.ts +2 -15
  109. package/lib/types/switch.d.ts +4 -0
  110. package/lib/types/switch.stories.d.ts +9 -0
  111. package/lib/types/switch.ws.d.ts +5 -0
  112. package/lib/types/tabs.d.ts +3 -12
  113. package/lib/types/theme/radix-common-types.d.ts +3 -2
  114. package/lib/types/theme/styles.d.ts +215 -0
  115. package/lib/types/theme/tailwind-classes.d.ts +16 -6
  116. package/lib/types/theme/tailwind-colors.d.ts +1 -0
  117. package/lib/types/theme/tailwind-theme.d.ts +1 -1
  118. package/package.json +12 -7
  119. package/src/__generated__/accordion.props.ts +675 -108
  120. package/src/__generated__/button.props.ts +177 -45
  121. package/src/__generated__/checkbox.props.ts +1217 -0
  122. package/src/__generated__/collapsible.props.ts +261 -42
  123. package/src/__generated__/dialog.props.ts +682 -115
  124. package/src/__generated__/input.props.ts +292 -44
  125. package/src/__generated__/label.props.ts +137 -22
  126. package/src/__generated__/navigation-menu.props.ts +2882 -0
  127. package/src/__generated__/popover.props.ts +142 -24
  128. package/src/__generated__/radio-group.props.ts +1828 -0
  129. package/src/__generated__/select.props.ts +4130 -0
  130. package/src/__generated__/sheet.props.ts +657 -110
  131. package/src/__generated__/switch.props.ts +1217 -0
  132. package/src/__generated__/tabs.props.ts +1019 -67
  133. package/src/__generated__/textarea.props.ts +195 -30
  134. package/src/__generated__/tooltip.props.ts +145 -25
  135. package/src/accordion.tsx +14 -7
  136. package/src/accordion.ws.ts +87 -70
  137. package/src/{textarea.stories.ts → checkbox.stories.ts} +6 -11
  138. package/src/checkbox.tsx +22 -0
  139. package/src/checkbox.ws.ts +154 -0
  140. package/src/collapsible.ws.ts +6 -1
  141. package/src/components.ts +25 -12
  142. package/src/dialog.ws.tsx +17 -16
  143. package/src/hooks.ts +4 -0
  144. package/src/label.ws.ts +3 -1
  145. package/src/metas.ts +36 -12
  146. package/src/navigation-menu.stories.tsx +21 -0
  147. package/src/navigation-menu.tsx +130 -0
  148. package/src/navigation-menu.ws.ts +524 -0
  149. package/src/popover.ws.tsx +13 -9
  150. package/src/props-descriptions.ts +43 -0
  151. package/src/props.ts +35 -12
  152. package/src/{input.stories.ts → radio-group.stories.ts} +6 -15
  153. package/src/radio-group.tsx +17 -0
  154. package/src/radio-group.ws.ts +178 -0
  155. package/src/select.stories.tsx +21 -0
  156. package/src/select.tsx +112 -0
  157. package/src/select.ws.ts +349 -0
  158. package/src/sheet.ws.tsx +91 -209
  159. package/src/{button.stories.ts → switch.stories.ts} +6 -19
  160. package/src/switch.tsx +10 -0
  161. package/src/switch.ws.ts +146 -0
  162. package/src/tabs.tsx +4 -17
  163. package/src/tabs.ws.ts +19 -19
  164. package/src/theme/radix-common-types.ts +3 -2
  165. package/src/theme/styles.ts +80 -0
  166. package/src/theme/tailwind-classes.ts +150 -14
  167. package/src/theme/tailwind-colors.ts +1 -0
  168. package/src/tooltip.ws.tsx +13 -8
  169. package/lib/button.js +0 -8
  170. package/lib/button.ws.js +0 -133
  171. package/lib/cjs/button.ws.js +0 -160
  172. package/lib/cjs/input.ws.js +0 -103
  173. package/lib/cjs/textarea.ws.js +0 -98
  174. package/lib/input.js +0 -8
  175. package/lib/input.ws.js +0 -75
  176. package/lib/textarea.js +0 -8
  177. package/lib/textarea.ws.js +0 -70
  178. package/lib/types/button.d.ts +0 -7
  179. package/lib/types/button.stories.d.ts +0 -20
  180. package/lib/types/button.ws.d.ts +0 -7
  181. package/lib/types/input.d.ts +0 -2
  182. package/lib/types/input.stories.d.ts +0 -20
  183. package/lib/types/input.ws.d.ts +0 -3
  184. package/lib/types/textarea.d.ts +0 -2
  185. package/lib/types/textarea.stories.d.ts +0 -14
  186. package/lib/types/textarea.ws.d.ts +0 -3
  187. package/src/button.tsx +0 -25
  188. package/src/button.ws.ts +0 -155
  189. package/src/input.tsx +0 -12
  190. package/src/input.ws.ts +0 -78
  191. package/src/textarea.tsx +0 -12
  192. package/src/textarea.ws.ts +0 -74
@@ -1,19 +1,34 @@
1
1
  const propsPopover = {
2
- modal: { required: false, control: "boolean", type: "boolean" },
3
- open: { required: false, control: "boolean", type: "boolean" }
2
+ open: {
3
+ required: false,
4
+ control: "boolean",
5
+ type: "boolean",
6
+ description: "Show or hide the content of this component on the canvas. This will not affect the initial state of the component."
7
+ }
4
8
  };
5
9
  const propsPopoverTrigger = {};
6
10
  const propsPopoverContent = {
7
11
  about: { required: false, control: "text", type: "string" },
8
- accessKey: { required: false, control: "text", type: "string" },
12
+ accessKey: {
13
+ required: false,
14
+ control: "text",
15
+ type: "string",
16
+ description: "Keyboard shortcut to activate or add focus to the element."
17
+ },
9
18
  align: {
10
19
  required: false,
11
20
  control: "radio",
12
21
  type: "string",
13
22
  defaultValue: "center",
14
- options: ["center", "start", "end"]
23
+ options: ["center", "start", "end"],
24
+ description: "Specifies the horizontal alignment of the element."
25
+ },
26
+ alignOffset: {
27
+ required: false,
28
+ control: "number",
29
+ type: "number",
30
+ description: "The offset in pixels from the \u201Cstart\u201C or \u201Cend\u201C alignment options."
15
31
  },
16
- alignOffset: { required: false, control: "number", type: "number" },
17
32
  "aria-activedescendant": {
18
33
  description: "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
19
34
  required: false,
@@ -169,7 +184,7 @@ const propsPopoverContent = {
169
184
  type: "string"
170
185
  },
171
186
  "aria-label": {
172
- description: "Defines a string value that labels the current element.\n@see aria-labelledby.",
187
+ description: "Provides the accessible name that describes an interactive element if no other accessible name exists, for example in a button that contains an image with no text.",
173
188
  required: false,
174
189
  control: "text",
175
190
  type: "string"
@@ -346,28 +361,71 @@ const propsPopoverContent = {
346
361
  type: "string"
347
362
  },
348
363
  arrowPadding: { required: false, control: "number", type: "number" },
349
- asChild: { required: false, control: "boolean", type: "boolean" },
350
- autoCapitalize: { required: false, control: "text", type: "string" },
364
+ autoCapitalize: {
365
+ required: false,
366
+ control: "text",
367
+ type: "string",
368
+ description: "Sets whether input is automatically capitalized when entered by user."
369
+ },
351
370
  autoCorrect: { required: false, control: "text", type: "string" },
352
- autoFocus: { required: false, control: "boolean", type: "boolean" },
371
+ autoFocus: {
372
+ required: false,
373
+ control: "boolean",
374
+ type: "boolean",
375
+ description: "Indicates that an element should be focused on page load, or when its parent dialog is displayed."
376
+ },
353
377
  autoSave: { required: false, control: "text", type: "string" },
354
378
  avoidCollisions: { required: false, control: "boolean", type: "boolean" },
355
379
  className: { required: false, control: "text", type: "string" },
356
- color: { required: false, control: "color", type: "string" },
357
- content: { required: false, control: "text", type: "string" },
358
- contextMenu: { required: false, control: "text", type: "string" },
380
+ color: {
381
+ required: false,
382
+ control: "color",
383
+ type: "string",
384
+ description: "This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format. Note: This is a legacy attribute. Please use the CSS color property instead."
385
+ },
386
+ content: {
387
+ required: false,
388
+ control: "text",
389
+ type: "string",
390
+ description: "A value associated with http-equiv orname depending on the context."
391
+ },
392
+ contextMenu: {
393
+ required: false,
394
+ control: "text",
395
+ type: "string",
396
+ description: "Defines the ID of a menu element which willserve as the element's context menu."
397
+ },
359
398
  datatype: { required: false, control: "text", type: "string" },
360
- defaultChecked: { required: false, control: "boolean", type: "boolean" },
361
- dir: { required: false, control: "text", type: "string" },
362
- draggable: { required: false, control: "boolean", type: "boolean" },
363
- hidden: { required: false, control: "boolean", type: "boolean" },
399
+ dir: {
400
+ required: false,
401
+ control: "text",
402
+ type: "string",
403
+ description: "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)"
404
+ },
405
+ draggable: {
406
+ required: false,
407
+ control: "boolean",
408
+ type: "boolean",
409
+ description: "Defines whether the element can be dragged."
410
+ },
411
+ hidden: {
412
+ required: false,
413
+ control: "boolean",
414
+ type: "boolean",
415
+ description: "Prevents rendering of given element, while keeping child elements, e.g. script elements, active."
416
+ },
364
417
  hideWhenDetached: {
365
418
  required: false,
366
419
  control: "boolean",
367
420
  type: "boolean",
368
421
  defaultValue: true
369
422
  },
370
- id: { required: false, control: "text", type: "string" },
423
+ id: {
424
+ required: false,
425
+ control: "text",
426
+ type: "string",
427
+ description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
428
+ },
371
429
  inputMode: {
372
430
  description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
373
431
  required: false,
@@ -395,32 +453,64 @@ const propsPopoverContent = {
395
453
  itemRef: { required: false, control: "text", type: "string" },
396
454
  itemScope: { required: false, control: "boolean", type: "boolean" },
397
455
  itemType: { required: false, control: "text", type: "string" },
398
- lang: { required: false, control: "text", type: "string" },
456
+ lang: {
457
+ required: false,
458
+ control: "text",
459
+ type: "string",
460
+ description: "Defines the language used in the element."
461
+ },
399
462
  nonce: { required: false, control: "text", type: "string" },
400
- placeholder: { required: false, control: "text", type: "string" },
463
+ placeholder: {
464
+ required: false,
465
+ control: "text",
466
+ type: "string",
467
+ description: "Provides a hint to the user of what can be entered in the field."
468
+ },
401
469
  prefix: { required: false, control: "text", type: "string" },
402
470
  property: { required: false, control: "text", type: "string" },
403
471
  radioGroup: { required: false, control: "text", type: "string" },
404
- rel: { required: false, control: "text", type: "string" },
472
+ rel: {
473
+ required: false,
474
+ control: "text",
475
+ type: "string",
476
+ description: "Specifies the relationship of the target object to the link object."
477
+ },
405
478
  resource: { required: false, control: "text", type: "string" },
406
479
  results: { required: false, control: "number", type: "number" },
407
480
  rev: { required: false, control: "text", type: "string" },
408
- role: { required: false, control: "text", type: "string" },
481
+ role: {
482
+ required: false,
483
+ control: "text",
484
+ type: "string",
485
+ description: "Defines an explicit role for an element for use by assistive technologies."
486
+ },
409
487
  security: { required: false, control: "text", type: "string" },
410
488
  side: {
411
489
  required: false,
412
490
  control: "select",
413
491
  type: "string",
414
- options: ["top", "right", "bottom", "left"]
492
+ options: ["top", "right", "bottom", "left"],
493
+ description: "The preferred alignment against the Trigger. May change when collisions occur."
415
494
  },
416
495
  sideOffset: {
417
496
  required: false,
418
497
  control: "number",
419
498
  type: "number",
420
- defaultValue: 4
499
+ defaultValue: 4,
500
+ description: "The distance in pixels between the Content and the Trigger."
501
+ },
502
+ slot: {
503
+ required: false,
504
+ control: "text",
505
+ type: "string",
506
+ description: "Assigns a slot in a shadow DOM shadow tree to an element."
507
+ },
508
+ spellCheck: {
509
+ required: false,
510
+ control: "boolean",
511
+ type: "boolean",
512
+ description: "Indicates whether spell checking is allowed for the element."
421
513
  },
422
- slot: { required: false, control: "text", type: "string" },
423
- spellCheck: { required: false, control: "boolean", type: "boolean" },
424
514
  sticky: {
425
515
  required: false,
426
516
  control: "radio",
@@ -437,13 +527,24 @@ const propsPopoverContent = {
437
527
  control: "boolean",
438
528
  type: "boolean"
439
529
  },
440
- tabIndex: { required: false, control: "number", type: "number" },
441
- title: { required: false, control: "text", type: "string" },
530
+ tabIndex: {
531
+ required: false,
532
+ control: "number",
533
+ type: "number",
534
+ description: "Overrides the browser's default tab order and follows the one specified instead."
535
+ },
536
+ title: {
537
+ required: false,
538
+ control: "text",
539
+ type: "string",
540
+ description: "Text to be displayed in a tooltip when hovering over the element."
541
+ },
442
542
  translate: {
443
543
  required: false,
444
544
  control: "radio",
445
545
  type: "string",
446
- options: ["yes", "no"]
546
+ options: ["yes", "no"],
547
+ description: "Specify whether an element's attribute values and the values of its text node children are to be translated when the page is localized, or whether to leave them unchanged."
447
548
  },
448
549
  typeof: { required: false, control: "text", type: "string" },
449
550
  unselectable: {