ropav 0.0.9 → 0.0.11

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 (289) hide show
  1. package/README.md +6 -0
  2. package/dist/accordion.css +115 -111
  3. package/dist/accordion.js +60 -16
  4. package/dist/alert.css +110 -108
  5. package/dist/alert.js +48 -26
  6. package/dist/aspect-ratio.css +17 -15
  7. package/dist/aspect-ratio.js +20 -6
  8. package/dist/avatar.css +98 -96
  9. package/dist/avatar.js +27 -16
  10. package/dist/badge.css +95 -93
  11. package/dist/badge.js +29 -16
  12. package/dist/base.css +672 -671
  13. package/dist/button-group.css +39 -37
  14. package/dist/button-group.js +23 -12
  15. package/dist/button-link.css +160 -158
  16. package/dist/button-link.js +43 -24
  17. package/dist/button.css +160 -158
  18. package/dist/button.js +37 -19
  19. package/dist/card.css +109 -107
  20. package/dist/card.js +42 -17
  21. package/dist/checkbox.css +139 -137
  22. package/dist/checkbox.js +79 -28
  23. package/dist/collapse.css +29 -27
  24. package/dist/collapse.js +44 -10
  25. package/dist/color-input.css +137 -107
  26. package/dist/color-input.js +91 -17
  27. package/dist/color-picker.css +309 -303
  28. package/dist/color-picker.js +250 -77
  29. package/dist/color-picker2.js +9 -1
  30. package/dist/color-swatch.css +48 -46
  31. package/dist/color-swatch.js +15 -11
  32. package/dist/color-swatch2.js +4 -0
  33. package/dist/components/accordion/accordion-item.d.ts +16 -4
  34. package/dist/components/accordion/accordion.d.ts +1 -1
  35. package/dist/components/accordion/index.d.ts +5 -4
  36. package/dist/components/accordion/index.js +2 -2
  37. package/dist/components/accordion/types.d.ts +10 -5
  38. package/dist/components/accordion/useAccordion.d.ts +1 -1
  39. package/dist/components/alert/alert.d.ts +3 -3
  40. package/dist/components/alert/index.d.ts +3 -3
  41. package/dist/components/alert/index.js +2 -2
  42. package/dist/components/alert/types.d.ts +5 -2
  43. package/dist/components/alert/useAlertColor.d.ts +1 -1
  44. package/dist/components/aspect-ratio/aspect-ratio.d.ts +1 -1
  45. package/dist/components/aspect-ratio/index.d.ts +3 -2
  46. package/dist/components/aspect-ratio/index.js +2 -2
  47. package/dist/components/aspect-ratio/types.d.ts +4 -1
  48. package/dist/components/avatar/avatar.d.ts +1 -1
  49. package/dist/components/avatar/index.d.ts +3 -3
  50. package/dist/components/avatar/index.js +2 -2
  51. package/dist/components/avatar/types.d.ts +5 -2
  52. package/dist/components/avatar/useAvatarColor.d.ts +1 -1
  53. package/dist/components/badge/badge.d.ts +1 -1
  54. package/dist/components/badge/index.d.ts +3 -3
  55. package/dist/components/badge/index.js +2 -2
  56. package/dist/components/badge/types.d.ts +5 -2
  57. package/dist/components/badge/useBadgeColor.d.ts +1 -1
  58. package/dist/components/button/button.d.ts +1 -1
  59. package/dist/components/button/index.d.ts +3 -2
  60. package/dist/components/button/index.js +2 -2
  61. package/dist/components/button/types.d.ts +5 -2
  62. package/dist/components/button/useButtonColor.d.ts +1 -1
  63. package/dist/components/button-group/button-group.d.ts +1 -1
  64. package/dist/components/button-group/index.d.ts +3 -2
  65. package/dist/components/button-group/index.js +2 -2
  66. package/dist/components/button-group/types.d.ts +4 -1
  67. package/dist/components/button-link/button-link.d.ts +1 -1
  68. package/dist/components/button-link/index.d.ts +3 -2
  69. package/dist/components/button-link/index.js +2 -2
  70. package/dist/components/button-link/types.d.ts +5 -2
  71. package/dist/components/card/card.d.ts +1 -1
  72. package/dist/components/card/index.d.ts +3 -2
  73. package/dist/components/card/index.js +2 -2
  74. package/dist/components/card/types.d.ts +5 -1
  75. package/dist/components/checkbox/checkbox.d.ts +5 -2
  76. package/dist/components/checkbox/index.d.ts +3 -2
  77. package/dist/components/checkbox/index.js +2 -2
  78. package/dist/components/checkbox/types.d.ts +7 -2
  79. package/dist/components/checkbox/useCheckbox.d.ts +4 -2
  80. package/dist/components/collapse/collapse.d.ts +2 -2
  81. package/dist/components/collapse/index.d.ts +4 -3
  82. package/dist/components/collapse/index.js +2 -2
  83. package/dist/components/collapse/types.d.ts +9 -2
  84. package/dist/components/collapse/useCollapse.d.ts +1 -1
  85. package/dist/components/color-input/color-input.d.ts +1 -1
  86. package/dist/components/color-input/index.d.ts +3 -2
  87. package/dist/components/color-input/index.js +2 -2
  88. package/dist/components/color-input/types.d.ts +8 -4
  89. package/dist/components/color-input/useColorInput.d.ts +5 -5
  90. package/dist/components/color-input/useColorInputEyeDropper.d.ts +1 -1
  91. package/dist/components/color-input/useColorInputPopover.d.ts +2 -2
  92. package/dist/components/color-input/useColorInputValue.d.ts +1 -1
  93. package/dist/components/color-picker/color-picker-saturation.d.ts +1 -1
  94. package/dist/components/color-picker/color-picker-slider.d.ts +1 -1
  95. package/dist/components/color-picker/color-picker-utils.d.ts +1 -1
  96. package/dist/components/color-picker/color-picker.d.ts +1 -1
  97. package/dist/components/color-picker/index.d.ts +3 -3
  98. package/dist/components/color-picker/index.js +2 -2
  99. package/dist/components/color-picker/types.d.ts +13 -1
  100. package/dist/components/color-picker/useColorPickerDrag.d.ts +7 -2
  101. package/dist/components/color-picker/useColorPickerSwatches.d.ts +1 -1
  102. package/dist/components/color-picker/useColorPickerValue.d.ts +2 -2
  103. package/dist/components/color-swatch/color-swatch.d.ts +1 -1
  104. package/dist/components/color-swatch/index.d.ts +3 -2
  105. package/dist/components/color-swatch/index.js +2 -1
  106. package/dist/components/color-swatch/types.d.ts +4 -1
  107. package/dist/components/dropdown-menu/dropdown-menu-items.d.ts +15 -6
  108. package/dist/components/dropdown-menu/dropdown-menu-primitives.d.ts +724 -0
  109. package/dist/components/dropdown-menu/dropdown-menu-utils.d.ts +1 -1
  110. package/dist/components/dropdown-menu/dropdown-menu.d.ts +3 -3
  111. package/dist/components/dropdown-menu/index.d.ts +55 -3
  112. package/dist/components/dropdown-menu/index.js +2 -2
  113. package/dist/components/dropdown-menu/types.d.ts +142 -6
  114. package/dist/components/dropdown-menu/useDropdownMenu.d.ts +21 -12
  115. package/dist/components/dropdown-menu/useDropdownMenuDisclosure.d.ts +6 -4
  116. package/dist/components/dropdown-menu/useDropdownMenuDom.d.ts +4 -3
  117. package/dist/components/dropdown-menu/useDropdownMenuHoverIntent.d.ts +2 -2
  118. package/dist/components/dropdown-menu/useDropdownMenuInteractions.d.ts +5 -5
  119. package/dist/components/dropdown-menu/useDropdownMenuNavigation.d.ts +3 -3
  120. package/dist/components/dropdown-menu/useDropdownMenuPortalPosition.d.ts +19 -0
  121. package/dist/components/dropdown-menu/useDropdownMenuRenderItems.d.ts +25 -5
  122. package/dist/components/dropdown-menu/useDropdownSubmenus.d.ts +3 -3
  123. package/dist/components/field/field.d.ts +2 -2
  124. package/dist/components/field/index.d.ts +3 -2
  125. package/dist/components/field/index.js +2 -2
  126. package/dist/components/field/types.d.ts +4 -1
  127. package/dist/components/field/useField.d.ts +1 -1
  128. package/dist/components/floating/index.d.ts +1 -0
  129. package/dist/components/floating/index.js +0 -0
  130. package/dist/components/floating/types.d.ts +31 -0
  131. package/dist/components/floating/useFloatingPosition.d.ts +38 -0
  132. package/dist/components/focus-trap/focus-trap.d.ts +31 -0
  133. package/dist/components/focus-trap/index.d.ts +4 -0
  134. package/dist/components/focus-trap/index.js +3 -0
  135. package/dist/components/focus-trap/types.d.ts +41 -0
  136. package/dist/components/focus-trap/useFocusTrap.d.ts +2 -0
  137. package/dist/components/icon-button/icon-button.d.ts +1 -1
  138. package/dist/components/icon-button/index.d.ts +3 -2
  139. package/dist/components/icon-button/index.js +2 -1
  140. package/dist/components/icon-button/types.d.ts +5 -2
  141. package/dist/components/input/index.d.ts +3 -2
  142. package/dist/components/input/index.js +2 -1
  143. package/dist/components/input/input.d.ts +1 -1
  144. package/dist/components/input/types.d.ts +4 -1
  145. package/dist/components/input/useInput.d.ts +2 -2
  146. package/dist/components/modal/index.d.ts +3 -2
  147. package/dist/components/modal/index.js +2 -2
  148. package/dist/components/modal/modal.d.ts +1 -1
  149. package/dist/components/modal/types.d.ts +9 -2
  150. package/dist/components/modal/useModal.d.ts +1 -1
  151. package/dist/components/number-input/index.d.ts +3 -2
  152. package/dist/components/number-input/index.js +2 -2
  153. package/dist/components/number-input/number-input.d.ts +1 -1
  154. package/dist/components/number-input/types.d.ts +5 -2
  155. package/dist/components/number-input/useNumberInput.d.ts +2 -2
  156. package/dist/components/overlay/index.d.ts +3 -2
  157. package/dist/components/overlay/index.js +2 -1
  158. package/dist/components/overlay/overlay.d.ts +1 -1
  159. package/dist/components/overlay/types.d.ts +4 -1
  160. package/dist/components/overlay/useOverlay.d.ts +1 -1
  161. package/dist/components/popover/index.d.ts +3 -3
  162. package/dist/components/popover/index.js +2 -2
  163. package/dist/components/popover/popover.d.ts +2 -2
  164. package/dist/components/popover/types.d.ts +21 -11
  165. package/dist/components/popover/usePopover.d.ts +11 -2
  166. package/dist/components/progress/index.d.ts +3 -3
  167. package/dist/components/progress/index.js +2 -2
  168. package/dist/components/progress/progress.d.ts +1 -1
  169. package/dist/components/progress/types.d.ts +5 -2
  170. package/dist/components/progress/useProgress.d.ts +2 -2
  171. package/dist/components/radio/index.d.ts +4 -3
  172. package/dist/components/radio/index.js +2 -2
  173. package/dist/components/radio/radio-group.d.ts +1 -1
  174. package/dist/components/radio/radio.d.ts +9 -4
  175. package/dist/components/radio/types.d.ts +21 -4
  176. package/dist/components/radio/useRadio.d.ts +10 -5
  177. package/dist/components/select/index.d.ts +3 -2
  178. package/dist/components/select/index.js +2 -2
  179. package/dist/components/select/select.d.ts +1 -1
  180. package/dist/components/select/types.d.ts +4 -1
  181. package/dist/components/select/useSelect.d.ts +4 -3
  182. package/dist/components/slider/index.d.ts +4 -4
  183. package/dist/components/slider/index.js +2 -2
  184. package/dist/components/slider/range-slider-tooltip.d.ts +37 -0
  185. package/dist/components/slider/range-slider.d.ts +8 -13
  186. package/dist/components/slider/slider.d.ts +5 -2
  187. package/dist/components/slider/sliderCore.d.ts +35 -0
  188. package/dist/components/slider/types.d.ts +14 -7
  189. package/dist/components/slider/useRangeSlider.d.ts +5 -7
  190. package/dist/components/slider/useRangeSliderPointer.d.ts +19 -0
  191. package/dist/components/slider/useRangeSliderTooltipCollision.d.ts +31 -2
  192. package/dist/components/slider/useRangeSliderTooltipState.d.ts +23 -0
  193. package/dist/components/slider/useSlider.d.ts +11 -15
  194. package/dist/components/switch/index.d.ts +3 -2
  195. package/dist/components/switch/index.js +2 -2
  196. package/dist/components/switch/switch.d.ts +5 -2
  197. package/dist/components/switch/types.d.ts +7 -2
  198. package/dist/components/switch/useSwitch.d.ts +4 -2
  199. package/dist/components/tabs/index.d.ts +7 -6
  200. package/dist/components/tabs/index.js +2 -2
  201. package/dist/components/tabs/tabs-content.d.ts +2 -2
  202. package/dist/components/tabs/tabs-list.d.ts +4 -4
  203. package/dist/components/tabs/tabs-trigger.d.ts +5 -5
  204. package/dist/components/tabs/tabs.d.ts +5 -5
  205. package/dist/components/tabs/types.d.ts +13 -4
  206. package/dist/components/tabs/useTabs.d.ts +1 -1
  207. package/dist/components/teleport-provider/index.d.ts +2 -0
  208. package/dist/components/teleport-provider/index.js +2 -0
  209. package/dist/components/teleport-provider/teleport-provider.d.ts +21 -0
  210. package/dist/components/teleport-provider/types.d.ts +4 -0
  211. package/dist/components/teleport-provider/useTeleportTarget.d.ts +5 -0
  212. package/dist/components/textarea/index.d.ts +3 -2
  213. package/dist/components/textarea/index.js +2 -2
  214. package/dist/components/textarea/textarea.d.ts +5 -2
  215. package/dist/components/textarea/types.d.ts +6 -1
  216. package/dist/components/textarea/useTextarea.d.ts +3 -2
  217. package/dist/components/toast/defaults.d.ts +7 -0
  218. package/dist/components/toast/index.d.ts +7 -0
  219. package/dist/components/toast/index.js +2 -0
  220. package/dist/components/toast/toast-provider.d.ts +21 -0
  221. package/dist/components/toast/toast-viewport.d.ts +34 -0
  222. package/dist/components/toast/toast.d.ts +31 -0
  223. package/dist/components/toast/types.d.ts +110 -0
  224. package/dist/components/toast/useToast.d.ts +4 -0
  225. package/dist/components/toast/useToastColor.d.ts +3 -0
  226. package/dist/components/toast/useToastState.d.ts +2 -0
  227. package/dist/components/tooltip/index.d.ts +3 -2
  228. package/dist/components/tooltip/index.js +2 -1
  229. package/dist/components/tooltip/tooltip.d.ts +2 -2
  230. package/dist/components/tooltip/types.d.ts +14 -13
  231. package/dist/components/tooltip/useTooltip.d.ts +15 -3
  232. package/dist/dropdown-menu.css +191 -107
  233. package/dist/dropdown-menu.js +1729 -107
  234. package/dist/field.css +41 -39
  235. package/dist/field.js +40 -16
  236. package/dist/focus-trap.js +80 -0
  237. package/dist/icon-button.css +193 -189
  238. package/dist/icon-button.js +23 -18
  239. package/dist/icon-button2.js +8 -0
  240. package/dist/index.d.ts +35 -30
  241. package/dist/index.js +36 -31
  242. package/dist/input.css +122 -120
  243. package/dist/input.js +47 -34
  244. package/dist/input2.js +9 -0
  245. package/dist/legacy-unlayered.css +5461 -0
  246. package/dist/modal.css +129 -127
  247. package/dist/modal.js +160 -200
  248. package/dist/number-input.css +87 -85
  249. package/dist/number-input.js +61 -17
  250. package/dist/overlay.css +26 -24
  251. package/dist/overlay.js +17 -9
  252. package/dist/overlay2.js +4 -0
  253. package/dist/popover.css +140 -107
  254. package/dist/popover.js +295 -189
  255. package/dist/popover2.js +6 -1
  256. package/dist/progress.css +101 -99
  257. package/dist/progress.js +50 -28
  258. package/dist/radio.css +114 -105
  259. package/dist/radio.js +154 -56
  260. package/dist/select.css +244 -242
  261. package/dist/select.js +92 -47
  262. package/dist/slider.css +1109 -904
  263. package/dist/slider.js +1118 -923
  264. package/dist/styles-api.d.ts +22 -0
  265. package/dist/styles-api.js +49 -0
  266. package/dist/switch.css +120 -108
  267. package/dist/switch.js +89 -33
  268. package/dist/tabs.css +286 -278
  269. package/dist/tabs.js +60 -21
  270. package/dist/teleport-provider.js +15 -0
  271. package/dist/textarea.css +132 -130
  272. package/dist/textarea.js +77 -29
  273. package/dist/toast.css +236 -0
  274. package/dist/toast.js +739 -0
  275. package/dist/tooltip.css +137 -107
  276. package/dist/tooltip.js +182 -223
  277. package/dist/tooltip2.js +8 -0
  278. package/dist/useClickOutside.js +1 -1
  279. package/dist/useFloatingPosition.js +1284 -0
  280. package/dist/useFocusTrap.js +130 -0
  281. package/dist/useTeleportTarget.js +29 -0
  282. package/dist/utils/componentColors.d.ts +60 -0
  283. package/docs/public-styles-api.md +133 -0
  284. package/docs/public-tokens.md +545 -0
  285. package/package.json +44 -12
  286. package/src/styles/_tokens.scss +33 -28
  287. package/src/styles/_utilities.scss +11 -9
  288. package/src/styles/styles-manifest.json +4125 -0
  289. package/dist/components/slider/useRangeSliderTooltipTransition.d.ts +0 -4
