@proyecto-viviana/silapse 0.4.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 (394) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +192 -0
  3. package/dist/accordion/index.d.ts +6 -0
  4. package/dist/accordion/index.d.ts.map +1 -0
  5. package/dist/actionbar/index.d.ts +34 -0
  6. package/dist/actionbar/index.d.ts.map +1 -0
  7. package/dist/actiongroup/index.d.ts +42 -0
  8. package/dist/actiongroup/index.d.ts.map +1 -0
  9. package/dist/alert/index.d.ts +13 -0
  10. package/dist/alert/index.d.ts.map +1 -0
  11. package/dist/autocomplete/index.d.ts +51 -0
  12. package/dist/autocomplete/index.d.ts.map +1 -0
  13. package/dist/avatar/index.d.ts +18 -0
  14. package/dist/avatar/index.d.ts.map +1 -0
  15. package/dist/badge/index.d.ts +12 -0
  16. package/dist/badge/index.d.ts.map +1 -0
  17. package/dist/breadcrumbs/index.d.ts +38 -0
  18. package/dist/breadcrumbs/index.d.ts.map +1 -0
  19. package/dist/button/ActionButton.d.ts +21 -0
  20. package/dist/button/ActionButton.d.ts.map +1 -0
  21. package/dist/button/Button.d.ts +19 -0
  22. package/dist/button/Button.d.ts.map +1 -0
  23. package/dist/button/ClearButton.d.ts +19 -0
  24. package/dist/button/ClearButton.d.ts.map +1 -0
  25. package/dist/button/FieldButton.d.ts +16 -0
  26. package/dist/button/FieldButton.d.ts.map +1 -0
  27. package/dist/button/LogicButton.d.ts +16 -0
  28. package/dist/button/LogicButton.d.ts.map +1 -0
  29. package/dist/button/ToggleButton.d.ts +19 -0
  30. package/dist/button/ToggleButton.d.ts.map +1 -0
  31. package/dist/button/index.d.ts +13 -0
  32. package/dist/button/index.d.ts.map +1 -0
  33. package/dist/button/types.d.ts +23 -0
  34. package/dist/button/types.d.ts.map +1 -0
  35. package/dist/buttongroup/index.d.ts +11 -0
  36. package/dist/buttongroup/index.d.ts.map +1 -0
  37. package/dist/calendar/DateField.d.ts +47 -0
  38. package/dist/calendar/DateField.d.ts.map +1 -0
  39. package/dist/calendar/DatePicker.d.ts +28 -0
  40. package/dist/calendar/DatePicker.d.ts.map +1 -0
  41. package/dist/calendar/DateRangePicker.d.ts +26 -0
  42. package/dist/calendar/DateRangePicker.d.ts.map +1 -0
  43. package/dist/calendar/RangeCalendar.d.ts +42 -0
  44. package/dist/calendar/RangeCalendar.d.ts.map +1 -0
  45. package/dist/calendar/TimeField.d.ts +44 -0
  46. package/dist/calendar/TimeField.d.ts.map +1 -0
  47. package/dist/calendar/index.d.ts +50 -0
  48. package/dist/calendar/index.d.ts.map +1 -0
  49. package/dist/card/index.d.ts +11 -0
  50. package/dist/card/index.d.ts.map +1 -0
  51. package/dist/checkbox/index.d.ts +43 -0
  52. package/dist/checkbox/index.d.ts.map +1 -0
  53. package/dist/color/ColorEditor.d.ts +17 -0
  54. package/dist/color/ColorEditor.d.ts.map +1 -0
  55. package/dist/color/ColorSwatchPicker.d.ts +36 -0
  56. package/dist/color/ColorSwatchPicker.d.ts.map +1 -0
  57. package/dist/color/index.d.ts +233 -0
  58. package/dist/color/index.d.ts.map +1 -0
  59. package/dist/combobox/index.d.ts +81 -0
  60. package/dist/combobox/index.d.ts.map +1 -0
  61. package/dist/components.css +1152 -0
  62. package/dist/contextualhelp/index.d.ts +18 -0
  63. package/dist/contextualhelp/index.d.ts.map +1 -0
  64. package/dist/custom/calendar-card/index.d.ts +12 -0
  65. package/dist/custom/calendar-card/index.d.ts.map +1 -0
  66. package/dist/custom/chip/index.d.ts +16 -0
  67. package/dist/custom/chip/index.d.ts.map +1 -0
  68. package/dist/custom/conversation/index.d.ts +32 -0
  69. package/dist/custom/conversation/index.d.ts.map +1 -0
  70. package/dist/custom/event-card/index.d.ts +30 -0
  71. package/dist/custom/event-card/index.d.ts.map +1 -0
  72. package/dist/custom/header/index.d.ts +16 -0
  73. package/dist/custom/header/index.d.ts.map +1 -0
  74. package/dist/custom/lateral-nav/index.d.ts +32 -0
  75. package/dist/custom/lateral-nav/index.d.ts.map +1 -0
  76. package/dist/custom/logo/index.d.ts +28 -0
  77. package/dist/custom/logo/index.d.ts.map +1 -0
  78. package/dist/custom/nav-header/index.d.ts +13 -0
  79. package/dist/custom/nav-header/index.d.ts.map +1 -0
  80. package/dist/custom/page-layout/index.d.ts +13 -0
  81. package/dist/custom/page-layout/index.d.ts.map +1 -0
  82. package/dist/custom/profile-card/index.d.ts +16 -0
  83. package/dist/custom/profile-card/index.d.ts.map +1 -0
  84. package/dist/custom/project-card/index.d.ts +24 -0
  85. package/dist/custom/project-card/index.d.ts.map +1 -0
  86. package/dist/custom/timeline-item/index.d.ts +28 -0
  87. package/dist/custom/timeline-item/index.d.ts.map +1 -0
  88. package/dist/datepicker/index.d.ts +10 -0
  89. package/dist/datepicker/index.d.ts.map +1 -0
  90. package/dist/dialog/AlertDialog.d.ts +41 -0
  91. package/dist/dialog/AlertDialog.d.ts.map +1 -0
  92. package/dist/dialog/Dialog.d.ts +62 -0
  93. package/dist/dialog/Dialog.d.ts.map +1 -0
  94. package/dist/dialog/index.d.ts +5 -0
  95. package/dist/dialog/index.d.ts.map +1 -0
  96. package/dist/disclosure/index.d.ts +84 -0
  97. package/dist/disclosure/index.d.ts.map +1 -0
  98. package/dist/divider/index.d.ts +6 -0
  99. package/dist/divider/index.d.ts.map +1 -0
  100. package/dist/dnd/index.d.ts +7 -0
  101. package/dist/dnd/index.d.ts.map +1 -0
  102. package/dist/dropzone/index.d.ts +13 -0
  103. package/dist/dropzone/index.d.ts.map +1 -0
  104. package/dist/filetrigger/index.d.ts +13 -0
  105. package/dist/filetrigger/index.d.ts.map +1 -0
  106. package/dist/form/Field.d.ts +35 -0
  107. package/dist/form/Field.d.ts.map +1 -0
  108. package/dist/form/HelpText.d.ts +23 -0
  109. package/dist/form/HelpText.d.ts.map +1 -0
  110. package/dist/form/index.d.ts +20 -0
  111. package/dist/form/index.d.ts.map +1 -0
  112. package/dist/gridlist/index.d.ts +92 -0
  113. package/dist/gridlist/index.d.ts.map +1 -0
  114. package/dist/icon/Illustration.d.ts +22 -0
  115. package/dist/icon/Illustration.d.ts.map +1 -0
  116. package/dist/icon/UIIcon.d.ts +24 -0
  117. package/dist/icon/UIIcon.d.ts.map +1 -0
  118. package/dist/icon/icons/GitHubIcon.d.ts +8 -0
  119. package/dist/icon/icons/GitHubIcon.d.ts.map +1 -0
  120. package/dist/icon/index.d.ts +40 -0
  121. package/dist/icon/index.d.ts.map +1 -0
  122. package/dist/illustratedmessage/index.d.ts +14 -0
  123. package/dist/illustratedmessage/index.d.ts.map +1 -0
  124. package/dist/image/index.d.ts +11 -0
  125. package/dist/image/index.d.ts.map +1 -0
  126. package/dist/index.d.ts +231 -0
  127. package/dist/index.d.ts.map +1 -0
  128. package/dist/index.js +10697 -0
  129. package/dist/index.js.map +1 -0
  130. package/dist/index.ssr.js +8944 -0
  131. package/dist/index.ssr.js.map +1 -0
  132. package/dist/inlinealert/index.d.ts +6 -0
  133. package/dist/inlinealert/index.d.ts.map +1 -0
  134. package/dist/label/index.d.ts +14 -0
  135. package/dist/label/index.d.ts.map +1 -0
  136. package/dist/labeledvalue/index.d.ts +25 -0
  137. package/dist/labeledvalue/index.d.ts.map +1 -0
  138. package/dist/landmark/index.d.ts +83 -0
  139. package/dist/landmark/index.d.ts.map +1 -0
  140. package/dist/layout/Flex.d.ts +29 -0
  141. package/dist/layout/Flex.d.ts.map +1 -0
  142. package/dist/layout/Grid.d.ts +37 -0
  143. package/dist/layout/Grid.d.ts.map +1 -0
  144. package/dist/layout/css-utils.d.ts +23 -0
  145. package/dist/layout/css-utils.d.ts.map +1 -0
  146. package/dist/layout/index.d.ts +11 -0
  147. package/dist/layout/index.d.ts.map +1 -0
  148. package/dist/link/index.d.ts +39 -0
  149. package/dist/link/index.d.ts.map +1 -0
  150. package/dist/list/index.d.ts +6 -0
  151. package/dist/list/index.d.ts.map +1 -0
  152. package/dist/listbox/index.d.ts +47 -0
  153. package/dist/listbox/index.d.ts.map +1 -0
  154. package/dist/menu/ActionMenu.d.ts +24 -0
  155. package/dist/menu/ActionMenu.d.ts.map +1 -0
  156. package/dist/menu/ContextualHelpTrigger.d.ts +36 -0
  157. package/dist/menu/ContextualHelpTrigger.d.ts.map +1 -0
  158. package/dist/menu/SubmenuTrigger.d.ts +14 -0
  159. package/dist/menu/SubmenuTrigger.d.ts.map +1 -0
  160. package/dist/menu/index.d.ts +80 -0
  161. package/dist/menu/index.d.ts.map +1 -0
  162. package/dist/meter/index.d.ts +51 -0
  163. package/dist/meter/index.d.ts.map +1 -0
  164. package/dist/numberfield/index.d.ts +32 -0
  165. package/dist/numberfield/index.d.ts.map +1 -0
  166. package/dist/overlays/Modal.d.ts +21 -0
  167. package/dist/overlays/Modal.d.ts.map +1 -0
  168. package/dist/overlays/OpenTransition.d.ts +46 -0
  169. package/dist/overlays/OpenTransition.d.ts.map +1 -0
  170. package/dist/overlays/Overlay.d.ts +21 -0
  171. package/dist/overlays/Overlay.d.ts.map +1 -0
  172. package/dist/overlays/Tray.d.ts +18 -0
  173. package/dist/overlays/Tray.d.ts.map +1 -0
  174. package/dist/overlays/index.d.ts +18 -0
  175. package/dist/overlays/index.d.ts.map +1 -0
  176. package/dist/picker/index.d.ts +6 -0
  177. package/dist/picker/index.d.ts.map +1 -0
  178. package/dist/popover/index.d.ts +86 -0
  179. package/dist/popover/index.d.ts.map +1 -0
  180. package/dist/progress/ProgressCircle.d.ts +31 -0
  181. package/dist/progress/ProgressCircle.d.ts.map +1 -0
  182. package/dist/progress/index.d.ts +8 -0
  183. package/dist/progress/index.d.ts.map +1 -0
  184. package/dist/progress-bar/index.d.ts +51 -0
  185. package/dist/progress-bar/index.d.ts.map +1 -0
  186. package/dist/provider/index.d.ts +77 -0
  187. package/dist/provider/index.d.ts.map +1 -0
  188. package/dist/radio/index.d.ts +39 -0
  189. package/dist/radio/index.d.ts.map +1 -0
  190. package/dist/searchfield/index.d.ts +29 -0
  191. package/dist/searchfield/index.d.ts.map +1 -0
  192. package/dist/select/index.d.ts +72 -0
  193. package/dist/select/index.d.ts.map +1 -0
  194. package/dist/separator/index.d.ts +38 -0
  195. package/dist/separator/index.d.ts.map +1 -0
  196. package/dist/shared-element/index.d.ts +10 -0
  197. package/dist/shared-element/index.d.ts.map +1 -0
  198. package/dist/slider/RangeSlider.d.ts +48 -0
  199. package/dist/slider/RangeSlider.d.ts.map +1 -0
  200. package/dist/slider/index.d.ts +32 -0
  201. package/dist/slider/index.d.ts.map +1 -0
  202. package/dist/statuslight/index.d.ts +22 -0
  203. package/dist/statuslight/index.d.ts.map +1 -0
  204. package/dist/steplist/index.d.ts +15 -0
  205. package/dist/steplist/index.d.ts.map +1 -0
  206. package/dist/story-utils/ErrorBoundary.d.ts +17 -0
  207. package/dist/story-utils/ErrorBoundary.d.ts.map +1 -0
  208. package/dist/story-utils/generatePowerset.d.ts +32 -0
  209. package/dist/story-utils/generatePowerset.d.ts.map +1 -0
  210. package/dist/story-utils/index.d.ts +9 -0
  211. package/dist/story-utils/index.d.ts.map +1 -0
  212. package/dist/style-macro-s1/index.d.ts +5 -0
  213. package/dist/style-macro-s1/index.d.ts.map +1 -0
  214. package/dist/styles.css +487 -0
  215. package/dist/switch/ToggleSwitch.d.ts +28 -0
  216. package/dist/switch/ToggleSwitch.d.ts.map +1 -0
  217. package/dist/switch/index.d.ts +26 -0
  218. package/dist/switch/index.d.ts.map +1 -0
  219. package/dist/table/index.d.ts +140 -0
  220. package/dist/table/index.d.ts.map +1 -0
  221. package/dist/tabs/index.d.ts +56 -0
  222. package/dist/tabs/index.d.ts.map +1 -0
  223. package/dist/tag/index.d.ts +6 -0
  224. package/dist/tag/index.d.ts.map +1 -0
  225. package/dist/tag-group/index.d.ts +84 -0
  226. package/dist/tag-group/index.d.ts.map +1 -0
  227. package/dist/text/Heading.d.ts +22 -0
  228. package/dist/text/Heading.d.ts.map +1 -0
  229. package/dist/text/Keyboard.d.ts +16 -0
  230. package/dist/text/Keyboard.d.ts.map +1 -0
  231. package/dist/text/index.d.ts +20 -0
  232. package/dist/text/index.d.ts.map +1 -0
  233. package/dist/textfield/TextArea.d.ts +30 -0
  234. package/dist/textfield/TextArea.d.ts.map +1 -0
  235. package/dist/textfield/index.d.ts +27 -0
  236. package/dist/textfield/index.d.ts.map +1 -0
  237. package/dist/theme/types.d.ts +10 -0
  238. package/dist/theme/types.d.ts.map +1 -0
  239. package/dist/theme-dark/index.d.ts +10 -0
  240. package/dist/theme-dark/index.d.ts.map +1 -0
  241. package/dist/theme-default/index.d.ts +8 -0
  242. package/dist/theme-default/index.d.ts.map +1 -0
  243. package/dist/theme-express/index.d.ts +5 -0
  244. package/dist/theme-express/index.d.ts.map +1 -0
  245. package/dist/theme-light/index.d.ts +10 -0
  246. package/dist/theme-light/index.d.ts.map +1 -0
  247. package/dist/theme.css +360 -0
  248. package/dist/toast/index.d.ts +101 -0
  249. package/dist/toast/index.d.ts.map +1 -0
  250. package/dist/toolbar/index.d.ts +42 -0
  251. package/dist/toolbar/index.d.ts.map +1 -0
  252. package/dist/tooltip/index.d.ts +78 -0
  253. package/dist/tooltip/index.d.ts.map +1 -0
  254. package/dist/tree/index.d.ts +99 -0
  255. package/dist/tree/index.d.ts.map +1 -0
  256. package/dist/view/Content.d.ts +37 -0
  257. package/dist/view/Content.d.ts.map +1 -0
  258. package/dist/view/index.d.ts +13 -0
  259. package/dist/view/index.d.ts.map +1 -0
  260. package/dist/well/index.d.ts +11 -0
  261. package/dist/well/index.d.ts.map +1 -0
  262. package/package.json +67 -0
  263. package/src/accordion/index.tsx +19 -0
  264. package/src/actionbar/index.tsx +92 -0
  265. package/src/actiongroup/index.tsx +110 -0
  266. package/src/alert/index.tsx +59 -0
  267. package/src/assets/favicon.png +0 -0
  268. package/src/assets/fire.gif +0 -0
  269. package/src/autocomplete/index.tsx +151 -0
  270. package/src/avatar/index.tsx +75 -0
  271. package/src/badge/index.tsx +43 -0
  272. package/src/breadcrumbs/index.tsx +212 -0
  273. package/src/button/ActionButton.tsx +80 -0
  274. package/src/button/Button.tsx +76 -0
  275. package/src/button/ClearButton.tsx +81 -0
  276. package/src/button/FieldButton.tsx +60 -0
  277. package/src/button/LogicButton.tsx +62 -0
  278. package/src/button/ToggleButton.tsx +77 -0
  279. package/src/button/index.ts +12 -0
  280. package/src/button/types.ts +24 -0
  281. package/src/buttongroup/index.tsx +25 -0
  282. package/src/calendar/DateField.tsx +208 -0
  283. package/src/calendar/DatePicker.tsx +257 -0
  284. package/src/calendar/DateRangePicker.tsx +254 -0
  285. package/src/calendar/RangeCalendar.tsx +238 -0
  286. package/src/calendar/TimeField.tsx +204 -0
  287. package/src/calendar/index.tsx +225 -0
  288. package/src/card/index.tsx +24 -0
  289. package/src/checkbox/index.tsx +259 -0
  290. package/src/color/ColorEditor.tsx +60 -0
  291. package/src/color/ColorSwatchPicker.tsx +169 -0
  292. package/src/color/index.tsx +725 -0
  293. package/src/combobox/index.tsx +398 -0
  294. package/src/components.css +1152 -0
  295. package/src/contextualhelp/index.tsx +42 -0
  296. package/src/custom/calendar-card/index.tsx +66 -0
  297. package/src/custom/chip/index.tsx +47 -0
  298. package/src/custom/conversation/index.tsx +107 -0
  299. package/src/custom/event-card/index.tsx +133 -0
  300. package/src/custom/header/index.tsx +33 -0
  301. package/src/custom/lateral-nav/index.tsx +88 -0
  302. package/src/custom/logo/index.tsx +58 -0
  303. package/src/custom/nav-header/index.tsx +45 -0
  304. package/src/custom/page-layout/index.tsx +29 -0
  305. package/src/custom/profile-card/index.tsx +64 -0
  306. package/src/custom/project-card/index.tsx +59 -0
  307. package/src/custom/timeline-item/index.tsx +105 -0
  308. package/src/datepicker/index.tsx +23 -0
  309. package/src/dialog/AlertDialog.tsx +140 -0
  310. package/src/dialog/Dialog.tsx +195 -0
  311. package/src/dialog/index.tsx +5 -0
  312. package/src/disclosure/index.tsx +310 -0
  313. package/src/divider/index.tsx +11 -0
  314. package/src/dnd/index.tsx +23 -0
  315. package/src/dropzone/index.tsx +48 -0
  316. package/src/filetrigger/index.tsx +28 -0
  317. package/src/form/Field.tsx +94 -0
  318. package/src/form/HelpText.tsx +48 -0
  319. package/src/form/index.tsx +48 -0
  320. package/src/gridlist/index.tsx +403 -0
  321. package/src/icon/Illustration.tsx +55 -0
  322. package/src/icon/UIIcon.tsx +59 -0
  323. package/src/icon/icons/GitHubIcon.tsx +22 -0
  324. package/src/icon/index.tsx +81 -0
  325. package/src/illustratedmessage/index.tsx +44 -0
  326. package/src/image/index.tsx +22 -0
  327. package/src/index.ts +666 -0
  328. package/src/inlinealert/index.tsx +10 -0
  329. package/src/label/index.tsx +36 -0
  330. package/src/labeledvalue/index.tsx +62 -0
  331. package/src/landmark/index.tsx +231 -0
  332. package/src/layout/Flex.tsx +94 -0
  333. package/src/layout/Grid.tsx +98 -0
  334. package/src/layout/css-utils.ts +31 -0
  335. package/src/layout/index.tsx +12 -0
  336. package/src/link/index.tsx +132 -0
  337. package/src/list/index.tsx +17 -0
  338. package/src/listbox/index.tsx +251 -0
  339. package/src/menu/ActionMenu.tsx +117 -0
  340. package/src/menu/ContextualHelpTrigger.tsx +122 -0
  341. package/src/menu/SubmenuTrigger.tsx +28 -0
  342. package/src/menu/index.tsx +309 -0
  343. package/src/meter/index.tsx +141 -0
  344. package/src/numberfield/index.tsx +282 -0
  345. package/src/overlays/Modal.tsx +64 -0
  346. package/src/overlays/OpenTransition.tsx +110 -0
  347. package/src/overlays/Overlay.tsx +47 -0
  348. package/src/overlays/Tray.tsx +48 -0
  349. package/src/overlays/index.tsx +55 -0
  350. package/src/picker/index.tsx +20 -0
  351. package/src/popover/index.tsx +261 -0
  352. package/src/progress/ProgressCircle.tsx +114 -0
  353. package/src/progress/index.tsx +14 -0
  354. package/src/progress-bar/index.tsx +144 -0
  355. package/src/provider/index.tsx +358 -0
  356. package/src/radio/index.tsx +192 -0
  357. package/src/searchfield/index.tsx +274 -0
  358. package/src/select/index.tsx +366 -0
  359. package/src/separator/index.tsx +110 -0
  360. package/src/shared-element/index.tsx +38 -0
  361. package/src/slider/RangeSlider.tsx +344 -0
  362. package/src/slider/index.tsx +232 -0
  363. package/src/statuslight/index.tsx +54 -0
  364. package/src/steplist/index.tsx +40 -0
  365. package/src/story-utils/ErrorBoundary.tsx +50 -0
  366. package/src/story-utils/generatePowerset.ts +63 -0
  367. package/src/story-utils/index.ts +13 -0
  368. package/src/style-macro-s1/index.ts +8 -0
  369. package/src/styles.css +487 -0
  370. package/src/switch/ToggleSwitch.tsx +114 -0
  371. package/src/switch/index.tsx +95 -0
  372. package/src/table/index.tsx +534 -0
  373. package/src/tabs/index.tsx +276 -0
  374. package/src/tag/index.tsx +12 -0
  375. package/src/tag-group/index.tsx +246 -0
  376. package/src/test-utils/index.ts +40 -0
  377. package/src/text/Heading.tsx +61 -0
  378. package/src/text/Keyboard.tsx +38 -0
  379. package/src/text/index.tsx +52 -0
  380. package/src/textfield/TextArea.tsx +193 -0
  381. package/src/textfield/index.tsx +191 -0
  382. package/src/theme/types.ts +10 -0
  383. package/src/theme-dark/index.ts +63 -0
  384. package/src/theme-default/index.ts +8 -0
  385. package/src/theme-express/index.ts +6 -0
  386. package/src/theme-light/index.ts +63 -0
  387. package/src/theme.css +360 -0
  388. package/src/toast/index.tsx +328 -0
  389. package/src/toolbar/index.tsx +110 -0
  390. package/src/tooltip/index.tsx +197 -0
  391. package/src/tree/index.tsx +496 -0
  392. package/src/view/Content.tsx +76 -0
  393. package/src/view/index.tsx +28 -0
  394. package/src/well/index.tsx +24 -0
