prime-ui-kit 0.2.2 → 0.2.5
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 +73 -106
- package/dist/components/index.css +1434 -1434
- package/dist/components/index.css.map +7 -1
- package/dist/components/index.js +2170 -937
- package/dist/components/index.js.map +7 -1
- package/dist/index.css +1434 -2750
- package/dist/index.css.map +7 -1
- package/dist/index.js +2193 -934
- package/dist/index.js.map +7 -1
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -1,164 +1,131 @@
|
|
|
1
1
|
# prime-ui-kit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React 19 component library: **CSS Modules**, **design tokens** as CSS variables (`--prime-sys-*`), and a **composable API** (`Modal.Root`, `Input.Field`, `Select.Trigger`, …). Works with **Vite**, **Next.js**, **Remix**, or any bundler that supports CSS Modules.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**[npm](https://www.npmjs.com/package/prime-ui-kit)** · **[Repository & issues](https://github.com/esurkov1/prime-ui)**
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Requirements
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
| | Version |
|
|
12
|
+
|---|--------|
|
|
13
|
+
| React / React DOM | ^19.0.0 |
|
|
14
|
+
| react-aria-components | ^1.16.0 |
|
|
15
|
+
| react-day-picker | ^9.14.0 |
|
|
16
|
+
| date-fns | ^4.0.0 |
|
|
12
17
|
|
|
13
|
-
|
|
14
|
-
- **Few direct package dependencies:** icons (`lucide-react`), notification animations (`framer-motion`), navigation links in the sidebar (`react-router-dom`). The core for forms, modals, selects, tooltips, etc. does not pull in dozens of `@radix-ui/*`.
|
|
15
|
-
- **No Tailwind** as a required layer: consumers do not need utility-first CSS for the kit to look consistent — it is enough to import the generated **tokens and themes** plus `styles.css`.
|
|
18
|
+
The package also installs **lucide-react**, **framer-motion**, and **react-router-dom** for icons, notification motion, and **Sidebar** links. Use a router (e.g. `BrowserRouter`) if you render **Sidebar** with navigation items.
|
|
16
19
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
Components are built with **React** — they are not Vue/Svelte widgets. The kit is **not tied** to Next.js, Remix, or plain Vite: these are ordinary ESM modules and CSS that work in any React app with **CSS Modules** support (as most bundlers provide). Separately: the **token layer** is plain CSS; it can be used for visual alignment even outside React (e.g. a shell on another stack with the same variables), while composition stays in React.
|
|
20
|
-
|
|
21
|
-
### Predictable architecture
|
|
20
|
+
---
|
|
22
21
|
|
|
23
|
-
|
|
24
|
-
- **Internal layer** (`src/internal/`): `cx`, contexts, Portal, **Slot** (an `asChild`-style pattern without Radix), hooks such as `useFocusTrap`, `useScrollLock`, `usePosition`.
|
|
25
|
-
- **States and sizes** are centralized (`src/internal/states.ts` — e.g. `componentSizes`: `s` | `m` | `l` | `xl`).
|
|
26
|
-
- **Complex widgets** use a composable API: `Modal.Root`, `Select.Trigger`, `Input.Field`, … with typed context.
|
|
27
|
-
- **Themes:** `data-theme="light" | "dark"` on the root or an isolated container.
|
|
22
|
+
## Install
|
|
28
23
|
|
|
29
|
-
|
|
24
|
+
```bash
|
|
25
|
+
npm install prime-ui-kit react react-dom react-aria-components react-day-picker date-fns
|
|
26
|
+
```
|
|
30
27
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
```text
|
|
34
|
-
tokens/primitives.ts
|
|
35
|
-
→ tokens/semantic.ts
|
|
36
|
-
→ tokens/themes/light.ts | dark.ts
|
|
37
|
-
↓
|
|
38
|
-
scripts/build-tokens.ts
|
|
39
|
-
↓
|
|
40
|
-
src/styles/tokens.css
|
|
41
|
-
src/styles/theme-light.css (AUTO-GENERATED)
|
|
42
|
-
src/styles/theme-dark.css
|
|
43
|
-
|
|
44
|
-
src/components/*/*.tsx + *.module.css — public components
|
|
45
|
-
src/internal/* — kit infrastructure
|
|
46
|
-
src/hooks/* — hooks (e.g. form fields)
|
|
47
|
-
src/icons/* — icon wrappers
|
|
48
|
-
src/index.ts — public entry + globals.css
|
|
49
|
-
|
|
50
|
-
dist/ — ESM + types after tsup
|
|
28
|
+
```bash
|
|
29
|
+
pnpm add prime-ui-kit react react-dom react-aria-components react-day-picker date-fns
|
|
51
30
|
```
|
|
52
31
|
|
|
53
|
-
|
|
32
|
+
```bash
|
|
33
|
+
bun add prime-ui-kit react react-dom react-aria-components react-day-picker date-fns
|
|
34
|
+
```
|
|
54
35
|
|
|
55
36
|
---
|
|
56
37
|
|
|
57
|
-
##
|
|
38
|
+
## Styles
|
|
58
39
|
|
|
59
|
-
|
|
40
|
+
Import the **global styles** (fonts, reset, tokens, and both themes) and then the **bundled component CSS** (CSS Modules output from the published build):
|
|
60
41
|
|
|
61
|
-
|
|
42
|
+
```css
|
|
43
|
+
@import "prime-ui-kit/styles.css";
|
|
44
|
+
@import "prime-ui-kit/bundle.css";
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
`bundle.css` contains the scoped class rules that match the class names embedded in the JS bundle (Button, Input, etc.). `styles.css` includes the Google Fonts load, CSS reset, design tokens, and both light and dark themes.
|
|
62
48
|
|
|
63
|
-
|
|
49
|
+
**Light / dark:** set `data-theme="light"` or `data-theme="dark"` on `<html>`, a layout root, or any wrapper.
|
|
64
50
|
|
|
65
|
-
|
|
51
|
+
If you want fine-grained control (e.g. supply your own reset or only one theme), import the individual files instead:
|
|
66
52
|
|
|
67
|
-
|
|
53
|
+
```css
|
|
54
|
+
@import "prime-ui-kit/tokens.css";
|
|
55
|
+
@import "prime-ui-kit/theme-light.css";
|
|
56
|
+
/* @import "prime-ui-kit/theme-dark.css"; */
|
|
57
|
+
@import "prime-ui-kit/bundle.css";
|
|
58
|
+
```
|
|
68
59
|
|
|
69
|
-
|
|
60
|
+
If you only use `prime-ui-kit/components`, replace `bundle.css` with `prime-ui-kit/components.css`.
|
|
70
61
|
|
|
71
62
|
---
|
|
72
63
|
|
|
73
|
-
##
|
|
74
|
-
|
|
75
|
-
| Layer | Packages |
|
|
76
|
-
|------|--------|
|
|
77
|
-
| **Peer (required in the app)** | `react`, `react-dom`, `react-aria-components`, `react-day-picker`, `date-fns` |
|
|
78
|
-
| **Ships with the kit (dependencies)** | `lucide-react`, `framer-motion`, `react-router-dom` |
|
|
64
|
+
## Usage
|
|
79
65
|
|
|
80
|
-
|
|
66
|
+
Import **`styles.css`** and **`bundle.css`** as described above so components receive the correct layout and appearance.
|
|
81
67
|
|
|
82
|
-
|
|
68
|
+
```tsx
|
|
69
|
+
import { Button, Input, Modal } from "prime-ui-kit";
|
|
83
70
|
|
|
84
|
-
|
|
71
|
+
export function Example() {
|
|
72
|
+
return (
|
|
73
|
+
<>
|
|
74
|
+
<Input.Root size="m" label="Email" id="email">
|
|
75
|
+
<Input.Wrapper>
|
|
76
|
+
<Input.Field type="email" placeholder="you@example.com" />
|
|
77
|
+
</Input.Wrapper>
|
|
78
|
+
</Input.Root>
|
|
79
|
+
|
|
80
|
+
<Button variant="primary" mode="filled" size="l">
|
|
81
|
+
Submit
|
|
82
|
+
</Button>
|
|
83
|
+
</>
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
```
|
|
85
87
|
|
|
86
|
-
|
|
88
|
+
**Heavy or tree-shaken imports** — use the components entry:
|
|
87
89
|
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
npm install react react-dom react-aria-components react-day-picker date-fns
|
|
90
|
+
```tsx
|
|
91
|
+
import { DataTable } from "prime-ui-kit/components";
|
|
91
92
|
```
|
|
92
93
|
|
|
93
|
-
Peer versions — see `package.json`.
|
|
94
94
|
|
|
95
95
|
---
|
|
96
96
|
|
|
97
|
-
##
|
|
98
|
-
|
|
99
|
-
Recommended order at the entry point:
|
|
97
|
+
## Notifications
|
|
100
98
|
|
|
101
|
-
|
|
102
|
-
@import "prime-ui-kit/tokens.css";
|
|
103
|
-
@import "prime-ui-kit/theme-light.css";
|
|
104
|
-
/* or theme-dark.css / switch via data-theme */
|
|
105
|
-
@import "prime-ui-kit/styles.css";
|
|
106
|
-
```
|
|
99
|
+
Wrap the app (or a subtree) with **`NotificationProvider`**, then use the **`useNotifications()`** hook for **`notify`**, **`dismiss`**, and **`dismissAll`**.
|
|
107
100
|
|
|
108
101
|
---
|
|
109
102
|
|
|
110
|
-
##
|
|
103
|
+
## Control size
|
|
111
104
|
|
|
112
|
-
|
|
113
|
-
import { Button, Input, Modal } from "prime-ui-kit";
|
|
114
|
-
|
|
115
|
-
import { DataTable } from "prime-ui-kit/components";
|
|
116
|
-
```
|
|
105
|
+
Optional **`ControlSizeProvider`** sets a default **`s` | `m` | `l` | `xl`** for controls inside the subtree.
|
|
117
106
|
|
|
118
107
|
---
|
|
119
108
|
|
|
120
|
-
##
|
|
109
|
+
## Components
|
|
121
110
|
|
|
122
|
-
|
|
123
|
-
<Input.Root size="m" label="Email" id="email">
|
|
124
|
-
<Input.Wrapper>
|
|
125
|
-
<Input.Field type="email" placeholder="name@company.com" />
|
|
126
|
-
</Input.Wrapper>
|
|
127
|
-
</Input.Root>
|
|
128
|
-
|
|
129
|
-
<Button variant="primary" mode="filled" size="l">
|
|
130
|
-
Submit
|
|
131
|
-
</Button>
|
|
132
|
-
```
|
|
111
|
+
**Forms:** Input, Textarea, Checkbox, Radio, Switch, Select, Slider, DigitInput, FileUpload, ColorPicker, Label, Hint, Kbd.
|
|
133
112
|
|
|
134
|
-
|
|
113
|
+
**Overlays:** Modal, Drawer, Popover, Dropdown, Tooltip, CommandMenu.
|
|
135
114
|
|
|
136
|
-
|
|
115
|
+
**Layout & navigation:** PageShell, PageContent, Sidebar, Breadcrumb, Tabs, Accordion, Stepper, SegmentedControl, Pagination.
|
|
137
116
|
|
|
138
|
-
|
|
139
|
-
|---------|------------|
|
|
140
|
-
| `bun run verify` | lint + types + tests + build |
|
|
141
|
-
| `bun run build` | tokens + `tsup` |
|
|
142
|
-
| `bun run tokens:build` | rebuild CSS tokens |
|
|
143
|
-
| `bun run playground:dev` | Vite playground |
|
|
144
|
-
| `bun run test` | Vitest |
|
|
145
|
-
| `bun run check` / `check:fix` | Biome |
|
|
117
|
+
**Data:** DataTable.
|
|
146
118
|
|
|
147
|
-
|
|
119
|
+
**Actions & content:** Button, ButtonGroup, LinkButton, Badge, Banner, Notification, ProgressBar, ProgressCircle, Typography, Divider, Tag, Avatar, CodeBlock, Datepicker.
|
|
148
120
|
|
|
149
121
|
---
|
|
150
122
|
|
|
151
|
-
##
|
|
152
|
-
|
|
153
|
-
GitHub Secrets must include **`NPM_TOKEN`**.
|
|
154
|
-
|
|
155
|
-
- On push to `main` and on PRs — `bun run verify` runs.
|
|
156
|
-
- Release via **GitHub Release**: the workflow builds the package and runs `npm publish`.
|
|
123
|
+
## TypeScript
|
|
157
124
|
|
|
158
|
-
|
|
125
|
+
Type definitions are published with the package (`dist/*.d.ts`).
|
|
159
126
|
|
|
160
127
|
---
|
|
161
128
|
|
|
162
129
|
## License
|
|
163
130
|
|
|
164
|
-
MIT — see `LICENSE
|
|
131
|
+
MIT — see the `LICENSE` file in the package.
|