package/dist/card.css CHANGED
@@ -1,108 +1,110 @@
1
- .rp-card[data-v-269e2bc4] {
2
- --_rp-card-bg: var(--rp-color-default);
3
- --_rp-card-border: var(--rp-color-default-border);
4
- --_rp-card-fg: var(--rp-color-text);
5
- --_rp-card-header-border: var(--rp-color-default-border);
6
- --_rp-card-footer-border: var(--rp-color-default-border);
7
- --_rp-card-padding: var(--rp-spacing-5);
8
- --_rp-card-radius: var(--rp-radius-sm);
9
- box-sizing: border-box;
10
- display: flex;
11
- flex-direction: column;
12
- min-width: 0;
13
- overflow: hidden;
14
- font-family: var(--rp-font-family);
15
- color: var(--_rp-card-fg);
16
- background-color: var(--_rp-card-bg);
17
- border: var(--rp-border-width-thin) solid var(--_rp-card-border);
18
- border-radius: var(--_rp-card-radius);
19
- transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
20
- }
21
- .rp-card--layer-base[data-v-269e2bc4] {
22
- --_rp-card-bg: var(--rp-color-body);
23
- }
24
- .rp-card--layer-surface[data-v-269e2bc4] {
25
- --_rp-card-bg: var(--rp-color-default);
26
- }
27
- .rp-card--layer-raised[data-v-269e2bc4] {
28
- --_rp-card-bg: var(--rp-color-default);
29
- }
30
- .rp-card--borderless[data-v-269e2bc4] {
31
- --_rp-card-border: transparent;
32
- }
33
- .rp-card--header-bordered .rp-card__header[data-v-269e2bc4] {
34
- border-bottom: var(--rp-border-width-thin) solid var(--_rp-card-header-border);
35
- }
36
- .rp-card--footer-bordered .rp-card__footer[data-v-269e2bc4] {
37
- border-top: var(--rp-border-width-thin) solid var(--_rp-card-footer-border);
38
- }
39
- .rp-card--header-compact .rp-card__header[data-v-269e2bc4] {
40
- padding-block-end: calc(var(--_rp-card-padding) / 2);
41
- }
42
- .rp-card--header-compact .rp-card__body[data-v-269e2bc4] {
43
- padding-block-start: calc(var(--_rp-card-padding) / 2);
44
- }
45
- .rp-card--footer-compact .rp-card__body[data-v-269e2bc4] {
46
- padding-block-end: calc(var(--_rp-card-padding) / 2);
47
- }
48
- .rp-card--footer-compact .rp-card__footer[data-v-269e2bc4] {
49
- padding-block-start: calc(var(--_rp-card-padding) / 2);
50
- }
51
- .rp-card--padding-none[data-v-269e2bc4] {
52
- --_rp-card-padding: var(--rp-spacing-0);
53
- }
54
- .rp-card--padding-sm[data-v-269e2bc4] {
55
- --_rp-card-padding: var(--rp-spacing-3);
56
- }
57
- .rp-card--padding-md[data-v-269e2bc4] {
58
- --_rp-card-padding: var(--rp-spacing-5);
59
- }
60
- .rp-card--padding-lg[data-v-269e2bc4] {
61
- --_rp-card-padding: var(--rp-spacing-6);
62
- }
63
- .rp-card--radius-none[data-v-269e2bc4] {
64
- --_rp-card-radius: var(--rp-radius-none);
65
- }
66
- .rp-card--radius-xs[data-v-269e2bc4] {
67
- --_rp-card-radius: var(--rp-radius-xs);
68
- }
69
- .rp-card--radius-sm[data-v-269e2bc4] {
70
- --_rp-card-radius: var(--rp-radius-sm);
71
- }
72
- .rp-card--radius-md[data-v-269e2bc4] {
73
- --_rp-card-radius: var(--rp-radius-md);
74
- }
75
- .rp-card--radius-lg[data-v-269e2bc4] {
76
- --_rp-card-radius: var(--rp-radius-lg);
77
- }
78
- .rp-card--radius-xl[data-v-269e2bc4] {
79
- --_rp-card-radius: var(--rp-radius-xl);
80
- }
81
- .rp-card__header[data-v-269e2bc4], .rp-card__body[data-v-269e2bc4], .rp-card__footer[data-v-269e2bc4] {
82
- box-sizing: border-box;
83
- padding: var(--_rp-card-padding);
84
- }
85
- .rp-card__header[data-v-269e2bc4], .rp-card__footer[data-v-269e2bc4] {
86
- display: grid;
87
- gap: var(--rp-spacing-1);
88
- }
89
- .rp-card__body[data-v-269e2bc4] {
90
- flex: 1 1 auto;
91
- min-width: 0;
92
- color: var(--rp-color-text);
93
- font-size: var(--rp-font-size-md);
94
- line-height: var(--rp-line-height-md);
95
- }
96
- .rp-card__title[data-v-269e2bc4] {
97
- margin: 0;
98
- color: var(--rp-color-text);
99
- font-size: var(--rp-font-size-lg);
100
- font-weight: var(--rp-font-weight-semibold);
101
- line-height: var(--rp-line-height-xs);
102
- }
103
- .rp-card__description[data-v-269e2bc4] {
104
- margin: 0;
105
- color: var(--rp-color-dimmed);
106
- font-size: var(--rp-font-size-sm);
107
- line-height: var(--rp-line-height-md);
1
+ @layer ropav.components {
2
+ .rp-card[data-v-2c467155] {
3
+ --_rp-card-bg: var(--rp-color-default);
4
+ --_rp-card-border: var(--rp-color-default-border);
5
+ --_rp-card-fg: var(--rp-color-text);
6
+ --_rp-card-header-border: var(--rp-color-default-border);
7
+ --_rp-card-footer-border: var(--rp-color-default-border);
8
+ --_rp-card-padding: var(--rp-spacing-5);
9
+ --_rp-card-radius: var(--rp-radius-sm);
10
+ box-sizing: border-box;
11
+ display: flex;
12
+ flex-direction: column;
13
+ min-width: 0;
14
+ overflow: hidden;
15
+ font-family: var(--rp-font-family);
16
+ color: var(--_rp-card-fg);
17
+ background-color: var(--_rp-card-bg);
18
+ border: var(--rp-border-width-thin) solid var(--_rp-card-border);
19
+ border-radius: var(--_rp-card-radius);
20
+ transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
21
+ }
22
+ .rp-card--layer-base[data-v-2c467155] {
23
+ --_rp-card-bg: var(--rp-color-body);
24
+ }
25
+ .rp-card--layer-surface[data-v-2c467155] {
26
+ --_rp-card-bg: var(--rp-color-default);
27
+ }
28
+ .rp-card--layer-raised[data-v-2c467155] {
29
+ --_rp-card-bg: var(--rp-color-default);
30
+ }
31
+ .rp-card--borderless[data-v-2c467155] {
32
+ --_rp-card-border: transparent;
33
+ }
34
+ .rp-card--header-bordered .rp-card__header[data-v-2c467155] {
35
+ border-bottom: var(--rp-border-width-thin) solid var(--_rp-card-header-border);
36
+ }
37
+ .rp-card--footer-bordered .rp-card__footer[data-v-2c467155] {
38
+ border-top: var(--rp-border-width-thin) solid var(--_rp-card-footer-border);
39
+ }
40
+ .rp-card--header-compact .rp-card__header[data-v-2c467155] {
41
+ padding-block-end: calc(var(--_rp-card-padding) / 2);
42
+ }
43
+ .rp-card--header-compact .rp-card__body[data-v-2c467155] {
44
+ padding-block-start: calc(var(--_rp-card-padding) / 2);
45
+ }
46
+ .rp-card--footer-compact .rp-card__body[data-v-2c467155] {
47
+ padding-block-end: calc(var(--_rp-card-padding) / 2);
48
+ }
49
+ .rp-card--footer-compact .rp-card__footer[data-v-2c467155] {
50
+ padding-block-start: calc(var(--_rp-card-padding) / 2);
51
+ }
52
+ .rp-card--padding-none[data-v-2c467155] {
53
+ --_rp-card-padding: var(--rp-spacing-0);
54
+ }
55
+ .rp-card--padding-sm[data-v-2c467155] {
56
+ --_rp-card-padding: var(--rp-spacing-3);
57
+ }
58
+ .rp-card--padding-md[data-v-2c467155] {
59
+ --_rp-card-padding: var(--rp-spacing-5);
60
+ }
61
+ .rp-card--padding-lg[data-v-2c467155] {
62
+ --_rp-card-padding: var(--rp-spacing-6);
63
+ }
64
+ .rp-card--radius-none[data-v-2c467155] {
65
+ --_rp-card-radius: var(--rp-radius-none);
66
+ }
67
+ .rp-card--radius-xs[data-v-2c467155] {
68
+ --_rp-card-radius: var(--rp-radius-xs);
69
+ }
70
+ .rp-card--radius-sm[data-v-2c467155] {
71
+ --_rp-card-radius: var(--rp-radius-sm);
72
+ }
73
+ .rp-card--radius-md[data-v-2c467155] {
74
+ --_rp-card-radius: var(--rp-radius-md);
75
+ }
76
+ .rp-card--radius-lg[data-v-2c467155] {
77
+ --_rp-card-radius: var(--rp-radius-lg);
78
+ }
79
+ .rp-card--radius-xl[data-v-2c467155] {
80
+ --_rp-card-radius: var(--rp-radius-xl);
81
+ }
82
+ .rp-card__header[data-v-2c467155], .rp-card__body[data-v-2c467155], .rp-card__footer[data-v-2c467155] {
83
+ box-sizing: border-box;
84
+ padding: var(--_rp-card-padding);
85
+ }
86
+ .rp-card__header[data-v-2c467155], .rp-card__footer[data-v-2c467155] {
87
+ display: grid;
88
+ gap: var(--rp-spacing-1);
89
+ }
90
+ .rp-card__body[data-v-2c467155] {
91
+ flex: 1 1 auto;
92
+ min-width: 0;
93
+ color: var(--rp-color-text);
94
+ font-size: var(--rp-font-size-md);
95
+ line-height: var(--rp-line-height-md);
96
+ }
97
+ .rp-card__title[data-v-2c467155] {
98
+ margin: 0;
99
+ color: var(--rp-color-text);
100
+ font-size: var(--rp-font-size-lg);
101
+ font-weight: var(--rp-font-weight-semibold);
102
+ line-height: var(--rp-line-height-xs);
103
+ }
104
+ .rp-card__description[data-v-2c467155] {
105
+ margin: 0;
106
+ color: var(--rp-color-dimmed);
107
+ font-size: var(--rp-font-size-sm);
108
+ line-height: var(--rp-line-height-md);
109
+ }
108
110
  }
package/dist/card.js CHANGED
@@ -1,18 +1,18 @@
1
1
  import './card.css';
2
2
  import { t as bem } from "./bem.js";
3
+ import { n as useStylesApi } from "./styles-api.js";
3
4
  import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
4
- import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setClass, setInsertionState, setText, template, toDisplayString, txt, useSlots } from "vue";
5
+ import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, txt, unref, useSlots } from "vue";
5
6
  //#region src/components/card/card.vue?vue&type=script&setup=true&vapor=true&lang.ts
