@rojaostudio/ds 1.0.1 → 2.0.0-next.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 (403) hide show
  1. package/README.md +75 -13
  2. package/dist/compat/generate.d.ts +0 -1
  3. package/dist/components/accordion.d.ts +30 -20
  4. package/dist/components/accordion.js +31 -87
  5. package/dist/components/action-bar.d.ts +24 -0
  6. package/dist/components/action-bar.js +55 -0
  7. package/dist/components/alert-dialog.d.ts +31 -0
  8. package/dist/components/alert-dialog.js +43 -0
  9. package/dist/components/alert.d.ts +31 -19
  10. package/dist/components/alert.js +74 -65
  11. package/dist/components/attachment.d.ts +37 -0
  12. package/dist/components/attachment.js +76 -0
  13. package/dist/components/avatar.d.ts +43 -36
  14. package/dist/components/avatar.js +59 -83
  15. package/dist/components/badge.d.ts +30 -41
  16. package/dist/components/badge.js +16 -106
  17. package/dist/components/banner.d.ts +27 -0
  18. package/dist/components/banner.js +66 -0
  19. package/dist/components/benefits.d.ts +30 -0
  20. package/dist/components/benefits.js +32 -0
  21. package/dist/components/breadcrumb.d.ts +25 -18
  22. package/dist/components/breadcrumb.js +40 -48
  23. package/dist/components/browser.d.ts +18 -0
  24. package/dist/components/browser.js +32 -0
  25. package/dist/components/bubble.d.ts +29 -0
  26. package/dist/components/bubble.js +33 -0
  27. package/dist/components/button-group.d.ts +19 -0
  28. package/dist/components/button-group.js +20 -0
  29. package/dist/components/button.d.ts +47 -20
  30. package/dist/components/button.js +51 -107
  31. package/dist/components/calendar.d.ts +29 -0
  32. package/dist/components/calendar.js +149 -0
  33. package/dist/components/card.d.ts +47 -19
  34. package/dist/components/card.js +38 -38
  35. package/dist/components/carousel.d.ts +28 -0
  36. package/dist/components/carousel.js +130 -0
  37. package/dist/components/chart.d.ts +49 -0
  38. package/dist/components/chart.js +258 -0
  39. package/dist/components/checkbox-group.d.ts +16 -0
  40. package/dist/components/checkbox-group.js +13 -0
  41. package/dist/components/checkbox.d.ts +25 -10
  42. package/dist/components/checkbox.js +86 -67
  43. package/dist/components/chip-input.d.ts +46 -20
  44. package/dist/components/chip-input.js +171 -158
  45. package/dist/components/chip.d.ts +28 -0
  46. package/dist/components/chip.js +73 -0
  47. package/dist/components/choice-card.d.ts +10 -13
  48. package/dist/components/choice-card.js +11 -56
  49. package/dist/components/choice-carousel.d.ts +9 -0
  50. package/dist/components/choice-carousel.js +67 -78
  51. package/dist/components/choice-preview-card.d.ts +10 -20
  52. package/dist/components/choice-preview-card.js +13 -30
  53. package/dist/components/color-input.d.ts +36 -11
  54. package/dist/components/color-input.js +139 -61
  55. package/dist/components/combobox.d.ts +60 -57
  56. package/dist/components/combobox.js +215 -196
  57. package/dist/components/command.d.ts +58 -0
  58. package/dist/components/command.js +177 -0
  59. package/dist/components/contact.d.ts +23 -0
  60. package/dist/components/contact.js +32 -0
  61. package/dist/components/context-menu.d.ts +34 -26
  62. package/dist/components/context-menu.js +43 -66
  63. package/dist/components/copy-field.d.ts +10 -5
  64. package/dist/components/copy-field.js +25 -27
  65. package/dist/components/currency-input.d.ts +25 -11
  66. package/dist/components/currency-input.js +39 -67
  67. package/dist/components/danger-zone.d.ts +10 -1
  68. package/dist/components/danger-zone.js +20 -14
  69. package/dist/components/data-table-header.d.ts +13 -2
  70. package/dist/components/data-table-header.js +143 -169
  71. package/dist/components/date-picker.d.ts +31 -32
  72. package/dist/components/date-picker.js +126 -242
  73. package/dist/components/delta.d.ts +26 -0
  74. package/dist/components/delta.js +24 -0
  75. package/dist/components/dialog.d.ts +21 -0
  76. package/dist/components/dialog.js +16 -0
  77. package/dist/components/drawer.d.ts +15 -23
  78. package/dist/components/drawer.js +56 -76
  79. package/dist/components/dropdown-menu.d.ts +63 -0
  80. package/dist/components/dropdown-menu.js +62 -0
  81. package/dist/components/dropzone.d.ts +10 -4
  82. package/dist/components/dropzone.js +30 -55
  83. package/dist/components/empty.d.ts +29 -0
  84. package/dist/components/empty.js +42 -0
  85. package/dist/components/fab.d.ts +29 -6
  86. package/dist/components/fab.js +51 -39
  87. package/dist/components/faq.d.ts +21 -0
  88. package/dist/components/faq.js +24 -0
  89. package/dist/components/file-input.d.ts +56 -0
  90. package/dist/components/file-input.js +244 -0
  91. package/dist/components/filter-chip.d.ts +34 -47
  92. package/dist/components/filter-chip.js +61 -57
  93. package/dist/components/floating-stepper.d.ts +7 -18
  94. package/dist/components/floating-stepper.js +17 -35
  95. package/dist/components/footer.d.ts +36 -0
  96. package/dist/components/footer.js +38 -0
  97. package/dist/components/form-actions.d.ts +28 -0
  98. package/dist/components/form-actions.js +24 -0
  99. package/dist/components/google-account-chooser.d.ts +25 -0
  100. package/dist/components/google-account-chooser.js +44 -0
  101. package/dist/components/google-button.d.ts +26 -0
  102. package/dist/components/google-button.js +38 -0
  103. package/dist/components/google-consent.d.ts +23 -0
  104. package/dist/components/google-consent.js +28 -0
  105. package/dist/components/google-sign-in.d.ts +26 -0
  106. package/dist/components/google-sign-in.js +36 -0
  107. package/dist/components/hover-card.d.ts +30 -0
  108. package/dist/components/hover-card.js +55 -0
  109. package/dist/components/icon-button.d.ts +41 -11
  110. package/dist/components/icon-button.js +47 -61
  111. package/dist/components/image-crop-modal.d.ts +3 -3
  112. package/dist/components/image-crop-modal.js +66 -52
  113. package/dist/components/image-upload.d.ts +21 -29
  114. package/dist/components/image-upload.js +59 -219
  115. package/dist/components/index.d.ts +105 -49
  116. package/dist/components/index.js +190 -68
  117. package/dist/components/input-otp.d.ts +35 -0
  118. package/dist/components/input-otp.js +119 -0
  119. package/dist/components/input.d.ts +23 -17
  120. package/dist/components/input.js +103 -108
  121. package/dist/components/insight-card.d.ts +25 -9
  122. package/dist/components/insight-card.js +45 -19
  123. package/dist/components/internal/announce.d.ts +3 -0
  124. package/dist/components/internal/announce.js +20 -0
  125. package/dist/components/internal/block.d.ts +15 -0
  126. package/dist/components/internal/block.js +14 -0
  127. package/dist/components/internal/button.d.ts +23 -0
  128. package/dist/components/internal/button.js +30 -0
  129. package/dist/components/internal/choice-card.d.ts +52 -0
  130. package/dist/components/internal/choice-card.js +117 -0
  131. package/dist/components/internal/choice.d.ts +25 -0
  132. package/dist/components/internal/choice.js +44 -0
  133. package/dist/components/internal/dates.d.ts +17 -0
  134. package/dist/components/internal/dates.js +59 -0
  135. package/dist/components/internal/field.d.ts +66 -0
  136. package/dist/components/internal/field.js +105 -0
  137. package/dist/components/internal/fieldset.d.ts +25 -0
  138. package/dist/components/internal/fieldset.js +56 -0
  139. package/dist/components/internal/focus-after.d.ts +3 -0
  140. package/dist/components/internal/focus-after.js +13 -0
  141. package/dist/components/internal/google.d.ts +47 -0
  142. package/dist/components/internal/google.js +73 -0
  143. package/dist/components/internal/icons.d.ts +108 -0
  144. package/dist/components/internal/icons.js +316 -0
  145. package/dist/components/internal/menu.d.ts +16 -0
  146. package/dist/components/internal/menu.js +14 -0
  147. package/dist/components/internal/modal.d.ts +50 -0
  148. package/dist/components/internal/modal.js +85 -0
  149. package/dist/components/internal/option-content.d.ts +10 -0
  150. package/dist/components/internal/option-content.js +13 -0
  151. package/dist/components/internal/radio-context.d.ts +16 -0
  152. package/dist/components/internal/radio-context.js +6 -0
  153. package/dist/components/internal/toggle.d.ts +7 -0
  154. package/dist/components/internal/toggle.js +13 -0
  155. package/dist/components/internal/use-listbox.d.ts +56 -0
  156. package/dist/components/internal/use-listbox.js +69 -0
  157. package/dist/components/internal/whatsapp.d.ts +8 -0
  158. package/dist/components/internal/whatsapp.js +12 -0
  159. package/dist/components/item.d.ts +32 -0
  160. package/dist/components/item.js +35 -0
  161. package/dist/components/kbd.d.ts +17 -0
  162. package/dist/components/kbd.js +18 -0
  163. package/dist/components/listbox.d.ts +34 -0
  164. package/dist/components/listbox.js +114 -0
  165. package/dist/components/marker.d.ts +24 -0
  166. package/dist/components/marker.js +28 -0
  167. package/dist/components/media-tile.d.ts +17 -14
  168. package/dist/components/media-tile.js +19 -24
  169. package/dist/components/message-scroller.d.ts +20 -0
  170. package/dist/components/message-scroller.js +108 -0
  171. package/dist/components/message.d.ts +33 -0
  172. package/dist/components/message.js +23 -0
  173. package/dist/components/navigation-menu.d.ts +42 -0
  174. package/dist/components/navigation-menu.js +30 -0
  175. package/dist/components/newsletter.d.ts +27 -0
  176. package/dist/components/newsletter.js +75 -0
  177. package/dist/components/number-input.d.ts +60 -0
  178. package/dist/components/number-input.js +234 -0
  179. package/dist/components/option-tile.d.ts +20 -19
  180. package/dist/components/option-tile.js +52 -131
  181. package/dist/components/page-header.d.ts +31 -0
  182. package/dist/components/page-header.js +25 -0
  183. package/dist/components/page-shell.d.ts +11 -1
  184. package/dist/components/page-shell.js +8 -27
  185. package/dist/components/page-skeleton.d.ts +15 -21
  186. package/dist/components/page-skeleton.js +37 -4
  187. package/dist/components/pagination.d.ts +32 -22
  188. package/dist/components/pagination.js +83 -76
  189. package/dist/components/password-input.d.ts +26 -0
  190. package/dist/components/password-input.js +112 -0
  191. package/dist/components/phone-input.d.ts +12 -8
  192. package/dist/components/phone-input.js +77 -47
  193. package/dist/components/phone.d.ts +27 -0
  194. package/dist/components/phone.js +35 -0
  195. package/dist/components/popover.d.ts +25 -36
  196. package/dist/components/popover.js +32 -129
  197. package/dist/components/pricing-card.d.ts +9 -25
  198. package/dist/components/pricing-card.js +9 -25
  199. package/dist/components/pricing.d.ts +48 -0
  200. package/dist/components/pricing.js +64 -0
  201. package/dist/components/progress.d.ts +30 -0
  202. package/dist/components/progress.js +57 -0
  203. package/dist/components/qr-display.d.ts +11 -6
  204. package/dist/components/qr-display.js +8 -19
  205. package/dist/components/questionnaire.d.ts +42 -0
  206. package/dist/components/questionnaire.js +107 -0
  207. package/dist/components/radio-group.d.ts +21 -0
  208. package/dist/components/radio-group.js +40 -0
  209. package/dist/components/radio.d.ts +15 -29
  210. package/dist/components/radio.js +46 -87
  211. package/dist/components/row-actions.d.ts +5 -0
  212. package/dist/components/row-actions.js +57 -56
  213. package/dist/components/saving-bar-context.d.ts +0 -5
  214. package/dist/components/saving-bar-context.js +16 -34
  215. package/dist/components/saving-bar.d.ts +26 -11
  216. package/dist/components/saving-bar.js +53 -65
  217. package/dist/components/section-card.d.ts +18 -4
  218. package/dist/components/section-card.js +26 -39
  219. package/dist/components/section-header.d.ts +8 -12
  220. package/dist/components/section-header.js +7 -2
  221. package/dist/components/select.d.ts +44 -16
  222. package/dist/components/select.js +85 -135
  223. package/dist/components/selectable-card.d.ts +11 -19
  224. package/dist/components/selectable-card.js +4 -21
  225. package/dist/components/separator.d.ts +20 -0
  226. package/dist/components/separator.js +19 -0
  227. package/dist/components/setting-row.d.ts +11 -15
  228. package/dist/components/setting-row.js +11 -14
  229. package/dist/components/settings-list.d.ts +10 -12
  230. package/dist/components/settings-list.js +9 -17
  231. package/dist/components/sheet.d.ts +21 -0
  232. package/dist/components/sheet.js +16 -0
  233. package/dist/components/sidebar.d.ts +79 -0
  234. package/dist/components/sidebar.js +111 -0
  235. package/dist/components/skeleton.d.ts +14 -20
  236. package/dist/components/skeleton.js +8 -36
  237. package/dist/components/slider.d.ts +21 -23
  238. package/dist/components/slider.js +65 -56
  239. package/dist/components/sparkline.d.ts +19 -0
  240. package/dist/components/sparkline.js +32 -0
  241. package/dist/components/spinner.d.ts +16 -8
  242. package/dist/components/spinner.js +35 -32
  243. package/dist/components/star-rating.d.ts +22 -0
  244. package/dist/components/star-rating.js +25 -0
  245. package/dist/components/stat.d.ts +33 -0
  246. package/dist/components/stat.js +29 -0
  247. package/dist/components/status.d.ts +27 -0
  248. package/dist/components/status.js +34 -0
  249. package/dist/components/step-progress.d.ts +13 -6
  250. package/dist/components/step-progress.js +20 -17
  251. package/dist/components/summary-bar.d.ts +20 -20
  252. package/dist/components/summary-bar.js +13 -50
  253. package/dist/components/switch.d.ts +20 -0
  254. package/dist/components/switch.js +46 -0
  255. package/dist/components/table.d.ts +56 -17
  256. package/dist/components/table.js +65 -59
  257. package/dist/components/tabs.d.ts +67 -0
  258. package/dist/components/tabs.js +56 -0
  259. package/dist/components/testimonial.d.ts +30 -0
  260. package/dist/components/testimonial.js +36 -0
  261. package/dist/components/textarea.d.ts +11 -16
  262. package/dist/components/textarea.js +55 -75
  263. package/dist/components/tile.d.ts +24 -0
  264. package/dist/components/tile.js +21 -0
  265. package/dist/components/time-picker.d.ts +40 -25
  266. package/dist/components/time-picker.js +191 -189
  267. package/dist/components/toast.d.ts +63 -0
  268. package/dist/components/toast.js +132 -0
  269. package/dist/components/toggle-card-compact.d.ts +15 -5
  270. package/dist/components/toggle-card-compact.js +22 -81
  271. package/dist/components/toggle-card.d.ts +11 -2
  272. package/dist/components/toggle-card.js +9 -70
  273. package/dist/components/toggle-group.d.ts +21 -59
  274. package/dist/components/toggle-group.js +31 -74
  275. package/dist/components/toggle.d.ts +19 -9
  276. package/dist/components/toggle.js +20 -55
  277. package/dist/components/tooltip.d.ts +25 -12
  278. package/dist/components/tooltip.js +16 -84
  279. package/dist/components/top-navigation.d.ts +33 -0
  280. package/dist/components/top-navigation.js +85 -0
  281. package/dist/components/typing-indicator.d.ts +6 -0
  282. package/dist/components/typing-indicator.js +3 -21
  283. package/dist/components/whatsapp-chat.d.ts +28 -0
  284. package/dist/components/whatsapp-chat.js +95 -0
  285. package/dist/components/whatsapp-message.d.ts +22 -0
  286. package/dist/components/whatsapp-message.js +34 -0
  287. package/dist/components/whatsapp-notification.d.ts +27 -0
  288. package/dist/components/whatsapp-notification.js +73 -0
  289. package/dist/components/whatsapp-template.d.ts +42 -0
  290. package/dist/components/whatsapp-template.js +69 -0
  291. package/dist/icons/index.d.ts +2 -0
  292. package/dist/icons/index.js +2 -0
  293. package/dist/icons/pix.d.ts +16 -0
  294. package/dist/icons/pix.js +29 -0
  295. package/dist/targets/native/components/accordion.js +31 -25
  296. package/dist/targets/native/components/alert.js +22 -16
  297. package/dist/targets/native/components/avatar.js +36 -29
  298. package/dist/targets/native/components/badge.js +4 -3
  299. package/dist/targets/native/components/button.js +11 -4
  300. package/dist/targets/native/components/card.js +2 -1
  301. package/dist/targets/native/components/checkbox.js +18 -15
  302. package/dist/targets/native/components/chips.js +19 -16
  303. package/dist/targets/native/components/choice-card.js +29 -23
  304. package/dist/targets/native/components/context-menu.js +13 -9
  305. package/dist/targets/native/components/currency-input.js +28 -25
  306. package/dist/targets/native/components/danger-zone.js +10 -4
  307. package/dist/targets/native/components/date-picker.js +86 -70
  308. package/dist/targets/native/components/divider.js +3 -2
  309. package/dist/targets/native/components/empty-state.js +6 -1
  310. package/dist/targets/native/components/fab.js +32 -26
  311. package/dist/targets/native/components/filter-chip.js +9 -8
  312. package/dist/targets/native/components/form-field.js +20 -10
  313. package/dist/targets/native/components/form-screen.js +50 -45
  314. package/dist/targets/native/components/google-icon.js +31 -25
  315. package/dist/targets/native/components/icon-button.js +6 -4
  316. package/dist/targets/native/components/icon.js +2 -1
  317. package/dist/targets/native/components/image-upload.js +59 -50
  318. package/dist/targets/native/components/index.d.ts +0 -2
  319. package/dist/targets/native/components/index.js +0 -4
  320. package/dist/targets/native/components/input.js +41 -34
  321. package/dist/targets/native/components/list-item.js +29 -23
  322. package/dist/targets/native/components/menu.js +12 -10
  323. package/dist/targets/native/components/modal.js +41 -32
  324. package/dist/targets/native/components/radio.js +19 -16
  325. package/dist/targets/native/components/search.js +41 -38
  326. package/dist/targets/native/components/select.js +71 -63
  327. package/dist/targets/native/components/sheet.js +36 -30
  328. package/dist/targets/native/components/skeleton.js +6 -5
  329. package/dist/targets/native/components/slider.js +51 -43
  330. package/dist/targets/native/components/spinner.js +2 -1
  331. package/dist/targets/native/components/stepper.js +14 -9
  332. package/dist/targets/native/components/switch.js +15 -14
  333. package/dist/targets/native/components/text.js +2 -1
  334. package/dist/targets/native/components/textarea.js +2 -1
  335. package/dist/targets/native/components/theme.js +2 -1
  336. package/dist/targets/native/components/toaster.js +24 -21
  337. package/dist/targets/native/index.d.ts +1 -1
  338. package/dist/targets/native/index.js +1 -3
  339. package/dist/targets/native/preset.cjs +0 -1
  340. package/dist/targets/native/theme.css +58 -60
  341. package/dist/targets/native/theme.d.ts +58 -60
  342. package/dist/targets/native/theme.js +58 -60
  343. package/package.json +35 -16
  344. package/styles/_primitives.generated.css +40 -0
  345. package/styles/base.css +15 -21
  346. package/styles/rds/components-styles.css +11365 -0
  347. package/styles/rds/components.css +993 -0
  348. package/styles/rds/foundation.css +74 -0
  349. package/styles/rds/theme.css +261 -0
  350. package/styles/rds.css +6 -0
  351. package/styles/themes/rojao.css +46 -53
  352. package/brand/rojao-black-on-white.png +0 -0
  353. package/brand/rojao-black.png +0 -0
  354. package/brand/rojao-white-on-black.png +0 -0
  355. package/brand/rojao-white.png +0 -0
  356. package/dist/components/blocker-card.d.ts +0 -42
  357. package/dist/components/blocker-card.js +0 -45
  358. package/dist/components/bottom-sheet.d.ts +0 -31
  359. package/dist/components/bottom-sheet.js +0 -120
  360. package/dist/components/chat-bubble.d.ts +0 -16
  361. package/dist/components/chat-bubble.js +0 -55
  362. package/dist/components/chips.d.ts +0 -22
  363. package/dist/components/chips.js +0 -94
  364. package/dist/components/copilot-hint.d.ts +0 -18
  365. package/dist/components/copilot-hint.js +0 -63
  366. package/dist/components/divider.d.ts +0 -20
  367. package/dist/components/divider.js +0 -47
  368. package/dist/components/empty-state.d.ts +0 -48
  369. package/dist/components/empty-state.js +0 -91
  370. package/dist/components/form-card-header.d.ts +0 -13
  371. package/dist/components/form-card-header.js +0 -8
  372. package/dist/components/label.d.ts +0 -16
  373. package/dist/components/label.js +0 -43
  374. package/dist/components/menu.d.ts +0 -50
  375. package/dist/components/menu.js +0 -80
  376. package/dist/components/modal.d.ts +0 -25
  377. package/dist/components/modal.js +0 -71
  378. package/dist/components/notice.d.ts +0 -50
  379. package/dist/components/notice.js +0 -103
  380. package/dist/components/page-tabs.d.ts +0 -35
  381. package/dist/components/page-tabs.js +0 -55
  382. package/dist/components/paywall-banner.d.ts +0 -37
  383. package/dist/components/paywall-banner.js +0 -42
  384. package/dist/components/paywall.d.ts +0 -44
  385. package/dist/components/paywall.js +0 -55
  386. package/dist/components/phone-frame.d.ts +0 -9
  387. package/dist/components/phone-frame.js +0 -18
  388. package/dist/components/pix-icon.d.ts +0 -8
  389. package/dist/components/pix-icon.js +0 -24
  390. package/dist/components/search.d.ts +0 -30
  391. package/dist/components/search.js +0 -81
  392. package/dist/components/themed.d.ts +0 -36
  393. package/dist/components/themed.js +0 -22
  394. package/dist/components/toaster.d.ts +0 -84
  395. package/dist/components/toaster.js +0 -284
  396. package/dist/components/use-dismiss.d.ts +0 -9
  397. package/dist/components/use-dismiss.js +0 -28
  398. package/dist/components/use-focus-trap.d.ts +0 -5
  399. package/dist/components/use-focus-trap.js +0 -54
  400. package/dist/targets/native/components/paywall-banner.d.ts +0 -11
  401. package/dist/targets/native/components/paywall-banner.js +0 -46
  402. package/dist/targets/native/components/paywall.d.ts +0 -18
  403. package/dist/targets/native/components/paywall.js +0 -61
