@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
@@ -2,7 +2,12 @@ import type { PropMeta } from "@webstudio-is/generate-arg-types";
2
2
 
3
3
  export const props: Record<string, PropMeta> = {
4
4
  about: { required: false, control: "text", type: "string" },
5
- accessKey: { required: false, control: "text", type: "string" },
5
+ accessKey: {
6
+ required: false,
7
+ control: "text",
8
+ type: "string",
9
+ description: "Keyboard shortcut to activate or add focus to the element.",
10
+ },
6
11
  "aria-activedescendant": {
7
12
  description:
8
13
  "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
@@ -183,7 +188,7 @@ export const props: Record<string, PropMeta> = {
183
188
  },
184
189
  "aria-label": {
185
190
  description:
186
- "Defines a string value that labels the current element.\n@see aria-labelledby.",
191
+ "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.",
187
192
  required: false,
188
193
  control: "text",
189
194
  type: "string",
@@ -382,27 +387,120 @@ export const props: Record<string, PropMeta> = {
382
387
  control: "text",
383
388
  type: "string",
384
389
  },
385
- autoCapitalize: { required: false, control: "text", type: "string" },
390
+ autoCapitalize: {
391
+ required: false,
392
+ control: "text",
393
+ type: "string",
394
+ description:
395
+ "Sets whether input is automatically capitalized when entered by user.",
396
+ },
386
397
  autoCorrect: { required: false, control: "text", type: "string" },
387
- autoFocus: { required: false, control: "boolean", type: "boolean" },
398
+ autoFocus: {
399
+ required: false,
400
+ control: "boolean",
401
+ type: "boolean",
402
+ description:
403
+ "Indicates that an element should be focused on page load, or when its parent dialog is displayed.",
404
+ },
388
405
  autoSave: { required: false, control: "text", type: "string" },
389
406
  className: { required: false, control: "text", type: "string" },
390
- color: { required: false, control: "color", type: "string" },
391
- content: { required: false, control: "text", type: "string" },
392
- contextMenu: { required: false, control: "text", type: "string" },
407
+ color: {
408
+ required: false,
409
+ control: "color",
410
+ type: "string",
411
+ description:
412
+ "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.",
413
+ },
414
+ content: {
415
+ required: false,
416
+ control: "text",
417
+ type: "string",
418
+ description:
419
+ "A value associated with http-equiv orname depending on the context.",
420
+ },
421
+ contextMenu: {
422
+ required: false,
423
+ control: "text",
424
+ type: "string",
425
+ description:
426
+ "Defines the ID of a menu element which willserve as the element's context menu.",
427
+ },
393
428
  datatype: { required: false, control: "text", type: "string" },
394
429
  defaultChecked: { required: false, control: "boolean", type: "boolean" },
395
- dir: { required: false, control: "text", type: "string" },
396
- disabled: { required: false, control: "boolean", type: "boolean" },
397
- draggable: { required: false, control: "boolean", type: "boolean" },
398
- form: { required: false, control: "text", type: "string" },
399
- formAction: { required: false, control: "text", type: "string" },
400
- formEncType: { required: false, control: "text", type: "string" },
401
- formMethod: { required: false, control: "text", type: "string" },
402
- formNoValidate: { required: false, control: "boolean", type: "boolean" },
403
- formTarget: { required: false, control: "text", type: "string" },
404
- hidden: { required: false, control: "boolean", type: "boolean" },
405
- id: { required: false, control: "text", type: "string" },
430
+ dir: {
431
+ required: false,
432
+ control: "text",
433
+ type: "string",
434
+ description:
435
+ "Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)",
436
+ },
437
+ disabled: {
438
+ required: false,
439
+ control: "boolean",
440
+ type: "boolean",
441
+ description: "Indicates whether the user can interact with the element.",
442
+ },
443
+ draggable: {
444
+ required: false,
445
+ control: "boolean",
446
+ type: "boolean",
447
+ description: "Defines whether the element can be dragged.",
448
+ },
449
+ form: {
450
+ required: false,
451
+ control: "text",
452
+ type: "string",
453
+ description: "Indicates the form that is the owner of the element.",
454
+ },
455
+ formAction: {
456
+ required: false,
457
+ control: "text",
458
+ type: "string",
459
+ description:
460
+ "Indicates the action of the element, overriding the action defined inthe form.",
461
+ },
462
+ formEncType: {
463
+ required: false,
464
+ control: "text",
465
+ type: "string",
466
+ description:
467
+ 'If the button/input is a submit button (e.g. type="submit"), this attribute sets the encoding type to use during form submission. If this attribute is specified, it overrides theenctype attribute of the button\'s form owner.',
468
+ },
469
+ formMethod: {
470
+ required: false,
471
+ control: "text",
472
+ type: "string",
473
+ description:
474
+ 'If the button/input is a submit button (e.g. type="submit"), this attribute sets the submission method to use during form submission (GET, POST, etc.). If this attribute is specified, it overrides the method attribute of the button\'s form owner.',
475
+ },
476
+ formNoValidate: {
477
+ required: false,
478
+ control: "boolean",
479
+ type: "boolean",
480
+ description:
481
+ 'If the button/input is a submit button (e.g. type="submit"), this boolean attribute specifies that the form is not to be validatedwhen it is submitted. If this attribute is specified, it overrides thenovalidate attribute of the button\'s form owner.',
482
+ },
483
+ formTarget: {
484
+ required: false,
485
+ control: "text",
486
+ type: "string",
487
+ description:
488
+ 'If the button/input is a submit button (e.g. type="submit"), this attribute specifies the browsing context (for example, tab, window, or inline frame) in which to display the response that is received aftersubmitting the form. If this attribute is specified, it overrides thetarget attribute of the button\'s form owner.',
489
+ },
490
+ hidden: {
491
+ required: false,
492
+ control: "boolean",
493
+ type: "boolean",
494
+ description:
495
+ "Prevents rendering of given element, while keeping child elements, e.g. script elements, active.",
496
+ },
497
+ id: {
498
+ required: false,
499
+ control: "text",
500
+ type: "string",
501
+ description:
502
+ "Often used with CSS to style a specific element. The value of this attribute must be unique.",
503
+ },
406
504
  inputMode: {
407
505
  description:
408
506
  "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",
@@ -432,28 +530,60 @@ export const props: Record<string, PropMeta> = {
432
530
  itemRef: { required: false, control: "text", type: "string" },
433
531
  itemScope: { required: false, control: "boolean", type: "boolean" },
434
532
  itemType: { required: false, control: "text", type: "string" },
435
- lang: { required: false, control: "text", type: "string" },
436
- name: { required: false, control: "text", type: "string" },
533
+ lang: {
534
+ required: false,
535
+ control: "text",
536
+ type: "string",
537
+ description: "Defines the language used in the element.",
538
+ },
539
+ name: {
540
+ required: false,
541
+ control: "text",
542
+ type: "string",
543
+ description:
544
+ "This name is important when submitting form data to the server, as it identifies the data associated with the input. When multiple inputs share the same name attribute, they are treated as part of the same group (e.g., radio buttons or checkboxes).",
545
+ },
437
546
  nonce: { required: false, control: "text", type: "string" },
438
- placeholder: { required: false, control: "text", type: "string" },
547
+ placeholder: {
548
+ required: false,
549
+ control: "text",
550
+ type: "string",
551
+ description:
552
+ "Provides a hint to the user of what can be entered in the field.",
553
+ },
439
554
  prefix: { required: false, control: "text", type: "string" },
440
555
  property: { required: false, control: "text", type: "string" },
441
556
  radioGroup: { required: false, control: "text", type: "string" },
442
- rel: { required: false, control: "text", type: "string" },
557
+ rel: {
558
+ required: false,
559
+ control: "text",
560
+ type: "string",
561
+ description:
562
+ "Specifies the relationship of the target object to the link object.",
563
+ },
443
564
  resource: { required: false, control: "text", type: "string" },
444
565
  results: { required: false, control: "number", type: "number" },
445
566
  rev: { required: false, control: "text", type: "string" },
446
- role: { required: false, control: "text", type: "string" },
567
+ role: {
568
+ required: false,
569
+ control: "text",
570
+ type: "string",
571
+ description:
572
+ "Defines an explicit role for an element for use by assistive technologies.",
573
+ },
447
574
  security: { required: false, control: "text", type: "string" },
448
- size: {
575
+ slot: {
449
576
  required: false,
450
- control: "select",
577
+ control: "text",
451
578
  type: "string",
452
- defaultValue: "default",
453
- options: ["default", "sm", "lg", "icon"],
579
+ description: "Assigns a slot in a shadow DOM shadow tree to an element.",
580
+ },
581
+ spellCheck: {
582
+ required: false,
583
+ control: "boolean",
584
+ type: "boolean",
585
+ description: "Indicates whether spell checking is allowed for the element.",
454
586
  },
455
- slot: { required: false, control: "text", type: "string" },
456
- spellCheck: { required: false, control: "boolean", type: "boolean" },
457
587
  suppressContentEditableWarning: {
458
588
  required: false,
459
589
  control: "boolean",
@@ -464,19 +594,35 @@ export const props: Record<string, PropMeta> = {
464
594
  control: "boolean",
465
595
  type: "boolean",
466
596
  },
467
- tabIndex: { required: false, control: "number", type: "number" },
468
- title: { required: false, control: "text", type: "string" },
597
+ tabIndex: {
598
+ required: false,
599
+ control: "number",
600
+ type: "number",
601
+ description:
602
+ "Overrides the browser's default tab order and follows the one specified instead.",
603
+ },
604
+ title: {
605
+ required: false,
606
+ control: "text",
607
+ type: "string",
608
+ description:
609
+ "Text to be displayed in a tooltip when hovering over the element.",
610
+ },
469
611
  translate: {
470
612
  required: false,
471
613
  control: "radio",
472
614
  type: "string",
473
615
  options: ["yes", "no"],
616
+ description:
617
+ "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.",
474
618
  },
475
619
  type: {
476
620
  required: false,
477
621
  control: "radio",
478
622
  type: "string",
479
623
  options: ["button", "submit", "reset"],
624
+ description:
625
+ "Defines the behavior of the button, such as submitting a form or resetting form fields.",
480
626
  },
481
627
  typeof: { required: false, control: "text", type: "string" },
482
628
  unselectable: {
@@ -485,19 +631,5 @@ export const props: Record<string, PropMeta> = {
485
631
  type: "string",
486
632
  options: ["on", "off"],
487
633
  },
488
- variant: {
489
- required: false,
490
- control: "select",
491
- type: "string",
492
- defaultValue: "default",
493
- options: [
494
- "link",
495
- "default",
496
- "destructive",
497
- "outline",
498
- "secondary",
499
- "ghost",
500
- ],
501
- },
502
634
  vocab: { required: false, control: "text", type: "string" },
503
635
  };