@sovereignfs/ui 0.21.0 → 0.21.1
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 +75 -0
- package/package.json +11 -1
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# @sovereignfs/ui
|
|
2
|
+
|
|
3
|
+
Sovereign Design System — design tokens and React components for building [Sovereign](https://github.com/sovereignfs/sovereign) plugins.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @sovereignfs/ui
|
|
9
|
+
# pnpm add @sovereignfs/ui
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
**Peer dependencies:** React 19+
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
### Components
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import { Button, Input, Card, Dialog, Drawer } from '@sovereignfs/ui';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Available components: `Avatar`, `Badge`, `Button`, `Card`, `Dialog`, `Drawer`, `EmptyState`, `FormField`, `Icon`, `Input`, `NavTabs`, `PageHeader`, `Popover`, `SegmentedControl`, `Select`, `Spinner`, `SystemBanner`, `Tabs`, `Toast` / `useToast`, `Toggle`, `Tooltip`.
|
|
23
|
+
|
|
24
|
+
### Tokens
|
|
25
|
+
|
|
26
|
+
The Sovereign runtime injects design tokens globally. Reference them directly in your CSS — no import needed at runtime:
|
|
27
|
+
|
|
28
|
+
```css
|
|
29
|
+
.my-component {
|
|
30
|
+
color: var(--sv-color-text-primary);
|
|
31
|
+
background: var(--sv-color-surface);
|
|
32
|
+
padding: var(--sv-space-4);
|
|
33
|
+
border-radius: var(--sv-radius-md);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
If you need tokens outside the Sovereign runtime (e.g. Storybook, standalone use), import the CSS file:
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
import '@sovereignfs/ui/tokens.css';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Token architecture
|
|
44
|
+
|
|
45
|
+
Tokens follow a two-tier model:
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
Primitive tokens --sv-grey-50 … --sv-grey-950 / --sv-space-1 … --sv-space-16
|
|
49
|
+
│
|
|
50
|
+
▼ mapped by semantic layer
|
|
51
|
+
Semantic tokens --sv-color-surface / --sv-color-text-primary / --sv-shadow-card
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Plugin developers reference **semantic tokens** — never primitive colours directly. Dark mode and instance theming work by swapping semantic token values; no component changes required.
|
|
55
|
+
|
|
56
|
+
## Icon component
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { Icon } from '@sovereignfs/ui';
|
|
60
|
+
|
|
61
|
+
<Icon name="bell" size={20} />;
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Available icon names: `activity`, `alert-triangle`, `bell`, `check`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`, `eye`, `eye-off`, `grid-2x2`, `house`, `info`, `lock`, `log-out`, `mail`, `package`, `pencil`, `plus`, `rotate-ccw`, `search`, `settings`, `shield`, `sliders-horizontal`, `terminal`, `trash-2`, `user`, `x`.
|
|
65
|
+
|
|
66
|
+
## Documentation
|
|
67
|
+
|
|
68
|
+
- [Storybook — live component & token gallery](https://sovereignfs.github.io/storybook)
|
|
69
|
+
- [Design system reference](https://github.com/sovereignfs/sovereign/blob/main/docs/design-system.md)
|
|
70
|
+
- [Plugin development guide](https://github.com/sovereignfs/sovereign/blob/main/docs/plugin-development.md)
|
|
71
|
+
- [SDK stability & semver policy](https://github.com/sovereignfs/sovereign/blob/main/docs/sdk-stability.md)
|
|
72
|
+
|
|
73
|
+
## License
|
|
74
|
+
|
|
75
|
+
AGPL-3.0-or-later
|
package/package.json
CHANGED
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sovereignfs/ui",
|
|
3
|
-
"version": "0.21.
|
|
3
|
+
"version": "0.21.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Sovereign Design System — design tokens and React components.",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"sovereign",
|
|
8
|
+
"design-system",
|
|
9
|
+
"react",
|
|
10
|
+
"components",
|
|
11
|
+
"css-modules",
|
|
12
|
+
"tokens",
|
|
13
|
+
"plugin",
|
|
14
|
+
"self-hosted"
|
|
15
|
+
],
|
|
6
16
|
"license": "AGPL-3.0-or-later",
|
|
7
17
|
"publishConfig": {
|
|
8
18
|
"access": "public"
|