@ropav/styles 0.5.0 → 0.7.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 (479) hide show
  1. package/README.md +111 -15
  2. package/dist/components/accordion/accordion.styles.d.ts +47 -50
  3. package/dist/components/accordion/accordion.styles.d.ts.map +1 -1
  4. package/dist/components/accordion/accordion.styles.js +10 -10
  5. package/dist/components/accordion.css +16 -24
  6. package/dist/components/alert/alert.styles.d.ts +32 -74
  7. package/dist/components/alert/alert.styles.d.ts.map +1 -1
  8. package/dist/components/alert/alert.styles.js +11 -11
  9. package/dist/components/alert-dialog/alert-dialog.styles.d.ts +79 -173
  10. package/dist/components/alert-dialog/alert-dialog.styles.d.ts.map +1 -1
  11. package/dist/components/alert-dialog/alert-dialog.styles.js +24 -24
  12. package/dist/components/alert-dialog.css +27 -39
  13. package/dist/components/alert.css +15 -15
  14. package/dist/components/autocomplete/autocomplete.styles.d.ts +58 -107
  15. package/dist/components/autocomplete/autocomplete.styles.d.ts.map +1 -1
  16. package/dist/components/autocomplete/autocomplete.styles.js +16 -16
  17. package/dist/components/autocomplete.css +43 -53
  18. package/dist/components/avatar/avatar.styles.d.ts +30 -119
  19. package/dist/components/avatar/avatar.styles.d.ts.map +1 -1
  20. package/dist/components/avatar/avatar.styles.js +13 -13
  21. package/dist/components/avatar.css +18 -18
  22. package/dist/components/badge/badge.styles.d.ts +34 -176
  23. package/dist/components/badge/badge.styles.d.ts.map +1 -1
  24. package/dist/components/badge/badge.styles.js +19 -19
  25. package/dist/components/badge.css +28 -28
  26. package/dist/components/breadcrumbs/breadcrumbs.styles.d.ts +17 -44
  27. package/dist/components/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
  28. package/dist/components/breadcrumbs/breadcrumbs.styles.js +5 -5
  29. package/dist/components/breadcrumbs.css +13 -6
  30. package/dist/components/button/button.styles.d.ts +9 -68
  31. package/dist/components/button/button.styles.d.ts.map +1 -1
  32. package/dist/components/button/button.styles.js +14 -14
  33. package/dist/components/button-group/button-group.styles.d.ts +20 -56
  34. package/dist/components/button-group/button-group.styles.d.ts.map +1 -1
  35. package/dist/components/button-group/button-group.styles.js +6 -6
  36. package/dist/components/button-group.css +24 -28
  37. package/dist/components/button.css +19 -23
  38. package/dist/components/calendar/calendar.styles.d.ts +41 -77
  39. package/dist/components/calendar/calendar.styles.d.ts.map +1 -1
  40. package/dist/components/calendar/calendar.styles.js +13 -13
  41. package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts +20 -50
  42. package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts.map +1 -1
  43. package/dist/components/calendar-year-picker/calendar-year-picker.styles.js +6 -6
  44. package/dist/components/calendar-year-picker.css +36 -23
  45. package/dist/components/calendar.css +68 -43
  46. package/dist/components/card/card.styles.d.ts +37 -68
  47. package/dist/components/card/card.styles.d.ts.map +1 -1
  48. package/dist/components/card/card.styles.js +11 -11
  49. package/dist/components/card.css +10 -10
  50. package/dist/components/checkbox/checkbox.styles.d.ts +27 -44
  51. package/dist/components/checkbox/checkbox.styles.d.ts.map +1 -1
  52. package/dist/components/checkbox/checkbox.styles.js +7 -7
  53. package/dist/components/checkbox-group/checkbox-group.styles.d.ts +6 -17
  54. package/dist/components/checkbox-group/checkbox-group.styles.d.ts.map +1 -1
  55. package/dist/components/checkbox-group/checkbox-group.styles.js +4 -4
  56. package/dist/components/checkbox-group.css +1 -1
  57. package/dist/components/checkbox.css +87 -88
  58. package/dist/components/chip/chip.styles.d.ts +23 -140
  59. package/dist/components/chip/chip.styles.d.ts.map +1 -1
  60. package/dist/components/chip/chip.styles.js +15 -15
  61. package/dist/components/chip.css +26 -24
  62. package/dist/components/close-button/close-button.styles.d.ts +6 -14
  63. package/dist/components/close-button/close-button.styles.d.ts.map +1 -1
  64. package/dist/components/close-button/close-button.styles.js +3 -3
  65. package/dist/components/close-button.css +9 -8
  66. package/dist/components/color-area/color-area.styles.d.ts +17 -32
  67. package/dist/components/color-area/color-area.styles.d.ts.map +1 -1
  68. package/dist/components/color-area/color-area.styles.js +4 -4
  69. package/dist/components/color-area.css +9 -9
  70. package/dist/components/color-field/color-field.styles.d.ts +6 -17
  71. package/dist/components/color-field/color-field.styles.d.ts.map +1 -1
  72. package/dist/components/color-field/color-field.styles.js +3 -3
  73. package/dist/components/color-field.css +2 -2
  74. package/dist/components/color-input-group/color-input-group.styles.d.ts +37 -89
  75. package/dist/components/color-input-group/color-input-group.styles.d.ts.map +1 -1
  76. package/dist/components/color-input-group/color-input-group.styles.js +10 -10
  77. package/dist/components/color-input-group.css +23 -40
  78. package/dist/components/color-picker/color-picker.styles.d.ts +14 -38
  79. package/dist/components/color-picker/color-picker.styles.d.ts.map +1 -1
  80. package/dist/components/color-picker/color-picker.styles.js +4 -4
  81. package/dist/components/color-picker.css +4 -8
  82. package/dist/components/color-slider/color-slider.styles.d.ts +17 -44
  83. package/dist/components/color-slider/color-slider.styles.d.ts.map +1 -1
  84. package/dist/components/color-slider/color-slider.styles.js +5 -5
  85. package/dist/components/color-slider.css +30 -28
  86. package/dist/components/color-swatch/color-swatch.styles.d.ts +7 -38
  87. package/dist/components/color-swatch/color-swatch.styles.d.ts.map +1 -1
  88. package/dist/components/color-swatch/color-swatch.styles.js +9 -9
  89. package/dist/components/color-swatch-picker/color-swatch-picker.styles.d.ts +37 -119
  90. package/dist/components/color-swatch-picker/color-swatch-picker.styles.d.ts.map +1 -1
  91. package/dist/components/color-swatch-picker/color-swatch-picker.styles.js +14 -14
  92. package/dist/components/color-swatch-picker.css +21 -104
  93. package/dist/components/color-swatch.css +13 -13
  94. package/dist/components/combo-box/combo-box.styles.d.ts +38 -71
  95. package/dist/components/combo-box/combo-box.styles.d.ts.map +1 -1
  96. package/dist/components/combo-box/combo-box.styles.js +10 -10
  97. package/dist/components/combo-box.css +23 -13
  98. package/dist/components/date-field/date-field.styles.d.ts +6 -17
  99. package/dist/components/date-field/date-field.styles.d.ts.map +1 -1
  100. package/dist/components/date-field/date-field.styles.js +3 -3
  101. package/dist/components/date-field.css +2 -2
  102. package/dist/components/date-input-group/date-input-group.styles.d.ts +51 -95
  103. package/dist/components/date-input-group/date-input-group.styles.d.ts.map +1 -1
  104. package/dist/components/date-input-group/date-input-group.styles.js +12 -12
  105. package/dist/components/date-input-group.css +50 -48
  106. package/dist/components/date-picker/date-picker.styles.d.ts +17 -44
  107. package/dist/components/date-picker/date-picker.styles.d.ts.map +1 -1
  108. package/dist/components/date-picker/date-picker.styles.js +5 -5
  109. package/dist/components/date-picker.css +9 -13
  110. package/dist/components/date-range-picker/date-range-picker.styles.d.ts +20 -50
  111. package/dist/components/date-range-picker/date-range-picker.styles.d.ts.map +1 -1
  112. package/dist/components/date-range-picker/date-range-picker.styles.js +6 -6
  113. package/dist/components/date-range-picker.css +10 -14
  114. package/dist/components/description/description.styles.d.ts +4 -2
  115. package/dist/components/description/description.styles.d.ts.map +1 -1
  116. package/dist/components/description/description.styles.js +2 -2
  117. package/dist/components/description.css +1 -1
  118. package/dist/components/disclosure/disclosure.styles.d.ts +26 -26
  119. package/dist/components/disclosure/disclosure.styles.d.ts.map +1 -1
  120. package/dist/components/disclosure/disclosure.styles.js +8 -8
  121. package/dist/components/disclosure-group/disclosure-group.styles.d.ts +8 -8
  122. package/dist/components/disclosure-group/disclosure-group.styles.d.ts.map +1 -1
  123. package/dist/components/disclosure-group/disclosure-group.styles.js +2 -2
  124. package/dist/components/disclosure-group.css +1 -1
  125. package/dist/components/disclosure.css +6 -10
  126. package/dist/components/drawer/drawer.styles.d.ts +68 -125
  127. package/dist/components/drawer/drawer.styles.d.ts.map +1 -1
  128. package/dist/components/drawer/drawer.styles.js +22 -22
  129. package/dist/components/drawer.css +41 -45
  130. package/dist/components/drop-zone/drop-zone.styles.d.ts +13 -0
  131. package/dist/components/drop-zone/drop-zone.styles.d.ts.map +1 -0
  132. package/dist/components/drop-zone/drop-zone.styles.js +8 -0
  133. package/dist/components/drop-zone/index.d.ts +2 -0
  134. package/dist/components/drop-zone/index.d.ts.map +1 -0
  135. package/dist/components/drop-zone/index.js +2 -0
  136. package/dist/components/drop-zone.css +78 -0
  137. package/dist/components/dropdown/dropdown.styles.d.ts +17 -44
  138. package/dist/components/dropdown/dropdown.styles.d.ts.map +1 -1
  139. package/dist/components/dropdown/dropdown.styles.js +5 -5
  140. package/dist/components/dropdown.css +13 -15
  141. package/dist/components/empty-state/empty-state.styles.d.ts +4 -2
  142. package/dist/components/empty-state/empty-state.styles.d.ts.map +1 -1
  143. package/dist/components/empty-state/empty-state.styles.js +2 -2
  144. package/dist/components/empty-state.css +1 -1
  145. package/dist/components/error-message/error-message.styles.d.ts +4 -2
  146. package/dist/components/error-message/error-message.styles.d.ts.map +1 -1
  147. package/dist/components/error-message/error-message.styles.js +2 -2
  148. package/dist/components/error-message.css +1 -5
  149. package/dist/components/field-error/field-error.styles.d.ts +4 -2
  150. package/dist/components/field-error/field-error.styles.d.ts.map +1 -1
  151. package/dist/components/field-error/field-error.styles.js +2 -2
  152. package/dist/components/field-error.css +7 -11
  153. package/dist/components/fieldset/fieldset.styles.d.ts +20 -50
  154. package/dist/components/fieldset/fieldset.styles.d.ts.map +1 -1
  155. package/dist/components/fieldset/fieldset.styles.js +6 -6
  156. package/dist/components/fieldset.css +4 -4
  157. package/dist/components/header/header.styles.d.ts +3 -1
  158. package/dist/components/header/header.styles.d.ts.map +1 -1
  159. package/dist/components/header/header.styles.js +2 -2
  160. package/dist/components/header.css +1 -1
  161. package/dist/components/index.css +1 -0
  162. package/dist/components/index.d.ts +1 -0
  163. package/dist/components/index.d.ts.map +1 -1
  164. package/dist/components/input/input.styles.d.ts +8 -44
  165. package/dist/components/input/input.styles.d.ts.map +1 -1
  166. package/dist/components/input/input.styles.js +7 -7
  167. package/dist/components/input-group/input-group.styles.d.ts +37 -89
  168. package/dist/components/input-group/input-group.styles.d.ts.map +1 -1
  169. package/dist/components/input-group/input-group.styles.js +10 -10
  170. package/dist/components/input-group.css +29 -54
  171. package/dist/components/input-otp/input-otp.styles.d.ts +42 -53
  172. package/dist/components/input-otp/input-otp.styles.d.ts.map +1 -1
  173. package/dist/components/input-otp/input-otp.styles.js +10 -10
  174. package/dist/components/input-otp.css +24 -36
  175. package/dist/components/input.css +17 -38
  176. package/dist/components/kbd/kbd.styles.d.ts +22 -29
  177. package/dist/components/kbd/kbd.styles.d.ts.map +1 -1
  178. package/dist/components/kbd/kbd.styles.js +6 -6
  179. package/dist/components/kbd.css +7 -5
  180. package/dist/components/label/label.styles.d.ts +8 -32
  181. package/dist/components/label/label.styles.d.ts.map +1 -1
  182. package/dist/components/label/label.styles.js +5 -5
  183. package/dist/components/label.css +16 -11
  184. package/dist/components/link/link.styles.d.ts +11 -32
  185. package/dist/components/link/link.styles.d.ts.map +1 -1
  186. package/dist/components/link/link.styles.js +3 -3
  187. package/dist/components/link.css +20 -18
  188. package/dist/components/list-box/list-box.styles.d.ts +7 -32
  189. package/dist/components/list-box/list-box.styles.d.ts.map +1 -1
  190. package/dist/components/list-box/list-box.styles.js +6 -6
  191. package/dist/components/list-box-item/list-box-item.styles.d.ts +17 -38
  192. package/dist/components/list-box-item/list-box-item.styles.d.ts.map +1 -1
  193. package/dist/components/list-box-item/list-box-item.styles.js +5 -5
  194. package/dist/components/list-box-item.css +13 -19
  195. package/dist/components/list-box-section/list-box-section.styles.d.ts +4 -2
  196. package/dist/components/list-box-section/list-box-section.styles.d.ts.map +1 -1
  197. package/dist/components/list-box-section/list-box-section.styles.js +2 -2
  198. package/dist/components/list-box-section.css +1 -1
  199. package/dist/components/list-box.css +53 -3
  200. package/dist/components/menu/menu.styles.d.ts +6 -20
  201. package/dist/components/menu/menu.styles.d.ts.map +1 -1
  202. package/dist/components/menu/menu.styles.js +4 -4
  203. package/dist/components/menu-item/menu-item.styles.d.ts +22 -41
  204. package/dist/components/menu-item/menu-item.styles.d.ts.map +1 -1
  205. package/dist/components/menu-item/menu-item.styles.js +6 -6
  206. package/dist/components/menu-item.css +15 -21
  207. package/dist/components/menu-section/menu-section.styles.d.ts +4 -2
  208. package/dist/components/menu-section/menu-section.styles.d.ts.map +1 -1
  209. package/dist/components/menu-section/menu-section.styles.js +2 -2
  210. package/dist/components/menu-section.css +1 -1
  211. package/dist/components/menu.css +4 -4
  212. package/dist/components/meter/meter.styles.d.ts +32 -104
  213. package/dist/components/meter/meter.styles.d.ts.map +1 -1
  214. package/dist/components/meter/meter.styles.js +13 -13
  215. package/dist/components/meter.css +22 -30
  216. package/dist/components/modal/modal.styles.d.ts +79 -167
  217. package/dist/components/modal/modal.styles.d.ts.map +1 -1
  218. package/dist/components/modal/modal.styles.js +26 -26
  219. package/dist/components/modal.css +30 -42
  220. package/dist/components/number-field/number-field.styles.d.ts +44 -95
  221. package/dist/components/number-field/number-field.styles.d.ts.map +1 -1
  222. package/dist/components/number-field/number-field.styles.js +12 -12
  223. package/dist/components/number-field.css +47 -59
  224. package/dist/components/pagination/pagination.styles.d.ts +44 -59
  225. package/dist/components/pagination/pagination.styles.d.ts.map +1 -1
  226. package/dist/components/pagination/pagination.styles.js +19 -12
  227. package/dist/components/pagination.css +18 -22
  228. package/dist/components/popover/popover.styles.d.ts +17 -44
  229. package/dist/components/popover/popover.styles.d.ts.map +1 -1
  230. package/dist/components/popover/popover.styles.js +5 -5
  231. package/dist/components/popover.css +4 -8
  232. package/dist/components/progress-bar/progress-bar.styles.d.ts +42 -104
  233. package/dist/components/progress-bar/progress-bar.styles.d.ts.map +1 -1
  234. package/dist/components/progress-bar/progress-bar.styles.js +23 -13
  235. package/dist/components/progress-bar.css +97 -31
  236. package/dist/components/progress-circle/progress-circle.styles.d.ts +32 -104
  237. package/dist/components/progress-circle/progress-circle.styles.d.ts.map +1 -1
  238. package/dist/components/progress-circle/progress-circle.styles.js +13 -13
  239. package/dist/components/progress-circle.css +17 -21
  240. package/dist/components/radio/radio.styles.d.ts +17 -44
  241. package/dist/components/radio/radio.styles.d.ts.map +1 -1
  242. package/dist/components/radio/radio.styles.js +5 -5
  243. package/dist/components/radio-group/radio-group.styles.d.ts +6 -17
  244. package/dist/components/radio-group/radio-group.styles.d.ts.map +1 -1
  245. package/dist/components/radio-group/radio-group.styles.js +4 -4
  246. package/dist/components/radio-group.css +8 -8
  247. package/dist/components/radio.css +46 -48
  248. package/dist/components/range-calendar/range-calendar.styles.d.ts +44 -77
  249. package/dist/components/range-calendar/range-calendar.styles.d.ts.map +1 -1
  250. package/dist/components/range-calendar/range-calendar.styles.js +15 -13
  251. package/dist/components/range-calendar.css +111 -69
  252. package/dist/components/scroll-shadow/scroll-shadow.styles.d.ts +16 -68
  253. package/dist/components/scroll-shadow/scroll-shadow.styles.d.ts.map +1 -1
  254. package/dist/components/scroll-shadow/scroll-shadow.styles.js +6 -6
  255. package/dist/components/scroll-shadow.css +6 -6
  256. package/dist/components/search-field/search-field.styles.d.ts +44 -95
  257. package/dist/components/search-field/search-field.styles.d.ts.map +1 -1
  258. package/dist/components/search-field/search-field.styles.js +12 -12
  259. package/dist/components/search-field.css +29 -46
  260. package/dist/components/segmented-control/segmented-control.styles.d.ts +32 -71
  261. package/dist/components/segmented-control/segmented-control.styles.d.ts.map +1 -1
  262. package/dist/components/segmented-control/segmented-control.styles.js +9 -9
  263. package/dist/components/segmented-control.css +26 -31
  264. package/dist/components/select/select.styles.d.ts +44 -101
  265. package/dist/components/select/select.styles.d.ts.map +1 -1
  266. package/dist/components/select/select.styles.js +14 -14
  267. package/dist/components/select.css +33 -47
  268. package/dist/components/separator/separator.styles.d.ts +7 -32
  269. package/dist/components/separator/separator.styles.d.ts.map +1 -1
  270. package/dist/components/separator/separator.styles.js +7 -7
  271. package/dist/components/separator.css +13 -13
  272. package/dist/components/sidebar/sidebar.styles.d.ts +222 -188
  273. package/dist/components/sidebar/sidebar.styles.d.ts.map +1 -1
  274. package/dist/components/sidebar/sidebar.styles.js +45 -32
  275. package/dist/components/sidebar.css +180 -80
  276. package/dist/components/skeleton/skeleton.styles.d.ts +12 -26
  277. package/dist/components/skeleton/skeleton.styles.d.ts.map +1 -1
  278. package/dist/components/skeleton/skeleton.styles.js +5 -5
  279. package/dist/components/skeleton.css +6 -6
  280. package/dist/components/slider/slider.styles.d.ts +23 -56
  281. package/dist/components/slider/slider.styles.d.ts.map +1 -1
  282. package/dist/components/slider/slider.styles.js +7 -7
  283. package/dist/components/slider.css +24 -25
  284. package/dist/components/spinner/spinner.styles.d.ts +7 -44
  285. package/dist/components/spinner/spinner.styles.d.ts.map +1 -1
  286. package/dist/components/spinner/spinner.styles.js +11 -11
  287. package/dist/components/spinner.css +10 -10
  288. package/dist/components/splitter/splitter.styles.d.ts +32 -59
  289. package/dist/components/splitter/splitter.styles.d.ts.map +1 -1
  290. package/dist/components/splitter/splitter.styles.js +12 -12
  291. package/dist/components/splitter.css +64 -56
  292. package/dist/components/surface/surface.styles.d.ts +6 -23
  293. package/dist/components/surface/surface.styles.d.ts.map +1 -1
  294. package/dist/components/surface/surface.styles.js +6 -6
  295. package/dist/components/surface.css +5 -5
  296. package/dist/components/switch/switch.styles.d.ts +32 -56
  297. package/dist/components/switch/switch.styles.d.ts.map +1 -1
  298. package/dist/components/switch/switch.styles.js +9 -9
  299. package/dist/components/switch-group/switch-group.styles.d.ts +17 -38
  300. package/dist/components/switch-group/switch-group.styles.d.ts.map +1 -1
  301. package/dist/components/switch-group/switch-group.styles.js +5 -5
  302. package/dist/components/switch-group.css +4 -4
  303. package/dist/components/switch.css +68 -67
  304. package/dist/components/table/table.styles.d.ts +87 -77
  305. package/dist/components/table/table.styles.d.ts.map +1 -1
  306. package/dist/components/table/table.styles.js +20 -18
  307. package/dist/components/table.css +177 -86
  308. package/dist/components/tabs/tabs.styles.d.ts +57 -56
  309. package/dist/components/tabs/tabs.styles.d.ts.map +1 -1
  310. package/dist/components/tabs/tabs.styles.js +12 -12
  311. package/dist/components/tabs.css +41 -52
  312. package/dist/components/tag/tag.styles.d.ts +20 -71
  313. package/dist/components/tag/tag.styles.d.ts.map +1 -1
  314. package/dist/components/tag/tag.styles.js +8 -8
  315. package/dist/components/tag-group/tag-group.styles.d.ts +11 -32
  316. package/dist/components/tag-group/tag-group.styles.d.ts.map +1 -1
  317. package/dist/components/tag-group/tag-group.styles.js +3 -3
  318. package/dist/components/tag-group.css +6 -6
  319. package/dist/components/tag.css +43 -35
  320. package/dist/components/textarea/textarea.styles.d.ts +8 -44
  321. package/dist/components/textarea/textarea.styles.d.ts.map +1 -1
  322. package/dist/components/textarea/textarea.styles.js +7 -7
  323. package/dist/components/textarea.css +17 -38
  324. package/dist/components/textfield/textfield.styles.d.ts +6 -17
  325. package/dist/components/textfield/textfield.styles.d.ts.map +1 -1
  326. package/dist/components/textfield/textfield.styles.js +3 -3
  327. package/dist/components/textfield.css +2 -2
  328. package/dist/components/time-field/time-field.styles.d.ts +6 -17
  329. package/dist/components/time-field/time-field.styles.d.ts.map +1 -1
  330. package/dist/components/time-field/time-field.styles.js +3 -3
  331. package/dist/components/time-field.css +2 -2
  332. package/dist/components/toast/toast.styles.d.ts +56 -161
  333. package/dist/components/toast/toast.styles.d.ts.map +1 -1
  334. package/dist/components/toast/toast.styles.js +26 -26
  335. package/dist/components/toast.css +58 -56
  336. package/dist/components/toggle-button/toggle-button.styles.d.ts +8 -41
  337. package/dist/components/toggle-button/toggle-button.styles.d.ts.map +1 -1
  338. package/dist/components/toggle-button/toggle-button.styles.js +8 -8
  339. package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts +23 -74
  340. package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts.map +1 -1
  341. package/dist/components/toggle-button-group/toggle-button-group.styles.js +7 -7
  342. package/dist/components/toggle-button-group.css +22 -26
  343. package/dist/components/toggle-button.css +11 -15
  344. package/dist/components/toolbar/toolbar.styles.d.ts +7 -26
  345. package/dist/components/toolbar/toolbar.styles.d.ts.map +1 -1
  346. package/dist/components/toolbar/toolbar.styles.js +5 -5
  347. package/dist/components/toolbar.css +7 -7
  348. package/dist/components/tooltip/tooltip.styles.d.ts +11 -32
  349. package/dist/components/tooltip/tooltip.styles.d.ts.map +1 -1
  350. package/dist/components/tooltip/tooltip.styles.js +3 -3
  351. package/dist/components/tooltip.css +2 -6
  352. package/dist/components/typography/typography.styles.d.ts +29 -107
  353. package/dist/components/typography/typography.styles.d.ts.map +1 -1
  354. package/dist/components/typography/typography.styles.js +24 -24
  355. package/dist/components/typography.css +53 -45
  356. package/dist/components/virtualizer/virtualizer.styles.d.ts +13 -37
  357. package/dist/components/virtualizer/virtualizer.styles.d.ts.map +1 -1
  358. package/dist/components/virtualizer/virtualizer.styles.js +4 -4
  359. package/dist/components/virtualizer.css +14 -6
  360. package/dist/core.css +26 -0
  361. package/dist/index.css +8 -24
  362. package/dist/index.d.ts +2 -1
  363. package/dist/index.d.ts.map +1 -1
  364. package/dist/index.js +3 -2
  365. package/dist/no-preflight.css +8 -0
  366. package/dist/ropav.min.css +1 -1
  367. package/dist/themes/airbnb.css +6 -4
  368. package/dist/themes/coinbase.css +6 -4
  369. package/dist/themes/default.css +24 -4
  370. package/dist/themes/discord.css +6 -4
  371. package/dist/themes/hero.css +24 -4
  372. package/dist/themes/lavender.css +6 -4
  373. package/dist/themes/mint.css +6 -4
  374. package/dist/themes/netflix.css +6 -4
  375. package/dist/themes/rabbit.css +6 -4
  376. package/dist/themes/shared/theme.css +1 -0
  377. package/dist/themes/sky.css +6 -4
  378. package/dist/themes/spotify.css +6 -4
  379. package/dist/themes/uber.css +6 -4
  380. package/dist/themes.d.ts +12 -0
  381. package/dist/themes.d.ts.map +1 -0
  382. package/dist/themes.js +39 -0
  383. package/dist/tv.d.ts +34 -0
  384. package/dist/tv.d.ts.map +1 -0
  385. package/dist/tv.js +21 -0
  386. package/package.json +5 -3
  387. package/src/components/accordion/accordion.styles.ts +11 -11
  388. package/src/components/alert/alert.styles.ts +12 -12
  389. package/src/components/alert-dialog/alert-dialog.styles.ts +25 -25
  390. package/src/components/autocomplete/autocomplete.styles.ts +17 -17
  391. package/src/components/avatar/avatar.styles.ts +14 -14
  392. package/src/components/badge/badge.styles.ts +20 -20
  393. package/src/components/breadcrumbs/breadcrumbs.styles.ts +6 -6
  394. package/src/components/button/button.styles.ts +15 -15
  395. package/src/components/button-group/button-group.styles.ts +7 -7
  396. package/src/components/calendar/calendar.styles.ts +14 -14
  397. package/src/components/calendar-year-picker/calendar-year-picker.styles.ts +7 -7
  398. package/src/components/card/card.styles.ts +12 -12
  399. package/src/components/checkbox/checkbox.styles.ts +8 -8
  400. package/src/components/checkbox-group/checkbox-group.styles.ts +5 -5
  401. package/src/components/chip/chip.styles.ts +16 -16
  402. package/src/components/close-button/close-button.styles.ts +4 -4
  403. package/src/components/color-area/color-area.styles.ts +5 -5
  404. package/src/components/color-field/color-field.styles.ts +4 -4
  405. package/src/components/color-input-group/color-input-group.styles.ts +11 -11
  406. package/src/components/color-picker/color-picker.styles.ts +5 -5
  407. package/src/components/color-slider/color-slider.styles.ts +6 -6
  408. package/src/components/color-swatch/color-swatch.styles.ts +10 -10
  409. package/src/components/color-swatch-picker/color-swatch-picker.styles.ts +15 -15
  410. package/src/components/combo-box/combo-box.styles.ts +11 -11
  411. package/src/components/date-field/date-field.styles.ts +4 -4
  412. package/src/components/date-input-group/date-input-group.styles.ts +13 -13
  413. package/src/components/date-picker/date-picker.styles.ts +6 -6
  414. package/src/components/date-range-picker/date-range-picker.styles.ts +7 -7
  415. package/src/components/description/description.styles.ts +3 -3
  416. package/src/components/disclosure/disclosure.styles.ts +9 -9
  417. package/src/components/disclosure-group/disclosure-group.styles.ts +3 -3
  418. package/src/components/drawer/drawer.styles.ts +23 -23
  419. package/src/components/drop-zone/drop-zone.styles.ts +12 -0
  420. package/src/components/drop-zone/index.ts +1 -0
  421. package/src/components/dropdown/dropdown.styles.ts +6 -6
  422. package/src/components/empty-state/empty-state.styles.ts +3 -3
  423. package/src/components/error-message/error-message.styles.ts +3 -3
  424. package/src/components/field-error/field-error.styles.ts +3 -3
  425. package/src/components/fieldset/fieldset.styles.ts +7 -7
  426. package/src/components/header/header.styles.ts +2 -2
  427. package/src/components/index.ts +1 -0
  428. package/src/components/input/input.styles.ts +8 -8
  429. package/src/components/input-group/input-group.styles.ts +11 -11
  430. package/src/components/input-otp/input-otp.styles.ts +11 -11
  431. package/src/components/kbd/kbd.styles.ts +7 -7
  432. package/src/components/label/label.styles.ts +6 -6
  433. package/src/components/link/link.styles.ts +4 -4
  434. package/src/components/list-box/list-box.styles.ts +7 -7
  435. package/src/components/list-box-item/list-box-item.styles.ts +6 -6
  436. package/src/components/list-box-section/list-box-section.styles.ts +3 -3
  437. package/src/components/menu/menu.styles.ts +5 -5
  438. package/src/components/menu-item/menu-item.styles.ts +7 -7
  439. package/src/components/menu-section/menu-section.styles.ts +3 -3
  440. package/src/components/meter/meter.styles.ts +14 -14
  441. package/src/components/modal/modal.styles.ts +27 -27
  442. package/src/components/number-field/number-field.styles.ts +13 -13
  443. package/src/components/pagination/pagination.styles.ts +18 -11
  444. package/src/components/popover/popover.styles.ts +6 -6
  445. package/src/components/progress-bar/progress-bar.styles.ts +28 -14
  446. package/src/components/progress-circle/progress-circle.styles.ts +14 -14
  447. package/src/components/radio/radio.styles.ts +6 -6
  448. package/src/components/radio-group/radio-group.styles.ts +5 -5
  449. package/src/components/range-calendar/range-calendar.styles.ts +16 -14
  450. package/src/components/scroll-shadow/scroll-shadow.styles.ts +7 -7
  451. package/src/components/search-field/search-field.styles.ts +13 -13
  452. package/src/components/segmented-control/segmented-control.styles.ts +10 -10
  453. package/src/components/select/select.styles.ts +15 -15
  454. package/src/components/separator/separator.styles.ts +8 -8
  455. package/src/components/sidebar/sidebar.styles.ts +55 -32
  456. package/src/components/skeleton/skeleton.styles.ts +6 -6
  457. package/src/components/slider/slider.styles.ts +8 -8
  458. package/src/components/spinner/spinner.styles.ts +12 -12
  459. package/src/components/splitter/splitter.styles.ts +13 -13
  460. package/src/components/surface/surface.styles.ts +7 -7
  461. package/src/components/switch/switch.styles.ts +10 -10
  462. package/src/components/switch-group/switch-group.styles.ts +6 -6
  463. package/src/components/table/table.styles.ts +21 -19
  464. package/src/components/tabs/tabs.styles.ts +13 -13
  465. package/src/components/tag/tag.styles.ts +9 -9
  466. package/src/components/tag-group/tag-group.styles.ts +4 -4
  467. package/src/components/textarea/textarea.styles.ts +8 -8
  468. package/src/components/textfield/textfield.styles.ts +4 -4
  469. package/src/components/time-field/time-field.styles.ts +4 -4
  470. package/src/components/toast/toast.styles.ts +27 -27
  471. package/src/components/toggle-button/toggle-button.styles.ts +9 -9
  472. package/src/components/toggle-button-group/toggle-button-group.styles.ts +8 -8
  473. package/src/components/toolbar/toolbar.styles.ts +6 -6
  474. package/src/components/tooltip/tooltip.styles.ts +4 -4
  475. package/src/components/typography/typography.styles.ts +25 -25
  476. package/src/components/virtualizer/virtualizer.styles.ts +4 -4
  477. package/src/index.ts +5 -2
  478. package/src/themes.ts +40 -0
  479. package/src/tv.ts +82 -0
