@prediktif/ui 0.1.11 → 0.1.13
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 +60 -0
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -20,6 +20,66 @@ yarn add @prediktif/ui
|
|
|
20
20
|
|
|
21
21
|
---
|
|
22
22
|
|
|
23
|
+
## 🎨 Styling & Tailwind Setup
|
|
24
|
+
|
|
25
|
+
To ensure Tailwind CSS properly scans and compiles the styles, icons, and theme colors used by `@prediktif/ui`, configure your application's `globals.css`:
|
|
26
|
+
|
|
27
|
+
### 1. Configure `@source` in `globals.css` (Tailwind CSS v4)
|
|
28
|
+
|
|
29
|
+
Add the `@source` directive right after `@import "tailwindcss";` in your project's `src/app/globals.css`:
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
@import "tailwindcss";
|
|
33
|
+
@import "tw-animate-css";
|
|
34
|
+
@import "shadcn/tailwind.css";
|
|
35
|
+
|
|
36
|
+
/* 💡 Required: Enables Tailwind v4 to scan class names inside @prediktif/ui */
|
|
37
|
+
@source "@prediktif/ui";
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
*(If using **Tailwind CSS v3**, add `"./node_modules/@prediktif/ui/dist/**/*.{js,mjs}"` to the `content` array in your `tailwind.config.ts`)*.
|
|
41
|
+
|
|
42
|
+
### 2. Configure Sidebar Theme Variables
|
|
43
|
+
|
|
44
|
+
Ensure your `globals.css` includes the `@theme inline` mapping and CSS variables for sidebar colors:
|
|
45
|
+
|
|
46
|
+
```css
|
|
47
|
+
@theme inline {
|
|
48
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
49
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
50
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
51
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
52
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
53
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
54
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
55
|
+
--color-sidebar: var(--sidebar);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:root {
|
|
59
|
+
--sidebar: oklch(0.985 0 0);
|
|
60
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
61
|
+
--sidebar-primary: oklch(0.681 0.162 75.834);
|
|
62
|
+
--sidebar-primary-foreground: oklch(0.987 0.026 102.212);
|
|
63
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
64
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
65
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
66
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.dark {
|
|
70
|
+
--sidebar: oklch(0.205 0 0);
|
|
71
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
72
|
+
--sidebar-primary: oklch(0.795 0.184 86.047);
|
|
73
|
+
--sidebar-primary-foreground: oklch(0.987 0.026 102.212);
|
|
74
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
75
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
76
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
77
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
23
83
|
## 💻 Usage
|
|
24
84
|
|
|
25
85
|
Only Prediktif's custom composed components (`src/components/composed/*`) are exposed by the package entry points.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prediktif/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
"types": "./dist/index.d.ts",
|
|
15
15
|
"import": "./dist/index.mjs",
|
|
16
16
|
"require": "./dist/index.js"
|
|
17
|
-
}
|
|
17
|
+
},
|
|
18
|
+
"./*": "./*",
|
|
19
|
+
"./package.json": "./package.json"
|
|
18
20
|
},
|
|
19
21
|
"files": [
|
|
20
22
|
"dist",
|