@@ -0,0 +1,74 @@
1
+ /* GENERATED by scripts/build-rds-tokens.ts from ds-core/figma/foundation.txt. Do not edit. */
2
+ @layer rds.tokens {
3
+ :root, .ds-scope, .dark, .ds-plate {
4
+ --radius-large: 12px;
5
+ --radius-small: 8px;
6
+ --radius-full: 9999px;
7
+ --radius-card: 12px;
8
+ --radius-control: 8px;
9
+ --radius-field: 8px;
10
+ --radius-container: 12px;
11
+ --radius-focus: 12px;
12
+ --radius-xs: 4px;
13
+ --border-width: 1px;
14
+ --border-width-strong: 2px;
15
+ --focus-ring-width: 2px;
16
+ --type-font-family: "Inter";
17
+ --type-font-stack: Inter, Arial, Helvetica, sans-serif;
18
+ --type-heading-size: 24px;
19
+ --type-heading-line: 30px;
20
+ --type-heading-weight: 700;
21
+ --type-lead-size: 18px;
22
+ --type-lead-line: 30px;
23
+ --type-body-size: 16px;
24
+ --type-body-line: 24px;
25
+ --type-label-size: 16px;
26
+ --type-label-line: 24px;
27
+ --type-button-size: 14px;
28
+ --type-button-line: 20px;
29
+ --type-small-size: 14px;
30
+ --type-small-line: 20px;
31
+ --type-caption-size: 12px;
32
+ --type-caption-line: 16px;
33
+ --type-caption-weight: 500;
34
+ --type-footer-size: 12px;
35
+ --type-footer-line: 20px;
36
+ --type-value-size: 20px;
37
+ --type-value-line: 30px;
38
+ --type-band-size: 36px;
39
+ --type-band-line: 48px;
40
+ --space-4: 4px;
41
+ --space-8: 8px;
42
+ --space-12: 12px;
43
+ --space-16: 16px;
44
+ --space-24: 24px;
45
+ --space-32: 32px;
46
+ --space-40: 40px;
47
+ --space-48: 48px;
48
+ --space-56: 56px;
49
+ --space-64: 64px;
50
+ --size-16: 16px;
51
+ --size-20: 20px;
52
+ --size-24: 24px;
53
+ --size-32: 32px;
54
+ --size-40: 40px;
55
+ --size-48: 48px;
56
+ --size-56: 56px;
57
+ --blur-backdrop: 16px;
58
+ --motion-duration-fast: 100ms;
59
+ --motion-duration-base: 200ms;
60
+ --motion-duration-slow: 300ms;
61
+ --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
62
+ --motion-easing-enter: cubic-bezier(0, 0, 0, 1);
63
+ --motion-easing-exit: cubic-bezier(0.3, 0, 1, 1);
64
+ --z-dropdown: 1000;
65
+ --z-sticky: 1100;
66
+ --z-overlay: 1200;
67
+ --z-modal: 1300;
68
+ --z-toast: 1400;
69
+ --z-tooltip: 1500;
70
+ --elevation-raised: 0px 2px 4px -2px var(--shadow-ambient), 0px 4px 8px -2px var(--shadow-key);
71
+ --elevation-overlay: 0px 4px 8px -4px var(--shadow-ambient), 0px 8px 16px -4px var(--shadow-key);
72
+ --elevation-modal: 0px 24px 48px -12px var(--shadow-strong);
73
+ }
74
+ }
@@ -0,0 +1,261 @@
1
+ /* GENERATED by scripts/build-rds-tokens.ts from ds-core/figma/theme.txt. Do not edit. */
2
+ @layer rds.theme {
3
+ :root, .ds-scope {
4
+ --colors-primary-light: #6b7488;
5
+ --colors-primary-default: #1b2a4a;
6
+ --colors-primary-dark: #1b2a4a;
7
+ --colors-secondary-light: #6b7488;
8
+ --colors-secondary-default: #1b2a4a;
9
+ --colors-secondary-active: #26344f;
10
+ --colors-accent-highlight: #ffca96;
11
+ --colors-accent-default: #ff6a00;
12
+ --colors-accent-hover: #ff9640;
13
+ --colors-accent-invert: #ffffff;
14
+ --text-heading: #ff6a00;
15
+ --text-body: #27272a;
16
+ --text-link: #006bb5;
17
+ --surface-page: #f4f4f5;
18
+ --surface-card: #ffffff;
19
+ --surface-panel: #fafafa;
20
+ --border-default: #e4e4e7;
21
+ --surface-tint-default: #ffca96;
22
+ --text-on-action-tonal: #3a465f;
23
+ --text-on-primary: #ffffff;
24
+ --text-on-secondary: #ffffff;
25
+ --text-on-accent: #000000;
26
+ --text-on-tint: #000000;
27
+ --colors-state-error: #c50003;
28
+ --colors-state-error-strong: #6f0000;
29
+ --surface-tint-strong: #ffb066;
30
+ --text-on-error: #ffffff;
31
+ --surface-action-default: #e2f0ff;
32
+ --surface-action-strong: #bddeff;
33
+ --focus-ring: #27272a;
34
+ --focus-ring-inset: #ffffff;
35
+ --surface-disabled: #0000001a;
36
+ --text-disabled: #00000066;
37
+ --text-muted: #3f3f46;
38
+ --text-disabled-invert: #ffffff66;
39
+ --text-action: #00518d;
40
+ --surface-lift-action: #f4f6f9;
41
+ --text-on-lift-action: #000000;
42
+ --surface-lift-action-strong: #e2f0ff;
43
+ --surface-band-action: #e2f0ff;
44
+ --surface-band-base: #e2f0ff;
45
+ --text-on-band-action: #000000;
46
+ --text-on-band-base: #000000;
47
+ --text-on-primary-strong: #ffffff;
48
+ --colors-accent-logo: #ffb066;
49
+ --surface-band-mark-action: #2196f3;
50
+ --surface-band-mark-base: #2196f3;
51
+ --colors-secondary-hover: #3a465f;
52
+ --colors-state-success: #4caf50;
53
+ --text-on-success: #000000;
54
+ --colors-state-success-strong: #0a7e1c;
55
+ --surface-cover: #ff6a00;
56
+ --text-on-cover: #000000;
57
+ --text-subtle: #52525b;
58
+ --surface-muted: #f4f4f5;
59
+ --surface-error: #ffe8e5;
60
+ --colors-primary-active: #5a6478;
61
+ --surface-muted-strong: #e4e4e7;
62
+ --colors-state-error-active: #4b0000;
63
+ --text-error: #6f0000;
64
+ --surface-error-strong: #ffccc4;
65
+ --border-strong: #71717a;
66
+ --border-strong-hover: #52525b;
67
+ --colors-state-info: #2196f3;
68
+ --text-on-info: #000000;
69
+ --colors-state-warning: #ff9800;
70
+ --colors-state-warning-strong: #dc7f00;
71
+ --text-on-warning: #000000;
72
+ --colors-state-neutral: #52525b;
73
+ --text-on-neutral: #ffffff;
74
+ --surface-success: #caffc8;
75
+ --text-success: #004507;
76
+ --surface-info: #e2f0ff;
77
+ --text-info: #00518d;
78
+ --surface-warning: #ffeddd;
79
+ --text-warning: #a15700;
80
+ --surface-neutral: #f4f4f5;
81
+ --text-neutral: #27272a;
82
+ --chart-series-1: #5a6478;
83
+ --chart-series-2: #dc7f00;
84
+ --chart-series-3: #009688;
85
+ --chart-series-4: #bc4ad0;
86
+ --chart-series-5: #379c3d;
87
+ --colors-accent-mark: #ff9640;
88
+ --text-on-accent-mark: #000000;
89
+ --type-font-mono: "Roboto Mono", monospace;
90
+ --surface-scrim: #00000080;
91
+ --shadow-ambient: #0000000d;
92
+ --shadow-key: #0000001a;
93
+ --shadow-strong: #00000033;
94
+ --logo-primary: #1b2a4a;
95
+ --logo-accent: #ffb066;
96
+ --logo-signature: #1b2a4a;
97
+ --logo-accent-2: #1b2a4a;
98
+ --logo-accent-3: #ff6a00;
99
+ --logo-mono: #000000;
100
+ --logo-inverse: #ffffff;
101
+ --logo-inverse-signature: #ffffff;
102
+ --social-ink: #000000;
103
+ --colors-state-info-strong: #2196f3;
104
+ --colors-state-neutral-strong: #52525b;
105
+ --text-on-primary-subtle: #ffffff4d;
106
+ --surface-tint-subtle: #ffe2c6;
107
+ }
108
+
109
+ :root.dark, .dark, .ds-scope.dark, .dark .ds-scope {
110
+ --colors-primary-light: #8a91a1;
111
+ --colors-primary-default: #c9cdd8;
112
+ --colors-primary-dark: #e4e6ec;
113
+ --colors-secondary-default: #8a91a1;
114
+ --colors-secondary-active: #c9cdd8;
115
+ --colors-accent-highlight: #d95a00;
116
+ --colors-accent-default: #ffb066;
117
+ --colors-accent-hover: #ffca96;
118
+ --text-heading: #fafafa;
119
+ --text-body: #f4f4f5;
120
+ --text-link: #8cc6ff;
121
+ --surface-page: #18181b;
122
+ --surface-card: #18181b;
123
+ --surface-panel: #18181b;
124
+ --border-default: #27272a;
125
+ --surface-tint-default: #b34b00;
126
+ --text-on-action-tonal: #c9cdd8;
127
+ --text-on-primary: #000000;
128
+ --text-on-secondary: #000000;
129
+ --text-on-tint: #ffffff;
130
+ --colors-state-error-strong: #ff6c5c;
131
+ --surface-tint-strong: #d95a00;
132
+ --surface-action-default: #002445;
133
+ --surface-action-strong: #003966;
134
+ --focus-ring: #f4f4f5;
135
+ --focus-ring-inset: #18181b;
136
+ --surface-disabled: #ffffff1a;
137
+ --text-disabled: #ffffff66;
138
+ --text-muted: #d4d4d8;
139
+ --text-disabled-invert: #00000066;
140
+ --text-action: #8cc6ff;
141
+ --surface-lift-action: #26344f;
142
+ --text-on-lift-action: #ffffff;
143
+ --surface-lift-action-strong: #3a465f;
144
+ --text-on-primary-strong: #000000;
145
+ --colors-secondary-hover: #aeb6c4;
146
+ --colors-state-success-strong: #82d982;
147
+ --text-subtle: #a1a1aa;
148
+ --surface-muted: #27272a;
149
+ --surface-error: #4b0000;
150
+ --colors-primary-active: #aeb6c4;
151
+ --surface-muted-strong: #3f3f46;
152
+ --text-error: #ffa598;
153
+ --surface-error-strong: #4b0000;
154
+ --border-strong-hover: #a1a1aa;
155
+ --colors-state-warning-strong: #ff9800;
156
+ --surface-success: #002d01;
157
+ --text-success: #82d982;
158
+ --surface-info: #002445;
159
+ --text-info: #8cc6ff;
160
+ --surface-warning: #6c3500;
161
+ --text-warning: #ffbb7a;
162
+ --surface-neutral: #27272a;
163
+ --text-neutral: #e4e4e7;
164
+ --chart-series-1: #8a91a1;
165
+ --chart-series-2: #ff9800;
166
+ --chart-series-3: #45b7a8;
167
+ --chart-series-4: #db6def;
168
+ --chart-series-5: #4caf50;
169
+ --colors-accent-mark: #ffb066;
170
+ --surface-scrim: #000000b3;
171
+ --shadow-ambient: #00000033;
172
+ --shadow-key: #00000066;
173
+ --shadow-strong: #00000099;
174
+ --logo-primary: #ffffff;
175
+ --logo-accent: #ffffff;
176
+ --logo-signature: #ffffff;
177
+ --logo-mono: #ffffff;
178
+ --social-ink: #ffffff;
179
+ --colors-state-info-strong: #8cc6ff;
180
+ --colors-state-neutral-strong: #a1a1aa;
181
+ --text-on-primary-subtle: #0000004d;
182
+ --surface-tint-subtle: #b34b00;
183
+ }
184
+
185
+ .ds-plate {
186
+ --colors-primary-light: #aeb6c4;
187
+ --colors-primary-default: #ffffff;
188
+ --colors-primary-dark: #e4e6ec;
189
+ --colors-secondary-light: #aeb6c4;
190
+ --colors-secondary-default: #ffffff;
191
+ --colors-secondary-active: #c9cdd8;
192
+ --colors-accent-highlight: #d95a00;
193
+ --colors-accent-default: #ffb066;
194
+ --colors-accent-hover: #ffca96;
195
+ --text-heading: #ffffff;
196
+ --text-body: #ffffff;
197
+ --text-link: #ffffff;
198
+ --surface-page: #1b2a4a;
199
+ --surface-card: #6b7488;
200
+ --surface-panel: #1b2a4a;
201
+ --border-default: #ffffff33;
202
+ --surface-tint-default: #ffffff1a;
203
+ --text-on-action-tonal: #ffffff;
204
+ --text-on-primary: #1b2a4a;
205
+ --text-on-secondary: #1b2a4a;
206
+ --text-on-tint: #ffffff;
207
+ --colors-state-error-strong: #ff6c5c;
208
+ --surface-tint-strong: #ffffff33;
209
+ --surface-action-default: #ffffff1a;
210
+ --surface-action-strong: #ffffff33;
211
+ --focus-ring: #ffffff;
212
+ --focus-ring-inset: #1b2a4a;
213
+ --surface-disabled: #ffffff1a;
214
+ --text-disabled: #ffffff66;
215
+ --text-muted: #ffffffb3;
216
+ --text-disabled-invert: #00000066;
217
+ --text-action: #ffffff;
218
+ --surface-lift-action: #ffffff1a;
219
+ --text-on-lift-action: #ffffff;
220
+ --surface-lift-action-strong: #ffffff33;
221
+ --text-on-primary-strong: #1b2a4a;
222
+ --colors-secondary-hover: #e4e6ec;
223
+ --colors-state-success-strong: #82d982;
224
+ --text-subtle: #ffffff99;
225
+ --surface-muted: #ffffff1a;
226
+ --surface-error: #4b0000;
227
+ --colors-primary-active: #c9cdd8;
228
+ --surface-muted-strong: #ffffff33;
229
+ --text-error: #ffa598;
230
+ --surface-error-strong: #4b0000;
231
+ --border-strong: #ffffff99;
232
+ --border-strong-hover: #ffffffcc;
233
+ --colors-state-warning-strong: #ff9800;
234
+ --surface-success: #002d01;
235
+ --text-success: #82d982;
236
+ --surface-info: #002445;
237
+ --text-info: #8cc6ff;
238
+ --surface-warning: #6c3500;
239
+ --text-warning: #ffbb7a;
240
+ --surface-neutral: #27272a;
241
+ --text-neutral: #e4e4e7;
242
+ --chart-series-1: #8a91a1;
243
+ --chart-series-2: #ff9800;
244
+ --chart-series-3: #45b7a8;
245
+ --chart-series-4: #db6def;
246
+ --chart-series-5: #4caf50;
247
+ --colors-accent-mark: #ffb066;
248
+ --surface-scrim: #000000b3;
249
+ --shadow-ambient: #00000033;
250
+ --shadow-key: #00000066;
251
+ --shadow-strong: #00000099;
252
+ --logo-primary: #ffffff;
253
+ --logo-accent: #ffffff;
254
+ --logo-signature: #ffffff;
255
+ --logo-mono: #ffffff;
256
+ --social-ink: #ffffff;
257
+ --colors-state-info-strong: #8cc6ff;
258
+ --colors-state-neutral-strong: #a1a1aa;
259
+ --surface-tint-subtle: #ffffff0d;
260
+ }
261
+ }
package/styles/rds.css ADDED
@@ -0,0 +1,6 @@
1
+ /* GENERATED by scripts/build-rds-tokens.ts. Import once: @import "@rojaostudio/ds/styles/rds.css". */
2
+ @layer rds.theme, rds.tokens, rds.components;
3
+ @import "./rds/theme.css";
4
+ @import "./rds/foundation.css";
5
+ @import "./rds/components.css";
6
+ @import "./rds/components-styles.css";
@@ -1,6 +1,6 @@
1
1
  /* ─────────────────────────────────────────────────────────────
2
2
  ROJAO DS — Rojao theme · GERADO (não editar à mão)
3
- Brand Rojão (loja). Neutro preto + accent green, Inter.
3
+ Brand Rojão. Navy + flare accent on zinc, Inter (Figma [RDS], brand rojao).
4
4
 
5
5
  Fonte: recipes/index.ts (rojao) → generate/emitCss.ts
6
6
  Regerar: pnpm build:themes
@@ -18,90 +18,83 @@
18
18
  --font-family-display : var(--font-inter), system-ui, sans-serif;
19
19
 
20
20
  /* ── Brand ── */
