najm-kit 0.0.16 → 0.0.18
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 +54 -11
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,25 +5,68 @@ Reusable React component library for Najm applications. Provides themed UI primi
|
|
|
5
5
|
## Install
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
bun add najm-kit
|
|
8
|
+
bun add najm-kit tailwindcss @tailwindcss/postcss
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
Peer dependencies: `react >=18`, `react-dom >=18`.
|
|
11
|
+
Peer dependencies: `react >=18`, `react-dom >=18`. Requires **Tailwind CSS v4** in the host app.
|
|
12
12
|
|
|
13
13
|
Optional peer dependencies: `recharts`, `@tanstack/react-table`, `react-hook-form`, `@tanstack/react-query`.
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Styling — the entire setup
|
|
16
|
+
|
|
17
|
+
najm-kit is a Tailwind v4, shadcn-compatible library. PostCSS config (`postcss.config.mjs`):
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
export default { plugins: { "@tailwindcss/postcss": {} } };
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Your global stylesheet — **two imports, that's it**:
|
|
24
|
+
|
|
25
|
+
```css
|
|
26
|
+
@import "tailwindcss";
|
|
27
|
+
@import "najm-kit/theme.css";
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
This gives you every najm-kit component styled, dark mode wired (the `.dark` class),
|
|
31
|
+
and a full token-backed palette you can use in your own markup too
|
|
32
|
+
(`bg-background`, `bg-card`, `bg-primary`, `text-muted-foreground`, `border-border`, …).
|
|
33
|
+
|
|
34
|
+
### Theming
|
|
35
|
+
|
|
36
|
+
najm-kit uses the **standard shadcn token names** (no prefix), so you rebrand by
|
|
37
|
+
overriding CSS variables — or paste a theme straight from
|
|
38
|
+
[tweakcn](https://tweakcn.com) / the shadcn registry:
|
|
39
|
+
|
|
40
|
+
```css
|
|
41
|
+
:root { --primary: oklch(0.55 0.2 290); --radius: 0.75rem; }
|
|
42
|
+
.dark { --primary: oklch(0.70 0.18 290); }
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Add your own extra colors alongside najm-kit's:
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
@theme { --color-success: oklch(0.7 0.18 150); } /* → bg-success, text-success */
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Dark mode: toggle the `dark` class on `<html>` (or any wrapper):
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
document.documentElement.classList.toggle("dark");
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Theme Provider (optional)
|
|
58
|
+
|
|
59
|
+
For scoped theming without writing CSS — useful for embedded surfaces. The provider
|
|
60
|
+
is opt-in: with no props it injects nothing and your `:root`/`.dark` CSS owns theming.
|
|
16
61
|
|
|
17
62
|
```tsx
|
|
18
63
|
import { NajmThemeProvider } from 'najm-kit';
|
|
19
64
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
);
|
|
26
|
-
}
|
|
65
|
+
// preset:
|
|
66
|
+
<NajmThemeProvider preset="dark-blue">{children}</NajmThemeProvider>
|
|
67
|
+
|
|
68
|
+
// or mode + accent:
|
|
69
|
+
<NajmThemeProvider mode="dark" accent="emerald">{children}</NajmThemeProvider>
|
|
27
70
|
```
|
|
28
71
|
|
|
29
72
|
## Components
|
|
@@ -66,5 +109,5 @@ import { useSelection } from 'najm-kit';
|
|
|
66
109
|
- Designed for dashboard/admin UIs in Najm-powered applications
|
|
67
110
|
- Uses Radix UI primitives under the hood — accessible by default
|
|
68
111
|
- All components are unstyled by default — apply `buttonVariants()`, `badgeVariants()`, etc. with Tailwind
|
|
69
|
-
- Requires Tailwind CSS in the host application
|
|
112
|
+
- Requires Tailwind CSS **v4** in the host application (see Styling above)
|
|
70
113
|
- CodeMirror components are optional peer deps — import from `najm-kit/json` only if needed
|
package/dist/index.mjs
CHANGED