prime-ui-kit 0.2.0 → 0.2.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 +57 -57
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
# prime-ui-kit
|
|
2
2
|
|
|
3
|
-
**prime-ui-kit**
|
|
3
|
+
**prime-ui-kit** is a UI kit for **React 19** focused on a predictable runtime, **CSS Modules**, and **design tokens** as plain **CSS variables** (`--prime-sys-*`). Tailwind is not part of the required stack, and there is no Radix “monolith” on every widget: overlays, dropdowns, focus, and positioning rely on **custom hooks and markup**, while heavy peer dependencies are limited to a narrow area (dates and calendar accessibility).
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Repository: [github.com/esurkov1/prime-ui](https://github.com/esurkov1/prime-ui). npm package: **`prime-ui-kit`**.
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
|
|
9
|
-
##
|
|
9
|
+
## Why this approach
|
|
10
10
|
|
|
11
|
-
###
|
|
11
|
+
### Almost dependency-free (in the runtime sense)
|
|
12
12
|
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
13
|
+
- **The build does not bundle peer packages** into the library bundle (`tsup` with `external` for React, React Aria, react-day-picker, date-fns) — one version in the app, no duplication.
|
|
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`.
|
|
16
16
|
|
|
17
|
-
###
|
|
17
|
+
### Works with different “frameworks” around React
|
|
18
18
|
|
|
19
|
-
|
|
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
20
|
|
|
21
|
-
###
|
|
21
|
+
### Predictable architecture
|
|
22
22
|
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
23
|
+
- **Design system from code:** palette, control dimensions, color semantics, and themes are **generated** from TypeScript (`tokens/` → `bun run tokens:build` → `src/styles/*.css`). Components use **`--prime-sys-*`**, not scattered literals.
|
|
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.
|
|
28
28
|
|
|
29
29
|
---
|
|
30
30
|
|
|
31
|
-
##
|
|
31
|
+
## Repository architecture
|
|
32
32
|
|
|
33
33
|
```text
|
|
34
34
|
tokens/primitives.ts
|
|
@@ -41,73 +41,73 @@ src/styles/tokens.css
|
|
|
41
41
|
src/styles/theme-light.css (AUTO-GENERATED)
|
|
42
42
|
src/styles/theme-dark.css
|
|
43
43
|
|
|
44
|
-
src/components/*/*.tsx + *.module.css —
|
|
45
|
-
src/internal/* —
|
|
46
|
-
src/hooks/* —
|
|
47
|
-
src/icons/* —
|
|
48
|
-
src/index.ts —
|
|
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
49
|
|
|
50
|
-
dist/ — ESM +
|
|
50
|
+
dist/ — ESM + types after tsup
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
**npm publish** (`package.json` → `files`): `dist`, `src/styles`, `LICENSE`. Explicit **`exports`**: main entry, `prime-ui-kit/components`, separate paths to `styles.css`, `tokens.css`, `theme-light.css`, `theme-dark.css`.
|
|
54
54
|
|
|
55
55
|
---
|
|
56
56
|
|
|
57
|
-
##
|
|
57
|
+
## What’s in the kit (feature overview)
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
Forms and input: **Input**, **Textarea**, **Checkbox**, **Radio**, **Switch**, **Select**, **Slider**, **DigitInput**, **FileUpload**, **ColorPicker**, **Hint**, **Label**, **Kbd**.
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
Overlays and layered navigation: **Modal**, **Drawer**, **Popover**, **Dropdown**, **Tooltip**, **CommandMenu**.
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
Layout and product chrome: **PageShell**, **PageContent**, **Sidebar**, **Breadcrumb**, **Tabs**, **Accordion**, **Stepper** (horizontal/vertical), **SegmentedControl**, **Pagination**, **DataTable**.
|
|
64
64
|
|
|
65
|
-
|
|
65
|
+
Feedback and content: **Button**, **ButtonGroup**, **LinkButton**, **Badge**, **Banner**, **Notification** (+ provider/store), **ProgressBar**, **ProgressCircle**, **Typography**, **Divider**, **Tag**, **Avatar**, **CodeBlock**, **Datepicker** (with presets and time).
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
Additionally: **ControlSizeProvider** for consistent control sizing in a subtree, **ExampleFrame** (for docs/playground).
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
The full export list is in `src/components/index.ts`. Live examples are in `playground/` (`bun run playground:dev`).
|
|
70
70
|
|
|
71
71
|
---
|
|
72
72
|
|
|
73
|
-
##
|
|
73
|
+
## Dependencies: straight talk
|
|
74
74
|
|
|
75
|
-
|
|
|
75
|
+
| Layer | Packages |
|
|
76
76
|
|------|--------|
|
|
77
|
-
| **Peer (
|
|
78
|
-
|
|
|
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` |
|
|
79
79
|
|
|
80
|
-
**React Aria**
|
|
80
|
+
**React Aria** and **react-day-picker** are used where proven accessibility and calendar behavior are needed; the rest of the interactivity is implemented locally. **React Router** is required for links in **Sidebar**; without a router you can avoid those API surfaces or wrap the app in `Router`.
|
|
81
81
|
|
|
82
|
-
|
|
82
|
+
There is **no** `@radix-ui/*` in the source; polymorphic triggers go through the internal **Slot** (`src/internal/slot.tsx`).
|
|
83
83
|
|
|
84
84
|
---
|
|
85
85
|
|
|
86
|
-
##
|
|
86
|
+
## Installation
|
|
87
87
|
|
|
88
88
|
```bash
|
|
89
89
|
npm install prime-ui-kit
|
|
90
90
|
npm install react react-dom react-aria-components react-day-picker date-fns
|
|
91
91
|
```
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
Peer versions — see `package.json`.
|
|
94
94
|
|
|
95
95
|
---
|
|
96
96
|
|
|
97
|
-
##
|
|
97
|
+
## Wiring up styles
|
|
98
98
|
|
|
99
|
-
|
|
99
|
+
Recommended order at the entry point:
|
|
100
100
|
|
|
101
101
|
```css
|
|
102
102
|
@import "prime-ui-kit/tokens.css";
|
|
103
103
|
@import "prime-ui-kit/theme-light.css";
|
|
104
|
-
/*
|
|
104
|
+
/* or theme-dark.css / switch via data-theme */
|
|
105
105
|
@import "prime-ui-kit/styles.css";
|
|
106
106
|
```
|
|
107
107
|
|
|
108
108
|
---
|
|
109
109
|
|
|
110
|
-
##
|
|
110
|
+
## Importing components
|
|
111
111
|
|
|
112
112
|
```tsx
|
|
113
113
|
import { Button, Input, Modal } from "prime-ui-kit";
|
|
@@ -117,7 +117,7 @@ import { DataTable } from "prime-ui-kit/components";
|
|
|
117
117
|
|
|
118
118
|
---
|
|
119
119
|
|
|
120
|
-
##
|
|
120
|
+
## API examples
|
|
121
121
|
|
|
122
122
|
```tsx
|
|
123
123
|
<Input.Root size="m" label="Email" id="email">
|
|
@@ -127,38 +127,38 @@ import { DataTable } from "prime-ui-kit/components";
|
|
|
127
127
|
</Input.Root>
|
|
128
128
|
|
|
129
129
|
<Button variant="primary" mode="filled" size="l">
|
|
130
|
-
|
|
130
|
+
Submit
|
|
131
131
|
</Button>
|
|
132
132
|
```
|
|
133
133
|
|
|
134
134
|
---
|
|
135
135
|
|
|
136
|
-
##
|
|
136
|
+
## Development and verification
|
|
137
137
|
|
|
138
|
-
|
|
|
138
|
+
| Command | Purpose |
|
|
139
139
|
|---------|------------|
|
|
140
|
-
| `bun run verify` | lint +
|
|
141
|
-
| `bun run build` |
|
|
142
|
-
| `bun run tokens:build` |
|
|
140
|
+
| `bun run verify` | lint + types + tests + build |
|
|
141
|
+
| `bun run build` | tokens + `tsup` |
|
|
142
|
+
| `bun run tokens:build` | rebuild CSS tokens |
|
|
143
143
|
| `bun run playground:dev` | Vite playground |
|
|
144
144
|
| `bun run test` | Vitest |
|
|
145
145
|
| `bun run check` / `check:fix` | Biome |
|
|
146
146
|
|
|
147
|
-
|
|
147
|
+
Contributor contract — **`RULES.md`**. Assistant materials and checklists — **`prime-ui-skill/`** (not included in the npm package).
|
|
148
148
|
|
|
149
149
|
---
|
|
150
150
|
|
|
151
|
-
## CI
|
|
151
|
+
## CI and npm publishing
|
|
152
152
|
|
|
153
|
-
|
|
153
|
+
GitHub Secrets must include **`NPM_TOKEN`**.
|
|
154
154
|
|
|
155
|
-
-
|
|
156
|
-
-
|
|
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`.
|
|
157
157
|
|
|
158
|
-
|
|
158
|
+
Before a release, bump **`version`** in `package.json` and create a release with a tag like `v0.2.1` matching the package version.
|
|
159
159
|
|
|
160
160
|
---
|
|
161
161
|
|
|
162
|
-
##
|
|
162
|
+
## License
|
|
163
163
|
|
|
164
|
-
MIT —
|
|
164
|
+
MIT — see `LICENSE`.
|