21
- --brand-primary-50 : var(--color-neutral-50);
22
- --brand-primary-100 : var(--color-neutral-100);
23
- --brand-primary-200 : var(--color-neutral-200);
24
- --brand-primary-300 : var(--color-neutral-300);
25
- --brand-primary-400 : var(--color-neutral-400);
26
- --brand-primary-500 : var(--color-neutral-500);
27
- --brand-primary-600 : var(--color-neutral-600);
28
- --brand-primary-700 : var(--color-neutral-700);
29
- --brand-primary-800 : var(--color-neutral-800);
30
- --brand-primary-900 : var(--color-neutral-900);
31
- --brand-primary : var(--color-neutral-900);
32
- --brand-hover : var(--color-neutral-700);
21
+ --brand-primary-50 : var(--color-navy-50);
22
+ --brand-primary-100 : var(--color-navy-100);
23
+ --brand-primary-200 : var(--color-navy-200);
24
+ --brand-primary-300 : var(--color-navy-300);
25
+ --brand-primary-400 : var(--color-navy-400);
26
+ --brand-primary-500 : var(--color-navy-500);
27
+ --brand-primary-600 : var(--color-navy-600);
28
+ --brand-primary-700 : var(--color-navy-700);
29
+ --brand-primary-800 : var(--color-navy-800);
30
+ --brand-primary-900 : var(--color-navy-900);
31
+ --brand-primary : var(--color-navy-900);
32
+ --brand-hover : var(--color-navy-800);
33
33
  --brand-on-primary : var(--color-white);
