@puzzle-ui/hooks 0.5.0 → 0.5.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 +23 -85
- package/package.json +7 -2
package/README.md
CHANGED
|
@@ -1,98 +1,36 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @puzzle-ui/hooks
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Reusable React hooks for keyboard shortcuts and accessible roving focus. Use this package when an application needs low-level keyboard or focus behavior without taking on a component or styling dependency.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
>
|
|
7
|
-
> This project is under active development. APIs, component props,
|
|
8
|
-
> package exports, styling, and internal implementation may change
|
|
9
|
-
> without notice. Components may be incomplete, and testing,
|
|
10
|
-
> accessibility, documentation, and framework compatibility are not yet
|
|
11
|
-
> guaranteed. Use it for experimentation and evaluation only---not for
|
|
12
|
-
> production applications.
|
|
5
|
+
**Documentation: [puzzle-ui.com/docs/hooks](https://puzzle-ui.com/docs/hooks)**
|
|
13
6
|
|
|
14
|
-
|
|
7
|
+
## Install
|
|
15
8
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- An existing React application with a bundler that supports CSS imports, such as Vite.
|
|
22
|
-
- Familiarity with React and TypeScript. The UI and theme packages require React and React DOM 19 or later within the supported React 19 range.
|
|
23
|
-
|
|
24
|
-
## Set up a new project
|
|
25
|
-
|
|
26
|
-
Simple run our @puzzle-ui/create project template to get started.
|
|
27
|
-
|
|
28
|
-
npm:
|
|
29
|
-
|
|
30
|
-
```bash
|
|
31
|
-
npx @puzzle-ui/create
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
bun:
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
bunx @puzzle-ui/create
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
Puzzle can set up a new project for you with the following framework options:
|
|
41
|
-
|
|
42
|
-
- Basic React app
|
|
43
|
-
- Tanstack start
|
|
44
|
-
- Next.js
|
|
45
|
-
|
|
46
|
-
Furthermore you can choose to install tailwindcss or not.
|
|
47
|
-
It directly installs all dependencies and sets up the project for you.
|
|
48
|
-
|
|
49
|
-
## Set up in an existing project:
|
|
50
|
-
|
|
51
|
-
Install the UI library and theme package in your application's directory. Choose your package manager below:
|
|
52
|
-
|
|
53
|
-
npm:
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
npm install @puzzle-ui/ui --save
|
|
9
|
+
```sh
|
|
10
|
+
npm install @puzzle-ui/hooks
|
|
11
|
+
# or: bun add @puzzle-ui/hooks
|
|
12
|
+
# or: pnpm add @puzzle-ui/hooks
|
|
13
|
+
# or: yarn add @puzzle-ui/hooks
|
|
57
14
|
```
|
|
58
15
|
|
|
59
|
-
|
|
16
|
+
Requires React `^19.0.0` as a peer dependency.
|
|
60
17
|
|
|
61
|
-
|
|
62
|
-
bun add @puzzle-ui/create
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
pnpm:
|
|
18
|
+
## Usage
|
|
66
19
|
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
```
|
|
20
|
+
```tsx
|
|
21
|
+
import { useKeyboardKeys } from "@puzzle-ui/hooks";
|
|
70
22
|
|
|
71
|
-
|
|
23
|
+
function EscapeShortcut({ close }: { close: () => void }) {
|
|
24
|
+
useKeyboardKeys({
|
|
25
|
+
keys: ["Escape"],
|
|
26
|
+
onKeyDown: () => close(),
|
|
27
|
+
enabled: true,
|
|
28
|
+
});
|
|
72
29
|
|
|
73
|
-
|
|
74
|
-
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
75
32
|
```
|
|
76
33
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
## Your first interface
|
|
80
|
-
|
|
81
|
-
Import components from `"@puzzle-ui/ui` and wrap your application in `Theme` from `"@puzzle-ui/theme`:
|
|
34
|
+
`useKeyboardKeys` subscribes to selected global keydown/keyup events and reports modifier state. `useRovingFocus` provides roving `tabIndex`, element refs, focus management, and arrow/Home/End navigation for composite widgets. Both hooks and their public types are exported from the package root; React is the only peer dependency.
|
|
82
35
|
|
|
83
|
-
|
|
84
|
-
import { Theme } from "@puzzle-ui/theme";
|
|
85
|
-
import { Button } from "@puzzle-ui/ui";
|
|
86
|
-
|
|
87
|
-
export const App = () => (
|
|
88
|
-
<Theme>
|
|
89
|
-
<main>
|
|
90
|
-
<h1>Hello, Puzzle</h1>
|
|
91
|
-
<p>Build your interface with reusable components and shared tokens.</p>
|
|
92
|
-
<Button onClick={() => window.alert("Welcome to Puzzle!")}>
|
|
93
|
-
Get started
|
|
94
|
-
</Button>
|
|
95
|
-
</main>
|
|
96
|
-
</Theme>
|
|
97
|
-
);
|
|
98
|
-
```
|
|
36
|
+
See the [hooks documentation](https://puzzle-ui.com/docs/hooks) for complete signatures, options, return values, examples, SSR guidance, and accessibility notes.
|
package/package.json
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@puzzle-ui/hooks",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Reusable React hooks for Puzzle",
|
|
5
|
+
"homepage": "https://puzzle-ui.com",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/senorprogramador/puzzle.git"
|
|
9
|
+
},
|
|
5
10
|
"license": "MIT",
|
|
6
11
|
"publishConfig": {
|
|
7
12
|
"access": "public",
|
|
@@ -34,7 +39,7 @@
|
|
|
34
39
|
"prepack": "tsdown"
|
|
35
40
|
},
|
|
36
41
|
"dependencies": {
|
|
37
|
-
"@puzzle-ui/core": "^0.5.
|
|
42
|
+
"@puzzle-ui/core": "^0.5.1"
|
|
38
43
|
},
|
|
39
44
|
"peerDependencies": {
|
|
40
45
|
"react": "^19.0.0"
|