@tollerud/ui 1.1.5 → 3.0.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 (360) hide show
  1. package/AGENTS.md +34 -11
  2. package/CHANGELOG.md +376 -0
  3. package/COMPONENTS.md +951 -0
  4. package/GETTING_STARTED.md +159 -0
  5. package/README.md +51 -43
  6. package/SKILL.md +55 -21
  7. package/components.json +18 -0
  8. package/dist/accordion.d.ts +20 -0
  9. package/dist/accordion.js +5 -0
  10. package/dist/accordion.js.map +1 -0
  11. package/dist/action-diff.d.ts +26 -0
  12. package/dist/action-diff.js +5 -0
  13. package/dist/action-diff.js.map +1 -0
  14. package/dist/action-row.d.ts +36 -0
  15. package/dist/action-row.js +6 -0
  16. package/dist/action-row.js.map +1 -0
  17. package/dist/alert-inbox.d.ts +23 -0
  18. package/dist/alert-inbox.js +6 -0
  19. package/dist/alert-inbox.js.map +1 -0
  20. package/dist/alert.d.ts +33 -0
  21. package/dist/alert.js +5 -0
  22. package/dist/alert.js.map +1 -0
  23. package/dist/approval-card.d.ts +27 -0
  24. package/dist/approval-card.js +5 -0
  25. package/dist/approval-card.js.map +1 -0
  26. package/dist/area-chart.d.ts +10 -0
  27. package/dist/area-chart.js +5 -0
  28. package/dist/area-chart.js.map +1 -0
  29. package/dist/avatar.d.ts +27 -0
  30. package/dist/avatar.js +5 -0
  31. package/dist/avatar.js.map +1 -0
  32. package/dist/backup-status-panel.d.ts +25 -0
  33. package/dist/backup-status-panel.js +6 -0
  34. package/dist/backup-status-panel.js.map +1 -0
  35. package/dist/badge.d.ts +17 -0
  36. package/dist/badge.js +5 -0
  37. package/dist/badge.js.map +1 -0
  38. package/dist/bar-chart.d.ts +15 -0
  39. package/dist/bar-chart.js +5 -0
  40. package/dist/bar-chart.js.map +1 -0
  41. package/dist/bento-dashboard.d.ts +30 -0
  42. package/dist/bento-dashboard.js +5 -0
  43. package/dist/bento-dashboard.js.map +1 -0
  44. package/dist/breadcrumb.d.ts +16 -0
  45. package/dist/breadcrumb.js +5 -0
  46. package/dist/breadcrumb.js.map +1 -0
  47. package/dist/button.d.ts +29 -0
  48. package/dist/button.js +5 -0
  49. package/dist/button.js.map +1 -0
  50. package/dist/card.d.ts +10 -0
  51. package/dist/card.js +5 -0
  52. package/dist/card.js.map +1 -0
  53. package/dist/checkbox.d.ts +9 -0
  54. package/dist/checkbox.js +5 -0
  55. package/dist/checkbox.js.map +1 -0
  56. package/dist/chunk-2QWKOCWF.js +79 -0
  57. package/dist/chunk-2QWKOCWF.js.map +1 -0
  58. package/dist/chunk-3TGMGBKM.js +393 -0
  59. package/dist/chunk-3TGMGBKM.js.map +1 -0
  60. package/dist/chunk-3XTZPDNV.js +94 -0
  61. package/dist/chunk-3XTZPDNV.js.map +1 -0
  62. package/dist/chunk-435JHF7G.js +65 -0
  63. package/dist/chunk-435JHF7G.js.map +1 -0
  64. package/dist/chunk-4PA2ACNF.js +52 -0
  65. package/dist/chunk-4PA2ACNF.js.map +1 -0
  66. package/dist/chunk-5GWHUJ5D.js +29 -0
  67. package/dist/chunk-5GWHUJ5D.js.map +1 -0
  68. package/dist/chunk-6FUKJD3W.js +123 -0
  69. package/dist/chunk-6FUKJD3W.js.map +1 -0
  70. package/dist/chunk-6IS2AYYG.js +106 -0
  71. package/dist/chunk-6IS2AYYG.js.map +1 -0
  72. package/dist/chunk-6PZKU6ZL.js +78 -0
  73. package/dist/chunk-6PZKU6ZL.js.map +1 -0
  74. package/dist/chunk-6SKTH45H.js +75 -0
  75. package/dist/chunk-6SKTH45H.js.map +1 -0
  76. package/dist/chunk-6UXW5YUC.js +77 -0
  77. package/dist/chunk-6UXW5YUC.js.map +1 -0
  78. package/dist/chunk-7EP2T3OW.js +52 -0
  79. package/dist/chunk-7EP2T3OW.js.map +1 -0
  80. package/dist/chunk-7J5QXUQN.js +38 -0
  81. package/dist/chunk-7J5QXUQN.js.map +1 -0
  82. package/dist/chunk-7TOT5ME3.js +53 -0
  83. package/dist/chunk-7TOT5ME3.js.map +1 -0
  84. package/dist/chunk-A6L5C3IJ.js +47 -0
  85. package/dist/chunk-A6L5C3IJ.js.map +1 -0
  86. package/dist/chunk-ANW6J6PV.js +42 -0
  87. package/dist/chunk-ANW6J6PV.js.map +1 -0
  88. package/dist/chunk-APFFKNPS.js +80 -0
  89. package/dist/chunk-APFFKNPS.js.map +1 -0
  90. package/dist/chunk-AZADSX4Z.js +85 -0
  91. package/dist/chunk-AZADSX4Z.js.map +1 -0
  92. package/dist/chunk-BPCH5LJ3.js +36 -0
  93. package/dist/chunk-BPCH5LJ3.js.map +1 -0
  94. package/dist/chunk-CBQ63EBL.js +85 -0
  95. package/dist/chunk-CBQ63EBL.js.map +1 -0
  96. package/dist/chunk-CDI7353B.js +40 -0
  97. package/dist/chunk-CDI7353B.js.map +1 -0
  98. package/dist/chunk-CKNWXYMA.js +53 -0
  99. package/dist/chunk-CKNWXYMA.js.map +1 -0
  100. package/dist/chunk-DFM7UUKB.js +79 -0
  101. package/dist/chunk-DFM7UUKB.js.map +1 -0
  102. package/dist/chunk-DGCRHVWW.js +84 -0
  103. package/dist/chunk-DGCRHVWW.js.map +1 -0
  104. package/dist/chunk-DNJI65VQ.js +22 -0
  105. package/dist/chunk-DNJI65VQ.js.map +1 -0
  106. package/dist/chunk-DOUDJU4P.js +63 -0
  107. package/dist/chunk-DOUDJU4P.js.map +1 -0
  108. package/dist/chunk-DRCMGIQ6.js +64 -0
  109. package/dist/chunk-DRCMGIQ6.js.map +1 -0
  110. package/dist/chunk-DZOBXK2S.js +28 -0
  111. package/dist/chunk-DZOBXK2S.js.map +1 -0
  112. package/dist/chunk-EN4OJCEF.js +54 -0
  113. package/dist/chunk-EN4OJCEF.js.map +1 -0
  114. package/dist/chunk-EVHZFYWX.js +33 -0
  115. package/dist/chunk-EVHZFYWX.js.map +1 -0
  116. package/dist/chunk-FGXOV2QH.js +23 -0
  117. package/dist/chunk-FGXOV2QH.js.map +1 -0
  118. package/dist/chunk-G2VKWNZA.js +53 -0
  119. package/dist/chunk-G2VKWNZA.js.map +1 -0
  120. package/dist/chunk-GTM2DE4C.js +156 -0
  121. package/dist/chunk-GTM2DE4C.js.map +1 -0
  122. package/dist/chunk-H3ZVGTJM.js +165 -0
  123. package/dist/chunk-H3ZVGTJM.js.map +1 -0
  124. package/dist/chunk-HWAWUEHC.js +28 -0
  125. package/dist/chunk-HWAWUEHC.js.map +1 -0
  126. package/dist/chunk-HWJVRTWO.js +36 -0
  127. package/dist/chunk-HWJVRTWO.js.map +1 -0
  128. package/dist/chunk-HYQGOC2E.js +79 -0
  129. package/dist/chunk-HYQGOC2E.js.map +1 -0
  130. package/dist/chunk-ILADNTUB.js +77 -0
  131. package/dist/chunk-ILADNTUB.js.map +1 -0
  132. package/dist/chunk-ISHZ6ZPJ.js +31 -0
  133. package/dist/chunk-ISHZ6ZPJ.js.map +1 -0
  134. package/dist/chunk-JRFSUVSO.js +66 -0
  135. package/dist/chunk-JRFSUVSO.js.map +1 -0
  136. package/dist/chunk-KI6OTVID.js +91 -0
  137. package/dist/chunk-KI6OTVID.js.map +1 -0
  138. package/dist/chunk-LUM2YJBH.js +73 -0
  139. package/dist/chunk-LUM2YJBH.js.map +1 -0
  140. package/dist/chunk-NHPISZWS.js +71 -0
  141. package/dist/chunk-NHPISZWS.js.map +1 -0
  142. package/dist/chunk-NOLWJJHT.js +52 -0
  143. package/dist/chunk-NOLWJJHT.js.map +1 -0
  144. package/dist/chunk-NPVINX3Q.js +20 -0
  145. package/dist/chunk-NPVINX3Q.js.map +1 -0
  146. package/dist/chunk-NSMU66ZX.js +47 -0
  147. package/dist/chunk-NSMU66ZX.js.map +1 -0
  148. package/dist/chunk-O57QMLNI.js +68 -0
  149. package/dist/chunk-O57QMLNI.js.map +1 -0
  150. package/dist/chunk-O5SWPHUQ.js +79 -0
  151. package/dist/chunk-O5SWPHUQ.js.map +1 -0
  152. package/dist/chunk-OGVSZ7NV.js +53 -0
  153. package/dist/chunk-OGVSZ7NV.js.map +1 -0
  154. package/dist/chunk-OONIUDST.js +48 -0
  155. package/dist/chunk-OONIUDST.js.map +1 -0
  156. package/dist/chunk-PLF3BBQI.js +139 -0
  157. package/dist/chunk-PLF3BBQI.js.map +1 -0
  158. package/dist/chunk-Q74VRQEX.js +26 -0
  159. package/dist/chunk-Q74VRQEX.js.map +1 -0
  160. package/dist/chunk-QEHTPQHL.js +35 -0
  161. package/dist/chunk-QEHTPQHL.js.map +1 -0
  162. package/dist/chunk-RJTDQOT2.js +73 -0
  163. package/dist/chunk-RJTDQOT2.js.map +1 -0
  164. package/dist/chunk-RQ3RXKAZ.js +203 -0
  165. package/dist/chunk-RQ3RXKAZ.js.map +1 -0
  166. package/dist/chunk-RWJELAS6.js +46 -0
  167. package/dist/chunk-RWJELAS6.js.map +1 -0
  168. package/dist/chunk-RZK2S2OO.js +126 -0
  169. package/dist/chunk-RZK2S2OO.js.map +1 -0
  170. package/dist/chunk-SAP7JSSO.js +106 -0
  171. package/dist/chunk-SAP7JSSO.js.map +1 -0
  172. package/dist/chunk-T3TQPOVM.js +79 -0
  173. package/dist/chunk-T3TQPOVM.js.map +1 -0
  174. package/dist/chunk-T56TTOI6.js +53 -0
  175. package/dist/chunk-T56TTOI6.js.map +1 -0
  176. package/dist/chunk-T7EFDE2L.js +36 -0
  177. package/dist/chunk-T7EFDE2L.js.map +1 -0
  178. package/dist/chunk-V3P5QLLX.js +154 -0
  179. package/dist/chunk-V3P5QLLX.js.map +1 -0
  180. package/dist/chunk-VTRUUT5K.js +31 -0
  181. package/dist/chunk-VTRUUT5K.js.map +1 -0
  182. package/dist/chunk-WDANALHD.js +95 -0
  183. package/dist/chunk-WDANALHD.js.map +1 -0
  184. package/dist/chunk-WSQNPRGN.js +12 -0
  185. package/dist/chunk-WSQNPRGN.js.map +1 -0
  186. package/dist/chunk-XR5QBVEV.js +56 -0
  187. package/dist/chunk-XR5QBVEV.js.map +1 -0
  188. package/dist/chunk-YYWODLER.js +111 -0
  189. package/dist/chunk-YYWODLER.js.map +1 -0
  190. package/dist/chunk-ZOXO3G3I.js +50 -0
  191. package/dist/chunk-ZOXO3G3I.js.map +1 -0
  192. package/dist/code-block.d.ts +14 -0
  193. package/dist/code-block.js +5 -0
  194. package/dist/code-block.js.map +1 -0
  195. package/dist/combobox.d.ts +26 -0
  196. package/dist/combobox.js +5 -0
  197. package/dist/combobox.js.map +1 -0
  198. package/dist/command-menu.d.ts +52 -0
  199. package/dist/command-menu.js +7 -0
  200. package/dist/command-menu.js.map +1 -0
  201. package/dist/container.d.ts +9 -0
  202. package/dist/container.js +5 -0
  203. package/dist/container.js.map +1 -0
  204. package/dist/cta-band.d.ts +12 -0
  205. package/dist/cta-band.js +5 -0
  206. package/dist/cta-band.js.map +1 -0
  207. package/dist/data-table.d.ts +58 -0
  208. package/dist/data-table.js +12 -0
  209. package/dist/data-table.js.map +1 -0
  210. package/dist/date-picker.d.ts +20 -0
  211. package/dist/date-picker.js +5 -0
  212. package/dist/date-picker.js.map +1 -0
  213. package/dist/dialog.d.ts +21 -0
  214. package/dist/dialog.js +5 -0
  215. package/dist/dialog.js.map +1 -0
  216. package/dist/divider.d.ts +12 -0
  217. package/dist/divider.js +5 -0
  218. package/dist/divider.js.map +1 -0
  219. package/dist/docker-stack-card.d.ts +21 -0
  220. package/dist/docker-stack-card.js +6 -0
  221. package/dist/docker-stack-card.js.map +1 -0
  222. package/dist/donut.d.ts +15 -0
  223. package/dist/donut.js +5 -0
  224. package/dist/donut.js.map +1 -0
  225. package/dist/dropdown-menu.d.ts +15 -0
  226. package/dist/dropdown-menu.js +5 -0
  227. package/dist/dropdown-menu.js.map +1 -0
  228. package/dist/empty.d.ts +12 -0
  229. package/dist/empty.js +5 -0
  230. package/dist/empty.js.map +1 -0
  231. package/dist/feature-card.d.ts +11 -0
  232. package/dist/feature-card.js +6 -0
  233. package/dist/feature-card.js.map +1 -0
  234. package/dist/file-upload.d.ts +20 -0
  235. package/dist/file-upload.js +5 -0
  236. package/dist/file-upload.js.map +1 -0
  237. package/dist/footer.d.ts +35 -0
  238. package/dist/footer.js +5 -0
  239. package/dist/footer.js.map +1 -0
  240. package/dist/form-row.d.ts +15 -0
  241. package/dist/form-row.js +5 -0
  242. package/dist/form-row.js.map +1 -0
  243. package/dist/glow-card.d.ts +14 -0
  244. package/dist/glow-card.js +5 -0
  245. package/dist/glow-card.js.map +1 -0
  246. package/dist/hero-block.d.ts +16 -0
  247. package/dist/hero-block.js +7 -0
  248. package/dist/hero-block.js.map +1 -0
  249. package/dist/host-card.d.ts +27 -0
  250. package/dist/host-card.js +6 -0
  251. package/dist/host-card.js.map +1 -0
  252. package/dist/incident-card.d.ts +23 -0
  253. package/dist/incident-card.js +5 -0
  254. package/dist/incident-card.js.map +1 -0
  255. package/dist/index.d.ts +76 -960
  256. package/dist/index.js +68 -3812
  257. package/dist/index.js.map +1 -1
  258. package/dist/input.d.ts +10 -0
  259. package/dist/input.js +5 -0
  260. package/dist/input.js.map +1 -0
  261. package/dist/kbd.d.ts +24 -0
  262. package/dist/kbd.js +5 -0
  263. package/dist/kbd.js.map +1 -0
  264. package/dist/log-viewer.d.ts +35 -0
  265. package/dist/log-viewer.js +5 -0
  266. package/dist/log-viewer.js.map +1 -0
  267. package/dist/meter.d.ts +23 -0
  268. package/dist/meter.js +5 -0
  269. package/dist/meter.js.map +1 -0
  270. package/dist/noir-glow-background.d.ts +50 -0
  271. package/dist/noir-glow-background.js +4 -0
  272. package/dist/noir-glow-background.js.map +1 -0
  273. package/dist/pagination.d.ts +16 -0
  274. package/dist/pagination.js +5 -0
  275. package/dist/pagination.js.map +1 -0
  276. package/dist/panel.d.ts +12 -0
  277. package/dist/panel.js +5 -0
  278. package/dist/panel.js.map +1 -0
  279. package/dist/password-input.d.ts +10 -0
  280. package/dist/password-input.js +5 -0
  281. package/dist/password-input.js.map +1 -0
  282. package/dist/pill.d.ts +14 -0
  283. package/dist/pill.js +5 -0
  284. package/dist/pill.js.map +1 -0
  285. package/dist/pricing-card.d.ts +20 -0
  286. package/dist/pricing-card.js +6 -0
  287. package/dist/pricing-card.js.map +1 -0
  288. package/dist/progress.d.ts +6 -0
  289. package/dist/progress.js +5 -0
  290. package/dist/progress.js.map +1 -0
  291. package/dist/radio-group.d.ts +18 -0
  292. package/dist/radio-group.js +5 -0
  293. package/dist/radio-group.js.map +1 -0
  294. package/dist/rollback-plan.d.ts +23 -0
  295. package/dist/rollback-plan.js +5 -0
  296. package/dist/rollback-plan.js.map +1 -0
  297. package/dist/segmented.d.ts +17 -0
  298. package/dist/segmented.js +5 -0
  299. package/dist/segmented.js.map +1 -0
  300. package/dist/select.d.ts +18 -0
  301. package/dist/select.js +5 -0
  302. package/dist/select.js.map +1 -0
  303. package/dist/service-health-card.d.ts +21 -0
  304. package/dist/service-health-card.js +6 -0
  305. package/dist/service-health-card.js.map +1 -0
  306. package/dist/sheet.d.ts +25 -0
  307. package/dist/sheet.js +5 -0
  308. package/dist/sheet.js.map +1 -0
  309. package/dist/skeleton.d.ts +5 -0
  310. package/dist/skeleton.js +5 -0
  311. package/dist/skeleton.js.map +1 -0
  312. package/dist/slider.d.ts +12 -0
  313. package/dist/slider.js +5 -0
  314. package/dist/slider.js.map +1 -0
  315. package/dist/sparkline.d.ts +16 -0
  316. package/dist/sparkline.js +5 -0
  317. package/dist/sparkline.js.map +1 -0
  318. package/dist/stat-card.d.ts +15 -0
  319. package/dist/stat-card.js +5 -0
  320. package/dist/stat-card.js.map +1 -0
  321. package/dist/status-dot.d.ts +13 -0
  322. package/dist/status-dot.js +5 -0
  323. package/dist/status-dot.js.map +1 -0
  324. package/dist/stepper.d.ts +16 -0
  325. package/dist/stepper.js +5 -0
  326. package/dist/stepper.js.map +1 -0
  327. package/dist/switch.d.ts +9 -0
  328. package/dist/switch.js +5 -0
  329. package/dist/switch.js.map +1 -0
  330. package/dist/tabs.d.ts +9 -0
  331. package/dist/tabs.js +5 -0
  332. package/dist/tabs.js.map +1 -0
  333. package/dist/tag-input.d.ts +20 -0
  334. package/dist/tag-input.js +5 -0
  335. package/dist/tag-input.js.map +1 -0
  336. package/dist/textarea.d.ts +10 -0
  337. package/dist/textarea.js +5 -0
  338. package/dist/textarea.js.map +1 -0
  339. package/dist/timeline.d.ts +30 -0
  340. package/dist/timeline.js +5 -0
  341. package/dist/timeline.js.map +1 -0
  342. package/dist/toaster.d.ts +10 -0
  343. package/dist/toaster.js +4 -0
  344. package/dist/toaster.js.map +1 -0
  345. package/dist/tooltip.d.ts +12 -0
  346. package/dist/tooltip.js +5 -0
  347. package/dist/tooltip.js.map +1 -0
  348. package/dist/utils.d.ts +5 -0
  349. package/dist/utils.js +4 -0
  350. package/dist/utils.js.map +1 -0
  351. package/globals-layers.css +935 -0
  352. package/globals-v3.css +17 -0
  353. package/globals-v4.css +2 -0
  354. package/globals.css +12 -939
  355. package/package.json +82 -16
  356. package/registry.json +920 -0
  357. package/tailwind.css +9 -0
  358. package/dist/index.cjs +0 -3938
  359. package/dist/index.cjs.map +0 -1
  360. package/dist/index.d.cts +0 -960
