@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,21 +1,38 @@
1
1
  import type { PropMeta } from "@webstudio-is/generate-arg-types";
2
2
 
3
3
  export const propsPopover: Record<string, PropMeta> = {
4
- modal: { required: false, control: "boolean", type: "boolean" },
5
- open: { required: false, control: "boolean", type: "boolean" },
4
+ open: {
5
+ required: false,
6
+ control: "boolean",
7
+ type: "boolean",
8
+ description:
9
+ "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.",
10
+ },
6
11
  };
7
12
  export const propsPopoverTrigger: Record<string, PropMeta> = {};
8
13
  export const propsPopoverContent: Record<string, PropMeta> = {
9
14
  about: { required: false, control: "text", type: "string" },
10
- accessKey: { required: false, control: "text", type: "string" },
15
+ accessKey: {
16
+ required: false,
17
+ control: "text",
18
+ type: "string",
19
+ description: "Keyboard shortcut to activate or add focus to the element.",
20
+ },
11
21
  align: {
12
22
  required: false,
13
23
  control: "radio",
14
24
  type: "string",
15
25
  defaultValue: "center",
16
26
  options: ["center", "start", "end"],
27
+ description: "Specifies the horizontal alignment of the element.",
28
+ },
29
+ alignOffset: {
30
+ required: false,
31
+ control: "number",
32
+ type: "number",
33
+ description:
34
+ "The offset in pixels from the “start“ or “end“ alignment options.",
17
35
  },
18
- alignOffset: { required: false, control: "number", type: "number" },
19
36
  "aria-activedescendant": {
20
37
  description:
21
38
  "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
@@ -196,7 +213,7 @@ export const propsPopoverContent: Record<string, PropMeta> = {
196
213
  },
197
214
  "aria-label": {
198
215
  description:
199
- "Defines a string value that labels the current element.\n@see aria-labelledby.",
216
+ "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.",
200
217
  required: false,
201
218
  control: "text",
202
219
  type: "string",
@@ -396,28 +413,79 @@ export const propsPopoverContent: Record<string, PropMeta> = {
396
413
  type: "string",
397
414
  },
398
415
  arrowPadding: { required: false, control: "number", type: "number" },
399
- asChild: { required: false, control: "boolean", type: "boolean" },
400
- autoCapitalize: { required: false, control: "text", type: "string" },
416
+ autoCapitalize: {
417
+ required: false,
418
+ control: "text",
419
+ type: "string",
420
+ description:
421
+ "Sets whether input is automatically capitalized when entered by user.",
422
+ },
401
423
  autoCorrect: { required: false, control: "text", type: "string" },
402
- autoFocus: { required: false, control: "boolean", type: "boolean" },
424
+ autoFocus: {
425
+ required: false,
426
+ control: "boolean",
427
+ type: "boolean",
428
+ description:
429
+ "Indicates that an element should be focused on page load, or when its parent dialog is displayed.",
430
+ },
403
431
  autoSave: { required: false, control: "text", type: "string" },
404
432
  avoidCollisions: { required: false, control: "boolean", type: "boolean" },
405
433
  className: { required: false, control: "text", type: "string" },
406
- color: { required: false, control: "color", type: "string" },
407
- content: { required: false, control: "text", type: "string" },
408
- contextMenu: { required: false, control: "text", type: "string" },
434
+ color: {
435
+ required: false,
436
+ control: "color",
437
+ type: "string",
438
+ description:
439
+ "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.",
440
+ },
441
+ content: {
442
+ required: false,
443
+ control: "text",
444
+ type: "string",
445
+ description:
446
+ "A value associated with http-equiv orname depending on the context.",
447
+ },
448
+ contextMenu: {
449
+ required: false,
450
+ control: "text",
451
+ type: "string",
452
+ description:
453
+ "Defines the ID of a menu element which willserve as the element's context menu.",
454
+ },
409
455
  datatype: { required: false, control: "text", type: "string" },
410
- defaultChecked: { required: false, control: "boolean", type: "boolean" },
411
- dir: { required: false, control: "text", type: "string" },
412
- draggable: { required: false, control: "boolean", type: "boolean" },
413
- hidden: { required: false, control: "boolean", type: "boolean" },
456
+ dir: {
457
+ required: false,
458
+ control: "text",
459
+ type: "string",
460
+ description:
461
+ "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)",
462
+ },
463
+ draggable: {
464
+ required: false,
465
+ control: "boolean",
466
+ type: "boolean",
467
+ description: "Defines whether the element can be dragged.",
468
+ },
469
+ hidden: {
470
+ required: false,
471
+ control: "boolean",
472
+ type: "boolean",
473
+ description:
474
+ "Prevents rendering of given element, while keeping child elements, e.g. script elements, active.",
475
+ },
414
476
  hideWhenDetached: {
415
477
  required: false,
416
478
  control: "boolean",
417
479
  type: "boolean",
418
480
  defaultValue: true,
419
481
  },
420
- id: { required: false, control: "text", type: "string" },
482
+ id: {
483
+ required: false,
484
+ control: "text",
485
+ type: "string",
486
+ description:
487
+ "Often used with CSS to style a specific element. The value of this attribute must be unique.",
488
+ },
421
489
  inputMode: {
422
490
  description:
423
491
  "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",
@@ -447,32 +515,68 @@ export const propsPopoverContent: Record<string, PropMeta> = {
447
515
  itemRef: { required: false, control: "text", type: "string" },
448
516
  itemScope: { required: false, control: "boolean", type: "boolean" },
449
517
  itemType: { required: false, control: "text", type: "string" },
450
- lang: { required: false, control: "text", type: "string" },
518
+ lang: {
519
+ required: false,
520
+ control: "text",
521
+ type: "string",
522
+ description: "Defines the language used in the element.",
523
+ },
451
524
  nonce: { required: false, control: "text", type: "string" },
452
- placeholder: { required: false, control: "text", type: "string" },
525
+ placeholder: {
526
+ required: false,
527
+ control: "text",
528
+ type: "string",
529
+ description:
530
+ "Provides a hint to the user of what can be entered in the field.",
531
+ },
453
532
  prefix: { required: false, control: "text", type: "string" },
454
533
  property: { required: false, control: "text", type: "string" },
455
534
  radioGroup: { required: false, control: "text", type: "string" },
456
- rel: { required: false, control: "text", type: "string" },
535
+ rel: {
536
+ required: false,
537
+ control: "text",
538
+ type: "string",
539
+ description:
540
+ "Specifies the relationship of the target object to the link object.",
541
+ },
457
542
  resource: { required: false, control: "text", type: "string" },
458
543
  results: { required: false, control: "number", type: "number" },
459
544
  rev: { required: false, control: "text", type: "string" },
460
- role: { required: false, control: "text", type: "string" },
545
+ role: {
546
+ required: false,
547
+ control: "text",
548
+ type: "string",
549
+ description:
550
+ "Defines an explicit role for an element for use by assistive technologies.",
551
+ },
461
552
  security: { required: false, control: "text", type: "string" },
462
553
  side: {
463
554
  required: false,
464
555
  control: "select",
465
556
  type: "string",
466
557
  options: ["top", "right", "bottom", "left"],
558
+ description:
559
+ "The preferred alignment against the Trigger. May change when collisions occur.",
467
560
  },
468
561
  sideOffset: {
469
562
  required: false,
470
563
  control: "number",
471
564
  type: "number",
472
565
  defaultValue: 4,
566
+ description: "The distance in pixels between the Content and the Trigger.",
567
+ },
568
+ slot: {
569
+ required: false,
570
+ control: "text",
571
+ type: "string",
572
+ description: "Assigns a slot in a shadow DOM shadow tree to an element.",
573
+ },
574
+ spellCheck: {
575
+ required: false,
576
+ control: "boolean",
577
+ type: "boolean",
578
+ description: "Indicates whether spell checking is allowed for the element.",
473
579
  },
474
- slot: { required: false, control: "text", type: "string" },
475
- spellCheck: { required: false, control: "boolean", type: "boolean" },
476
580
  sticky: {
477
581
  required: false,
478
582
  control: "radio",
@@ -489,13 +593,27 @@ export const propsPopoverContent: Record<string, PropMeta> = {
489
593
  control: "boolean",
490
594
  type: "boolean",
491
595
  },
492
- tabIndex: { required: false, control: "number", type: "number" },
493
- title: { required: false, control: "text", type: "string" },
596
+ tabIndex: {
597
+ required: false,
598
+ control: "number",
599
+ type: "number",
600
+ description:
601
+ "Overrides the browser's default tab order and follows the one specified instead.",
602
+ },
603
+ title: {
604
+ required: false,
605
+ control: "text",
606
+ type: "string",
607
+ description:
608
+ "Text to be displayed in a tooltip when hovering over the element.",
609
+ },
494
610
  translate: {
495
611
  required: false,
496
612
  control: "radio",
497
613
  type: "string",
498
614
  options: ["yes", "no"],
615
+ description:
616
+ "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.",
499
617
  },
500
618
  typeof: { required: false, control: "text", type: "string" },
501
619
  unselectable: {