@spartan-ng/brain 0.0.1-alpha.704 → 0.0.1-alpha.705
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 +118 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,121 @@
|
|
|
1
|
-
# brain
|
|
1
|
+
# @spartan-ng/brain
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@spartan-ng/brain)
|
|
4
|
+
[](https://www.npmjs.com/package/@spartan-ng/brain)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
[](https://discord.gg/EqHnxQ4uQr)
|
|
4
7
|
|
|
5
|
-
|
|
8
|
+
[Website](https://spartan.ng) • [Documentation](https://www.spartan.ng/documentation/installation) • [Components](https://www.spartan.ng/components) • [GitHub](https://github.com/spartan-ng/spartan)
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
> Accessible, unstyled UI primitives for Angular. The behavior half of [spartan/ui](https://spartan.ng).
|
|
11
|
+
|
|
12
|
+
`@spartan-ng/brain` is a fully tree-shakable collection of headless Angular primitives - keyboard navigation, focus management, ARIA wiring, and state - with zero opinions about styling. Pair it with [`helm`](https://www.spartan.ng/documentation/installation) styles (copied into your codebase by the [spartan CLI](https://www.npmjs.com/package/@spartan-ng/cli)) for the full shadcn-style experience, or bring your own design system.
|
|
13
|
+
|
|
14
|
+
Inspired by [Radix UI](https://radix-ui.com) and [shadcn/ui](https://ui.shadcn.com), adapted for the Angular ecosystem.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @spartan-ng/brain
|
|
20
|
+
# or
|
|
21
|
+
pnpm add @spartan-ng/brain
|
|
22
|
+
# or
|
|
23
|
+
yarn add @spartan-ng/brain
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
For the easiest setup, use the [spartan CLI](https://www.npmjs.com/package/@spartan-ng/cli) - it installs the right secondary entry points and copies matching helm styles in one command:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install -D @spartan-ng/cli
|
|
30
|
+
ng g @spartan-ng/cli:init
|
|
31
|
+
ng g @spartan-ng/cli:ui
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Usage
|
|
35
|
+
|
|
36
|
+
Every primitive lives behind a secondary entry point so you only ship what you import:
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
import { Component } from '@angular/core';
|
|
40
|
+
import { BrnAccordionImports } from '@spartan-ng/brain/accordion';
|
|
41
|
+
|
|
42
|
+
@Component({
|
|
43
|
+
selector: 'app-faq',
|
|
44
|
+
imports: [BrnAccordionImports],
|
|
45
|
+
template: `
|
|
46
|
+
<brn-accordion>
|
|
47
|
+
<brn-accordion-item>
|
|
48
|
+
<brn-accordion-trigger>Is it accessible?</brn-accordion-trigger>
|
|
49
|
+
<brn-accordion-content>
|
|
50
|
+
Yes. brain ships with keyboard navigation and full ARIA out of the box.
|
|
51
|
+
</brn-accordion-content>
|
|
52
|
+
</brn-accordion-item>
|
|
53
|
+
</brn-accordion>
|
|
54
|
+
`,
|
|
55
|
+
})
|
|
56
|
+
export class Faq {}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Each primitive exports an `Imports` array (e.g. `BrnAccordionImports`, `BrnDialogImports`) for one-line wiring, or you can cherry-pick individual directives and components.
|
|
60
|
+
|
|
61
|
+
## Secondary Entry Points
|
|
62
|
+
|
|
63
|
+
Import from a specific entry point to keep your bundle lean:
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
import { BrnDialogImports } from '@spartan-ng/brain/dialog';
|
|
67
|
+
import { BrnSelectImports } from '@spartan-ng/brain/select';
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Available entry points:
|
|
71
|
+
|
|
72
|
+
`accordion`, `alert-dialog`, `autocomplete`, `avatar`, `button`, `calendar`, `checkbox`, `collapsible`, `combobox`, `command`, `core`, `date-time`, `date-time-luxon`, `dialog`, `field`, `forms`, `hover-card`, `input`, `input-otp`, `label`, `navigation-menu`, `popover`, `progress`, `radio-group`, `resizable`, `select`, `separator`, `sheet`, `slider`, `sonner`, `switch`, `tabs`, `textarea`, `toggle`, `toggle-group`, `tooltip`.
|
|
73
|
+
|
|
74
|
+
Browse the [components gallery](https://www.spartan.ng/components) for live demos, API docs, and styled helm examples for each primitive.
|
|
75
|
+
|
|
76
|
+
## Tailwind Preset
|
|
77
|
+
|
|
78
|
+
`@spartan-ng/brain` ships with the shared Tailwind preset that powers the helm styles. Most users have the [CLI](https://www.npmjs.com/package/@spartan-ng/cli) wire this up for them, but you can also do it by hand.
|
|
79
|
+
|
|
80
|
+
**Tailwind v4** - add to your CSS:
|
|
81
|
+
|
|
82
|
+
```css
|
|
83
|
+
@import '@spartan-ng/brain/hlm-tailwind-preset.css';
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
**Tailwind v3** - extend your `tailwind.config.js`:
|
|
87
|
+
|
|
88
|
+
```js
|
|
89
|
+
module.exports = {
|
|
90
|
+
presets: [require('@spartan-ng/brain/hlm-tailwind-preset')],
|
|
91
|
+
// ...
|
|
92
|
+
};
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Peer Dependencies
|
|
96
|
+
|
|
97
|
+
`@spartan-ng/brain` works with:
|
|
98
|
+
|
|
99
|
+
- Angular `>=20.0.0 <22.0.0` (core, common, forms, cdk)
|
|
100
|
+
- `rxjs` `>=6.6.0`
|
|
101
|
+
- `clsx` `>=2.0.0`
|
|
102
|
+
- `tailwindcss` `>=3.3.0`
|
|
103
|
+
- `luxon` `>=3.0.0` _(optional - only required for `@spartan-ng/brain/date-time-luxon`)_
|
|
104
|
+
|
|
105
|
+
## Documentation
|
|
106
|
+
|
|
107
|
+
- [Installation guide](https://www.spartan.ng/documentation/installation)
|
|
108
|
+
- [CLI documentation](https://www.spartan.ng/documentation/cli)
|
|
109
|
+
- [Theming](https://www.spartan.ng/documentation/theming)
|
|
110
|
+
- [Components](https://www.spartan.ng/components)
|
|
111
|
+
|
|
112
|
+
## Community
|
|
113
|
+
|
|
114
|
+
- [Discord](https://discord.gg/EqHnxQ4uQr)
|
|
115
|
+
- [GitHub](https://github.com/spartan-ng/spartan)
|
|
116
|
+
- [Twitter / X](https://twitter.com/goetzrobin)
|
|
117
|
+
- [Sponsor the project](https://github.com/sponsors/goetzrobin)
|
|
118
|
+
|
|
119
|
+
## License
|
|
120
|
+
|
|
121
|
+
MIT © [goetzrobin](https://github.com/goetzrobin) and the [spartan contributors](https://github.com/spartan-ng/spartan/graphs/contributors)
|