@@ -0,0 +1,159 @@
1
+ # Getting Started
2
+
3
+ ## Install
4
+
5
+ ```bash
6
+ npm install @tollerud/ui clsx tailwind-merge tailwindcss@4 \
7
+ @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-progress \
8
+ @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-tooltip \
9
+ lucide-react framer-motion sonner
10
+ ```
11
+
12
+ As of **v2.0.0**, Radix, Lucide, Framer Motion, and Sonner are **required peer dependencies**.
13
+
14
+ `@paper-design/shaders-react` is an **optional** peer dependency — only needed if you use `NoirGlowBackground`. All other components work without it.
15
+
16
+ ```bash
17
+ npm install @paper-design/shaders-react
18
+ ```
19
+
20
+ ---
21
+
22
+ ## Tailwind Setup (v4)
23
+
24
+ ```css
25
+ /* app/globals.css */
26
+ @import "@tollerud/ui/globals.css";
27
+ @source "../node_modules/@tollerud/ui/dist";
28
+ ```
29
+
30
+ `globals.css` bundles Tailwind v4, design tokens, and all component layer styles. Point `@source` at the package `dist` folder relative to your CSS file so component utility classes are not purged.
31
+
32
+ **Optional preset shim** — for extra theme tokens from `tollerud-preset.js`:
33
+
34
+ ```ts
35
+ // tailwind.config.ts
36
+ import tollerudPreset from '@tollerud/ui/preset'
37
+ export default { presets: [tollerudPreset] }
38
+ ```
39
+
40
+ ```css
41
+ @import "tailwindcss";
42
+ @config "./tailwind.config.ts";
43
+ @import "@tollerud/ui/tokens.css";
44
+ @import "@tollerud/ui/globals-layers.css";
45
+ @source "../node_modules/@tollerud/ui/dist";
46
+ ```
47
+
48
+ ### Tailwind v3 (legacy)
49
+
50
+ ```ts
51
+ // tailwind.config.ts
52
+ import type { Config } from 'tailwindcss'
53
+ import tollerudPreset from '@tollerud/ui/preset'
54
+
55
+ const config: Config = {
56
+ presets: [tollerudPreset],
57
+ content: [
58
+ './app/**/*.{ts,tsx}',
59
+ './components/**/*.{ts,tsx}',
60
+ './node_modules/@tollerud/ui/dist/**/*.{js,mjs}',
61
+ ],
62
+ }
63
+
64
+ export default config
65
+ ```
66
+
67
+ ```css
68
+ /* app/globals.css */
69
+ @import "tailwindcss/preflight";
70
+ @import "tailwindcss/utilities";
71
+ @import "@tollerud/ui/globals-v3.css";
72
+ ```
73
+
74
+ ---
75
+
76
+ ## Subpath imports (tree-shaking)
77
+
78
+ Import individual components without pulling the full barrel:
79
+
80
+ ```tsx
81
+ import { Button } from '@tollerud/ui/button'
82
+ import { Dialog, DialogContent } from '@tollerud/ui/dialog'
83
+ import { cn } from '@tollerud/ui/utils'
84
+ ```
85
+
86
+ Every component in the catalog has a matching subpath (kebab-case filename). The main `@tollerud/ui` entry still works for convenience.
87
+
88
+ ---
89
+
90
+ ## Toaster (optional)
91
+
92
+ Mount the `Toaster` once near your app root to enable `sonner` toast notifications:
93
+
94
+ ```tsx
95
+ // app/layout.tsx
96
+ import { Toaster } from '@tollerud/ui'
97
+
98
+ export default function RootLayout({ children }) {
99
+ return (
100
+ <html>
101
+ <body>
102
+ {children}
103
+ <Toaster />
104
+ </body>
105
+ </html>
106
+ )
107
+ }
108
+ ```
109
+
110
+ ---
111
+
112
+ ## Import Components
113
+
114
+ All 61 components are named exports from `@tollerud/ui`:
115
+
116
+ ```tsx
117
+ // Basics
118
+ import { Button, Card, Badge, StatusDot, Kbd, Input, Textarea } from '@tollerud/ui'
119
+
120
+ // Overlays
121
+ import { Dialog, DialogContent, Tooltip, TooltipProvider, Sheet } from '@tollerud/ui'
122
+
123
+ // Data & infra
124
+ import { DataTable, HostCard, LogViewer, CommandMenu } from '@tollerud/ui'
125
+ ```
126
+
127
+ See [COMPONENTS.md](COMPONENTS.md) for the full prop reference.
128
+
129
+ ---
130
+
131
+ ## shadcn / registry
132
+
133
+ Install individual components via the registry:
134
+
135
+ ```bash
136
+ npx shadcn@latest add https://unpkg.com/@tollerud/ui@latest/registry.json
137
+ ```
138
+
139
+ Or add a single component:
140
+
141
+ ```bash
142
+ npx shadcn@latest add button --registry https://unpkg.com/@tollerud/ui@latest/registry.json
143
+ ```
144
+
145
+ ---
146
+
147
+ ## Server Components
148
+
149
+ `@tollerud/ui` ships client bundles with `'use client'`. Importing components (or `cn`, `buttonVariants`) from a Server Component file is safe — the import does not force your file to become a Client Component.
150
+
151
+ Use subpath imports (`@tollerud/ui/button`) for smaller client boundaries when splitting files manually.
152
+
153
+ ---
154
+
155
+ ## AI agents
156
+
157
+ If you're using Claude Code or Cursor, sync [SKILL.md](SKILL.md) into your project skills folder — it reflects the actual current exports and known gotchas.
158
+
159
+ See `README.md` for the complete setup guide.
package/README.md CHANGED
@@ -4,7 +4,7 @@ A complete, browsable UI library built around **monochrome + yellow accent**. No
4
4
 