34
- --brand-secondary : var(--color-white);
35
- --brand-on-secondary : var(--color-neutral-900);
34
+ --brand-secondary : var(--color-navy-900);
35
+ --brand-on-secondary : var(--color-white);
36
36
  --brand-secondary-surface : var(--brand-secondary);
37
37
  --brand-secondary-band : var(--brand-secondary);
38
38
  --brand-secondary-texture : none;
39
39
  --brand-secondary-texture-size: 18px 18px;
40
- --brand-accent : var(--color-green-500);
41
- --brand-accent-light : var(--color-green-50);
42
- --brand-on-accent : var(--color-white);
43
- --brand-text : var(--color-neutral-900);
40
+ --brand-accent : var(--color-flare-700);
41
+ --brand-on-accent : var(--color-black);
42
+ --brand-text : var(--color-navy-900);
44
43
 
45
44
  /* ── Surface ── */
46
- --surface-page : var(--color-neutral-50);
45
+ --surface-page : var(--color-zinc-50);
47
46
  --surface-default : var(--color-white);
48
- --surface-raised : var(--color-neutral-100);
49
- --surface-overlay : var(--color-neutral-900);
50
- --surface-invert : var(--color-neutral-900);
47
+ --surface-raised : var(--color-zinc-100);
48
+ --surface-overlay : var(--color-zinc-900);
49
+ --surface-invert : var(--color-zinc-900);
51
50
 
