@kud/ink-ui 0.14.0 → 0.14.1
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/README.md +20 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
- **Selection & navigation** — `Select`, `MultiSelect`, `Tabs`, `Switch`, `Toggle`, `SelectableRow`
|
|
20
20
|
- **Status & feedback** — `Spinner`, `ProgressBar`, `StatusMessage`, `Alert`, `Badge`, `Toast`
|
|
21
21
|
- **Layout & chrome** — `Banner`, `Header`, `Panel` (bordered pane, optional focus state), `Columns`, `FooterHints`, `KeyValue`, `LoadingScreen`, `ScrollView`
|
|
22
|
+
- **Behaviour hooks** — `useTabs` and `useListCursor` own the keyboard state that every consumer used to hand-roll, so Tab/Shift+Tab and arrow/vim navigation behave the same everywhere
|
|
22
23
|
- **Full [@inkjs/ui](https://github.com/vadimdemedes/ink-ui) parity** — every upstream component has an equivalent, plus a dozen more the design system adds on top
|
|
23
24
|
- **Colourblind-safe by design** — state is signalled by shape, case, and glyph, never colour alone
|
|
24
25
|
- **Design tokens included** — a shared colour palette (`colors`) and spacing scale (`spacing`) to keep every screen consistent
|
|
@@ -84,6 +85,25 @@ const SignUp = () => (
|
|
|
84
85
|
)
|
|
85
86
|
```
|
|
86
87
|
|
|
88
|
+
Components stay presentational and controlled — they take `active`/`value` and render. The behaviour hooks supply the keyboard state to drive them, so the two compose without either forcing the other:
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import { Tabs, useTabs, useListCursor } from "@kud/ink-ui"
|
|
92
|
+
|
|
93
|
+
const items = [
|
|
94
|
+
{ value: "open", label: "Open", count: 3 },
|
|
95
|
+
{ value: "done", label: "Done" },
|
|
96
|
+
]
|
|
97
|
+
|
|
98
|
+
const Inbox = ({ rows }) => {
|
|
99
|
+
const { active } = useTabs(items) // Tab forward, Shift+Tab back, wraps
|
|
100
|
+
const { cursor } = useListCursor(rows.length) // ↑/↓ and k/j, clamps at the ends
|
|
101
|
+
return <Tabs active={active} items={items} />
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
Both take `{ isActive }` so a screen with several focus regions can gate them, and `useListCursor` takes `{ wrap }` for genuinely circular lists. `useTabs` wraps by default because a tab bar is a ring; `useListCursor` clamps because a list has ends.
|
|
106
|
+
|
|
87
107
|
All components accept only the props they need — no theme provider or context required. Design tokens are plain objects:
|
|
88
108
|
|
|
89
109
|
```ts
|