@neural-ui/core 1.0.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 +203 -0
- package/fesm2022/neural-ui-core.mjs +8517 -0
- package/fesm2022/neural-ui-core.mjs.map +1 -0
- package/package.json +52 -0
- package/styles/_breakpoints.scss +64 -0
- package/styles/_tokens.scss +210 -0
- package/styles/index.scss +43 -0
- package/types/neural-ui-core.d.ts +2100 -0
package/README.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
# @neural-ui/core
|
|
2
|
+
|
|
3
|
+
<p>
|
|
4
|
+
<a href="https://www.npmjs.com/package/@neural-ui/core"><img src="https://img.shields.io/npm/v/@neural-ui/core?color=0ea5e9&label=npm" alt="npm version" /></a>
|
|
5
|
+
<a href="https://www.npmjs.com/package/@neural-ui/core"><img src="https://img.shields.io/npm/dm/@neural-ui/core?color=6366f1" alt="npm downloads" /></a>
|
|
6
|
+
<img src="https://img.shields.io/badge/Angular-19--22-dd0031?logo=angular" alt="Angular 19-22" />
|
|
7
|
+
<img src="https://img.shields.io/badge/tests-534%20passing-22c55e" alt="534 tests passing" />
|
|
8
|
+
<img src="https://img.shields.io/badge/coverage-91%25-22c55e" alt="91% coverage" />
|
|
9
|
+
<img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT license" />
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
Modern Angular UI component library — **signals-first**, fully **standalone**, zero Zone.js dependency.
|
|
13
|
+
Built for Angular 19–22 with OnPush change detection and no Zone.js requirement.
|
|
14
|
+
|
|
15
|
+
> Live documentation and examples → [neural-ui-showcase.vercel.app](https://neural-ui-showcase.vercel.app)
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Features
|
|
20
|
+
|
|
21
|
+
- **40+ components** — forms, navigation, layout, feedback, and data display
|
|
22
|
+
- **Signals API** — all inputs/outputs use `input()`, `output()`, `model()` — no `@Input()` decorators
|
|
23
|
+
- **Standalone** — every component is standalone, import only what you need
|
|
24
|
+
- **OnPush everywhere** — maximum performance out of the box
|
|
25
|
+
- **Accessible** — ARIA attributes, keyboard navigation and focus management built in
|
|
26
|
+
- **Themeable** — full design token system via CSS custom properties
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Installation
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm install @neural-ui/core @angular/cdk @ng-icons/core @ng-icons/lucide apexcharts ng-apexcharts
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Setup
|
|
39
|
+
|
|
40
|
+
Add `provideNeuralUI()` to your `app.config.ts`:
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
import { ApplicationConfig } from '@angular/core';
|
|
44
|
+
import { provideRouter } from '@angular/router';
|
|
45
|
+
import { provideNeuralUI } from '@neural-ui/core';
|
|
46
|
+
|
|
47
|
+
export const appConfig: ApplicationConfig = {
|
|
48
|
+
providers: [provideRouter(routes), provideNeuralUI()],
|
|
49
|
+
};
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Optionally customize global icon defaults:
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
provideNeuralUI({ iconSize: '1rem', iconStrokeWidth: '1.5' });
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Import the global stylesheet in your `styles.scss`:
|
|
59
|
+
|
|
60
|
+
```scss
|
|
61
|
+
@use '@neural-ui/core/styles' as *;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## Usage
|
|
67
|
+
|
|
68
|
+
Import any component directly into your standalone component:
|
|
69
|
+
|
|
70
|
+
```typescript
|
|
71
|
+
import { NeuButtonComponent, NeuInputComponent } from '@neural-ui/core';
|
|
72
|
+
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
73
|
+
|
|
74
|
+
@Component({
|
|
75
|
+
imports: [NeuButtonComponent, NeuInputComponent, ReactiveFormsModule],
|
|
76
|
+
template: `
|
|
77
|
+
<neu-input label="Email" type="email" [formControl]="email" />
|
|
78
|
+
<neu-button variant="primary" (click)="submit()">Send</neu-button>
|
|
79
|
+
`,
|
|
80
|
+
})
|
|
81
|
+
export class LoginComponent {
|
|
82
|
+
email = new FormControl('');
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
## Components
|
|
89
|
+
|
|
90
|
+
| Category | Components |
|
|
91
|
+
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
92
|
+
| **Forms** | `NeuCheckbox` · `NeuDateInput` · `NeuInput` · `NeuMultiselect` · `NeuRadio` · `NeuRadioGroup` · `NeuSelect` · `NeuSlider` · `NeuSwitch` · `NeuTextarea` · `NeuToggleButtonGroup` |
|
|
93
|
+
| **Navigation** | `NeuBreadcrumb` · `NeuNav` · `NeuPagination` · `NeuSidebar` · `NeuStepper` · `NeuTabs` |
|
|
94
|
+
| **Layout** | `NeuAccordion` · `NeuCard` · `NeuDivider` · `NeuModal` · `NeuTable` |
|
|
95
|
+
| **UI Elements** | `NeuAvatar` · `NeuBadge` · `NeuButton` · `NeuChart` · `NeuChip` · `NeuCodeBlock` · `NeuEmptyState` · `NeuIcon` · `NeuProgressBar` · `NeuRating` · `NeuSkeleton` · `NeuSpinner` · `NeuSplitButton` · `NeuStatsCard` · `NeuTimeline` |
|
|
96
|
+
| **Feedback** | `NeuToast` · `NeuToastService` · `NeuTooltip` |
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## Theming
|
|
101
|
+
|
|
102
|
+
All visual properties are controlled via CSS custom properties. Override them in your global stylesheet:
|
|
103
|
+
|
|
104
|
+
```scss
|
|
105
|
+
:root {
|
|
106
|
+
// Brand colors
|
|
107
|
+
--neu-color-primary: #6366f1;
|
|
108
|
+
--neu-color-primary-hover: #4f46e5;
|
|
109
|
+
|
|
110
|
+
// Neutral scale
|
|
111
|
+
--neu-color-surface: #ffffff;
|
|
112
|
+
--neu-color-surface-alt: #f8fafc;
|
|
113
|
+
--neu-color-border: #e2e8f0;
|
|
114
|
+
--neu-color-text: #0f172a;
|
|
115
|
+
--neu-color-text-muted: #64748b;
|
|
116
|
+
|
|
117
|
+
// Feedback
|
|
118
|
+
--neu-color-error: #ef4444;
|
|
119
|
+
--neu-color-success: #22c55e;
|
|
120
|
+
--neu-color-warning: #f59e0b;
|
|
121
|
+
|
|
122
|
+
// Shape & spacing
|
|
123
|
+
--neu-radius-sm: 0.25rem;
|
|
124
|
+
--neu-radius-md: 0.5rem;
|
|
125
|
+
--neu-radius-lg: 0.75rem;
|
|
126
|
+
--neu-radius-xl: 1rem;
|
|
127
|
+
--neu-spacing-xs: 0.25rem;
|
|
128
|
+
--neu-spacing-sm: 0.5rem;
|
|
129
|
+
--neu-spacing-md: 1rem;
|
|
130
|
+
--neu-spacing-lg: 1.5rem;
|
|
131
|
+
|
|
132
|
+
// Typography
|
|
133
|
+
--neu-font-family: 'Inter', system-ui, sans-serif;
|
|
134
|
+
--neu-font-size-sm: 0.875rem;
|
|
135
|
+
--neu-font-size-base: 1rem;
|
|
136
|
+
--neu-font-size-lg: 1.125rem;
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
## Peer dependencies
|
|
143
|
+
|
|
144
|
+
| Package | Required version |
|
|
145
|
+
| ------------------ | ------------------ |
|
|
146
|
+
| `@angular/core` | `>=19.0.0 <23.0.0` |
|
|
147
|
+
| `@angular/cdk` | `>=19.0.0 <23.0.0` |
|
|
148
|
+
| `@angular/common` | `>=19.0.0 <23.0.0` |
|
|
149
|
+
| `@angular/forms` | `>=19.0.0 <23.0.0` |
|
|
150
|
+
| `@angular/router` | `>=19.0.0 <23.0.0` |
|
|
151
|
+
| `@ng-icons/core` | `>=33.0.0` |
|
|
152
|
+
| `@ng-icons/lucide` | `>=33.0.0` |
|
|
153
|
+
| `apexcharts` | `>=5.0.0` |
|
|
154
|
+
| `ng-apexcharts` | `>=2.0.0` |
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## License
|
|
159
|
+
|
|
160
|
+
MIT © [Pedro Moreno Trujillo](https://github.com/PedroMorenoTrujillo)
|
|
161
|
+
|
|
162
|
+
```scss
|
|
163
|
+
@use '@neural-ui/core/styles' as *;
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
## Usage
|
|
167
|
+
|
|
168
|
+
Import components directly into your standalone component or NgModule:
|
|
169
|
+
|
|
170
|
+
```typescript
|
|
171
|
+
import { NeuButtonComponent } from '@neural-ui/core';
|
|
172
|
+
|
|
173
|
+
@Component({
|
|
174
|
+
imports: [NeuButtonComponent],
|
|
175
|
+
template: `<neu-button variant="primary">Click me</neu-button>`,
|
|
176
|
+
})
|
|
177
|
+
export class AppComponent {}
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## Components
|
|
181
|
+
|
|
182
|
+
| Category | Components |
|
|
183
|
+
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
184
|
+
| **Forms** | `NeuCheckbox`, `NeuDateInput`, `NeuInput`, `NeuMultiselect`, `NeuRadio`, `NeuRadioGroup`, `NeuSelect`, `NeuSlider`, `NeuSwitch`, `NeuTextarea`, `NeuToggleButtonGroup` |
|
|
185
|
+
| **Navigation** | `NeuBreadcrumb`, `NeuNav`, `NeuPagination`, `NeuSidebar`, `NeuStepper`, `NeuTabs` |
|
|
186
|
+
| **Layout** | `NeuAccordion`, `NeuCard`, `NeuDivider`, `NeuDialog` / `NeuDialogService`, `NeuTable` |
|
|
187
|
+
| **UI Elements** | `NeuAvatar`, `NeuBadge`, `NeuButton`, `NeuChart`, `NeuChip`, `NeuCodeBlock`, `NeuEmptyState`, `NeuIcon`, `NeuProgressBar`, `NeuRating`, `NeuSkeleton`, `NeuSpinner`, `NeuSplitButton`, `NeuStatsCard`, `NeuTimeline` |
|
|
188
|
+
| **Feedback** | `NeuToast` / `NeuToastService`, `NeuTooltip` |
|
|
189
|
+
|
|
190
|
+
## Peer Dependencies
|
|
191
|
+
|
|
192
|
+
| Package | Version |
|
|
193
|
+
| ------------------ | ------------------ |
|
|
194
|
+
| `@angular/core` | `>=19.0.0 <23.0.0` |
|
|
195
|
+
| `@angular/cdk` | `>=19.0.0 <23.0.0` |
|
|
196
|
+
| `@ng-icons/core` | `>=33.0.0` |
|
|
197
|
+
| `@ng-icons/lucide` | `>=33.0.0` |
|
|
198
|
+
| `apexcharts` | `>=5.0.0` |
|
|
199
|
+
| `ng-apexcharts` | `>=2.0.0` |
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
MIT
|