52
51
  /* ── Border ── */
53
- --border-subtle : var(--color-neutral-100);
54
- --border-default : var(--color-neutral-200);
55
- --border-strong : var(--color-neutral-300);
56
- --border-control : var(--color-neutral-500);
57
- --border-focus : var(--color-neutral-900);
52
+ --border-subtle : var(--color-zinc-100);
53
+ --border-default : var(--color-zinc-200);
54
+ --border-strong : var(--color-zinc-300);
55
+ --border-control : var(--color-zinc-500);
56
+ --border-focus : var(--color-navy-900);
58
57
 
59
58
  /* ── Text ── */
60
- --text-primary : var(--color-neutral-900);
61
- --text-secondary : var(--color-neutral-700);
62
- --text-muted : var(--color-neutral-600);
63
- --text-disabled : var(--color-neutral-400);
59
+ --text-primary : var(--color-zinc-900);
60
+ --text-secondary : var(--color-zinc-700);
61
+ --text-muted : var(--color-zinc-600);
62
+ --text-disabled : var(--color-zinc-400);
64
63
  --text-inverse : var(--color-white);
65
- --text-placeholder : var(--color-neutral-600);
64
+ --text-placeholder : var(--color-zinc-600);
66
65
 
67
66
  /* ── Icon ── */