@@ -3,19 +3,19 @@
3
3
  ========================================================================== */
4
4
 
5
5
  /* Base styles */
6
- .progress-circle {
6
+ .rp-progress-circle {
7
7
  @apply inline-flex items-center justify-center;
8
8
 
9
9
  /* Default color token (accent) */
10
10
  --progress-circle-stroke: var(--accent);
11
11
  --progress-circle-track-stroke: var(--default);
12
12
 
13
- .progress-circle__track {
13
+ .rp-progress-circle__track {
14
14
  /* Default size (matches --md) */
15
15
  @apply size-7;
16
16
  }
17
17
 
18
- .progress-circle__track-circle {
18
+ .rp-progress-circle__track-circle {
19
19
  stroke: var(--progress-circle-track-stroke);
20
20
 
21
21
  /* Forced colors leaves SVG strokes alone, so the ring renders but in the library's own
@@ -27,25 +27,21 @@
27
27
  }
28
28
  }
29
29
 
30
- .progress-circle__fill-circle {
30
+ .rp-progress-circle__fill-circle {
31
31
  stroke: var(--progress-circle-stroke);
32
32
 
33
33
  @media (forced-colors: active) {
34
34
  stroke: Highlight;
35
35
  }
36
36
 
37
- /**
38
- * Transitions
39
- * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
40
- */
41
37
  transition: stroke-dashoffset 300ms var(--ease-out);
42
38
  @apply motion-reduce:transition-none;
43
39
  }
44
40
 
45
41
  /* Indeterminate state - when no aria-valuenow is set */
46
42
  &:not([aria-valuenow]) {
47
- .progress-circle__track {
48
- animation: progress-circle-spin 1s linear infinite;
43
+ .rp-progress-circle__track {
44
+ animation: rp-progress-circle-spin 1s linear infinite;
49
45
 
50
46
  @apply motion-reduce:animate-none;
51
47
  }
@@ -63,7 +59,7 @@
63
59
  Indeterminate animation
64
60
  ========================================================================== */
65
61
 
66
- @keyframes progress-circle-spin {
62
+ @keyframes rp-progress-circle-spin {
67
63
  from {
68
64
  transform: rotate(0deg);
69
65
  }
@@ -76,18 +72,18 @@
76
72
  Size variants
77
73
  ========================================================================== */
78
74
 
79
- .progress-circle--sm {
80
- .progress-circle__track {
75
+ .rp-progress-circle--sm {
76
+ .rp-progress-circle__track {
81
77
  @apply size-5;
82
78
  }
83
79
  }
84
80
 
85
- .progress-circle--md {
81
+ .rp-progress-circle--md {
86
82
  /* No styles as this is the default size */
87
83
  }
88
84
 
89
- .progress-circle--lg {
90
- .progress-circle__track {
85
+ .rp-progress-circle--lg {
86
+ .rp-progress-circle__track {
91
87
  @apply size-9;
92
88
  }
93
89
  }
@@ -96,22 +92,22 @@
96
92
  Color variants
97
93
  ========================================================================== */
98
94
 
99
- .progress-circle--default {
95
+ .rp-progress-circle--default {
100
96
  --progress-circle-stroke: var(--default-foreground);
101
97
  }
102
98
 
103
- .progress-circle--accent {
99
+ .rp-progress-circle--accent {
104
100
  --progress-circle-stroke: var(--accent);
105
101
  }
106
102
 
107
- .progress-circle--success {
103
+ .rp-progress-circle--success {
108
104
  --progress-circle-stroke: var(--success);
109
105
  }
110
106
 
111
- .progress-circle--warning {
107
+ .rp-progress-circle--warning {
112
108
  --progress-circle-stroke: var(--warning);
113
109
  }
114
110
 
115
- .progress-circle--danger {
111
+ .rp-progress-circle--danger {
116
112
  --progress-circle-stroke: var(--danger);
117
113
  }
@@ -1,46 +1,19 @@
1
- import type { VariantProps } from "tailwind-variants";
2
- export declare const radioVariants: import("tailwind-variants").TVReturnType<{
3
- [key: string]: {
4
- [key: string]: {
5
- base?: import("tailwind-variants").ClassValue;
6
- content?: import("tailwind-variants").ClassValue;
7
- control?: import("tailwind-variants").ClassValue;
8
- indicator?: import("tailwind-variants").ClassValue;
9
- } | import("tailwind-variants").ClassValue;
10
- };
11
- } | {
12
- [x: string]: {
13
- [x: string]: {
14
- base?: import("tailwind-variants").ClassValue;
15
- content?: import("tailwind-variants").ClassValue;
16
- control?: import("tailwind-variants").ClassValue;
17
- indicator?: import("tailwind-variants").ClassValue;
18
- } | import("tailwind-variants").ClassValue;
19
- };
20
- } | {}, {
21
- base: string;
22
- content: string;
23
- control: string;
24
- indicator: string;
25
- }, undefined, {
26
- [key: string]: {
27
- [key: string]: {
28
- base?: import("tailwind-variants").ClassValue;
29
- content?: import("tailwind-variants").ClassValue;
30
- control?: import("tailwind-variants").ClassValue;
31
- indicator?: import("tailwind-variants").ClassValue;
32
- } | import("tailwind-variants").ClassValue;
33
- };
34
- } | {}, {
35
- base: string;
36
- content: string;
37
- control: string;
38
- indicator: string;
39
- }, import("tailwind-variants").TVReturnTypeLike<unknown, {
40
- base: string;
41
- content: string;
42
- control: string;
43
- indicator: string;
44
- }>>;
1
+ import type { VariantProps } from "../../tv";
2
+ export declare const radioVariants: (props?: ({
3
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
4
+ } & object) | undefined) => {
5
+ base: (props?: ({
6
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
7
+ } & object) | undefined) => string;
8
+ content: (props?: ({
9
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
10
+ } & object) | undefined) => string;
11
+ control: (props?: ({
12
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
13
+ } & object) | undefined) => string;
14
+ indicator: (props?: ({
15
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
16
+ } & object) | undefined) => string;
17
+ };
45
18
  export type RadioVariants = VariantProps<typeof radioVariants>;
46
19
  //# sourceMappingURL=radio.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAOxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
1
+ {"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAOxB,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
@@ -1,10 +1,10 @@
1
- import { tv } from "tailwind-variants";
1
+ import { tv } from "../../tv.js";
2
2
  //#region src/components/radio/radio.styles.ts
3
3
  const radioVariants = tv({ slots: {
4
- base: "radio",
5
- content: "radio__content",
6
- control: "radio__control",
7
- indicator: "radio__indicator"
4
+ base: "rp-radio",
5
+ content: "rp-radio__content",
6
+ control: "rp-radio__control",
7
+ indicator: "rp-radio__indicator"
8
8
  } });
9
9
  //#endregion
10
10
  export { radioVariants };
@@ -1,19 +1,8 @@
1
- import type { VariantProps } from "tailwind-variants";
2
- export declare const radioGroupVariants: import("tailwind-variants").TVReturnType<{
3
- variant: {
4
- primary: "radio-group--primary";
5
- secondary: "radio-group--secondary";
6
- };
7
- }, undefined, "radio-group", {
8
- variant: {
9
- primary: "radio-group--primary";
10
- secondary: "radio-group--secondary";
11
- };
12
- }, undefined, import("tailwind-variants").TVReturnTypeLike<{
13
- variant: {
14
- primary: "radio-group--primary";
15
- secondary: "radio-group--secondary";
16
- };
17
- }, undefined>>;
1
+ import type { VariantProps } from "../../tv";
2
+ export declare const radioGroupVariants: (props?: ({
3
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
4
+ } & {
5
+ variant?: "primary" | "secondary" | undefined;
6
+ }) | undefined) => string;
18
7
  export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;
19
8
  //# sourceMappingURL=radio-group.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"radio-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;cAW7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
1
+ {"version":3,"file":"radio-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,kBAAkB;;;;yBAW7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
@@ -1,11 +1,11 @@
1
- import { tv } from "tailwind-variants";
1
+ import { tv } from "../../tv.js";
2
2
  //#region src/components/radio-group/radio-group.styles.ts
3
3
  const radioGroupVariants = tv({
4
- base: "radio-group",
4
+ base: "rp-radio-group",
5
5
  defaultVariants: { variant: "primary" },
6
6
  variants: { variant: {
7
- primary: "radio-group--primary",
8
- secondary: "radio-group--secondary"
7
+ primary: "rp-radio-group--primary",
8
+ secondary: "rp-radio-group--secondary"
9
9
  } }
10
10
  });
11
11
  //#endregion
@@ -1,5 +1,5 @@
1
1
  /* Radio Group base styles */
2
- .radio-group {
2
+ .rp-radio-group {
3
3
  @apply flex flex-col;
4
4
 
5
5
  /* Default orientation */
@@ -15,11 +15,11 @@
15
15
  }
16
16
 
17
17
  /* Variant property definitions */
18
- .radio-group--primary {
18
+ .rp-radio-group--primary {
19
19
  /* Default styles */
20
20
  }
21
21
 
22
- .radio-group--secondary .radio__control {
22
+ .rp-radio-group--secondary .rp-radio__control {
23
23
  @apply shadow-none;
24
24
  background-color: var(--radio-control-bg);
25
25
 
@@ -27,22 +27,22 @@
27
27
  --radio-control-bg-hover: var(--default-hover);
28
28
 
29
29
  /* Hover state */
30
- .radio:has([data-slot="radio-content"][data-hovered="true"]) &,
31
- .radio [data-slot="radio-content"][data-hovered="true"] & {
30
+ .rp-radio:has([data-slot="radio-content"][data-hovered="true"]) &,
31
+ .rp-radio [data-slot="radio-content"][data-hovered="true"] & {
32
32
  @apply border-field-border-hover;
33
33
  }
34
34
 
35
35
  /* Default indicator color (unselected) */
36
- .radio:not([data-selected]):not(:has(input:checked)) & .radio__indicator:empty::before {
36
+ .rp-radio:not([data-selected]):not(:has(input:checked)) & .rp-radio__indicator:empty::before {
37
37
  background-color: var(--radio-control-bg);
38
38
  }
39
39
 
40
40
  /* Hover indicator color (unselected) */
41
- .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
41
+ .rp-radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
42
42
  :has(input:checked)
43
43
  )
44
44
  & {
45
- .radio__indicator:empty::before {
45
+ .rp-radio__indicator:empty::before {
46
46
  background-color: var(--radio-control-bg-hover);
47
47
  }
48
48
  }
@@ -2,15 +2,15 @@
2
2
  Base radio styles
3
3
 
4
4
  Structure (explicit composition):
5
- .radio → RadioField wrapper (column)
6
- .radio__content → RadioButton: the clickable row (control + label)
7
- .radio__control
5
+ .rp-radio → RadioField wrapper (column)
6
+ .rp-radio__content → RadioButton: the clickable row (control + label)
7
+ .rp-radio__control
8
8
  [data-slot="label"]
9
9
  [data-slot="description"] → field-level sibling, below the row
10
10
  [data-slot="field-error"]
11
11
  ========================================================================== */
12
12
 
13
- .radio {
13
+ .rp-radio {
14
14
  @apply flex flex-col items-start gap-1 outline-none no-highlight;
15
15
 
16
16
  cursor: var(--cursor-interactive);
@@ -19,7 +19,7 @@
19
19
  @apply select-none;
20
20
  }
21
21
 
22
- .radio__content [data-slot="label"] {
22
+ .rp-radio__content [data-slot="label"] {
23
23
  cursor: var(--cursor-interactive);
24
24
  }
25
25
 
@@ -43,7 +43,7 @@
43
43
  }
44
44
 
45
45
  /* Radio content — the clickable label (control + label text) */
46
- .radio__content {
46
+ .rp-radio__content {
47
47
  @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
48
48
  }
49
49
 
@@ -51,13 +51,9 @@
51
51
  Radio control (the circular button)
52
52
  ========================================================================== */
53
53
 
54
- .radio__control {
54
+ .rp-radio__control {
55
55
  @apply relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight;
56
56
 
57
- /**
58
- * Transitions
59
- * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
60
- */
61
57
  transition:
62
58
  background-color 200ms var(--ease-out),
63
59
  border-color 200ms var(--ease-out),
@@ -68,60 +64,60 @@
68
64
 
69
65
  /* Interactive states */
70
66
  /* Focus */
71
- .radio:has([data-slot="radio-content"][data-focus-visible="true"]) &,
72
- .radio [data-slot="radio-content"][data-focus-visible="true"] & {
67
+ .rp-radio:has([data-slot="radio-content"][data-focus-visible="true"]) &,
68
+ .rp-radio [data-slot="radio-content"][data-focus-visible="true"] & {
73
69
  @apply status-focused;
74
70
  }
75
71
 
76
72
  /* Hover */
77
- .radio:has([data-slot="radio-content"][data-hovered="true"]) &,
78
- .radio [data-slot="radio-content"][data-hovered="true"] & {
73
+ .rp-radio:has([data-slot="radio-content"][data-hovered="true"]) &,
74
+ .rp-radio [data-slot="radio-content"][data-hovered="true"] & {
79
75
  @apply border-field-border-hover;
80
76
  }
81
77
 
82
78
  /* Hover - only when not selected */
83
- .radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
79
+ .rp-radio:has([data-slot="radio-content"][data-hovered="true"]):not([data-selected]):not(
84
80
  :has(input:checked)
85
81
  )
86
82
  & {
87
- .radio__indicator:empty::before {
83
+ .rp-radio__indicator:empty::before {
88
84
  @apply bg-field-hover;
89
85
  }
90
86
  }
91
87
 
92
88
  /* Pressed */
93
- .radio:has([data-slot="radio-content"][data-pressed="true"]) &,
94
- .radio [data-slot="radio-content"][data-pressed="true"] & {
89
+ .rp-radio:has([data-slot="radio-content"][data-pressed="true"]) &,
90
+ .rp-radio [data-slot="radio-content"][data-pressed="true"] & {
95
91
  @apply scale-95;
96
92
  }
97
93
 
98
94
  /* Selection states */
99
95
  /* Selected */
100
- .radio[data-selected] &,
101
- .radio:has([data-slot="radio-content"][aria-checked="true"]) &,
102
- .radio:has(input:checked) & {
96
+ .rp-radio[data-selected] &,
97
+ .rp-radio:has([data-slot="radio-content"][aria-checked="true"]) &,
98
+ .rp-radio:has(input:checked) & {
103
99
  @apply border-transparent bg-accent;
104
100
  }
105
101
 
106
102
  /* Selected + Pressed */
107
- .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) &,
108
- .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) &,
109
- .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) & {
103
+ .rp-radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"]) &,
104
+ .rp-radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"]) &,
105
+ .rp-radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"]) & {
110
106
  @apply bg-accent-hover;
111
107
  }
112
108
 
113
109
  /* Validation states */
114
110
  /* Invalid */
115
- .radio[data-invalid="true"] &,
116
- .radio[aria-invalid="true"] & {
111
+ .rp-radio[data-invalid="true"] &,
112
+ .rp-radio[aria-invalid="true"] & {
117
113
  @apply status-invalid-field;
118
114
  }
119
115
 
120
116
  /* Invalid + Selected */
121
- .radio[data-invalid="true"][data-selected] &,
122
- .radio[aria-invalid="true"][data-selected] &,
123
- .radio[data-invalid="true"]:has(input:checked) &,
124
- .radio[aria-invalid="true"]:has(input:checked) & {
117
+ .rp-radio[data-invalid="true"][data-selected] &,
118
+ .rp-radio[aria-invalid="true"][data-selected] &,
119
+ .rp-radio[data-invalid="true"]:has(input:checked) &,
120
+ .rp-radio[aria-invalid="true"]:has(input:checked) & {
125
121
  @apply status-invalid-field;
126
122
  }
127
123
  }
@@ -130,15 +126,22 @@
130
126
  Radio indicator (the inner dot)
131
127
  ========================================================================== */
132
128
 
133
- .radio__indicator {
129
+ .rp-radio__indicator {
134
130
  @apply absolute inset-0 flex items-center justify-center;
135
131
 
136
132
  pointer-events: none;
133
+
134
+ /* On the indicator, not in `:empty::before` where the transition lives: the variant reaches a
135
+ * pseudo-element from its originating element, and appending its condition after `::before`
136
+ * matches nothing. `:empty` because without it this ties with that rule and loses on order. */
137
+ &:empty {
138
+ @apply motion-reduce:transition-none;
139
+ }
137
140
  }
138
141
 
139
142
  /* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
140
143
  (e.g., custom icon). When custom content is present, these default dot styles are not applied. */
141
- .radio__indicator:empty::before {
144
+ .rp-radio__indicator:empty::before {
142
145
  content: "";
143
146
  @apply rounded-lg bg-field;
144
147
 
@@ -146,20 +149,15 @@
146
149
  height: 100%;
147
150
  scale: 1;
148
151
 
149
- /**
150
- * Transitions
151
- * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
152
- */
153
152
  transition:
154
153
  scale 200ms var(--ease-out),
155
154
  background-color 200ms var(--ease-out);
156
- @apply motion-reduce:transition-none;
157
155
  }
158
156
 
159
157
  /* Selected state */
160
- .radio[data-selected] .radio__indicator:empty::before,
161
- .radio:has([data-slot="radio-content"][aria-checked="true"]) .radio__indicator:empty::before,
162
- .radio:has(input:checked) .radio__indicator:empty::before {
158
+ .rp-radio[data-selected] .rp-radio__indicator:empty::before,
159
+ .rp-radio:has([data-slot="radio-content"][aria-checked="true"]) .rp-radio__indicator:empty::before,
160
+ .rp-radio:has(input:checked) .rp-radio__indicator:empty::before {
163
161
  @apply bg-accent-foreground;
164
162
  scale: 0.4286; /* 6px */
165
163
 
@@ -172,12 +170,12 @@
172
170
  }
173
171
 
174
172
  /* Selected + Pressed state */
175
- .radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"])
176
- .radio__indicator:empty::before,
177
- .radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"])
178
- .radio__indicator:empty::before,
179
- .radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"])
180
- .radio__indicator:empty::before {
173
+ .rp-radio[data-selected]:has([data-slot="radio-content"][data-pressed="true"])
174
+ .rp-radio__indicator:empty::before,
175
+ .rp-radio:has([data-slot="radio-content"][data-pressed="true"][aria-checked="true"])
176
+ .rp-radio__indicator:empty::before,
177
+ .rp-radio:has(input:checked):has([data-slot="radio-content"][data-pressed="true"])
178
+ .rp-radio__indicator:empty::before {
181
179
  scale: 0.5714; /* 8px */
182
180
  }
183
181
 
@@ -185,6 +183,6 @@
185
183
  Disabled modifier
186
184
  ========================================================================== */
187
185
 
188
- .radio--disabled {
186
+ .rp-radio--disabled {
189
187
  @apply status-disabled;
190
188
  }
@@ -1,79 +1,46 @@
1
- import type { VariantProps } from "tailwind-variants";
2
- export declare const rangeCalendarVariants: import("tailwind-variants").TVReturnType<{}, {
3
- /** Root range calendar container */
4
- base: string;
5
- /** Calendar cell (td) */
6
- cell: string;
7
- /** Cell indicator (small dot at bottom of cell) */
8
- cellIndicator: string;
9
- /** Calendar grid (table) */
10
- grid: string;
11
- /** Grid body (tbody) */
12
- gridBody: string;
13
- /** Grid header (thead) */
14
- gridHeader: string;
15
- /** Grid row (tr) */
16
- gridRow: string;
17
- /** Calendar header containing heading and navigation */
18
- header: string;
19
- /** Header cell (th - day names) */
20
- headerCell: string;
21
- /** Month/year heading text */
22
- heading: string;
23
- /** Previous/Next navigation button */
24
- navButton: string;
25
- /** Navigation button icon */
26
- navButtonIcon: string;
27
- }, undefined, {}, {
28
- /** Root range calendar container */
29
- base: string;
30
- /** Calendar cell (td) */
31
- cell: string;
32
- /** Cell indicator (small dot at bottom of cell) */
33
- cellIndicator: string;
34
- /** Calendar grid (table) */
35
- grid: string;
36
- /** Grid body (tbody) */
37
- gridBody: string;
38
- /** Grid header (thead) */
39
- gridHeader: string;
40
- /** Grid row (tr) */
41
- gridRow: string;
42
- /** Calendar header containing heading and navigation */
43
- header: string;
44
- /** Header cell (th - day names) */
45
- headerCell: string;
46
- /** Month/year heading text */
47
- heading: string;
48
- /** Previous/Next navigation button */
49
- navButton: string;
50
- /** Navigation button icon */
51
- navButtonIcon: string;
52
- }, import("tailwind-variants").TVReturnTypeLike<{}, {
53
- /** Root range calendar container */
54
- base: string;
55
- /** Calendar cell (td) */
56
- cell: string;
57
- /** Cell indicator (small dot at bottom of cell) */
58
- cellIndicator: string;
59
- /** Calendar grid (table) */
60
- grid: string;
61
- /** Grid body (tbody) */
62
- gridBody: string;
63
- /** Grid header (thead) */
64
- gridHeader: string;
65
- /** Grid row (tr) */
66
- gridRow: string;
67
- /** Calendar header containing heading and navigation */
68
- header: string;
69
- /** Header cell (th - day names) */
70
- headerCell: string;
71
- /** Month/year heading text */
72
- heading: string;
73
- /** Previous/Next navigation button */
74
- navButton: string;
75
- /** Navigation button icon */
76
- navButtonIcon: string;
77
- }>>;
1
+ import type { VariantProps } from "../../tv";
2
+ export declare const rangeCalendarVariants: (props?: ({
3
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
4
+ } & {}) | undefined) => {
5
+ base: (props?: ({
6
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
7
+ } & {}) | undefined) => string;
8
+ cell: (props?: ({
9
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
10
+ } & {}) | undefined) => string;
11
+ cellButton: (props?: ({
12
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
13
+ } & {}) | undefined) => string;
14
+ cellIndicator: (props?: ({
15
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
16
+ } & {}) | undefined) => string;
17
+ grid: (props?: ({
18
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
19
+ } & {}) | undefined) => string;
20
+ gridBody: (props?: ({
21
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
22
+ } & {}) | undefined) => string;
23
+ gridHeader: (props?: ({
24
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
25
+ } & {}) | undefined) => string;
26
+ gridRow: (props?: ({
27
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
28
+ } & {}) | undefined) => string;
29
+ header: (props?: ({
30
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
31
+ } & {}) | undefined) => string;
32
+ headerCell: (props?: ({
33
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
34
+ } & {}) | undefined) => string;
35
+ heading: (props?: ({
36
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
37
+ } & {}) | undefined) => string;
38
+ navButton: (props?: ({
39
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
40
+ } & {}) | undefined) => string;
41
+ navButtonIcon: (props?: ({
42
+ class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
43
+ } & {}) | undefined) => string;
44
+ };
78
45
  export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;
79
46
  //# sourceMappingURL=range-calendar.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"range-calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/range-calendar/range-calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,qBAAqB;IAG9B,oCAAoC;;IAEpC,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;;IAtB7B,oCAAoC;;IAEpC,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;;IAtB7B,oCAAoC;;IAEpC,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;GAI/B,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
1
+ {"version":3,"file":"range-calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/range-calendar/range-calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BhC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}