@n3wth/ui 0.3.1 → 0.3.4
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 +14 -75
- package/dist/atoms/Badge/Badge.d.ts.map +1 -1
- package/dist/atoms/Button/Button.d.ts.map +1 -1
- package/dist/atoms/HamburgerIcon/HamburgerIcon.d.ts.map +1 -1
- package/dist/atoms/Input/Input.d.ts +4 -1
- package/dist/atoms/Input/Input.d.ts.map +1 -1
- package/dist/index.js +1798 -1676
- package/dist/molecules/Card/Card.d.ts.map +1 -1
- package/dist/molecules/CommandBox/CommandBox.d.ts.map +1 -1
- package/dist/molecules/MobileDrawer/MobileDrawer.d.ts +3 -1
- package/dist/molecules/MobileDrawer/MobileDrawer.d.ts.map +1 -1
- package/dist/organisms/Nav/Nav.d.ts +4 -5
- package/dist/organisms/Nav/Nav.d.ts.map +1 -1
- package/dist/organisms/Section/Section.d.ts.map +1 -1
- package/dist/styles.css +138 -23
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -48,14 +48,12 @@ export default {
|
|
|
48
48
|
|
|
49
49
|
### Atoms
|
|
50
50
|
|
|
51
|
-
Basic building blocks:
|
|
52
|
-
|
|
53
51
|
| Component | Description |
|
|
54
52
|
|-----------|-------------|
|
|
55
53
|
| `Button` | Primary, secondary, ghost, glass variants with loading state |
|
|
56
54
|
| `Badge` | Default, sage, coral, mint, gold, outline variants |
|
|
57
55
|
| `Input` | Text input with glass variant, icons, and error state |
|
|
58
|
-
| `Icon` |
|
|
56
|
+
| `Icon` | SVG icons via iconoir-react |
|
|
59
57
|
| `AnimatedText` | Text with entrance animations |
|
|
60
58
|
| `HamburgerIcon` | Animated menu icon |
|
|
61
59
|
| `NoiseOverlay` | Subtle noise texture overlay |
|
|
@@ -63,8 +61,6 @@ Basic building blocks:
|
|
|
63
61
|
|
|
64
62
|
### Molecules
|
|
65
63
|
|
|
66
|
-
Composite components:
|
|
67
|
-
|
|
68
64
|
| Component | Description |
|
|
69
65
|
|-----------|-------------|
|
|
70
66
|
| `Card` | Container with header, content, footer. Glass/interactive variants |
|
|
@@ -75,8 +71,6 @@ Composite components:
|
|
|
75
71
|
|
|
76
72
|
### Organisms
|
|
77
73
|
|
|
78
|
-
Complex UI sections:
|
|
79
|
-
|
|
80
74
|
| Component | Description |
|
|
81
75
|
|-----------|-------------|
|
|
82
76
|
| `Nav` | Fixed navigation with mobile menu and theme toggle |
|
|
@@ -86,10 +80,6 @@ Complex UI sections:
|
|
|
86
80
|
|
|
87
81
|
## Hooks
|
|
88
82
|
|
|
89
|
-
```tsx
|
|
90
|
-
import { useTheme, useMediaQuery, useKeyboardShortcuts, useReducedMotion } from '@n3wth/ui'
|
|
91
|
-
```
|
|
92
|
-
|
|
93
83
|
| Hook | Description |
|
|
94
84
|
|------|-------------|
|
|
95
85
|
| `useTheme` | Dark/light theme management with system preference detection |
|
|
@@ -97,37 +87,26 @@ import { useTheme, useMediaQuery, useKeyboardShortcuts, useReducedMotion } from
|
|
|
97
87
|
| `useKeyboardShortcuts` | Keyboard shortcut handler |
|
|
98
88
|
| `useReducedMotion` | Respects user's motion preferences |
|
|
99
89
|
|
|
100
|
-
## Design Tokens
|
|
101
|
-
|
|
102
|
-
The Tailwind preset includes:
|
|
103
|
-
|
|
104
|
-
- **Colors**: Semantic color palette with dark mode support
|
|
105
|
-
- **Typography**: Display and body font families
|
|
106
|
-
- **Spacing**: Consistent spacing scale
|
|
107
|
-
- **Effects**: Glass morphism and blur effects
|
|
108
|
-
|
|
109
90
|
## Development
|
|
110
91
|
|
|
111
92
|
```bash
|
|
112
|
-
#
|
|
113
|
-
npm
|
|
114
|
-
|
|
115
|
-
#
|
|
116
|
-
npm run
|
|
117
|
-
|
|
118
|
-
# Run demo app at localhost:5173
|
|
119
|
-
npm run demo
|
|
120
|
-
|
|
121
|
-
# Build library to dist/
|
|
122
|
-
npm run build
|
|
93
|
+
npm run dev # Watch mode for library
|
|
94
|
+
npm run demo # Run demo app at localhost:5173
|
|
95
|
+
npm run build # Build library to dist/
|
|
96
|
+
npm run demo:build # Build demo for Vercel
|
|
97
|
+
npm run lint # Lint
|
|
98
|
+
```
|
|
123
99
|
|
|
124
|
-
|
|
125
|
-
npm run demo:build
|
|
100
|
+
## Publishing
|
|
126
101
|
|
|
127
|
-
|
|
128
|
-
npm run
|
|
102
|
+
```bash
|
|
103
|
+
npm run release:patch # 0.3.2 → 0.3.3
|
|
104
|
+
npm run release:minor # 0.3.2 → 0.4.0
|
|
105
|
+
npm run release:major # 0.3.2 → 1.0.0
|
|
129
106
|
```
|
|
130
107
|
|
|
108
|
+
Single command: bumps version, commits, pushes, tags, creates GitHub release. GitHub Actions publishes to npm via OIDC.
|
|
109
|
+
|
|
131
110
|
## Project Structure
|
|
132
111
|
|
|
133
112
|
```
|
|
@@ -140,46 +119,6 @@ src/
|
|
|
140
119
|
demo/ # Demo app (ui.newth.ai)
|
|
141
120
|
```
|
|
142
121
|
|
|
143
|
-
## Usage Examples
|
|
144
|
-
|
|
145
|
-
### Button
|
|
146
|
-
|
|
147
|
-
```tsx
|
|
148
|
-
import { Button, Icon } from '@n3wth/ui'
|
|
149
|
-
|
|
150
|
-
<Button variant="primary">Primary</Button>
|
|
151
|
-
<Button variant="glass" isLoading>Loading</Button>
|
|
152
|
-
<Button leftIcon={<Icon name="github" />}>GitHub</Button>
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
### Card
|
|
156
|
-
|
|
157
|
-
```tsx
|
|
158
|
-
import { Card, CardHeader, CardTitle, CardContent } from '@n3wth/ui'
|
|
159
|
-
|
|
160
|
-
<Card variant="glass">
|
|
161
|
-
<CardHeader>
|
|
162
|
-
<CardTitle>Title</CardTitle>
|
|
163
|
-
</CardHeader>
|
|
164
|
-
<CardContent>Content here</CardContent>
|
|
165
|
-
</Card>
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
### Theme
|
|
169
|
-
|
|
170
|
-
```tsx
|
|
171
|
-
import { useTheme, ThemeToggle } from '@n3wth/ui'
|
|
172
|
-
|
|
173
|
-
function App() {
|
|
174
|
-
const { theme, toggleTheme } = useTheme()
|
|
175
|
-
return <ThemeToggle theme={theme} onToggle={toggleTheme} />
|
|
176
|
-
}
|
|
177
|
-
```
|
|
178
|
-
|
|
179
|
-
## Browser Support
|
|
180
|
-
|
|
181
|
-
Supports all modern browsers. Uses CSS custom properties and backdrop-filter for glass effects.
|
|
182
|
-
|
|
183
122
|
## License
|
|
184
123
|
|
|
185
124
|
MIT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG3D,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACpE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/atoms/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG3D,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACpE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,IAAW,EACX,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAqDZ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAGd,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,CAAA;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAGd,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,CAAA;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,MAAM,2GAgGlB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HamburgerIcon.d.ts","sourceRoot":"","sources":["../../../src/atoms/HamburgerIcon/HamburgerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,QAAQ,CAAC,aAAa,CAAC;IACjE,qEAAqE;IACrE,MAAM,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,IAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"HamburgerIcon.d.ts","sourceRoot":"","sources":["../../../src/atoms/HamburgerIcon/HamburgerIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,QAAQ,CAAC,aAAa,CAAC;IACjE,qEAAqE;IACrE,MAAM,EAAE,OAAO,CAAA;IACf,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,IAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA8BpB"}
|
|
@@ -4,7 +4,10 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
4
4
|
inputSize?: 'sm' | 'md' | 'lg';
|
|
5
5
|
leftIcon?: ReactNode;
|
|
6
6
|
rightIcon?: ReactNode;
|
|
7
|
-
error
|
|
7
|
+
/** Error state - boolean for styling only, or string to display error message */
|
|
8
|
+
error?: boolean | string;
|
|
9
|
+
/** Associated label id for accessibility */
|
|
10
|
+
labelId?: string;
|
|
8
11
|
}
|
|
9
12
|
export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
|
|
10
13
|
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5E,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/atoms/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5E,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,iFAAiF;IACjF,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,KAAK,yGA+FjB,CAAA"}
|