6
- var t0 = template("<div data-v-269e2bc4 class=rp-card__title> ");
7
- var t1 = template("<p data-v-269e2bc4 class=rp-card__description> ");
8
- var t2 = template("<div data-v-269e2bc4 class=rp-card__header>");
9
- var t3 = template("<div data-v-269e2bc4>");
10
- var t4 = template("<div data-v-269e2bc4 class=rp-card__footer>");
11
- var t5 = template("<div data-v-269e2bc4>", 1);
7
+ var t0 = template("<div data-v-2c467155> ");
8
+ var t1 = template("<p data-v-2c467155> ");
9
+ var t2 = template("<div data-v-2c467155>");
10
+ var t3 = template("<div data-v-2c467155>", 1);
12
11
  //#endregion
13
12
  //#region src/components/card/card.vue
14
13
  var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
15
14
  name: "RpCard",
15
+ inheritAttrs: false,
16
16
  __name: "card",
17
17
  props: {
18
18
  layer: {},
@@ -38,7 +38,9 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
38
38
  String,
39
39
  Object,
40
40
  Array
41
- ] }
41
+ ] },
42
+ classNames: {},
43
+ styles: {}
42
44
  },
43
45
  setup(__props) {
44
46
  const props = __props;
@@ -60,22 +62,31 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
60
62
  "footer-bordered": props.footerBorder,
61
63
  "footer-compact": hasCompactFooterSpacing.value
62
64
  }));
