prime-ui-kit 0.2.2 → 0.2.3

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.
Files changed (2) hide show
  1. package/README.md +65 -110
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,164 +1,119 @@
1
1
  # prime-ui-kit
2
2
 
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).
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
- Repository: [github.com/esurkov1/prime-ui](https://github.com/esurkov1/prime-ui). npm package: **`prime-ui-kit`**.
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
- ## Why this approach
9
+ ## Requirements
10
10
 
11
- ### Almost dependency-free (in the runtime sense)
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
- - **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
-
17
- ### Works with different “frameworks” around React
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
22
-
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.
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.
28
19
 
29
20
  ---
30
21
 
31
- ## Repository architecture
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
51
- ```
52
-
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
-
55
- ---
56
-
57
- ## What’s in the kit (feature overview)
58
-
59
- Forms and input: **Input**, **Textarea**, **Checkbox**, **Radio**, **Switch**, **Select**, **Slider**, **DigitInput**, **FileUpload**, **ColorPicker**, **Hint**, **Label**, **Kbd**.
60
-
61
- Overlays and layered navigation: **Modal**, **Drawer**, **Popover**, **Dropdown**, **Tooltip**, **CommandMenu**.
62
-
63
- Layout and product chrome: **PageShell**, **PageContent**, **Sidebar**, **Breadcrumb**, **Tabs**, **Accordion**, **Stepper** (horizontal/vertical), **SegmentedControl**, **Pagination**, **DataTable**.
64
-
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
-
67
- Additionally: **ControlSizeProvider** for consistent control sizing in a subtree, **ExampleFrame** (for docs/playground).
68
-
69
- The full export list is in `src/components/index.ts`. Live examples are in `playground/` (`bun run playground:dev`).
70
-
71
- ---
72
-
73
- ## Dependencies: straight talk
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` |
79
-
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
-
82
- There is **no** `@radix-ui/*` in the source; polymorphic triggers go through the internal **Slot** (`src/internal/slot.tsx`).
22
+ ## Install
83
23
 
84
- ---
85
-
86
- ## Installation
24
+ ```bash
25
+ npm install prime-ui-kit react react-dom react-aria-components react-day-picker date-fns
26
+ ```
87
27
 
88
28
  ```bash
89
- npm install prime-ui-kit
90
- npm install react react-dom react-aria-components react-day-picker date-fns
29
+ pnpm add prime-ui-kit react react-dom react-aria-components react-day-picker date-fns
91
30
  ```
92
31
 
93
- Peer versions — see `package.json`.
32
+ ```bash
33
+ bun add prime-ui-kit react react-dom react-aria-components react-day-picker date-fns
34
+ ```
94
35
 
95
36
  ---
96
37
 
97
- ## Wiring up styles
38
+ ## Styles
98
39
 
99
- Recommended order at the entry point:
40
+ Import **tokens**, a **theme**, and **global component styles** (this order):
100
41
 
101
42
  ```css
102
43
  @import "prime-ui-kit/tokens.css";
103
44
  @import "prime-ui-kit/theme-light.css";
104
- /* or theme-dark.css / switch via data-theme */
45
+ /* or: theme-dark.css */
105
46
  @import "prime-ui-kit/styles.css";
106
47
  ```
107
48
 
49
+ **Light / dark:** set `data-theme="light"` or `data-theme="dark"` on `<html>`, a layout root, or any wrapper. You can import both theme files and switch only the attribute.
50
+
108
51
  ---
109
52
 
110
- ## Importing components
53
+ ## Usage
54
+
55
+ Importing from `prime-ui-kit` loads the kit’s global CSS (side effect). You still add **tokens**, **theme**, and **`styles.css`** in your own stylesheet as shown above.
111
56
 
112
57
  ```tsx
113
58
  import { Button, Input, Modal } from "prime-ui-kit";
114
59
 
115
- import { DataTable } from "prime-ui-kit/components";
60
+ export function Example() {
61
+ return (
62
+ <>
63
+ <Input.Root size="m" label="Email" id="email">
64
+ <Input.Wrapper>
65
+ <Input.Field type="email" placeholder="you@example.com" />
66
+ </Input.Wrapper>
67
+ </Input.Root>
68
+
69
+ <Button variant="primary" mode="filled" size="l">
70
+ Submit
71
+ </Button>
72
+ </>
73
+ );
74
+ }
116
75
  ```
117
76
 
118
- ---
119
-
120
- ## API examples
77
+ **Heavy or tree-shaken imports** — use the components entry:
121
78
 
122
79
  ```tsx
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>
80
+ import { DataTable } from "prime-ui-kit/components";
132
81
  ```
133
82
 
134
83
  ---
135
84
 
136
- ## Development and verification
85
+ ## Notifications
86
+
87
+ Wrap the app (or a subtree) with **`NotificationProvider`**, then use the **`useNotifications()`** hook for **`notify`**, **`dismiss`**, and **`dismissAll`**.
137
88
 
138
- | Command | Purpose |
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 |
89
+ ---
146
90
 
147
- Contributor contract — **`RULES.md`**. Assistant materials and checklists — **`prime-ui-skill/`** (not included in the npm package).
91
+ ## Control size
92
+
93
+ Optional **`ControlSizeProvider`** sets a default **`s` | `m` | `l` | `xl`** for controls inside the subtree.
148
94
 
149
95
  ---
150
96
 
151
- ## CI and npm publishing
97
+ ## Components
98
+
99
+ **Forms:** Input, Textarea, Checkbox, Radio, Switch, Select, Slider, DigitInput, FileUpload, ColorPicker, Label, Hint, Kbd.
152
100
 
153
- GitHub Secrets must include **`NPM_TOKEN`**.
101
+ **Overlays:** Modal, Drawer, Popover, Dropdown, Tooltip, CommandMenu.
102
+
103
+ **Layout & navigation:** PageShell, PageContent, Sidebar, Breadcrumb, Tabs, Accordion, Stepper, SegmentedControl, Pagination.
104
+
105
+ **Data:** DataTable.
106
+
107
+ **Actions & content:** Button, ButtonGroup, LinkButton, Badge, Banner, Notification, ProgressBar, ProgressCircle, Typography, Divider, Tag, Avatar, CodeBlock, Datepicker.
108
+
109
+ ---
154
110
 
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`.
111
+ ## TypeScript
157
112
 
158
- Before a release, bump **`version`** in `package.json` and create a release with a tag like `v0.2.2` matching the package version.
113
+ Type definitions are published with the package (`dist/*.d.ts`).
159
114
 
160
115
  ---
161
116
 
162
117
  ## License
163
118
 
164
- MIT — see `LICENSE`.
119
+ MIT — see the `LICENSE` file in the package.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "prime-ui-kit",
3
- "version": "0.2.2",
3
+ "version": "0.2.3",
4
4
  "description": "React 19 UI kit: CSS Modules, semantic design tokens (--prime-sys-*), composable components — forms, modals, selects, tables, navigation, overlays. TypeScript, ESM, a11y-oriented.",
5
5
  "keywords": [
6
6
  "a11y",