5
5
  **[Live docs →](https://tollerud.github.io/design-system/)** — browse every token, component, and pattern live with copy-paste code.
6
6
 
7
- **Requirements:** React ≥ 18 · TypeScript supported (types included) · Tailwind CSS v3 or v4
7
+ **Requirements:** React ≥ 18 · TypeScript supported (types included) · Tailwind CSS v4 (v3 supported via `globals-v3.css`)
8
8
 
9
9
  → **[Component reference →](COMPONENTS.md)** · **[Setup guide →](GETTING_STARTED.md)** · **[Brand guidelines →](BRAND.md)** · **[Changelog →](CHANGELOG.md)** · **[AI agent skill →](SKILL.md)**
10
10
 
@@ -15,7 +15,7 @@ A complete, browsable UI library built around **monochrome + yellow accent**. No
15
15
  | [`@tollerud/ui`](https://www.npmjs.com/package/@tollerud/ui) | `npm install @tollerud/ui` | You want the full design system — components, tokens, Tailwind preset |
16
16
  | [`@tollerud/footer`](https://www.npmjs.com/package/@tollerud/footer) | `npm install @tollerud/footer` | You only need the branded footer, with no other design system dependency |
17
17
 
18
- `@tollerud/ui` already re-exports `Footer` internally install `@tollerud/footer` separately only when you want the footer in a project that doesn't use the full design system.
18
+ **Footer maintenance:** `@tollerud/ui` re-exports `Footer` from the same source as `@tollerud/footer`. Use the standalone `@tollerud/footer` package only when you want the footer without pulling in the full design system (and its peer deps). Both packages are maintained in this monorepo; version them together when the footer changes.
19
19
 
20
20
  ## Philosophy
21
21
 
@@ -28,58 +28,65 @@ Tollerud DS is minimal but not cold. It uses a near-black foundation with warm y
28
28
  ### npm package (recommended)
29
29
 
30
30
  ```bash
31
- npm install @tollerud/ui clsx tailwind-merge tailwindcss
31
+ npm install @tollerud/ui clsx tailwind-merge tailwindcss@4 \
32
+ @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-progress \
33
+ @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-tooltip \
34
+ lucide-react framer-motion sonner
32
35
  ```
33
36
 
34
- `@paper-design/shaders-react` is an **optional** peer dependency the package installs and works without it. Install it only if you use `NoirGlowBackground`; all other components fall back to CSS automatically.
37
+ As of **v2.0.0**, Radix primitives, Lucide, Framer Motion, and Sonner are **peer dependencies** your app must install them (one line above). The design system bundles only `class-variance-authority`.
38
+
39
+ `@paper-design/shaders-react` is an **optional** peer — install only if you use `NoirGlowBackground`:
35
40
 
36
41
  ```bash
37
42
  npm install @paper-design/shaders-react
38
43
  ```
39
44
 
40
- **Tailwind v3** — add the preset in `tailwind.config.ts`:
45
+ **CSS** — one import in `app/globals.css` (Tailwind v4 + tokens + component classes):
46
+
47
+ ```css
48
+ @import '@tollerud/ui/globals.css';
49
+ @source '../node_modules/@tollerud/ui/dist';
50
+ ```
51
+
52
+ Adjust the `@source` path relative to your CSS file so it resolves to `node_modules/@tollerud/ui/dist`.
53
+
54
+ **Optional preset shim** — if you need utilities from `tollerud-preset.js` beyond what `tokens.css` provides:
41
55
 
42
56
  ```ts
43
- import type { Config } from 'tailwindcss'
57
+ // tailwind.config.ts
44
58
  import tollerudPreset from '@tollerud/ui/preset'
45
-
46
- const config: Config = {
47
- presets: [tollerudPreset],
48
- content: [
49
- './app/**/*.{ts,tsx}',
50
- './components/**/*.{ts,tsx}',
51
- './node_modules/@tollerud/ui/dist/**/*.{js,mjs}',
52
- ],
53
- }
54
- export default config
59
+ export default { presets: [tollerudPreset] }
55
60
  ```
56
61
 
57
- **Tailwind v4** — use `@config` and `@source` in your CSS instead of a config file:
58
-
59
62
  ```css
60
- /* app/globals.css */
61
63
  @import 'tailwindcss';
62
- @import '@tollerud/ui/globals.css';
63
-
64
- /* Pull in the preset tokens as a v4 plugin */
65
64
  @config './tailwind.config.ts';
66
-
67
- /* Scan the package dist so utility classes aren't purged */
65
+ @import '@tollerud/ui/tokens.css';
66
+ @import '@tollerud/ui/globals-layers.css';
68
67
  @source '../node_modules/@tollerud/ui/dist';
69
68
  ```
70
69
 
71
- If you're not using a `tailwind.config.ts` in v4, copy the contents of `tollerud-preset.js` into a `@theme {}` block manually, or keep a minimal config just for the preset:
70
+ **Tailwind v3 (legacy)** preset in `tailwind.config.ts` plus `@tollerud/ui/globals-v3.css`:
72
71
 
73
72
  ```ts
74
- // tailwind.config.ts (v4 shim)
73
+ import type { Config } from 'tailwindcss'
75
74
  import tollerudPreset from '@tollerud/ui/preset'
76
- export default { presets: [tollerudPreset] }
77
- ```
78
75
 
79
- **CSS** import tokens and component classes in `app/globals.css`:
76
+ export default {
77
+ presets: [tollerudPreset],
78
+ content: [
79
+ './app/**/*.{ts,tsx}',
80
+ './components/**/*.{ts,tsx}',
81
+ './node_modules/@tollerud/ui/dist/**/*.{js,mjs}',
82
+ ],
83
+ } satisfies Config
84
+ ```
80
85
 
81
86
  ```css
82
- @import '@tollerud/ui/globals.css';
87
+ @import 'tailwindcss/preflight';
88
+ @import 'tailwindcss/utilities';
89
+ @import '@tollerud/ui/globals-v3.css';
83
90
  ```
84
91
 
85
92
  **Components:**
@@ -101,7 +108,7 @@ cp tollerud-preset.js globals.css components/ -r <your-next-project>/
101
108
 
102
109
  Then use local paths instead of `@tollerud/ui` in the snippets above.
103
110
 
104
- ### Next.js example
111
+ ### Usage example
105
112
 
106
113
  That's it. You now have all Tailwind colors (`bg-tollerud-yellow`, `text-tollerud-noir-200`), semantic CSS variables (`--primary`, `--background`, `--ring`), component utilities (`.tollerud-card`, `.tollerud-btn--terminal`), and React components ready to import:
107
114
 
@@ -200,10 +207,10 @@ The design system includes `tollerud-avatar.svg` — a full cel-shaded monochrom
200
207
  ## shadcn Registry
201
208
 
202
209
  ```bash
203
- # Install via shadcn CLI (future):
204
- npx shadcn@latest add https://tollerud-noir.dev/registry
210
+ # Add via shadcn CLI — registry ships with the npm package
211
+ npx shadcn@latest add button --registry https://unpkg.com/@tollerud/ui/registry.json
205
212
 
206
- # Or copy manually (today):
213
+ # Or copy source manually
207
214
  cp -r components/ src/components/ui
208
215
  cp globals.css src/app/
209
216
  cp tollerud-preset.js .
@@ -227,7 +234,10 @@ design-system/
227
234
  ├── SKILL.md # Verified component catalog & gotchas for AI agents
228
235
  ├── tollerud-preset.js # 🏆 Drop-in Tailwind preset
229
236
  ├── tailwind.config.js # (backward compat standalone config)
230
- ├── globals.css # 🏆 Semantic tokens + all component classes
237
+ ├── globals.css # 🏆 Tailwind v4 entry (tokens + component layers)
238
+ ├── globals-v3.css # Tailwind v3 legacy (@tailwind + layers)
239
+ ├── globals-layers.css # Shared component CSS layers
240
+ ├── globals-v4.css # Alias → globals.css
231
241
  ├── tokens.css # (backward compat CSS vars only)
232
242
  ├── preview.html # Visual reference
233
243
  ├── tollerud-avatar.svg # Brand mascot
@@ -256,14 +266,12 @@ design-system/
256
266
  │ ├── Timeline.tsx # Vertical activity timeline
257
267
  │ ├── BackupStatusPanel.tsx # Backup job overview
258
268
  │ └── Container.tsx # Layout width constraint
259
- └── examples/
260
- └── nextjs/
261
- ├── README.md # Setup instructions
262
- ├── tailwind.config.ts # Example config using preset
263
- └── app/
264
- ├── globals.css # @import for globals.css
265
- ├── layout.tsx # Root layout with fonts
266
- └── page.tsx # Full dashboard landing page
269
+ ├── docs-app/ # Next.js docs site (static export → _site/ for GitHub Pages)
270
+ │ ├── app/ # App Router entry
271
+ ├── components/ # Page demos (primitives, charts, marketing)
272
+ │ └── lib/ # ui-merged.js + docs-adapters.jsx (npm-backed)
273
+ └── docs/
274
+ └── docs.css # Shared docs chrome styles (imported by docs-app)
267
275
  ```
268
276
 
269
277
  ## Graphify-inspired Components
package/SKILL.md CHANGED
@@ -12,34 +12,30 @@ Dark, monochrome + single yellow-accent design system ("noir" aesthetic). This s
12
12
  ## Install & setup
13
13
 
14
14
  ```bash
15
- npm install @tollerud/ui clsx tailwind-merge tailwindcss
15
+ npm install @tollerud/ui clsx tailwind-merge tailwindcss@4 \
16
+ @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-progress \
17
+ @radix-ui/react-slot @radix-ui/react-tabs @radix-ui/react-tooltip \
18
+ lucide-react framer-motion sonner
16
19
  # Optional — only if using NoirGlowBackground
17
20
  npm install @paper-design/shaders-react
18
21
  ```
19
22
 
20
- Apply the Tailwind preset without it, `text-tollerud-yellow`, `bg-tollerud-noir-900`, etc. won't resolve:
23
+ As of **v3.0.0**, the package is **ESM-only** (no CJS `require` entry). As of **v2.0.0**, Radix, Lucide, Framer Motion, and Sonner are **required peers** (not bundled).
21
24
 
22
- ```ts
23
- // tailwind.config.ts
24
- import type { Config } from 'tailwindcss'
25
- import tollerudPreset from '@tollerud/ui/preset'
25
+ Apply the Tailwind preset when you need extra utilities from `tollerud-preset.js` — `globals.css` already includes tokens and component layers for v4:
26
26
 
27
- const config: Config = {
28
- presets: [tollerudPreset],
29
- content: ['./src/**/*.{ts,tsx}'],
30
- }
31
- export default config
32
- ```
33
-
34
- As of **v1.1.5**, Tailwind colors are exposed under `tollerud.*` only. Use utilities like `text-tollerud-yellow`, `bg-tollerud-surface-raised`, and `border-tollerud-border`; do not use `tia-*` utility names.
35
-
36
- Import base styles/tokens from `@tollerud/ui/globals.css` (or `@tollerud/ui/tokens.css`) in your root layout / `globals.css`, alongside Tailwind's own layers:
37
27
  ```css
38
- @import "tailwindcss/preflight";
39
- @import "tailwindcss/utilities";
28
+ /* app/globals.css — Tailwind v4 (default) */
40
29
  @import "@tollerud/ui/globals.css";
30
+ @source "../node_modules/@tollerud/ui/dist";
41
31
  ```
42
32
 
33
+ As of **v1.4.0**, charts (`BarChart`, `AreaChart`, `Donut`, `Sparkline`) and marketing blocks (`HeroBlock`, `FeatureCard`, `CTABand`) ship in the package. As of **v1.3.0**, `@tollerud/ui/globals.css` is the Tailwind v4 entry. Tailwind colors are under `tollerud.*` only (`text-tollerud-yellow`, `bg-tollerud-surface-raised`, etc.) — not `tia-*`.
34
+
35
+ **Tailwind v3 legacy:** `@import "@tollerud/ui/globals-v3.css"` after preflight/utilities, with `tailwind.config.ts` preset + content paths.
36
+
37
+ **Subpath imports (tree-shaking):** `@tollerud/ui/button`, `@tollerud/ui/dialog`, `@tollerud/ui/utils`. The main `@tollerud/ui` barrel still works.
38
+
43
39
  ---
44
40
 
45
41
  ## Critical gotchas (read before writing code)
@@ -358,20 +354,41 @@ import { Empty, EmptyHeader, EmptyIcon, EmptyTitle, EmptyDescription, EmptyConte
358
354
  ### Visual / decorative
359
355
 
360
356
  ```tsx
361
- import { GlowCard, NoirGlowBackground, BentoDashboard } from '@tollerud/ui'
357
+ import {
358
+ GlowCard, NoirGlowBackground, BentoDashboard,
359
+ BarChart, AreaChart, Donut, Sparkline,
360
+ HeroBlock, FeatureCard, CTABand,
361
+ } from '@tollerud/ui'
362
362
  ```
363
363
  - **GlowCard** — `children`, `className?`, `glowColor?`, `intensity?: number`. Mouse-tracked glow card.
364
364
  - **NoirGlowBackground** — animated WebGL shader background (needs `@paper-design/shaders-react`). `shape?: 'corners' | 'wave' | 'dots' | 'truchet' | 'ripple' | 'blob' | 'sphere'`, `intensity?: 'subtle' | 'medium' | 'loud'`, `speed?: 'still' | 'slow' | 'medium' | 'fast'`, `grain?: 'none' | 'soft' | 'high'`, `colors?: string[]`, `forceCssFallback?: boolean`.
365
365
  - **BentoDashboard** — composed dashboard shell taking arrays of `HostCardProps`, `StatCardProps`, `ServiceHealthCardProps`, incidents, `BackupJob[]`.
366
366
 
367
+ **Charts** — palette-aware SVG; yellow highlights one series.
368
+ ```tsx
369
+ <BarChart data={[{ label: 'Mon', value: 32, accent: true }]} height={180} />
370
+ <AreaChart data={[28, 35, 30, 44, 52]} height={150} />
371
+ <Donut segments={[{ label: 'CPU', value: 40, color: 'var(--chart-1)' }]} size={160} />
372
+ <Sparkline data={[12, 18, 14, 22]} width={84} height={26} />
373
+ ```
374
+
375
+ **Marketing blocks**
376
+ ```tsx
377
+ <HeroBlock eyebrow="homelab" title="Run your stack" intense actions={<Button>Deploy</Button>} />
378
+ <FeatureCard icon={<Zap size={20} />} title="Instant deploys" description="…" />
379
+ <CTABand title="Ship it" actions={<Button variant="primary">Get started</Button>} />
380
+ ```
381
+ `HeroBlock.intense` mounts `NoirGlowBackground` (needs `@paper-design/shaders-react`).
382
+
367
383
  ### Data & tables
368
384
 
369
385
  ```tsx
370
386
  import { DataTable } from '@tollerud/ui'
371
387
 
388
+ // Simple: sort + per-column text filters
372
389
  <DataTable
373
390
  columns={[
374
- { key: 'hostname', label: 'Host', sortable: true },
391
+ { key: 'hostname', label: 'Host', sortable: true, filterable: true },
375
392
  { key: 'status', label: 'Status', render: (_v, row) => <Badge variant={row.status === 'online' ? 'success' : 'error'}>{row.status}</Badge> },
376
393
  ]}
377
394
  data={hosts}
@@ -379,8 +396,25 @@ import { DataTable } from '@tollerud/ui'
379
396
  onRowClick={(row) => {}}
380
397
  emptyMessage="No hosts found"
381
398
  />
399
+
400
+ // Rich: search, segmented filter, selection, bulk actions, row menus, pagination
401
+ <DataTable
402
+ columns={[...]}
403
+ data={hosts}
404
+ rowKey="id"
405
+ searchable
406
+ searchKeys={['hostname', 'ip']}
407
+ filter={{ key: 'region', allLabel: 'All regions' }}
408
+ selectable
409
+ pageSize={10}
410
+ bulkActions={[{ label: 'Restart', variant: 'ghost', onRun: (ids, clear) => { clear() } }]}
411
+ rowMenu={(row) => [{ label: 'View logs', onSelect: () => {} }]}
412
+ toolbarRight={<Button size="sm">Add host</Button>}
413
+ emptyState={<Empty>...</Empty>}
414
+ />
382
415
  ```
383
- Note the prop is `data`/`columns`/`label` (not `rows`/`header` — older docs may say otherwise).
416
+
417
+ `data` and `rows` are aliases. Column labels use `label` (docs demos may use `header` via the docs adapter only).
384
418
 
385
419
  ### Infra / homelab set
386
420
 
@@ -0,0 +1,18 @@
1
+ {
2
+ "$schema": "https://ui.shadcn.com/schema.json",
3
+ "name": "tollerud-noir",
4
+ "style": "default",
5
+ "rsc": true,
6
+ "tsx": true,
7
+ "tailwind": {
8
+ "config": "tailwind.config.ts",
9
+ "css": "globals.css",
10
+ "baseColor": "stone",
11
+ "cssVariables": true,
12
+ "prefix": ""
13
+ },
14
+ "aliases": {
15
+ "components": "@/components/ui",
16
+ "utils": "@/lib/utils"
17
+ }
18
+ }
@@ -0,0 +1,20 @@
1
+ import * as react from 'react';
2
+ import { HTMLAttributes } from 'react';
3
+
4
+ interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
5
+ /** Allow multiple items to be open at once */
6
+ multiple?: boolean;
7
+ /** Initially open item value(s) */
8
+ defaultOpen?: string | string[];
9
+ }
10
+ declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
11
+ interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
12
+ value: string;
13
+ }
14
+ declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
15
+ type AccordionTriggerProps = HTMLAttributes<HTMLButtonElement>;
16
+ declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
17
+ type AccordionContentProps = HTMLAttributes<HTMLDivElement>;
18
+ declare const AccordionContent: react.ForwardRefExoticComponent<AccordionContentProps & react.RefAttributes<HTMLDivElement>>;
19
+
20
+ export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps };
@@ -0,0 +1,5 @@
1
+ 'use client';
2
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './chunk-YYWODLER.js';
3
+ import './chunk-WSQNPRGN.js';
4
+ //# sourceMappingURL=accordion.js.map
5
+ //# sourceMappingURL=accordion.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"accordion.js"}
@@ -0,0 +1,26 @@
1
+ import * as react from 'react';
2
+ import { HTMLAttributes } from 'react';
3
+
4
+ interface DiffLine {
5
+ /** Diff content */
6
+ text: string;
7
+ /** Change type */
8
+ type: 'add' | 'remove' | 'context';
9
+ /** Line number in original */
10
+ oldLine?: number;
11
+ /** Line number in new */
12
+ newLine?: number;
13
+ }
14
+ interface ActionDiffProps extends HTMLAttributes<HTMLDivElement> {
15
+ /** Diff lines */
16
+ lines: DiffLine[];
17
+ /** File/label name */
18
+ label?: string;
19
+ /** View mode */
20
+ view?: 'unified' | 'side-by-side';
21
+ /** Whether the diff is loading */
22
+ loading?: boolean;
23
+ }
24
+ declare const ActionDiff: react.ForwardRefExoticComponent<ActionDiffProps & react.RefAttributes<HTMLDivElement>>;
25
+
26
+ export { ActionDiff, type ActionDiffProps, type DiffLine };
@@ -0,0 +1,5 @@
1
+ 'use client';
2
+ export { ActionDiff } from './chunk-3XTZPDNV.js';
3
+ import './chunk-WSQNPRGN.js';
4
+ //# sourceMappingURL=action-diff.js.map
5
+ //# sourceMappingURL=action-diff.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"action-diff.js"}
@@ -0,0 +1,36 @@
1
+ import * as react from 'react';
2
+ import { ButtonHTMLAttributes } from 'react';
3
+
4
+ interface ActionItem {
5
+ /** Unique ID */
6
+ id: string;
7
+ /** Label text */
8
+ label: string;
9
+ /** Subtitle / description */
10
+ description?: string;
11
+ /** Optional icon element */
12
+ icon?: React.ReactNode;
13
+ /** Keyboard shortcut */
14
+ shortcut?: string | string[];
15
+ /** Group this item belongs to */
16
+ group?: string;
17
+ /** When true, item is disabled */
18
+ disabled?: boolean;
19
+ /** Selection callback */
20
+ onSelect?: () => void;
21
+ }
22
+ interface ActionRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
23
+ /** Action data */
24
+ action: ActionItem;
25
+ /** Whether this row is currently highlighted (keyboard navigation) */
26
+ highlighted?: boolean;
27
+ /** Whether to show the shortcut */
28
+ showShortcut?: boolean;
29
+ }
30
+ /**
31
+ * Action row — a single command/action item in a list or command menu.
32
+ * Inspired by Raycast's compact action layout.
33
+ */
34
+ declare const ActionRow: react.ForwardRefExoticComponent<ActionRowProps & react.RefAttributes<HTMLButtonElement>>;
35
+
36
+ export { type ActionItem, ActionRow, type ActionRowProps };
@@ -0,0 +1,6 @@
1
+ 'use client';
2
+ export { ActionRow } from './chunk-OGVSZ7NV.js';
3
+ import './chunk-HWAWUEHC.js';
4
+ import './chunk-WSQNPRGN.js';
5
+ //# sourceMappingURL=action-row.js.map
6
+ //# sourceMappingURL=action-row.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"action-row.js"}
@@ -0,0 +1,23 @@
1
+ import * as react from 'react';
2
+ import { HTMLAttributes } from 'react';
3
+ import { IncidentSeverity } from './incident-card.js';
4
+
5
+ interface AlertItem {
6
+ id: string;
7
+ title: string;
8
+ severity: IncidentSeverity;
9
+ timestamp: string;
10
+ description?: string;
11
+ service?: string;
12
+ acknowledged?: boolean;
13
+ }
14
+ interface AlertInboxProps extends HTMLAttributes<HTMLDivElement> {
15
+ alerts: AlertItem[];
16
+ filterSeverity?: IncidentSeverity | '';
17
+ onAcknowledge?: (id: string) => void;
18
+ loading?: boolean;
19
+ emptyMessage?: string;
20
+ }
21
+ declare const AlertInbox: react.ForwardRefExoticComponent<AlertInboxProps & react.RefAttributes<HTMLDivElement>>;
22
+
23
+ export { AlertInbox, type AlertInboxProps, type AlertItem };
@@ -0,0 +1,6 @@
1
+ 'use client';
2
+ export { AlertInbox } from './chunk-AZADSX4Z.js';
3
+ import './chunk-EN4OJCEF.js';
4
+ import './chunk-WSQNPRGN.js';
5
+ //# sourceMappingURL=alert-inbox.js.map
6
+ //# sourceMappingURL=alert-inbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"alert-inbox.js"}
@@ -0,0 +1,33 @@
1
+ import * as react from 'react';
2
+ import { HTMLAttributes } from 'react';
3
+
4
+ declare const toneStyles: {
5
+ readonly default: {
6
+ readonly wrapper: "border-tollerud-border bg-tollerud-surface-raised";
7
+ readonly icon: "text-tollerud-text-muted";
8
+ };
9
+ readonly accent: {
10
+ readonly wrapper: "border-tollerud-yellow/30 bg-tollerud-yellow/5";
11
+ readonly icon: "text-tollerud-yellow";
12
+ };
13
+ readonly info: {
14
+ readonly wrapper: "border-blue-500/30 bg-blue-500/5";
15
+ readonly icon: "text-blue-400";
16
+ };
17
+ readonly success: {
18
+ readonly wrapper: "border-green-500/30 bg-green-500/5";
19
+ readonly icon: "text-green-400";
20
+ };
21
+ readonly error: {
22
+ readonly wrapper: "border-red-500/30 bg-red-500/5";
23
+ readonly icon: "text-red-400";
24
+ };
25
+ };
26
+ interface AlertProps extends HTMLAttributes<HTMLDivElement> {
27
+ tone?: keyof typeof toneStyles;
28
+ title?: string;
29
+ icon?: React.ReactNode;
30
+ }
31
+ declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
32
+
33
+ export { Alert, type AlertProps };
package/dist/alert.js ADDED
@@ -0,0 +1,5 @@
1
+ 'use client';
2
+ export { Alert } from './chunk-ANW6J6PV.js';
3
+ import './chunk-WSQNPRGN.js';
4
+ //# sourceMappingURL=alert.js.map
5
+ //# sourceMappingURL=alert.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"alert.js"}