63
- const n19 = t5();
64
- renderEffect(() => setClass(n19, rootClass.value));
65
+ const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
66
+ const rootAttrs = computed(() => getRootAttrs({ class: rootClass.value }));
67
+ const n19 = t3();
68
+ renderEffect(() => setDynamicProps(n19, [rootAttrs.value]));
65
69
  setInsertionState(n19, null, 0);
66
70
  createIf(() => hasHeader.value, () => {
67
71
  const n10 = t2();
72
+ renderEffect(() => setDynamicProps(n10, [unref(getPartAttrs)("header", { class: "rp-card__header" })]));
68
73
  setInsertionState(n10, null, 0);
69
74
  createSlot("header", null, () => {
70
75
  return [createIf(() => hasTitle.value, () => {
71
76
  const n6 = t0();
72
77
  const x6 = txt(n6);
73
- renderEffect(() => setText(x6, toDisplayString(__props.title)));
78
+ renderEffect(() => {
79
+ setDynamicProps(n6, [unref(getPartAttrs)("title", { class: "rp-card__title" })]);
80
+ setText(x6, toDisplayString(__props.title));
81
+ });
74
82
  return n6;
75
83
  }), createIf(() => hasDescription.value, () => {
76
84
  const n9 = t1();
77
85
  const x9 = txt(n9);
78
- renderEffect(() => setText(x9, toDisplayString(__props.description)));
86
+ renderEffect(() => {
87
+ setDynamicProps(n9, [unref(getPartAttrs)("description", { class: "rp-card__description" })]);
88
+ setText(x9, toDisplayString(__props.description));
89
+ });
79
90
  return n9;
80
91
  })];
81
92
  }, 1);
@@ -83,21 +94,35 @@ var card_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
83
94
  });
