prime-ui-kit 0.2.3 → 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 +17 -5
- 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
|
@@ -37,22 +37,33 @@ bun add prime-ui-kit react react-dom react-aria-components react-day-picker date
|
|
|
37
37
|
|
|
38
38
|
## Styles
|
|
39
39
|
|
|
40
|
-
Import **tokens
|
|
40
|
+
Import the **global styles** (fonts, reset, tokens, and both themes) and then the **bundled component CSS** (CSS Modules output from the published build):
|
|
41
|
+
|
|
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.
|
|
48
|
+
|
|
49
|
+
**Light / dark:** set `data-theme="light"` or `data-theme="dark"` on `<html>`, a layout root, or any wrapper.
|
|
50
|
+
|
|
51
|
+
If you want fine-grained control (e.g. supply your own reset or only one theme), import the individual files instead:
|
|
41
52
|
|
|
42
53
|
```css
|
|
43
54
|
@import "prime-ui-kit/tokens.css";
|
|
44
55
|
@import "prime-ui-kit/theme-light.css";
|
|
45
|
-
/*
|
|
46
|
-
@import "prime-ui-kit/
|
|
56
|
+
/* @import "prime-ui-kit/theme-dark.css"; */
|
|
57
|
+
@import "prime-ui-kit/bundle.css";
|
|
47
58
|
```
|
|
48
59
|
|
|
49
|
-
|
|
60
|
+
If you only use `prime-ui-kit/components`, replace `bundle.css` with `prime-ui-kit/components.css`.
|
|
50
61
|
|
|
51
62
|
---
|
|
52
63
|
|
|
53
64
|
## Usage
|
|
54
65
|
|
|
55
|
-
|
|
66
|
+
Import **`styles.css`** and **`bundle.css`** as described above so components receive the correct layout and appearance.
|
|
56
67
|
|
|
57
68
|
```tsx
|
|
58
69
|
import { Button, Input, Modal } from "prime-ui-kit";
|
|
@@ -80,6 +91,7 @@ export function Example() {
|
|
|
80
91
|
import { DataTable } from "prime-ui-kit/components";
|
|
81
92
|
```
|
|
82
93
|
|
|
94
|
+
|
|
83
95
|
---
|
|
84
96
|
|
|
85
97
|
## Notifications
|