68
- --icon-default : var(--color-neutral-800);
67
+ --icon-default : var(--color-zinc-800);
69
68
  }
70
69
 
71
70
  .theme-rojao.dark,
72
71
  :is(.dark).theme-rojao {
73
72
  /* ── Brand ── */
74
- --brand-primary : var(--color-white);
75
- --brand-hover : var(--color-neutral-100);
76
- --brand-on-primary : var(--color-neutral-900);
77
- --brand-secondary : var(--color-neutral-900);
78
- --brand-on-secondary : var(--color-white);
79
- --brand-text : var(--color-neutral-50);
73
+ --brand-text : var(--color-zinc-50);
80
74
  --brand-secondary-surface: var(--surface-page);
81
75
  --brand-secondary-band : transparent;
82
76
 
83
77
  /* ── Surface ── */
84
- --surface-page : var(--color-neutral-900);
85
- --surface-default : var(--color-neutral-800);
86
- --surface-raised : var(--color-neutral-700);
87
- --surface-overlay : var(--color-neutral-200);
88
- --surface-invert : var(--color-neutral-50);
78
+ --surface-page : var(--color-zinc-900);
79
+ --surface-default : var(--color-zinc-800);
80
+ --surface-raised : var(--color-zinc-700);
81
+ --surface-overlay : var(--color-zinc-200);
82
+ --surface-invert : var(--color-zinc-50);
89
83
 
90
84
  /* ── Border ── */
91
85
  --border-subtle : color-mix(in srgb, var(--color-white) 8%, transparent);
92
86
  --border-default : color-mix(in srgb, var(--color-white) 14%, transparent);
93
87
  --border-strong : color-mix(in srgb, var(--color-white) 22%, transparent);
94
88
  --border-control : color-mix(in srgb, var(--color-white) 40%, transparent);
95
- --border-focus : var(--color-neutral-400);
96
89
 
97
90
  /* ── Text ── */
98
- --text-primary : var(--color-neutral-50);
99
- --text-secondary : var(--color-neutral-200);
100
- --text-muted : var(--color-neutral-300);
101
- --text-disabled : var(--color-neutral-600);
102
- --text-inverse : var(--color-neutral-900);
103
- --text-placeholder : var(--color-neutral-300);
91
+ --text-primary : var(--color-zinc-50);
92
+ --text-secondary : var(--color-zinc-200);
93
+ --text-muted : var(--color-zinc-300);
94
+ --text-disabled : var(--color-zinc-600);
95
+ --text-inverse : var(--color-zinc-900);
96
+ --text-placeholder : var(--color-zinc-300);
104
97
 
105
98
  /* ── Icon ── */
106
- --icon-default : var(--color-neutral-400);
99
+ --icon-default : var(--color-zinc-400);
107
100
  }
