@n3wth/ui 0.4.1 β 0.5.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 +79 -27
- package/dist/index.js +840 -823
- package/dist/index.js.map +1 -1
- package/dist/molecules/NavLink/NavLink.d.ts.map +1 -1
- package/dist/organisms/Nav/Nav.d.ts +2 -1
- package/dist/organisms/Nav/Nav.d.ts.map +1 -1
- package/dist/r/button.json +15 -0
- package/dist/r/card.json +12 -0
- package/dist/r/hero.json +12 -0
- package/dist/r/registry.json +38 -0
- package/dist/styles.css +2 -4
- package/package.json +3 -2
- package/public/r/button.json +15 -0
- package/public/r/card.json +12 -0
- package/public/r/hero.json +12 -0
- package/public/r/registry.json +38 -0
package/README.md
CHANGED
|
@@ -1,56 +1,108 @@
|
|
|
1
|
-
# n3wth/ui
|
|
1
|
+
# n3wth/ui π οΈ
|
|
2
2
|
|
|
3
|
-
Atomic design system. Flat, minimal, iOS-inspired.
|
|
3
|
+
Atomic design system for n3wth projects. Flat, minimal, iOS-inspired.
|
|
4
|
+
No shadows, no glowsβjust clean glassmorphism and precision typography.
|
|
4
5
|
|
|
5
|
-
**[
|
|
6
|
+
**[Live Demo](https://ui.newth.ai)** / **[npm package](https://www.npmjs.com/package/@n3wth/ui)** / **[Registry](https://github.com/n3wth/ui/blob/main/registry.json)**
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## π€ AI-Native Integration
|
|
11
|
+
|
|
12
|
+
This library is optimized for AI-driven development (**v0**, **Cursor**, **Google AI Studio**, **Claude Code**).
|
|
13
|
+
|
|
14
|
+
- **v0 / Shadcn**: Point v0 to this repo or use the [registry.json](./registry.json).
|
|
15
|
+
- **Google AI Studio**: Use the [native system instructions](./google-ai-studio-instructions.json).
|
|
16
|
+
- **Cursor**: Automated context via [.cursorrules](./.cursorrules).
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## π¦ Install
|
|
8
21
|
|
|
9
22
|
```bash
|
|
10
23
|
npm install @n3wth/ui
|
|
11
24
|
```
|
|
12
25
|
|
|
26
|
+
### Quick Start
|
|
27
|
+
|
|
13
28
|
```tsx
|
|
14
|
-
import { Button, Card,
|
|
29
|
+
import { Button, Card, Hero, Section } from '@n3wth/ui'
|
|
15
30
|
import '@n3wth/ui/styles'
|
|
31
|
+
|
|
32
|
+
export default function App() {
|
|
33
|
+
return (
|
|
34
|
+
<Section>
|
|
35
|
+
<Hero title="Hello World" subtitle="iOS-inspired design system" />
|
|
36
|
+
<Card>
|
|
37
|
+
<Button variant="accent">Click Me</Button>
|
|
38
|
+
</Card>
|
|
39
|
+
</Section>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
16
42
|
```
|
|
17
43
|
|
|
18
|
-
|
|
44
|
+
---
|
|
19
45
|
|
|
20
|
-
|
|
46
|
+
## π¨ Design Tokens
|
|
21
47
|
|
|
22
|
-
|
|
48
|
+
Built on **Tailwind CSS 4**.
|
|
23
49
|
|
|
24
|
-
|
|
50
|
+
| Token | Description |
|
|
51
|
+
| :--- | :--- |
|
|
52
|
+
| **Typography** | `font-display` (Mona Sans), `font-sans` (Geist Sans) |
|
|
53
|
+
| **Glass** | `.glass-card`, `.glass-pill`, `.glass-nav` |
|
|
54
|
+
| **Colors** | Semantic tokens: `bg`, `bg-secondary`, `sage`, `coral`, `gold`, `mint` |
|
|
55
|
+
| **Spacing** | iOS-standard safe areas: `safe-top`, `safe-bottom` |
|
|
25
56
|
|
|
26
|
-
|
|
57
|
+
---
|
|
27
58
|
|
|
28
|
-
|
|
59
|
+
## 𧩠Components
|
|
29
60
|
|
|
30
|
-
|
|
61
|
+
| Category | Components |
|
|
62
|
+
| :--- | :--- |
|
|
63
|
+
| **Atoms** | `Button`, `Badge`, `Input`, `Icon`, `AnimatedText`, `NoiseOverlay`, `ScrollIndicator` |
|
|
64
|
+
| **Molecules** | `Card`, `CommandBox`, `ThemeToggle`, `MobileDrawer`, `NavLink`, `CompositeShape` |
|
|
65
|
+
| **Organisms** | `Nav`, `Hero`, `Section`, `Footer` |
|
|
31
66
|
|
|
32
|
-
|
|
67
|
+
---
|
|
33
68
|
|
|
34
|
-
|
|
69
|
+
## πͺ Hooks
|
|
35
70
|
|
|
36
|
-
|
|
71
|
+
- `useTheme` β Dark/light mode with system persistence.
|
|
72
|
+
- `useMediaQuery` β Clean responsive breakpoint handling.
|
|
73
|
+
- `useKeyboardShortcuts` β Global keyboard event management.
|
|
74
|
+
- `useScrollReveal` β Entry animations for atomic elements.
|
|
75
|
+
- `useReducedMotion` β Respects user accessibility preferences.
|
|
37
76
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
## π οΈ Development
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
# Clone and install
|
|
83
|
+
git clone https://github.com/n3wth/ui
|
|
84
|
+
npm install
|
|
85
|
+
|
|
86
|
+
# Run the showcase/demo
|
|
87
|
+
npm run demo
|
|
88
|
+
|
|
89
|
+
# Build for production
|
|
90
|
+
npm run build
|
|
91
|
+
|
|
92
|
+
# Update AI Registry
|
|
93
|
+
npm run registry:build
|
|
44
94
|
```
|
|
45
95
|
|
|
46
|
-
|
|
96
|
+
### Releasing
|
|
97
|
+
|
|
98
|
+
We use a semantic patch/minor/major flow that automatically updates AI registry artifacts:
|
|
47
99
|
|
|
48
100
|
```bash
|
|
49
|
-
npm run
|
|
50
|
-
npm run demo # Demo at localhost:5173
|
|
51
|
-
npm run build # Build to dist/
|
|
101
|
+
npm run release:patch
|
|
52
102
|
```
|
|
53
103
|
|
|
54
|
-
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## π License
|
|
55
107
|
|
|
56
|
-
MIT
|
|
108
|
+
MIT Β© [Oliver Newth](https://newth.ai)
|