@janovix/blocks 1.0.0-rc.2
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 +73 -0
- package/dist/index.cjs +9557 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +111 -0
- package/dist/index.d.ts +111 -0
- package/dist/index.js +9513 -0
- package/dist/index.js.map +1 -0
- package/package.json +97 -0
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# @janovix/blocks
|
|
2
|
+
|
|
3
|
+
> Shared UI components for Janovix applications
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @janovix/blocks
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @janovix/blocks
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Peer Dependencies
|
|
14
|
+
|
|
15
|
+
This package requires the following peer dependencies:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pnpm add react react-dom next-themes lucide-react motion
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Components
|
|
22
|
+
|
|
23
|
+
### ThemeSwitcher
|
|
24
|
+
|
|
25
|
+
A theme switcher component that integrates with `next-themes`.
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { ThemeSwitcher } from "@janovix/blocks";
|
|
29
|
+
|
|
30
|
+
// Default usage
|
|
31
|
+
<ThemeSwitcher />
|
|
32
|
+
|
|
33
|
+
// With custom labels (for i18n)
|
|
34
|
+
<ThemeSwitcher
|
|
35
|
+
labels={{
|
|
36
|
+
theme: "Theme",
|
|
37
|
+
system: "System",
|
|
38
|
+
light: "Light",
|
|
39
|
+
dark: "Dark",
|
|
40
|
+
}}
|
|
41
|
+
/>
|
|
42
|
+
|
|
43
|
+
// Mini variant (icon only with dropdown)
|
|
44
|
+
<ThemeSwitcher variant="mini" />
|
|
45
|
+
|
|
46
|
+
// Different sizes
|
|
47
|
+
<ThemeSwitcher size="sm" />
|
|
48
|
+
<ThemeSwitcher size="md" />
|
|
49
|
+
<ThemeSwitcher size="lg" />
|
|
50
|
+
|
|
51
|
+
// Different shapes
|
|
52
|
+
<ThemeSwitcher shape="rounded" />
|
|
53
|
+
<ThemeSwitcher shape="pill" />
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Styling
|
|
57
|
+
|
|
58
|
+
This package uses Tailwind CSS classes. You need to configure your Tailwind CSS to include this package:
|
|
59
|
+
|
|
60
|
+
```js
|
|
61
|
+
// tailwind.config.js
|
|
62
|
+
module.exports = {
|
|
63
|
+
content: [
|
|
64
|
+
// ... your other content paths
|
|
65
|
+
"./node_modules/@janovix/blocks/dist/**/*.js",
|
|
66
|
+
],
|
|
67
|
+
// ... rest of your config
|
|
68
|
+
};
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
MIT
|