package/src/theme.css ADDED
@@ -0,0 +1,360 @@
1
+ /*
2
+ * Silapse Design System — Theme Variables
3
+ *
4
+ * Dual-mode: Dark (default) & Light (via [data-theme="light"])
5
+ * Aesthetic: Brutalist void — zero border-radius, drop-shadow glows, angular clip-paths
6
+ *
7
+ * IMPORTANT: Due to Tailwind v4's @theme processing, the @theme block
8
+ * should be COPIED into your app's CSS, not imported via @import.
9
+ * The :root and [data-theme="light"] blocks CAN be imported.
10
+ *
11
+ * Usage:
12
+ *
13
+ * 1. Add fonts in HTML <head>:
14
+ * <link rel="preconnect" href="https://fonts.googleapis.com">
15
+ * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16
+ * <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Sen:wght@400..800&display=swap" rel="stylesheet">
17
+ *
18
+ * 2. In your app's CSS:
19
+ * @import "tailwindcss";
20
+ *
21
+ * @theme {
22
+ * // Copy the @theme block below
23
+ * }
24
+ *
25
+ * @import "@proyecto-viviana/silapse/components.css";
26
+ */
27
+
28
+ @theme {
29
+ /* ── Breakpoints ── */
30
+ --breakpoint-xxs: 320px;
31
+ --breakpoint-xs: 475px;
32
+
33
+ /* ══════════════════════════════════════════
34
+ RAW COLOR SCALES (absolute, mode-independent)
35
+ These are the base palettes. Applied/semantic
36
+ variables below reference these conceptually.
37
+ ══════════════════════════════════════════ */
38
+
39
+ /* Grey Scale (9 shades — pure neutral for void aesthetic) */
40
+ --color-grey-50: #ffffff;
41
+ --color-grey-100: #e0e0e0;
42
+ --color-grey-200: #c0c0c0;
43
+ --color-grey-300: #a0a0a0;
44
+ --color-grey-400: #606060;
45
+ --color-grey-500: #404040;
46
+ --color-grey-600: #1a1a1a;
47
+ --color-grey-700: #111111;
48
+ --color-grey-800: #0a0a0a;
49
+ --color-grey-900: #000000;
50
+
51
+ /* Blue Scale (9 shades — bright blues for void contrast) */
52
+ --color-blue-50: #f0f7ff;
53
+ --color-blue-100: #ddf4ff;
54
+ --color-blue-200: #b6e3ff;
55
+ --color-blue-300: #80ccff;
56
+ --color-blue-400: #54aeff;
57
+ --color-blue-500: #388bfd;
58
+ --color-blue-600: #1f6feb;
59
+ --color-blue-700: #1158c7;
60
+ --color-blue-800: #0d419d;
61
+ --color-blue-900: #050a12;
62
+
63
+ /* Pink Scale (9 shades — vivid pinks for void contrast) */
64
+ --color-pink-50: #fff5f9;
65
+ --color-pink-100: #ffe4f3;
66
+ --color-pink-200: #ffc9e9;
67
+ --color-pink-300: #ffa0d5;
68
+ --color-pink-400: #f778ba;
69
+ --color-pink-500: #d84a8f;
70
+ --color-pink-600: #b13570;
71
+ --color-pink-700: #912b5a;
72
+ --color-pink-800: #702244;
73
+ --color-pink-900: #0f0508;
74
+
75
+ /* ══════════════════════════════════════════
76
+ APPLIED COLOR SCALES (dark mode defaults)
77
+ Used by vui-* component classes.
78
+ ══════════════════════════════════════════ */
79
+
80
+ /* Background — blue-grey tinted */
81
+ --color-bg-100: #3B5260;
82
+ --color-bg-200: #293E4B;
83
+ --color-bg-300: #24313a;
84
+ --color-bg-400: #1D272E;
85
+ --color-bg-light: #515151;
86
+
87
+ /* Primary — Silapse blue scale */
88
+ --color-primary-100: #ddf4ff;
89
+ --color-primary-200: #b6e3ff;
90
+ --color-primary-300: #80ccff;
91
+ --color-primary-400: #54aeff;
92
+ --color-primary-500: #4da0ff;
93
+ --color-primary-600: #3080f4;
94
+ --color-primary-700: #1158c7;
95
+ --color-primary-800: #0d419d;
96
+
97
+ /* Accent — Silapse pink */
98
+ --color-accent: #DF5C9A;
99
+ --color-accent-100: #0f0508;
100
+ --color-accent-200: #FFB2D7;
101
+ --color-accent-300: #FF88C0;
102
+ --color-accent-400: #f778ba;
103
+ --color-accent-500: #d84a8f;
104
+ --color-accent-highlight: #e2a2be;
105
+
106
+ /* Semantic colors */
107
+ --color-success-100: #E5FFF3;
108
+ --color-success-400: #C2FFC8;
109
+ --color-success-600: #238636;
110
+ --color-warning-100: #FFFBE5;
111
+ --color-warning-400: #FFDD87;
112
+ --color-warning-600: #966a13;
113
+ --color-danger-100: #FFE5E5;
114
+ --color-danger-400: #FF8787;
115
+ --color-danger-600: #da3633;
116
+
117
+ /* Cards */
118
+ --color-cards-bg: #373737;
119
+ --color-cards-bg-load: #484848;
120
+ --color-correct: #83f1a7;
121
+ --color-incorrect: #e74c3c;
122
+
123
+ /* ══════════════════════════════════════════
124
+ SEMANTIC MAPPINGS (dark mode defaults)
125
+ High-level tokens for layout & typography.
126
+ Used by silapse-* component classes.
127
+ ══════════════════════════════════════════ */
128
+
129
+ /* Surfaces */
130
+ --color-background: #141414;
131
+ --color-surface: #16191B;
132
+ --color-surface-elevated: #111111;
133
+
134
+ /* Blue depth backgrounds */
135
+ --color-bg-blue-deep: #050a12;
136
+ --color-bg-blue-dark: #081020;
137
+ --color-bg-blue-mid: #0a1830;
138
+ --color-bg-blue-light: #102040;
139
+
140
+ /* Text */
141
+ --color-text: #C0C6CA;
142
+ --color-text-secondary: #a0a0a0;
143
+ --color-text-muted: #A2AEB4;
144
+ --color-text-dim: #4F6D85;
145
+ --color-text-disabled: #404040;
146
+
147
+ /* Borders */
148
+ --color-border: #1D303A;
149
+ --color-border-muted: #141414;
150
+ --color-divider: #141414;
151
+
152
+ /* Semantic base + dim */
153
+ --color-success: #3fb950;
154
+ --color-success-dim: #238636;
155
+ --color-warning: #d29922;
156
+ --color-warning-dim: #966a13;
157
+ --color-danger: #f85149;
158
+ --color-danger-dim: #da3633;
159
+
160
+ /* ── Typography ── */
161
+ --font-sen: 'Sen', sans-serif;
162
+ --font-jost: 'Jost', sans-serif;
163
+ --font-sans: 'Sen', sans-serif;
164
+ --font-mono: 'JetBrains Mono', monospace;
165
+ --font-title: 'Jost', system-ui, sans-serif;
166
+ --font-body: 'Sen', system-ui, sans-serif;
167
+
168
+ /* ── Radius — Brutalist: zero ── */
169
+ --radius-xs: 0px;
170
+ --radius-sm: 0px;
171
+ --radius-md: 0px;
172
+ --radius-lg: 0px;
173
+ --radius-xl: 0px;
174
+ --radius-2xl: 0px;
175
+ --radius-3xl: 0px;
176
+ --radius-4xl: 0px;
177
+ }
178
+
179
+ /* ══════════════════════════════════════════════
180
+ DESIGN TOKENS (dark mode defaults)
181
+ ══════════════════════════════════════════════ */
182
+ :root {
183
+ /* Radius — Brutalist: none */
184
+ --radius-sm: 0;
185
+ --radius-md: 0;
186
+ --radius-lg: 0;
187
+ --radius-xl: 0;
188
+
189
+ /* Shadows — Brutalist: none (use drop-shadow glows instead) */
190
+ --shadow-sm: none;
191
+ --shadow-md: none;
192
+ --shadow-lg: none;
193
+ --shadow-glow-accent: none;
194
+ --shadow-glow-primary: none;
195
+
196
+ /* Animation */
197
+ --transition-fast: 0.1s ease;
198
+ --transition-normal: 0.15s ease;
199
+ --transition-slow: 0.25s ease;
200
+
201
+ /* Component dimensions */
202
+ --navbar-height: 40px;
203
+ --sidebar-width: 280px;
204
+ --statusbar-height: 32px;
205
+ --panel-gap: 1px;
206
+
207
+ /* Dim versions (wire base / inactive elements) */
208
+ --color-primary-dim: #1a3040;
209
+ --color-accent-dim: #301520;
210
+
211
+ /* Header background */
212
+ --color-header-bg: #181818;
213
+
214
+ /* Glow effects (for drop-shadow filters) */
215
+ --color-primary-glow: rgba(128, 204, 255, 0.6);
216
+ --color-accent-glow: rgba(255, 160, 213, 0.6);
217
+
218
+ /* Fusion glow */
219
+ --color-fusion-glow: rgba(180, 140, 230, 0.7);
220
+
221
+ /* Semantic background tints */
222
+ --color-success-bg: rgba(63, 185, 80, 0.1);
223
+ --color-warning-bg: rgba(210, 153, 34, 0.1);
224
+ --color-danger-bg: rgba(248, 81, 73, 0.1);
225
+ }
226
+
227
+ /* ══════════════════════════════════════════════
228
+ LIGHT MODE — Ocean Mist
229
+ Soft ocean-inspired blues with pink accents.
230
+ AAA contrast tuned for readability.
231
+ ══════════════════════════════════════════════ */
232
+ [data-theme="light"] {
233
+ /* Raw scales — light mode variants */
234
+ --color-grey-100: #f5f5f5;
235
+ --color-grey-200: #e5e5e5;
236
+ --color-grey-300: #d4d4d4;
237
+ --color-grey-400: #a3a3a3;
238
+ --color-grey-500: #737373;
239
+ --color-grey-600: #525252;
240
+ --color-grey-700: #404040;
241
+ --color-grey-800: #262626;
242
+ --color-grey-900: #171717;
243
+
244
+ --color-blue-100: #e0f0f7;
245
+ --color-blue-200: #b6d9eb;
246
+ --color-blue-300: #8bc4db;
247
+ --color-blue-400: #75ABC7;
248
+ --color-blue-500: #5a94b3;
249
+ --color-blue-600: #3d7a9c;
250
+ --color-blue-700: #2b6080;
251
+ --color-blue-800: #1a4560;
252
+ --color-blue-900: #0d2a3d;
253
+
254
+ --color-pink-100: #fef2f7;
255
+ --color-pink-200: #fcc7e0;
256
+ --color-pink-300: #f78fb9;
257
+ --color-pink-400: #DF5C9A;
258
+ --color-pink-500: #cf2c74;
259
+ --color-pink-600: #a31f58;
260
+ --color-pink-700: #8a1a4a;
261
+ --color-pink-800: #6b143a;
262
+ --color-pink-900: #4d0f2a;
263
+
264
+ /* Applied scales */
265
+ --color-bg-100: #7096a8;
266
+ --color-bg-200: #a8c5d4;
267
+ --color-bg-300: #c8dce6;
268
+ --color-bg-400: #dbe8ef;
269
+ --color-bg-light: #ffffff;
270
+
271
+ --color-primary-100: #06131d;
272
+ --color-primary-200: #0c2436;
273
+ --color-primary-300: #133a54;
274
+ --color-primary-400: #195073;
275
+ --color-primary-500: #1e6090;
276
+ --color-primary-600: #2470a5;
277
+ --color-primary-700: #5ea8d0;
278
+ --color-primary-800: #9dcce4;
279
+
280
+ --color-accent: #a02558;
281
+ --color-accent-100: #fef2f7;
282
+ --color-accent-200: #7d1c48;
283
+ --color-accent-300: #f78fb9;
284
+ --color-accent-400: #DF5C9A;
285
+ --color-accent-500: #8a1e4a;
286
+ --color-accent-highlight: #d4508a;
287
+
288
+ --color-success-100: #E5FFF3;
289
+ --color-success-400: #1a7f37;
290
+ --color-success-600: #116329;
291
+ --color-warning-100: #FFFBE5;
292
+ --color-warning-400: #7d5200;
293
+ --color-warning-600: #654200;
294
+ --color-danger-100: #FFE5E5;
295
+ --color-danger-400: #cf222e;
296
+ --color-danger-600: #a40e26;
297
+
298
+ --color-cards-bg: #ecf2f5;
299
+ --color-cards-bg-load: #dfeaef;
300
+ --color-correct: #1a7f37;
301
+ --color-incorrect: #cf222e;
302
+
303
+ /* Semantic mappings */
304
+ --color-background: #f2f7fa;
305
+ --color-surface: #ffffff;
306
+ --color-surface-elevated: #e6f0f5;
307
+
308
+ --color-bg-blue-deep: #e0f0f7;
309
+ --color-bg-blue-dark: #b6d9eb;
310
+ --color-bg-blue-mid: #8bc4db;
311
+ --color-bg-blue-light: #75ABC7;
312
+
313
+ --color-text: #1a3040;
314
+ --color-text-secondary: #405d70;
315
+ --color-text-muted: #7096a8;
316
+ --color-text-disabled: #a8c5d4;
317
+
318
+ --color-border: #c8dce6;
319
+ --color-border-muted: #dbe8ef;
320
+ --color-divider: #dbe8ef;
321
+
322
+ --color-success: #5BC96E;
323
+ --color-success-dim: #559D87;
324
+ --color-warning: #E5C462;
325
+ --color-warning-dim: #9D8D55;
326
+ --color-danger: #E56767;
327
+ --color-danger-dim: #9D5555;
328
+
329
+ --color-primary-dim: #b6d9eb;
330
+ --color-accent-dim: #fcc7e0;
331
+ --color-header-bg: #d0e4ed;
332
+ --color-primary-glow: rgba(117, 171, 199, 0.4);
333
+ --color-accent-glow: rgba(223, 92, 154, 0.4);
334
+ --color-fusion-glow: rgba(170, 130, 180, 0.5);
335
+ --color-success-bg: rgba(63, 185, 80, 0.1);
336
+ --color-warning-bg: rgba(210, 153, 34, 0.15);
337
+ --color-danger-bg: rgba(248, 81, 73, 0.1);
338
+ }
339
+
340
+ /* ── Font Utility Classes ── */
341
+ .font-sen {
342
+ font-family: 'Sen', sans-serif;
343
+ }
344
+
345
+ .font-jost {
346
+ font-family: 'Jost', sans-serif;
347
+ }
348
+
349
+ /* ── Custom Drop Shadows ── */
350
+ .drop-shadow-title-card {
351
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
352
+ }
353
+
354
+ .drop-shadow-logo {
355
+ filter: drop-shadow(0 0 10px rgba(255, 160, 213, 0.8));
356
+ }
357
+
358
+ .shadow-primary-chip {
359
+ box-shadow: 0 2px 8px rgba(17, 88, 199, 0.4);
360
+ }
package/src/toast/index.tsx ADDED
@@ -0,0 +1,328 @@
1
+ /**
2
+ * Toast components for proyecto-viviana-silapse
3
+ *
4
+ * Toast notifications with auto-dismiss, animations, and variants.
5
+ * Built on top of solidaria-components for accessibility.
6
+ */
7
+
8
+ import { type JSX, splitProps, For, Show } from 'solid-js';
9
+ import {
10
+ Toast as HeadlessToast,
11
+ ToastRegion as HeadlessToastRegion,
12
+ ToastProvider as HeadlessToastProvider,
13
+ ToastContext,
14
+ ToastTitle as HeadlessToastTitle,
15
+ ToastDescription as HeadlessToastDescription,
16
+ ToastCloseButton as HeadlessToastCloseButton,
17
+ globalToastQueue,
18
+ addToast as headlessAddToast,
19
+ useToastContext,
20
+ type ToastContent,
21
+ type ToastProps as HeadlessToastProps,
22
+ type ToastRegionProps as HeadlessToastRegionProps,
23
+ type ToastProviderProps as HeadlessToastProviderProps,
24
+ type ToastRenderProps,
25
+ type ToastRegionRenderProps,
26
+ } from '@proyecto-viviana/solidaria-components';
27
+ import { type QueuedToast, type ToastOptions } from '@proyecto-viviana/solid-stately';
28
+
29
+ // ============================================
30
+ // TYPES
31
+ // ============================================
32
+
33
+ export type ToastPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
34
+ export type ToastVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
35
+
36
+ export interface ToastProviderProps extends HeadlessToastProviderProps {}
37
+
38
+ export interface ToastRegionProps extends Omit<HeadlessToastRegionProps, 'class' | 'style' | 'children'> {
39
+ /** The placement of the toast region. */
40
+ placement?: ToastPlacement;
41
+ /** Additional CSS class name. */
42
+ class?: string;
43
+ }
44
+
45
+ export interface ToastProps extends Omit<HeadlessToastProps, 'class' | 'style'> {
46
+ /** Additional CSS class name. */
47
+ class?: string;
48
+ }
49
+
50
+ // ============================================
51
+ // STYLES
52
+ // ============================================
53
+
54
+ const regionStyles = [
55
+ 'flex flex-col gap-3',
56
+ 'p-4',
57
+ ].join(' ');
58
+
59
+ const toastBaseStyles = [
60
+ 'flex items-start gap-3',
61
+ 'px-4 py-3',
62
+ 'rounded-lg shadow-lg',
63
+ 'min-w-[300px] max-w-[400px]',
64
+ 'border',
65
+ // Animations
66
+ 'data-[animation=entering]:animate-in data-[animation=entering]:fade-in-0 data-[animation=entering]:slide-in-from-right-5',
67
+ 'data-[animation=exiting]:animate-out data-[animation=exiting]:fade-out-0 data-[animation=exiting]:slide-out-to-right-5',
68
+ ].join(' ');
69
+
70
+ const variantStyles: Record<ToastVariant, string> = {
71
+ info: 'bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200',
72
+ success: 'bg-green-50 border-green-200 text-green-800 dark:bg-green-950 dark:border-green-800 dark:text-green-200',
73
+ warning: 'bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-200',
74
+ error: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-950 dark:border-red-800 dark:text-red-200',
75
+ neutral: 'bg-neutral-50 border-neutral-200 text-neutral-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200',
76
+ };
77
+
78
+ const iconStyles: Record<ToastVariant, string> = {
79
+ info: 'text-blue-500 dark:text-blue-400',
80
+ success: 'text-green-500 dark:text-green-400',
81
+ warning: 'text-yellow-500 dark:text-yellow-400',
82
+ error: 'text-red-500 dark:text-red-400',
83
+ neutral: 'text-neutral-500 dark:text-neutral-400',
84
+ };
85
+
86
+ const closeButtonStyles = [
87
+ 'ml-auto -mr-1 -mt-1',
88
+ 'p-1 rounded-md',
89
+ 'text-current opacity-60 hover:opacity-100',
90
+ 'transition-opacity',
91
+ 'focus:outline-none focus:ring-2 focus:ring-offset-2',
92
+ ].join(' ');
93
+
94
+ // ============================================
95
+ // ICONS
96
+ // ============================================
97
+
98
+ const InfoIcon = () => (
99
+ <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
100
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
101
+ </svg>
102
+ );
103
+
104
+ const SuccessIcon = () => (
105
+ <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
106
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
107
+ </svg>
108
+ );
109
+
110
+ const WarningIcon = () => (
111
+ <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
112
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
113
+ </svg>
114
+ );
115
+
116
+ const ErrorIcon = () => (
117
+ <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
118
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
119
+ </svg>
120
+ );
121
+
122
+ const CloseIcon = () => (
123
+ <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
124
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
125
+ </svg>
126
+ );
127
+
128
+ const getVariantIcon = (variant: ToastVariant) => {
129
+ switch (variant) {
130
+ case 'success': return <SuccessIcon />;
131
+ case 'warning': return <WarningIcon />;
132
+ case 'error': return <ErrorIcon />;
133
+ case 'info':
134
+ case 'neutral':
135
+ default: return <InfoIcon />;
136
+ }
137
+ };
138
+
139
+ // ============================================
140
+ // COMPONENTS
141
+ // ============================================
142
+
143
+ /**
144
+ * ToastProvider creates a toast queue context for descendant components.
145
+ * Wrap your app or a section that needs toast notifications.
146
+ *
147
+ * @example
148
+ * ```tsx
149
+ * <ToastProvider>
150
+ * <App />
151
+ * <ToastRegion placement="bottom-end" />
152
+ * </ToastProvider>
153
+ * ```
154
+ */
155
+ export function ToastProvider(props: ToastProviderProps): JSX.Element {
156
+ return <HeadlessToastProvider {...props} />;
157
+ }
158
+
159
+ /**
160
+ * ToastRegion displays all visible toasts in a fixed position.
161
+ *
162
+ * @example
163
+ * ```tsx
164
+ * <ToastRegion placement="bottom-end" />
165
+ * ```
166
+ */
167
+ export function ToastRegion(props: ToastRegionProps): JSX.Element {
168
+ const [local, rest] = splitProps(props, ['placement', 'class']);
169
+
170
+ return (
171
+ <HeadlessToastRegion
172
+ {...rest}
173
+ placement={local.placement ?? 'bottom-end'}
174
+ class={(_renderProps: ToastRegionRenderProps) => {
175
+ return [regionStyles, local.class ?? ''].filter(Boolean).join(' ');
176
+ }}
177
+ >
178
+ {(regionProps: ToastRegionRenderProps) => (
179
+ <For each={regionProps.visibleToasts}>
180
+ {(toast) => <Toast toast={toast} />}
181
+ </For>
182
+ )}
183
+ </HeadlessToastRegion>
184
+ );
185
+ }
186
+
187
+ /**
188
+ * Toast displays an individual notification with icon, content, and close button.
189
+ *
190
+ * Usually you don't need to use this directly - ToastRegion renders toasts automatically.
191
+ */
192
+ export function Toast(props: ToastProps): JSX.Element {
193
+ const [local, rest] = splitProps(props, ['toast', 'class']);
194
+
195
+ const content = () => local.toast.content;
196
+ const variant = (): ToastVariant => content().type ?? 'neutral';
197
+
198
+ return (
199
+ <HeadlessToast
200
+ {...rest}
201
+ toast={local.toast}
202
+ class={(_renderProps: ToastRenderProps) => {
203
+ return [
204
+ toastBaseStyles,
205
+ variantStyles[variant()],
206
+ local.class ?? '',
207
+ ].filter(Boolean).join(' ');
208
+ }}
209
+ >
210
+ {/* Icon */}
211
+ <div class={`flex-shrink-0 ${iconStyles[variant()]}`}>
212
+ {getVariantIcon(variant())}
213
+ </div>
214
+
215
+ {/* Content */}
216
+ <div class="flex-1 min-w-0">
217
+ <Show when={content().title}>
218
+ <HeadlessToastTitle class="font-semibold text-sm">{content().title}</HeadlessToastTitle>
219
+ </Show>
220
+ <Show when={content().description}>
221
+ <HeadlessToastDescription class="text-sm opacity-90 mt-1">
222
+ {content().description}
223
+ </HeadlessToastDescription>
224
+ </Show>
225
+ <Show when={content().action}>
226
+ <button
227
+ type="button"
228
+ class="mt-2 text-sm font-medium underline hover:no-underline"
229
+ onClick={content().action?.onAction}
230
+ >
231
+ {content().action?.label}
232
+ </button>
233
+ </Show>
234
+ </div>
235
+
236
+ {/* Close Button */}
237
+ <HeadlessToastCloseButton
238
+ toast={local.toast}
239
+ class={closeButtonStyles}
240
+ aria-label="Dismiss"
241
+ >
242
+ <CloseIcon />
243
+ </HeadlessToastCloseButton>
244
+ </HeadlessToast>
245
+ );
246
+ }
247
+
248
+ // ============================================
249
+ // GLOBAL TOAST API
250
+ // ============================================
251
+
252
+ /**
253
+ * Add a toast to the global queue.
254
+ * Use this to show toasts from anywhere in your app.
255
+ *
256
+ * @example
257
+ * ```tsx
258
+ * // Show a success toast
259
+ * addToast({
260
+ * title: 'Success!',
261
+ * description: 'Your changes have been saved.',
262
+ * type: 'success',
263
+ * });
264
+ *
265
+ * // Show an error toast with auto-dismiss
266
+ * addToast({
267
+ * title: 'Error',
268
+ * description: 'Something went wrong.',
269
+ * type: 'error',
270
+ * }, { timeout: 5000 });
271
+ *
272
+ * // Show a toast with action
273
+ * addToast({
274
+ * title: 'File deleted',
275
+ * type: 'info',
276
+ * action: {
277
+ * label: 'Undo',
278
+ * onAction: () => restoreFile(),
279
+ * },
280
+ * }, { timeout: 10000 });
281
+ * ```
282
+ */
283
+ export function addToast(
284
+ content: ToastContent,
285
+ options?: ToastOptions
286
+ ): string {
287
+ return headlessAddToast(content, options);
288
+ }
289
+
290
+ /**
291
+ * Convenience function to show a success toast.
292
+ */
293
+ export function toastSuccess(message: string, options?: Omit<ToastOptions, 'priority'>): string {
294
+ return addToast({ title: message, type: 'success' }, { timeout: 5000, ...options });
295
+ }
296
+
297
+ /**
298
+ * Convenience function to show an error toast.
299
+ */
300
+ export function toastError(message: string, options?: Omit<ToastOptions, 'priority'>): string {
301
+ return addToast({ title: message, type: 'error' }, { timeout: 8000, ...options });
302
+ }
303
+
304
+ /**
305
+ * Convenience function to show a warning toast.
306
+ */
307
+ export function toastWarning(message: string, options?: Omit<ToastOptions, 'priority'>): string {
308
+ return addToast({ title: message, type: 'warning' }, { timeout: 6000, ...options });
309
+ }
310
+
311
+ /**
312
+ * Convenience function to show an info toast.
313
+ */
314
+ export function toastInfo(message: string, options?: Omit<ToastOptions, 'priority'>): string {
315
+ return addToast({ title: message, type: 'info' }, { timeout: 5000, ...options });
316
+ }
317
+
318
+ // Re-exports
319
+ export {
320
+ ToastContext,
321
+ globalToastQueue,
322
+ useToastContext,
323
+ type ToastContent,
324
+ type ToastRenderProps,
325
+ type ToastRegionRenderProps,
326
+ type QueuedToast,
327
+ type ToastOptions,
328
+ };