@tollerud/ui 1.1.4 → 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.
- package/AGENTS.md +34 -11
- package/CHANGELOG.md +376 -0
- package/COMPONENTS.md +951 -0
- package/GETTING_STARTED.md +159 -0
- package/README.md +51 -43
- package/SKILL.md +55 -19
- package/components.json +18 -0
- package/dist/accordion.d.ts +20 -0
- package/dist/accordion.js +5 -0
- package/dist/accordion.js.map +1 -0
- package/dist/action-diff.d.ts +26 -0
- package/dist/action-diff.js +5 -0
- package/dist/action-diff.js.map +1 -0
- package/dist/action-row.d.ts +36 -0
- package/dist/action-row.js +6 -0
- package/dist/action-row.js.map +1 -0
- package/dist/alert-inbox.d.ts +23 -0
- package/dist/alert-inbox.js +6 -0
- package/dist/alert-inbox.js.map +1 -0
- package/dist/alert.d.ts +33 -0
- package/dist/alert.js +5 -0
- package/dist/alert.js.map +1 -0
- package/dist/approval-card.d.ts +27 -0
- package/dist/approval-card.js +5 -0
- package/dist/approval-card.js.map +1 -0
- package/dist/area-chart.d.ts +10 -0
- package/dist/area-chart.js +5 -0
- package/dist/area-chart.js.map +1 -0
- package/dist/avatar.d.ts +27 -0
- package/dist/avatar.js +5 -0
- package/dist/avatar.js.map +1 -0
- package/dist/backup-status-panel.d.ts +25 -0
- package/dist/backup-status-panel.js +6 -0
- package/dist/backup-status-panel.js.map +1 -0
- package/dist/badge.d.ts +17 -0
- package/dist/badge.js +5 -0
- package/dist/badge.js.map +1 -0
- package/dist/bar-chart.d.ts +15 -0
- package/dist/bar-chart.js +5 -0
- package/dist/bar-chart.js.map +1 -0
- package/dist/bento-dashboard.d.ts +30 -0
- package/dist/bento-dashboard.js +5 -0
- package/dist/bento-dashboard.js.map +1 -0
- package/dist/breadcrumb.d.ts +16 -0
- package/dist/breadcrumb.js +5 -0
- package/dist/breadcrumb.js.map +1 -0
- package/dist/button.d.ts +29 -0
- package/dist/button.js +5 -0
- package/dist/button.js.map +1 -0
- package/dist/card.d.ts +10 -0
- package/dist/card.js +5 -0
- package/dist/card.js.map +1 -0
- package/dist/checkbox.d.ts +9 -0
- package/dist/checkbox.js +5 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/chunk-2QWKOCWF.js +79 -0
- package/dist/chunk-2QWKOCWF.js.map +1 -0
- package/dist/chunk-3TGMGBKM.js +393 -0
- package/dist/chunk-3TGMGBKM.js.map +1 -0
- package/dist/chunk-3XTZPDNV.js +94 -0
- package/dist/chunk-3XTZPDNV.js.map +1 -0
- package/dist/chunk-435JHF7G.js +65 -0
- package/dist/chunk-435JHF7G.js.map +1 -0
- package/dist/chunk-4PA2ACNF.js +52 -0
- package/dist/chunk-4PA2ACNF.js.map +1 -0
- package/dist/chunk-5GWHUJ5D.js +29 -0
- package/dist/chunk-5GWHUJ5D.js.map +1 -0
- package/dist/chunk-6FUKJD3W.js +123 -0
- package/dist/chunk-6FUKJD3W.js.map +1 -0
- package/dist/chunk-6IS2AYYG.js +106 -0
- package/dist/chunk-6IS2AYYG.js.map +1 -0
- package/dist/chunk-6PZKU6ZL.js +78 -0
- package/dist/chunk-6PZKU6ZL.js.map +1 -0
- package/dist/chunk-6SKTH45H.js +75 -0
- package/dist/chunk-6SKTH45H.js.map +1 -0
- package/dist/chunk-6UXW5YUC.js +77 -0
- package/dist/chunk-6UXW5YUC.js.map +1 -0
- package/dist/chunk-7EP2T3OW.js +52 -0
- package/dist/chunk-7EP2T3OW.js.map +1 -0
- package/dist/chunk-7J5QXUQN.js +38 -0
- package/dist/chunk-7J5QXUQN.js.map +1 -0
- package/dist/chunk-7TOT5ME3.js +53 -0
- package/dist/chunk-7TOT5ME3.js.map +1 -0
- package/dist/chunk-A6L5C3IJ.js +47 -0
- package/dist/chunk-A6L5C3IJ.js.map +1 -0
- package/dist/chunk-ANW6J6PV.js +42 -0
- package/dist/chunk-ANW6J6PV.js.map +1 -0
- package/dist/chunk-APFFKNPS.js +80 -0
- package/dist/chunk-APFFKNPS.js.map +1 -0
- package/dist/chunk-AZADSX4Z.js +85 -0
- package/dist/chunk-AZADSX4Z.js.map +1 -0
- package/dist/chunk-BPCH5LJ3.js +36 -0
- package/dist/chunk-BPCH5LJ3.js.map +1 -0
- package/dist/chunk-CBQ63EBL.js +85 -0
- package/dist/chunk-CBQ63EBL.js.map +1 -0
- package/dist/chunk-CDI7353B.js +40 -0
- package/dist/chunk-CDI7353B.js.map +1 -0
- package/dist/chunk-CKNWXYMA.js +53 -0
- package/dist/chunk-CKNWXYMA.js.map +1 -0
- package/dist/chunk-DFM7UUKB.js +79 -0
- package/dist/chunk-DFM7UUKB.js.map +1 -0
- package/dist/chunk-DGCRHVWW.js +84 -0
- package/dist/chunk-DGCRHVWW.js.map +1 -0
- package/dist/chunk-DNJI65VQ.js +22 -0
- package/dist/chunk-DNJI65VQ.js.map +1 -0
- package/dist/chunk-DOUDJU4P.js +63 -0
- package/dist/chunk-DOUDJU4P.js.map +1 -0
- package/dist/chunk-DRCMGIQ6.js +64 -0
- package/dist/chunk-DRCMGIQ6.js.map +1 -0
- package/dist/chunk-DZOBXK2S.js +28 -0
- package/dist/chunk-DZOBXK2S.js.map +1 -0
- package/dist/chunk-EN4OJCEF.js +54 -0
- package/dist/chunk-EN4OJCEF.js.map +1 -0
- package/dist/chunk-EVHZFYWX.js +33 -0
- package/dist/chunk-EVHZFYWX.js.map +1 -0
- package/dist/chunk-FGXOV2QH.js +23 -0
- package/dist/chunk-FGXOV2QH.js.map +1 -0
- package/dist/chunk-G2VKWNZA.js +53 -0
- package/dist/chunk-G2VKWNZA.js.map +1 -0
- package/dist/chunk-GTM2DE4C.js +156 -0
- package/dist/chunk-GTM2DE4C.js.map +1 -0
- package/dist/chunk-H3ZVGTJM.js +165 -0
- package/dist/chunk-H3ZVGTJM.js.map +1 -0
- package/dist/chunk-HWAWUEHC.js +28 -0
- package/dist/chunk-HWAWUEHC.js.map +1 -0
- package/dist/chunk-HWJVRTWO.js +36 -0
- package/dist/chunk-HWJVRTWO.js.map +1 -0
- package/dist/chunk-HYQGOC2E.js +79 -0
- package/dist/chunk-HYQGOC2E.js.map +1 -0
- package/dist/chunk-ILADNTUB.js +77 -0
- package/dist/chunk-ILADNTUB.js.map +1 -0
- package/dist/chunk-ISHZ6ZPJ.js +31 -0
- package/dist/chunk-ISHZ6ZPJ.js.map +1 -0
- package/dist/chunk-JRFSUVSO.js +66 -0
- package/dist/chunk-JRFSUVSO.js.map +1 -0
- package/dist/chunk-KI6OTVID.js +91 -0
- package/dist/chunk-KI6OTVID.js.map +1 -0
- package/dist/chunk-LUM2YJBH.js +73 -0
- package/dist/chunk-LUM2YJBH.js.map +1 -0
- package/dist/chunk-NHPISZWS.js +71 -0
- package/dist/chunk-NHPISZWS.js.map +1 -0
- package/dist/chunk-NOLWJJHT.js +52 -0
- package/dist/chunk-NOLWJJHT.js.map +1 -0
- package/dist/chunk-NPVINX3Q.js +20 -0
- package/dist/chunk-NPVINX3Q.js.map +1 -0
- package/dist/chunk-NSMU66ZX.js +47 -0
- package/dist/chunk-NSMU66ZX.js.map +1 -0
- package/dist/chunk-O57QMLNI.js +68 -0
- package/dist/chunk-O57QMLNI.js.map +1 -0
- package/dist/chunk-O5SWPHUQ.js +79 -0
- package/dist/chunk-O5SWPHUQ.js.map +1 -0
- package/dist/chunk-OGVSZ7NV.js +53 -0
- package/dist/chunk-OGVSZ7NV.js.map +1 -0
- package/dist/chunk-OONIUDST.js +48 -0
- package/dist/chunk-OONIUDST.js.map +1 -0
- package/dist/chunk-PLF3BBQI.js +139 -0
- package/dist/chunk-PLF3BBQI.js.map +1 -0
- package/dist/chunk-Q74VRQEX.js +26 -0
- package/dist/chunk-Q74VRQEX.js.map +1 -0
- package/dist/chunk-QEHTPQHL.js +35 -0
- package/dist/chunk-QEHTPQHL.js.map +1 -0
- package/dist/chunk-RJTDQOT2.js +73 -0
- package/dist/chunk-RJTDQOT2.js.map +1 -0
- package/dist/chunk-RQ3RXKAZ.js +203 -0
- package/dist/chunk-RQ3RXKAZ.js.map +1 -0
- package/dist/chunk-RWJELAS6.js +46 -0
- package/dist/chunk-RWJELAS6.js.map +1 -0
- package/dist/chunk-RZK2S2OO.js +126 -0
- package/dist/chunk-RZK2S2OO.js.map +1 -0
- package/dist/chunk-SAP7JSSO.js +106 -0
- package/dist/chunk-SAP7JSSO.js.map +1 -0
- package/dist/chunk-T3TQPOVM.js +79 -0
- package/dist/chunk-T3TQPOVM.js.map +1 -0
- package/dist/chunk-T56TTOI6.js +53 -0
- package/dist/chunk-T56TTOI6.js.map +1 -0
- package/dist/chunk-T7EFDE2L.js +36 -0
- package/dist/chunk-T7EFDE2L.js.map +1 -0
- package/dist/chunk-V3P5QLLX.js +154 -0
- package/dist/chunk-V3P5QLLX.js.map +1 -0
- package/dist/chunk-VTRUUT5K.js +31 -0
- package/dist/chunk-VTRUUT5K.js.map +1 -0
- package/dist/chunk-WDANALHD.js +95 -0
- package/dist/chunk-WDANALHD.js.map +1 -0
- package/dist/chunk-WSQNPRGN.js +12 -0
- package/dist/chunk-WSQNPRGN.js.map +1 -0
- package/dist/chunk-XR5QBVEV.js +56 -0
- package/dist/chunk-XR5QBVEV.js.map +1 -0
- package/dist/chunk-YYWODLER.js +111 -0
- package/dist/chunk-YYWODLER.js.map +1 -0
- package/dist/chunk-ZOXO3G3I.js +50 -0
- package/dist/chunk-ZOXO3G3I.js.map +1 -0
- package/dist/code-block.d.ts +14 -0
- package/dist/code-block.js +5 -0
- package/dist/code-block.js.map +1 -0
- package/dist/combobox.d.ts +26 -0
- package/dist/combobox.js +5 -0
- package/dist/combobox.js.map +1 -0
- package/dist/command-menu.d.ts +52 -0
- package/dist/command-menu.js +7 -0
- package/dist/command-menu.js.map +1 -0
- package/dist/container.d.ts +9 -0
- package/dist/container.js +5 -0
- package/dist/container.js.map +1 -0
- package/dist/cta-band.d.ts +12 -0
- package/dist/cta-band.js +5 -0
- package/dist/cta-band.js.map +1 -0
- package/dist/data-table.d.ts +58 -0
- package/dist/data-table.js +12 -0
- package/dist/data-table.js.map +1 -0
- package/dist/date-picker.d.ts +20 -0
- package/dist/date-picker.js +5 -0
- package/dist/date-picker.js.map +1 -0
- package/dist/dialog.d.ts +21 -0
- package/dist/dialog.js +5 -0
- package/dist/dialog.js.map +1 -0
- package/dist/divider.d.ts +12 -0
- package/dist/divider.js +5 -0
- package/dist/divider.js.map +1 -0
- package/dist/docker-stack-card.d.ts +21 -0
- package/dist/docker-stack-card.js +6 -0
- package/dist/docker-stack-card.js.map +1 -0
- package/dist/donut.d.ts +15 -0
- package/dist/donut.js +5 -0
- package/dist/donut.js.map +1 -0
- package/dist/dropdown-menu.d.ts +15 -0
- package/dist/dropdown-menu.js +5 -0
- package/dist/dropdown-menu.js.map +1 -0
- package/dist/empty.d.ts +12 -0
- package/dist/empty.js +5 -0
- package/dist/empty.js.map +1 -0
- package/dist/feature-card.d.ts +11 -0
- package/dist/feature-card.js +6 -0
- package/dist/feature-card.js.map +1 -0
- package/dist/file-upload.d.ts +20 -0
- package/dist/file-upload.js +5 -0
- package/dist/file-upload.js.map +1 -0
- package/dist/footer.d.ts +35 -0
- package/dist/footer.js +5 -0
- package/dist/footer.js.map +1 -0
- package/dist/form-row.d.ts +15 -0
- package/dist/form-row.js +5 -0
- package/dist/form-row.js.map +1 -0
- package/dist/glow-card.d.ts +14 -0
- package/dist/glow-card.js +5 -0
- package/dist/glow-card.js.map +1 -0
- package/dist/hero-block.d.ts +16 -0
- package/dist/hero-block.js +7 -0
- package/dist/hero-block.js.map +1 -0
- package/dist/host-card.d.ts +27 -0
- package/dist/host-card.js +6 -0
- package/dist/host-card.js.map +1 -0
- package/dist/incident-card.d.ts +23 -0
- package/dist/incident-card.js +5 -0
- package/dist/incident-card.js.map +1 -0
- package/dist/index.d.ts +76 -960
- package/dist/index.js +68 -3812
- package/dist/index.js.map +1 -1
- package/dist/input.d.ts +10 -0
- package/dist/input.js +5 -0
- package/dist/input.js.map +1 -0
- package/dist/kbd.d.ts +24 -0
- package/dist/kbd.js +5 -0
- package/dist/kbd.js.map +1 -0
- package/dist/log-viewer.d.ts +35 -0
- package/dist/log-viewer.js +5 -0
- package/dist/log-viewer.js.map +1 -0
- package/dist/meter.d.ts +23 -0
- package/dist/meter.js +5 -0
- package/dist/meter.js.map +1 -0
- package/dist/noir-glow-background.d.ts +50 -0
- package/dist/noir-glow-background.js +4 -0
- package/dist/noir-glow-background.js.map +1 -0
- package/dist/pagination.d.ts +16 -0
- package/dist/pagination.js +5 -0
- package/dist/pagination.js.map +1 -0
- package/dist/panel.d.ts +12 -0
- package/dist/panel.js +5 -0
- package/dist/panel.js.map +1 -0
- package/dist/password-input.d.ts +10 -0
- package/dist/password-input.js +5 -0
- package/dist/password-input.js.map +1 -0
- package/dist/pill.d.ts +14 -0
- package/dist/pill.js +5 -0
- package/dist/pill.js.map +1 -0
- package/dist/pricing-card.d.ts +20 -0
- package/dist/pricing-card.js +6 -0
- package/dist/pricing-card.js.map +1 -0
- package/dist/progress.d.ts +6 -0
- package/dist/progress.js +5 -0
- package/dist/progress.js.map +1 -0
- package/dist/radio-group.d.ts +18 -0
- package/dist/radio-group.js +5 -0
- package/dist/radio-group.js.map +1 -0
- package/dist/rollback-plan.d.ts +23 -0
- package/dist/rollback-plan.js +5 -0
- package/dist/rollback-plan.js.map +1 -0
- package/dist/segmented.d.ts +17 -0
- package/dist/segmented.js +5 -0
- package/dist/segmented.js.map +1 -0
- package/dist/select.d.ts +18 -0
- package/dist/select.js +5 -0
- package/dist/select.js.map +1 -0
- package/dist/service-health-card.d.ts +21 -0
- package/dist/service-health-card.js +6 -0
- package/dist/service-health-card.js.map +1 -0
- package/dist/sheet.d.ts +25 -0
- package/dist/sheet.js +5 -0
- package/dist/sheet.js.map +1 -0
- package/dist/skeleton.d.ts +5 -0
- package/dist/skeleton.js +5 -0
- package/dist/skeleton.js.map +1 -0
- package/dist/slider.d.ts +12 -0
- package/dist/slider.js +5 -0
- package/dist/slider.js.map +1 -0
- package/dist/sparkline.d.ts +16 -0
- package/dist/sparkline.js +5 -0
- package/dist/sparkline.js.map +1 -0
- package/dist/stat-card.d.ts +15 -0
- package/dist/stat-card.js +5 -0
- package/dist/stat-card.js.map +1 -0
- package/dist/status-dot.d.ts +13 -0
- package/dist/status-dot.js +5 -0
- package/dist/status-dot.js.map +1 -0
- package/dist/stepper.d.ts +16 -0
- package/dist/stepper.js +5 -0
- package/dist/stepper.js.map +1 -0
- package/dist/switch.d.ts +9 -0
- package/dist/switch.js +5 -0
- package/dist/switch.js.map +1 -0
- package/dist/tabs.d.ts +9 -0
- package/dist/tabs.js +5 -0
- package/dist/tabs.js.map +1 -0
- package/dist/tag-input.d.ts +20 -0
- package/dist/tag-input.js +5 -0
- package/dist/tag-input.js.map +1 -0
- package/dist/textarea.d.ts +10 -0
- package/dist/textarea.js +5 -0
- package/dist/textarea.js.map +1 -0
- package/dist/timeline.d.ts +30 -0
- package/dist/timeline.js +5 -0
- package/dist/timeline.js.map +1 -0
- package/dist/toaster.d.ts +10 -0
- package/dist/toaster.js +4 -0
- package/dist/toaster.js.map +1 -0
- package/dist/tooltip.d.ts +12 -0
- package/dist/tooltip.js +5 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/utils.d.ts +5 -0
- package/dist/utils.js +4 -0
- package/dist/utils.js.map +1 -0
- package/globals-layers.css +935 -0
- package/globals-v3.css +17 -0
- package/globals-v4.css +2 -0
- package/globals.css +12 -939
- package/package.json +82 -17
- package/registry.json +920 -0
- package/tailwind.css +9 -0
- package/tollerud-preset.js +55 -50
- package/dist/index.cjs +0 -3938
- package/dist/index.cjs.map +0 -1
- 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
|
|
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`
|
|
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
|
-
|
|
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
|
-
**
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
70
|
+
**Tailwind v3 (legacy)** — preset in `tailwind.config.ts` plus `@tollerud/ui/globals-v3.css`:
|
|
72
71
|
|
|
73
72
|
```ts
|
|
74
|
-
|
|
73
|
+
import type { Config } from 'tailwindcss'
|
|
75
74
|
import tollerudPreset from '@tollerud/ui/preset'
|
|
76
|
-
export default { presets: [tollerudPreset] }
|
|
77
|
-
```
|
|
78
75
|
|
|
79
|
-
|
|
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 '
|
|
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
|
-
###
|
|
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
|
-
#
|
|
204
|
-
npx shadcn@latest add https://tollerud
|
|
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
|
|
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 # 🏆
|
|
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
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
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,32 +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
|
-
|
|
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
|
-
|
|
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
|
-
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:
|
|
35
27
|
```css
|
|
36
|
-
|
|
37
|
-
@import "tailwindcss/utilities";
|
|
28
|
+
/* app/globals.css — Tailwind v4 (default) */
|
|
38
29
|
@import "@tollerud/ui/globals.css";
|
|
30
|
+
@source "../node_modules/@tollerud/ui/dist";
|
|
39
31
|
```
|
|
40
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
|
+
|
|
41
39
|
---
|
|
42
40
|
|
|
43
41
|
## Critical gotchas (read before writing code)
|
|
@@ -356,20 +354,41 @@ import { Empty, EmptyHeader, EmptyIcon, EmptyTitle, EmptyDescription, EmptyConte
|
|
|
356
354
|
### Visual / decorative
|
|
357
355
|
|
|
358
356
|
```tsx
|
|
359
|
-
import {
|
|
357
|
+
import {
|
|
358
|
+
GlowCard, NoirGlowBackground, BentoDashboard,
|
|
359
|
+
BarChart, AreaChart, Donut, Sparkline,
|
|
360
|
+
HeroBlock, FeatureCard, CTABand,
|
|
361
|
+
} from '@tollerud/ui'
|
|
360
362
|
```
|
|
361
363
|
- **GlowCard** — `children`, `className?`, `glowColor?`, `intensity?: number`. Mouse-tracked glow card.
|
|
362
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`.
|
|
363
365
|
- **BentoDashboard** — composed dashboard shell taking arrays of `HostCardProps`, `StatCardProps`, `ServiceHealthCardProps`, incidents, `BackupJob[]`.
|
|
364
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
|
+
|
|
365
383
|
### Data & tables
|
|
366
384
|
|
|
367
385
|
```tsx
|
|
368
386
|
import { DataTable } from '@tollerud/ui'
|
|
369
387
|
|
|
388
|
+
// Simple: sort + per-column text filters
|
|
370
389
|
<DataTable
|
|
371
390
|
columns={[
|
|
372
|
-
{ key: 'hostname', label: 'Host', sortable: true },
|
|
391
|
+
{ key: 'hostname', label: 'Host', sortable: true, filterable: true },
|
|
373
392
|
{ key: 'status', label: 'Status', render: (_v, row) => <Badge variant={row.status === 'online' ? 'success' : 'error'}>{row.status}</Badge> },
|
|
374
393
|
]}
|
|
375
394
|
data={hosts}
|
|
@@ -377,8 +396,25 @@ import { DataTable } from '@tollerud/ui'
|
|
|
377
396
|
onRowClick={(row) => {}}
|
|
378
397
|
emptyMessage="No hosts found"
|
|
379
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
|
+
/>
|
|
380
415
|
```
|
|
381
|
-
|
|
416
|
+
|
|
417
|
+
`data` and `rows` are aliases. Column labels use `label` (docs demos may use `header` via the docs adapter only).
|
|
382
418
|
|
|
383
419
|
### Infra / homelab set
|
|
384
420
|
|
package/components.json
ADDED
|
@@ -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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"alert-inbox.js"}
|
package/dist/alert.d.ts
ADDED
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"alert.js"}
|