glyphx 0.1.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/README.md +103 -0
- package/dist/index.js +2398 -0
- package/dist/index.umd.cjs +84 -0
- package/dist/vite.svg +1 -0
- package/package.json +58 -0
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# Glyph
|
|
2
|
+
|
|
3
|
+
A fast, keyboard-first, Spotlight-style command palette for React.
|
|
4
|
+
|
|
5
|
+
Glyph provides a clean, accessible, and native-feeling command menu inspired by macOS Spotlight and modern desktop tools.
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- Keyboard-first UX (`⌘ + K` / `Ctrl + K`)
|
|
10
|
+
- Fuzzy search with ranked results
|
|
11
|
+
- Arrow-key navigation with auto-scroll
|
|
12
|
+
- Grouped commands
|
|
13
|
+
- System light / dark mode support
|
|
14
|
+
- Glass-style UI
|
|
15
|
+
- Accessible by default (Radix Dialog)
|
|
16
|
+
- Smooth, GPU-composited animations
|
|
17
|
+
|
|
18
|
+
## Installation
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install glyph
|
|
22
|
+
or
|
|
23
|
+
pnpm add glyph
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## 4️⃣ Basic Usage
|
|
28
|
+
|
|
29
|
+
```md
|
|
30
|
+
## Basic Usage
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { Glyph } from "glyph";
|
|
34
|
+
|
|
35
|
+
const commands = [
|
|
36
|
+
{
|
|
37
|
+
id: "home",
|
|
38
|
+
title: "Go to Home",
|
|
39
|
+
group: "Navigation",
|
|
40
|
+
run: () => {
|
|
41
|
+
console.log("Navigate to home");
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
];
|
|
45
|
+
|
|
46
|
+
export default function App() {
|
|
47
|
+
return <Glyph commands={commands} />;
|
|
48
|
+
}
|
|
49
|
+
Press ⌘ + K on macOS or Ctrl + K on Windows/Linux to open the palette.
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
## 5️⃣ Controlled Usage
|
|
54
|
+
|
|
55
|
+
```md
|
|
56
|
+
## Controlled Usage
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
<Glyph
|
|
60
|
+
commands={commands}
|
|
61
|
+
open={isOpen}
|
|
62
|
+
onOpenChange={setIsOpen}
|
|
63
|
+
/>
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## 6️⃣ Command Shape
|
|
69
|
+
|
|
70
|
+
```md
|
|
71
|
+
## Command Shape
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
type Command = {
|
|
75
|
+
id: string;
|
|
76
|
+
title: string;
|
|
77
|
+
group?: string;
|
|
78
|
+
run: () => void;
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## 7️⃣ Design Goals
|
|
84
|
+
|
|
85
|
+
```md
|
|
86
|
+
## Design Goals
|
|
87
|
+
|
|
88
|
+
- Minimal visual noise
|
|
89
|
+
- Keyboard dominance
|
|
90
|
+
- Instant feedback
|
|
91
|
+
- Native-feeling motion
|
|
92
|
+
- Easy to integrate and customize
|
|
93
|
+
|
|
94
|
+
Glyph is intended as a foundational UI primitive, not a full application.
|
|
95
|
+
|
|
96
|
+
## Status
|
|
97
|
+
|
|
98
|
+
Glyph is in early development.
|
|
99
|
+
APIs may change until a stable release is published.
|
|
100
|
+
|
|
101
|
+
## License
|
|
102
|
+
|
|
103
|
+
MIT
|