84
95
  setInsertionState(n19, null, 1);
85
96
  createIf(() => hasBody.value, () => {
86
- const n14 = t3();
87
- renderEffect(() => setClass(n14, ["rp-card__body", __props.bodyClass]));
97
+ const n14 = t2();
98
+ renderEffect(() => setDynamicProps(n14, [unref(getPartAttrs)("body", {
99
+ class: "rp-card__body",
100
+ compatibilityClass: __props.bodyClass
101
+ })]));
88
102
  setInsertionState(n14, null, 0);
89
103
  createSlot("default", null, null, 1);
90
104
  return n14;
91
105
  });
92
106
  setInsertionState(n19, null, 2);
93
107
  createIf(() => hasFooter.value, () => {
94
- const n18 = t4();
108
+ const n18 = t2();
109
+ renderEffect(() => setDynamicProps(n18, [unref(getPartAttrs)("footer", { class: "rp-card__footer" })]));
95
110
  setInsertionState(n18, null, 0);
96
111
  createSlot("footer", null, null, 1);
97
112
  return n18;
98
113
  });
99
114
  return n19;
100
115
  }
101
- }), [["__scopeId", "data-v-269e2bc4"]]);
116
+ }), [["__scopeId", "data-v-2c467155"]]);
102
117
  //#endregion