Binary file
Binary file
Binary file
Binary file
@@ -1,42 +0,0 @@
1
- import * as react from 'react';
2
- import { ReactNode, ComponentType } from 'react';
3
-
4
- /**
5
- * BlockerCard — destaque bloqueante. Mostra que algo precisa de atenção pra
6
- * o usuário poder seguir (limite atingido, plano expirado, feature gateada).
7
- *
8
- * Uso:
9
- * <BlockerCard
10
- * title="Limite de produtos atingido"
11
- * description="Você usou 50/50. Faça upgrade pra cadastrar mais."
12
- * action="Ver planos"
13
- * actionHref="/billing"
14
- * />
15
- *
16
- * Pra Next.js, passa `linkAs={Link}` pra usar next/link em vez de `<a>`.
17
- */
18
- type BlockerCardTone = 'danger' | 'warning' | 'info';
19
- interface BlockerCardProps {
20
- title: string;
21
- description: ReactNode;
22
- /** Label do botão de ação (opcional). */
23
- action?: string;
24
- /** URL/link da ação. Se ausente e `onAction` definido, vira botão. */
25
- actionHref?: string;
26
- /** Handler de ação (se preferir click handler em vez de href). */
27
- onAction?: () => void;
28
- /** Tom semântico. default = "danger". */
29
- tone?: BlockerCardTone;
30
- /** Eyebrow text antes do título (ex: "Bloqueio", "Limite"). */
31
- eyebrow?: string;
32
- /** Component de link customizado (ex: next/link). default = `<a>`. */
33
- linkAs?: ComponentType<{
34
- href: string;
35
- className?: string;
36
- children: ReactNode;
37
- }>;
38
- className?: string;
39
- }
40
- declare function BlockerCard({ title, description, action, actionHref, onAction, tone, eyebrow, linkAs: LinkAs, className, }: BlockerCardProps): react.JSX.Element;
41
-
42
- export { BlockerCard, type BlockerCardProps, type BlockerCardTone };
@@ -1,45 +0,0 @@
1
- import "../chunk-ORMEWXMH.js";
2
- const TONE = {
3
- danger: {
4
- container: "border-danger-border bg-danger-soft",
5
- eyebrow: "text-danger-text",
6
- action: "border-danger-border bg-surface-default text-danger-text hover:bg-danger-soft"
7
- },
8
- warning: {
9
- container: "border-warning-border bg-warning-soft",
10
- eyebrow: "text-warning-text",
11
- action: "border-warning-border bg-surface-default text-warning-text hover:bg-warning-soft"
12
- },
13
- info: {
14
- container: "border-info-border bg-info-soft",
15
- eyebrow: "text-info-text",
16
- action: "border-info-border bg-surface-default text-info-text hover:bg-info-soft"
17
- }
18
- };
19
- const DEFAULT_EYEBROW = {
20
- danger: "Bloqueio",
21
- warning: "Aten\xE7\xE3o",
22
- info: "Aviso"
23
- };
24
- function DefaultLink({ href, className, children }) {
25
- return /* @__PURE__ */ React.createElement("a", { href, className }, children);
26
- }
27
- function BlockerCard({
28
- title,
29
- description,
30
- action,
31
- actionHref,
32
- onAction,
33
- tone = "danger",
34
- eyebrow,
35
- linkAs: LinkAs = DefaultLink,
36
- className = ""
37
- }) {
38
- const palette = TONE[tone];
39
- const eyebrowText = eyebrow != null ? eyebrow : DEFAULT_EYEBROW[tone];
40
- const actionClass = ["shrink-0 rounded-(--radius-card) border px-3 py-1.5 text-caption font-medium transition-colors whitespace-nowrap", palette.action].join(" ");
41
- return /* @__PURE__ */ React.createElement("div", { className: ["rounded-(--radius-card) border p-4", palette.container, className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: ["text-caption font-semibold uppercase tracking-wide", palette.eyebrow].join(" ") }, eyebrowText), /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 font-semibold text-fg-primary text-label" }, title), /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-label text-fg-secondary" }, description)), action && actionHref && /* @__PURE__ */ React.createElement(LinkAs, { href: actionHref, className: actionClass }, action), action && !actionHref && onAction && /* @__PURE__ */ React.createElement("button", { type: "button", onClick: onAction, className: actionClass }, action)));
42
- }
43
- export {
44
- BlockerCard
45
- };
@@ -1,31 +0,0 @@
1
- import * as react from 'react';
2
- import { ReactNode } from 'react';
3
-
4
- /**
5
- * BottomSheet — drawer ancorado na borda inferior. Padrão mobile-first;
6
- * em desktop renderiza centralizado mais estreito (responde ao viewport).
7
- *
8
- * Uso:
9
- * <BottomSheet open={open} onClose={() => setOpen(false)} title="Filtros">
10
- * <p>Conteúdo</p>
11
- * </BottomSheet>
12
- *
13
- * Recursos: backdrop com fade, swipe-to-dismiss (em mobile), trap focus básico,
14
- * ESC fecha, snap points opcionais (full / half / auto).
15
- */
16
- interface BottomSheetProps {
17
- open: boolean;
18
- onClose: () => void;
19
- title?: string;
20
- children: ReactNode;
21
- /** Altura do sheet. default = "auto" (cresce até max-h). */
22
- snap?: 'auto' | 'half' | 'full';
23
- /** Esconde header + close button. default = false. */
24
- hideHeader?: boolean;
25
- /** Fecha ao clicar no backdrop. default = true. */
26
- closeOnBackdrop?: boolean;
27
- className?: string;
28
- }
29
- declare const BottomSheet: react.ForwardRefExoticComponent<BottomSheetProps & react.RefAttributes<HTMLDivElement>>;
30
-
31
- export { BottomSheet, type BottomSheetProps };