@chainberry/ui-components 1.0.4 → 1.0.6
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 +50 -13
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +16 -7
- package/dist/index.mjs +1459 -1439
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,31 +20,68 @@ npm install @chainberry/ui-components
|
|
|
20
20
|
|
|
21
21
|
```tsx
|
|
22
22
|
import { NavDrawer } from "@chainberry/ui-components";
|
|
23
|
-
import "@chainberry/ui-components/styles.css"; // once, at your app root
|
|
23
|
+
import "@chainberry/ui-components/styles.css"; // once, anywhere at your app root
|
|
24
24
|
|
|
25
25
|
export function Sidebar() {
|
|
26
26
|
return (
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
// the wrapper is required — see below
|
|
28
|
+
<div className="chainberry">
|
|
29
|
+
<NavDrawer
|
|
30
|
+
preset="primary" // "primary" (trimmed) | "full"
|
|
31
|
+
activeId="dashboard"
|
|
32
|
+
onNavigate={(id) => console.log("navigate →", id)}
|
|
33
|
+
/>
|
|
34
|
+
</div>
|
|
32
35
|
);
|
|
33
36
|
}
|
|
34
37
|
```
|
|
35
38
|
|
|
39
|
+
### The `chainberry` wrapper
|
|
40
|
+
|
|
41
|
+
**Required.** The stylesheet is scoped: every token, reset and utility applies
|
|
42
|
+
only *inside* an element carrying the `chainberry` class. Without the wrapper
|
|
43
|
+
the components render unstyled.
|
|
44
|
+
|
|
45
|
+
It must be an **ancestor**, not the component itself — rules compile to
|
|
46
|
+
`.chainberry :is(.bg-primary)`, a descendant selector. `<NavDrawer
|
|
47
|
+
className="chainberry" />` will not work. One wrapper high in the tree is
|
|
48
|
+
enough; nesting them is harmless.
|
|
49
|
+
|
|
50
|
+
Why scoped: this package and your app both run Tailwind 3.4.3, so both generate
|
|
51
|
+
`.bg-primary`, `.text-foreground` and friends. Unscoped, whichever stylesheet
|
|
52
|
+
loaded last would define those classes for the whole page — ours would restyle
|
|
53
|
+
your components, or yours would strip ours. The scope raises our specificity to
|
|
54
|
+
(0,2,0) so our rules win inside the wrapper and are inert outside it. A useful
|
|
55
|
+
consequence: **import order does not matter.**
|
|
56
|
+
|
|
57
|
+
Content rendered through a portal (`Dialog`, `SidePanel`, `DropdownMenu`,
|
|
58
|
+
`Popover`, `Tooltip`) mounts on `document.body`, outside your wrapper. Those
|
|
59
|
+
components re-apply the scope internally, so they work with no extra setup.
|
|
60
|
+
|
|
36
61
|
### Theming
|
|
37
62
|
|
|
38
|
-
Tokens are CSS variables
|
|
39
|
-
an ancestor (e.g. `<html class="dark">`)
|
|
63
|
+
Tokens are CSS variables set on `.chainberry`. For the dark palette add `.dark`
|
|
64
|
+
to an ancestor (e.g. `<html class="dark">`) — `.dark .chainberry` and
|
|
65
|
+
`.chainberry.dark` both resolve.
|
|
66
|
+
|
|
67
|
+
Because the tokens are scoped, they **cannot collide with your app's variables**
|
|
68
|
+
even if you use the same names (`--primary`, `--background`, …). To restyle the
|
|
69
|
+
components, redefine the tokens on your wrapper:
|
|
70
|
+
|
|
71
|
+
```css
|
|
72
|
+
.chainberry { --primary: oklch(0.3 0.1 260); }
|
|
73
|
+
```
|
|
40
74
|
|
|
41
75
|
### About the stylesheet
|
|
42
76
|
|
|
43
|
-
`styles.css`
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
77
|
+
`styles.css` contains the design tokens and the utility classes the components
|
|
78
|
+
use. It does **not** ship Tailwind Preflight — the reset cannot be scoped, and a
|
|
79
|
+
Tailwind app already has its own via `@tailwind base`. An app with no Tailwind
|
|
80
|
+
and no reset of its own may see minor differences from the design (default
|
|
81
|
+
margins on headings and lists, button font inheritance).
|
|
82
|
+
|
|
83
|
+
The Geist webfont is not bundled; `--font-sans` falls back to the system sans
|
|
84
|
+
stack (supply Geist yourself to match the design).
|
|
48
85
|
|
|
49
86
|
### Exports
|
|
50
87
|
|