103
- export { card_default as t };
118
+ //#region src/components/card/types.ts
119
+ var cardParts = [
120
+ "root",
121
+ "header",
122
+ "title",
123
+ "description",
124
+ "body",
125
+ "footer"
126
+ ];
127
+ //#endregion
128
+ export { card_default as n, cardParts as t };
package/dist/checkbox.css CHANGED
@@ -1,141 +1,143 @@
1
- .rp-checkbox[data-v-8af73824] {
2
- --_rp-checkbox-color: var(--rp-color-control-selected-bg);
3
- --_rp-checkbox-on-color: var(--rp-color-control-selected-fg);
4
- --_rp-checkbox-size: 24px;
5
- --_rp-checkbox-font-size: var(--rp-font-size-md);
6
- --_rp-checkbox-radius: 4px;
7
- --_rp-checkbox-checked-bg: var(--_rp-checkbox-color);
8
- --_rp-checkbox-checked-border: var(--_rp-checkbox-color);
9
- --_rp-checkbox-checked-icon: var(--_rp-checkbox-on-color);
10
- --_rp-checkbox-invalid-border: var(--rp-color-red-filled);
11
- --_rp-checkbox-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
12
- display: inline-flex;
13
- align-items: center;
14
- cursor: pointer;
15
- font-family: var(--rp-font-family);
16
- user-select: none;
17
- vertical-align: top;
18
- }
19
- .rp-checkbox--disabled[data-v-8af73824] {
20
- opacity: var(--rp-opacity-disabled);
21
- cursor: not-allowed;
22
- }
23
- .rp-checkbox[data-v-8af73824] {
24
- gap: var(--rp-spacing-2);
25
- font-size: var(--_rp-checkbox-font-size);
26
- }
27
- .rp-checkbox__native[data-v-8af73824] {
28
- position: absolute;
29
- width: 1px;
30
- height: 1px;
31
- padding: 0;
32
- margin: -1px;
33
- overflow: hidden;
34
- clip: rect(0, 0, 0, 0);
35
- white-space: nowrap;
36
- border-width: 0;
37
- pointer-events: none;
38
- }
39
- .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-8af73824] {
40
- border-color: var(--rp-color-control-border-focus);
41
- box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
42
- }
43
- .rp-checkbox__box[data-v-8af73824] {
44
- display: inline-flex;
45
- align-items: center;
46
- justify-content: center;
47
- width: var(--_rp-checkbox-size);
48
- height: var(--_rp-checkbox-size);
49
- flex-shrink: 0;
50
- border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
51
- border-radius: var(--_rp-checkbox-radius);
52
- background-color: var(--rp-color-control-bg);
53
- transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
54
- }
55
- .rp-checkbox--checked .rp-checkbox__box[data-v-8af73824], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-8af73824] {
56
- background-color: var(--_rp-checkbox-checked-bg);
57
- border-color: var(--_rp-checkbox-checked-border);
58
- }
59
- .rp-checkbox--invalid .rp-checkbox__box[data-v-8af73824] {
60
- border-color: var(--_rp-checkbox-invalid-border);
61
- }
62
- .rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-8af73824] {
63
- border-color: var(--_rp-checkbox-invalid-border);
64
- box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-checkbox-invalid-ring);
65
- }
66
- .rp-checkbox__icon[data-v-8af73824] {
67
- width: 60%;
68
- height: 60%;
69
- color: var(--_rp-checkbox-checked-icon);
70
- transform-origin: center;
71
- }
72
- .rp-checkbox__icon[data-v-8af73824] [stroke-width] {
73
- stroke-width: 3;
74
- }
75
- .rp-checkbox__label[data-v-8af73824] {
76
- line-height: var(--rp-line-height-md);
77
- color: var(--rp-color-text);
78
- }
79
- .rp-checkbox--outline[data-v-8af73824] {
80
- --_rp-checkbox-checked-bg: var(--rp-color-control-bg);
81
- --_rp-checkbox-checked-border: var(--_rp-checkbox-color);
82
- --_rp-checkbox-checked-icon: var(--_rp-checkbox-color);
83
- }
84
- .rp-checkbox--size-xs[data-v-8af73824] {
85
- --_rp-checkbox-size: 16px;
86
- --_rp-checkbox-font-size: var(--rp-font-size-xs);
87
- }
88
- .rp-checkbox--size-sm[data-v-8af73824] {
89
- --_rp-checkbox-size: 20px;
90
- --_rp-checkbox-font-size: var(--rp-font-size-sm);
91
- }
92
- .rp-checkbox--size-md[data-v-8af73824] {
93
- --_rp-checkbox-size: 24px;
94
- --_rp-checkbox-font-size: var(--rp-font-size-md);
95
- }
96
- .rp-checkbox--size-lg[data-v-8af73824] {
97
- --_rp-checkbox-size: 30px;
98
- --_rp-checkbox-font-size: var(--rp-font-size-lg);
99
- }
100
- .rp-checkbox--size-xl[data-v-8af73824] {
101
- --_rp-checkbox-size: 36px;
102
- --_rp-checkbox-font-size: var(--rp-font-size-xl);
103
- }
104
- .rp-checkbox--radius-xs[data-v-8af73824] {
105
- --_rp-checkbox-radius: 2px;
106
- }
107
- .rp-checkbox--radius-sm[data-v-8af73824] {
108
- --_rp-checkbox-radius: 4px;
109
- }
110
- .rp-checkbox--radius-md[data-v-8af73824] {
111
- --_rp-checkbox-radius: 6px;
112
- }
113
- .rp-checkbox--radius-lg[data-v-8af73824] {
114
- --_rp-checkbox-radius: 8px;
115
- }
116
- .rp-checkbox--radius-xl[data-v-8af73824] {
117
- --_rp-checkbox-radius: var(--rp-radius-full);
118
- }
119
- .rp-checkbox-icon-enter-active[data-v-8af73824],
120
- .rp-checkbox-icon-leave-active[data-v-8af73824] {
121
- transition: opacity var(--rp-transition-base), transform var(--rp-transition-base);
122
- }
123
- .rp-checkbox-icon-enter-from[data-v-8af73824],
124
- .rp-checkbox-icon-leave-to[data-v-8af73824] {
125
- opacity: 0;
126
- transform: translateY(3px) scale(0.85);
127
- }
128
- .rp-checkbox-icon-enter-to[data-v-8af73824],
129
- .rp-checkbox-icon-leave-from[data-v-8af73824] {
130
- opacity: 1;
131
- transform: translateY(0) scale(1);
132
- }
133
- .rp-checkbox-icon-leave-to[data-v-8af73824] {
134
- transform: translateY(-3px) scale(0.85);
1
+ @layer ropav.components {
2
+ .rp-checkbox[data-v-bad0fe43] {
3
+ --_rp-checkbox-color: var(--rp-color-control-selected-bg);
4
+ --_rp-checkbox-on-color: var(--rp-color-control-selected-fg);
5
+ --_rp-checkbox-size: 24px;
6
+ --_rp-checkbox-font-size: var(--rp-font-size-md);
7
+ --_rp-checkbox-radius: 4px;
8
+ --_rp-checkbox-checked-bg: var(--_rp-checkbox-color);
9
+ --_rp-checkbox-checked-border: var(--_rp-checkbox-color);
10
+ --_rp-checkbox-checked-icon: var(--_rp-checkbox-on-color);
11
+ --_rp-checkbox-invalid-border: var(--rp-color-red-filled);
12
+ --_rp-checkbox-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
13
+ display: inline-flex;
14
+ align-items: center;
15
+ cursor: pointer;
16
+ font-family: var(--rp-font-family);
17
+ user-select: none;
18
+ vertical-align: top;
19
+ }
20
+ .rp-checkbox--disabled[data-v-bad0fe43] {
21
+ opacity: var(--rp-opacity-disabled);
22
+ cursor: not-allowed;
23
+ }
24
+ .rp-checkbox[data-v-bad0fe43] {
25
+ gap: var(--rp-spacing-2);
26
+ font-size: var(--_rp-checkbox-font-size);
27
+ }
28
+ .rp-checkbox__native[data-v-bad0fe43] {
29
+ position: absolute;
30
+ width: 1px;
31
+ height: 1px;
32
+ padding: 0;
33
+ margin: -1px;
34
+ overflow: hidden;
35
+ clip: rect(0, 0, 0, 0);
36
+ white-space: nowrap;
37
+ border-width: 0;
38
+ pointer-events: none;
39
+ }
40
+ .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-bad0fe43] {
41
+ border-color: var(--rp-color-control-border-focus);
42
+ box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
43
+ }
44
+ .rp-checkbox__box[data-v-bad0fe43] {
45
+ display: inline-flex;
46
+ align-items: center;
47
+ justify-content: center;
48
+ width: var(--_rp-checkbox-size);
49
+ height: var(--_rp-checkbox-size);
50
+ flex-shrink: 0;
51
+ border: var(--rp-border-width-medium) solid var(--rp-color-control-border);
52
+ border-radius: var(--_rp-checkbox-radius);
53
+ background-color: var(--rp-color-control-bg);
54
+ transition: background-color var(--rp-transition-fast), border-color var(--rp-transition-fast);
55
+ }
56
+ .rp-checkbox--checked .rp-checkbox__box[data-v-bad0fe43], .rp-checkbox--indeterminate .rp-checkbox__box[data-v-bad0fe43] {
57
+ background-color: var(--_rp-checkbox-checked-bg);
58
+ border-color: var(--_rp-checkbox-checked-border);
59
+ }
60
+ .rp-checkbox--invalid .rp-checkbox__box[data-v-bad0fe43] {
61
+ border-color: var(--_rp-checkbox-invalid-border);
62
+ }
63
+ .rp-checkbox--invalid .rp-checkbox__native:focus-visible + .rp-checkbox__box[data-v-bad0fe43] {
64
+ border-color: var(--_rp-checkbox-invalid-border);
65
+ box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-checkbox-invalid-ring);
66
+ }
67
+ .rp-checkbox__icon[data-v-bad0fe43] {
68
+ width: 60%;
69
+ height: 60%;
70
+ color: var(--_rp-checkbox-checked-icon);
71
+ transform-origin: center;
72
+ }
73
+ .rp-checkbox__icon[data-v-bad0fe43] [stroke-width] {
74
+ stroke-width: 3;
75
+ }
76
+ .rp-checkbox__label[data-v-bad0fe43] {
77
+ line-height: var(--rp-line-height-md);
78
+ color: var(--rp-color-text);
79
+ }
80
+ .rp-checkbox--outline[data-v-bad0fe43] {
81
+ --_rp-checkbox-checked-bg: var(--rp-color-control-bg);
82
+ --_rp-checkbox-checked-border: var(--_rp-checkbox-color);
83
+ --_rp-checkbox-checked-icon: var(--_rp-checkbox-color);
84
+ }
85
+ .rp-checkbox--size-xs[data-v-bad0fe43] {
86
+ --_rp-checkbox-size: 16px;
87
+ --_rp-checkbox-font-size: var(--rp-font-size-xs);
88
+ }
89
+ .rp-checkbox--size-sm[data-v-bad0fe43] {
90
+ --_rp-checkbox-size: 20px;
91
+ --_rp-checkbox-font-size: var(--rp-font-size-sm);
92
+ }
93
+ .rp-checkbox--size-md[data-v-bad0fe43] {
94
+ --_rp-checkbox-size: 24px;
95
+ --_rp-checkbox-font-size: var(--rp-font-size-md);
96
+ }
97
+ .rp-checkbox--size-lg[data-v-bad0fe43] {
98
+ --_rp-checkbox-size: 30px;
99
+ --_rp-checkbox-font-size: var(--rp-font-size-lg);
100
+ }
101
+ .rp-checkbox--size-xl[data-v-bad0fe43] {
102
+ --_rp-checkbox-size: 36px;
103
+ --_rp-checkbox-font-size: var(--rp-font-size-xl);
104
+ }
105
+ .rp-checkbox--radius-xs[data-v-bad0fe43] {
106
+ --_rp-checkbox-radius: 2px;
107
+ }
108
+ .rp-checkbox--radius-sm[data-v-bad0fe43] {
109
+ --_rp-checkbox-radius: 4px;
110
+ }
111
+ .rp-checkbox--radius-md[data-v-bad0fe43] {
112
+ --_rp-checkbox-radius: 6px;
113
+ }
114
+ .rp-checkbox--radius-lg[data-v-bad0fe43] {
115
+ --_rp-checkbox-radius: 8px;
116
+ }
117
+ .rp-checkbox--radius-xl[data-v-bad0fe43] {
118
+ --_rp-checkbox-radius: var(--rp-radius-full);
119
+ }
120
+ .rp-checkbox-icon-enter-active[data-v-bad0fe43],
121
+ .rp-checkbox-icon-leave-active[data-v-bad0fe43] {
122
+ transition: opacity var(--rp-transition-base), transform var(--rp-transition-base);
123
+ }
124
+ .rp-checkbox-icon-enter-from[data-v-bad0fe43],
125
+ .rp-checkbox-icon-leave-to[data-v-bad0fe43] {
126
+ opacity: 0;
127
+ transform: translateY(3px) scale(0.85);
128
+ }
129
+ .rp-checkbox-icon-enter-to[data-v-bad0fe43],
130
+ .rp-checkbox-icon-leave-from[data-v-bad0fe43] {
131
+ opacity: 1;
132
+ transform: translateY(0) scale(1);
133
+ }
134
+ .rp-checkbox-icon-leave-to[data-v-bad0fe43] {
135
+ transform: translateY(-3px) scale(0.85);
135
136
  }
136
137
  @media (prefers-reduced-motion: reduce) {
137
- .rp-checkbox-icon-enter-active[data-v-8af73824],
138
- .rp-checkbox-icon-leave-active[data-v-8af73824] {
139
- transition: none;
138
+ .rp-checkbox-icon-enter-active[data-v-bad0fe43],
139
+ .rp-checkbox-icon-leave-active[data-v-bad0fe43] {
140
+ transition: none;
141
+ }
140
142
  }
141
143
  }