@termuijs/widgets 0.1.0 → 0.1.2

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Karanjot Singh
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,92 @@
1
+ # @termuijs/widgets
2
+
3
+ The building blocks for terminal UIs. Boxes, text, tables, progress bars, spinners, gauges, and a virtualized list that handles millions of rows without breaking a sweat.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @termuijs/widgets
9
+ ```
10
+
11
+ Requires `@termuijs/core` as a peer dependency.
12
+
13
+ ## Widgets
14
+
15
+ | Widget | What it is |
16
+ |--------|-----------|
17
+ | `Box` | Container with flexbox layout, borders, padding, margin |
18
+ | `Text` | Styled text. Color, bold, italic, underline, strikethrough, dim |
19
+ | `Table` | Data table with headers, column alignment, row selection |
20
+ | `ProgressBar` | Horizontal bar with percentage fill and optional label |
21
+ | `Spinner` | Animated loading indicator. Ships with multiple animation styles |
22
+ | `Gauge` | Arc or circular gauge for numeric values |
23
+ | `TextInput` | Single-line text input with cursor, placeholder, and change callback |
24
+ | `List` | Scrollable list with keyboard selection. Good for small datasets |
25
+ | `VirtualList` | Scroll-virtualized list. Renders only the visible rows, so 1M items costs the same as 10 |
26
+ | `LogView` | Tailing log viewer with auto-scroll and configurable buffer limit |
27
+ | `Sparkline` | Inline line chart from an array of numbers |
28
+ | `StatusIndicator` | Colored dot with a label (ok / warn / error / unknown) |
29
+ | `BarChart` | Horizontal or vertical bar chart with grouping |
30
+ | `Scrollbar` | Standalone scrollbar indicator |
31
+
32
+ ## Usage
33
+
34
+ ```typescript
35
+ import { Box, Text, ProgressBar, VirtualList } from '@termuijs/widgets'
36
+
37
+ const container = new Box({
38
+ flexDirection: 'column',
39
+ border: 'rounded',
40
+ padding: 1,
41
+ })
42
+
43
+ container.addChild(new Text({ content: 'Downloads', bold: true }))
44
+ container.addChild(new ProgressBar({ value: 0.73, width: 30 }))
45
+
46
+ // VirtualList renders only visible rows
47
+ const list = new VirtualList({
48
+ totalItems: 100_000,
49
+ renderItem: (i) => `Row ${i}`,
50
+ onSelect: (i) => console.log('picked', i),
51
+ })
52
+ container.addChild(list)
53
+ ```
54
+
55
+ ## VirtualList
56
+
57
+ The standout addition. It only paints the items that fit in the viewport, plus a small overscan buffer above and below. A list of 100,000 items renders the same ~26 rows as a list of 10.
58
+
59
+ ```typescript
60
+ const list = new VirtualList({
61
+ totalItems: data.length,
62
+ itemHeight: 1,
63
+ overscan: 2,
64
+ renderItem: (index) => `${data[index].name} — ${data[index].status}`,
65
+ onSelect: (index) => inspect(data[index]),
66
+ })
67
+
68
+ // Navigation
69
+ list.selectNext()
70
+ list.selectPrev()
71
+ list.pageDown()
72
+ list.selectFirst()
73
+ list.selectLast()
74
+ list.scrollTo(500)
75
+ list.confirm() // fires onSelect with current index
76
+
77
+ // Update data on the fly
78
+ list.setTotalItems(newData.length)
79
+ list.setRenderItem((i) => newData[i].label)
80
+ ```
81
+
82
+ ## Every widget supports
83
+
84
+ - `visible` — show or hide
85
+ - `focusable` — whether Tab stops on this widget
86
+ - `style` — colors, borders, padding, margin
87
+ - `markDirty()` — flags the widget for re-render on the next frame
88
+ - Focus ring rendering when focused
89
+
90
+ ## License
91
+
92
+ MIT