@lifeonlars/prime-yggdrasil 0.1.3 → 0.2.0
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/dist/components/button.css +79 -0
- package/dist/components/data.css +141 -0
- package/dist/components/form.css +303 -0
- package/dist/components/misc-extended.css +192 -0
- package/dist/components/misc.css +9 -1
- package/dist/components/overlay.css +34 -0
- package/dist/components.css +1 -0
- package/dist/flag-denmark.svg +12 -0
- package/dist/flag-finland.svg +5 -0
- package/dist/flag-norway.svg +7 -0
- package/dist/flag-sweden.svg +4 -0
- package/dist/flag-uk.svg +7 -0
- package/docs/AI-AGENT-GUIDE.md +115 -0
- package/docs/Fixes.md +221 -86
- package/docs/THEME-COMPLETENESS-AUDIT.md +251 -0
- package/package.json +1 -1
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Extended miscellaneous components
|
|
3
|
+
* Components not commonly used but part of PrimeReact
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* InputOTP */
|
|
7
|
+
.p-inputotp {
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
gap: 0.5rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.p-inputotp-input {
|
|
14
|
+
text-align: center;
|
|
15
|
+
width: 2.5rem;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Mention */
|
|
19
|
+
.p-mention-panel {
|
|
20
|
+
background: var(--surface-neutral-primary);
|
|
21
|
+
color: var(--text-neutral-default);
|
|
22
|
+
border: 0 none;
|
|
23
|
+
border-radius: var(--radius-md);
|
|
24
|
+
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.p-mention-panel .p-mention-items {
|
|
28
|
+
padding: 0.75rem 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.p-mention-panel .p-mention-items .p-mention-item {
|
|
32
|
+
margin: 0;
|
|
33
|
+
padding: 0.75rem 1.25rem;
|
|
34
|
+
border: 0 none;
|
|
35
|
+
color: var(--text-neutral-default);
|
|
36
|
+
background: transparent;
|
|
37
|
+
transition: box-shadow 0.2s;
|
|
38
|
+
border-radius: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.p-mention-panel .p-mention-items .p-mention-item:hover {
|
|
42
|
+
color: var(--text-neutral-default);
|
|
43
|
+
background: var(--surface-state-hover);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.p-mention-panel .p-mention-items .p-mention-item.p-highlight {
|
|
47
|
+
color: var(--text-state-interactive);
|
|
48
|
+
background: var(--surface-brand-overlay);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Toolbar */
|
|
52
|
+
.p-toolbar {
|
|
53
|
+
background: var(--surface-neutral-secondary);
|
|
54
|
+
border: 1px solid var(--border-neutral-subdued);
|
|
55
|
+
padding: 1.25rem;
|
|
56
|
+
border-radius: var(--radius-md);
|
|
57
|
+
gap: 0.5rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.p-toolbar .p-toolbar-separator {
|
|
61
|
+
margin: 0 0.5rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ConfirmPopup */
|
|
65
|
+
.p-confirm-popup {
|
|
66
|
+
background: var(--surface-neutral-primary);
|
|
67
|
+
color: var(--text-neutral-default);
|
|
68
|
+
border: 0 none;
|
|
69
|
+
border-radius: var(--radius-md);
|
|
70
|
+
box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.p-confirm-popup .p-confirm-popup-content {
|
|
74
|
+
padding: 1.25rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.p-confirm-popup .p-confirm-popup-footer {
|
|
78
|
+
text-align: right;
|
|
79
|
+
padding: 0 1.25rem 1.25rem 1.25rem;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.p-confirm-popup .p-confirm-popup-footer button {
|
|
83
|
+
margin: 0 0.5rem 0 0;
|
|
84
|
+
width: auto;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.p-confirm-popup .p-confirm-popup-footer button:last-child {
|
|
88
|
+
margin: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.p-confirm-popup:after {
|
|
92
|
+
border: solid transparent;
|
|
93
|
+
border-color: rgb(255 255 255 / 0%);
|
|
94
|
+
border-bottom-color: var(--surface-neutral-primary);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.p-confirm-popup:before {
|
|
98
|
+
border: solid transparent;
|
|
99
|
+
border-color: rgb(255 255 255 / 0%);
|
|
100
|
+
border-bottom-color: var(--surface-neutral-primary);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.p-confirm-popup.p-confirm-popup-flipped:after {
|
|
104
|
+
border-top-color: var(--surface-neutral-primary);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.p-confirm-popup.p-confirm-popup-flipped:before {
|
|
108
|
+
border-top-color: var(--surface-neutral-primary);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.p-confirm-popup .p-confirm-popup-icon {
|
|
112
|
+
font-size: 1.5rem;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.p-confirm-popup .p-confirm-popup-icon.p-icon {
|
|
116
|
+
width: 1.5rem;
|
|
117
|
+
height: 1.5rem;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.p-confirm-popup .p-confirm-popup-message {
|
|
121
|
+
margin-left: 1rem;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* ScrollTop */
|
|
125
|
+
.p-scrolltop {
|
|
126
|
+
width: 3rem;
|
|
127
|
+
height: 3rem;
|
|
128
|
+
border-radius: var(--radius-full);
|
|
129
|
+
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
|
|
130
|
+
transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.p-scrolltop.p-link {
|
|
134
|
+
background: rgb(0 0 0 / 70%);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.p-scrolltop.p-link:hover {
|
|
138
|
+
background: rgb(0 0 0 / 80%);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.p-scrolltop .p-scrolltop-icon {
|
|
142
|
+
font-size: 1.5rem;
|
|
143
|
+
color: var(--surface-neutral-secondary);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.p-scrolltop .p-scrolltop-icon.p-icon {
|
|
147
|
+
width: 1.5rem;
|
|
148
|
+
height: 1.5rem;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/* DataScroller */
|
|
152
|
+
.p-datascroller .p-paginator-top {
|
|
153
|
+
border-width: 0 0 1px 0;
|
|
154
|
+
border-radius: 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.p-datascroller .p-paginator-bottom {
|
|
158
|
+
border-width: 0 0 1px 0;
|
|
159
|
+
border-radius: 0;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.p-datascroller .p-datascroller-header {
|
|
163
|
+
background: var(--surface-neutral-secondary);
|
|
164
|
+
color: var(--text-neutral-loud);
|
|
165
|
+
border: 1px solid var(--border-neutral-subdued);
|
|
166
|
+
border-width: 1px 0 1px 0;
|
|
167
|
+
padding: 1rem 1rem;
|
|
168
|
+
font-weight: 700;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.p-datascroller .p-datascroller-content {
|
|
172
|
+
background: var(--surface-neutral-primary);
|
|
173
|
+
color: var(--text-neutral-default);
|
|
174
|
+
border: 0 none;
|
|
175
|
+
padding: 0;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.p-datascroller.p-datascroller-inline .p-datascroller-list > li {
|
|
179
|
+
border: solid var(--border-neutral-subdued);
|
|
180
|
+
border-width: 0 0 1px 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.p-datascroller .p-datascroller-footer {
|
|
184
|
+
background: var(--surface-neutral-secondary);
|
|
185
|
+
color: var(--text-neutral-loud);
|
|
186
|
+
border: 1px solid var(--border-neutral-subdued);
|
|
187
|
+
border-width: 0 0 1px 0;
|
|
188
|
+
padding: 1rem 1rem;
|
|
189
|
+
font-weight: 700;
|
|
190
|
+
border-bottom-left-radius: var(--radius-md);
|
|
191
|
+
border-bottom-right-radius: var(--radius-md);
|
|
192
|
+
}
|
package/dist/components/misc.css
CHANGED
|
@@ -78,6 +78,15 @@
|
|
|
78
78
|
.p-avatar.p-avatar-xl .p-avatar-icon {
|
|
79
79
|
font-size: 2rem;
|
|
80
80
|
}
|
|
81
|
+
|
|
82
|
+
.p-avatar-circle {
|
|
83
|
+
border-radius: var(--radius-full);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.p-avatar-group .p-avatar {
|
|
87
|
+
border: 2px solid var(--surface-neutral-primary);
|
|
88
|
+
}
|
|
89
|
+
|
|
81
90
|
.p-chip {
|
|
82
91
|
background-color: var(--surface-neutral-secondary);
|
|
83
92
|
color: var(--text-neutral-default);
|
|
@@ -603,7 +612,6 @@
|
|
|
603
612
|
border-top-right-radius: var(--radius-lg) !important;
|
|
604
613
|
border-bottom-right-radius: var(--radius-lg) !important;
|
|
605
614
|
}
|
|
606
|
-
}
|
|
607
615
|
|
|
608
616
|
.p-inplace .p-inplace-display {
|
|
609
617
|
padding: 0.75rem 0.75rem;
|
|
@@ -176,3 +176,37 @@
|
|
|
176
176
|
.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
|
|
177
177
|
border-bottom-color: var(--text-neutral-subdued);
|
|
178
178
|
}
|
|
179
|
+
|
|
180
|
+
/* Component Overlay Transitions */
|
|
181
|
+
.p-component-overlay {
|
|
182
|
+
background-color: rgb(0 0 0 / 40%);
|
|
183
|
+
transition-duration: 0.2s;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.p-component-overlay-enter {
|
|
187
|
+
animation: p-component-overlay-enter-animation 150ms forwards;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.p-component-overlay-leave {
|
|
191
|
+
animation: p-component-overlay-leave-animation 150ms forwards;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@keyframes p-component-overlay-enter-animation {
|
|
195
|
+
from {
|
|
196
|
+
background-color: transparent;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
to {
|
|
200
|
+
background-color: rgb(0 0 0 / 40%);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
@keyframes p-component-overlay-leave-animation {
|
|
205
|
+
from {
|
|
206
|
+
background-color: rgb(0 0 0 / 40%);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
to {
|
|
210
|
+
background-color: transparent;
|
|
211
|
+
}
|
|
212
|
+
}
|
package/dist/components.css
CHANGED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_6670_42251)">
|
|
3
|
+
<path d="M-0.00186157 3H24.0019V21H-0.00186157V3Z" fill="#C8102E"/>
|
|
4
|
+
<path d="M7.71189 3H10.2844V21H7.71189V3Z" fill="white"/>
|
|
5
|
+
<path d="M-0.00186157 10.7137H24.0019V13.2863H-0.00186157V10.7137Z" fill="white"/>
|
|
6
|
+
</g>
|
|
7
|
+
<defs>
|
|
8
|
+
<clipPath id="clip0_6670_42251">
|
|
9
|
+
<rect width="24" height="24" fill="white"/>
|
|
10
|
+
</clipPath>
|
|
11
|
+
</defs>
|
|
12
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 3H24V21H0V3Z" fill="white"/>
|
|
3
|
+
<path d="M0 9.54375H24V14.4562H0V9.54375Z" fill="#002F6C"/>
|
|
4
|
+
<path d="M6.58125 3H11.49V21H6.5775L6.58125 3Z" fill="#002F6C"/>
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 3H24V21H0V3Z" fill="#ED2939"/>
|
|
3
|
+
<path d="M6.75 3H11.25V21H6.75V3Z" fill="white"/>
|
|
4
|
+
<path d="M0 9.75H24V14.25H0V9.75Z" fill="white"/>
|
|
5
|
+
<path d="M7.875 3H10.125V21H7.875V3Z" fill="#002664"/>
|
|
6
|
+
<path d="M0 10.875H24V13.125H0V10.875Z" fill="#002664"/>
|
|
7
|
+
</svg>
|
package/dist/flag-uk.svg
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M0 3H24V21H0V3Z" fill="#012169"/>
|
|
3
|
+
<path d="M2.8125 3L11.9625 9.7875L21.075 3H24V5.325L15 12.0375L24 18.7125V21H21L12 14.2875L3.0375 21H0V18.75L8.9625 12.075L0 5.4V3H2.8125Z" fill="white"/>
|
|
4
|
+
<path d="M15.9 13.5375L24 19.5V21L13.8375 13.5375H15.9ZM9 14.2875L9.225 15.6L2.025 21H0L9 14.2875ZM24 3V3.1125L14.6625 10.1625L14.7375 8.5125L22.125 3H24ZM0 3L8.9625 9.6H6.7125L0 4.575V3Z" fill="#C8102E"/>
|
|
5
|
+
<path d="M9.0375 3V21H15.0375V3H9.0375ZM0 9V15H24V9H0Z" fill="white"/>
|
|
6
|
+
<path d="M0 10.2375V13.8375H24V10.2375H0ZM10.2375 3V21H13.8375V3H10.2375Z" fill="#C8102E"/>
|
|
7
|
+
</svg>
|
package/docs/AI-AGENT-GUIDE.md
CHANGED
|
@@ -122,6 +122,85 @@ Or use utility classes:
|
|
|
122
122
|
<div className="shadow-4">High shadow</div>
|
|
123
123
|
```
|
|
124
124
|
|
|
125
|
+
## ⚙️ PrimeReact Configuration
|
|
126
|
+
|
|
127
|
+
### App Setup with PrimeReactProvider
|
|
128
|
+
|
|
129
|
+
Wrap your app with `PrimeReactProvider` to configure global settings:
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
import { PrimeReactProvider } from 'primereact/api';
|
|
133
|
+
|
|
134
|
+
function App() {
|
|
135
|
+
const primeConfig = {
|
|
136
|
+
ripple: true, // Enable ripple effect on buttons/clicks
|
|
137
|
+
inputStyle: 'outlined', // 'outlined' or 'filled'
|
|
138
|
+
locale: 'en', // Default locale
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
return (
|
|
142
|
+
<PrimeReactProvider value={primeConfig}>
|
|
143
|
+
{/* Your app content */}
|
|
144
|
+
</PrimeReactProvider>
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Ripple Effect
|
|
150
|
+
|
|
151
|
+
The ripple effect is **disabled by default**. Enable it for Material Design-style click animations:
|
|
152
|
+
|
|
153
|
+
```tsx
|
|
154
|
+
<PrimeReactProvider value={{ ripple: true }}>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
**Supported components:**
|
|
158
|
+
- Button
|
|
159
|
+
- Checkbox
|
|
160
|
+
- RadioButton
|
|
161
|
+
- Dropdown items
|
|
162
|
+
- Menu items
|
|
163
|
+
- ListBox items
|
|
164
|
+
|
|
165
|
+
**Note:** The ripple effect is a JavaScript feature, not CSS. It's configured at the app level, not in the theme.
|
|
166
|
+
|
|
167
|
+
### Input Style
|
|
168
|
+
|
|
169
|
+
Choose between outlined (default) or filled input styles:
|
|
170
|
+
|
|
171
|
+
```tsx
|
|
172
|
+
// Outlined inputs (default) - border around input
|
|
173
|
+
<PrimeReactProvider value={{ inputStyle: 'outlined' }}>
|
|
174
|
+
|
|
175
|
+
// Filled inputs - filled background, bottom border only
|
|
176
|
+
<PrimeReactProvider value={{ inputStyle: 'filled' }}>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Other Configuration Options
|
|
180
|
+
|
|
181
|
+
```tsx
|
|
182
|
+
const primeConfig = {
|
|
183
|
+
ripple: true,
|
|
184
|
+
inputStyle: 'outlined',
|
|
185
|
+
|
|
186
|
+
// Append overlays to specific element (default: document.body)
|
|
187
|
+
appendTo: 'self', // or document.getElementById('overlays')
|
|
188
|
+
|
|
189
|
+
// Control z-index layering
|
|
190
|
+
zIndex: {
|
|
191
|
+
modal: 1100, // Modals
|
|
192
|
+
overlay: 1000, // Overlays/dropdowns
|
|
193
|
+
menu: 1000, // Menus
|
|
194
|
+
tooltip: 1100, // Tooltips
|
|
195
|
+
},
|
|
196
|
+
|
|
197
|
+
// Locale for date formatting, number formatting, etc.
|
|
198
|
+
locale: 'en',
|
|
199
|
+
};
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
**Documentation:** [PrimeReact Configuration](https://primereact.org/configuration/)
|
|
203
|
+
|
|
125
204
|
## 🧩 Component Selection Guide
|
|
126
205
|
|
|
127
206
|
### Data Display
|
|
@@ -245,6 +324,42 @@ import { Card } from 'primereact/card';
|
|
|
245
324
|
<Card>Content</Card>
|
|
246
325
|
```
|
|
247
326
|
|
|
327
|
+
### 5. **CRITICAL: Applying Utility Classes to Components**
|
|
328
|
+
```tsx
|
|
329
|
+
// ❌ DON'T DO THIS - Utility classes on components
|
|
330
|
+
<Button className="w-full block mt-4 p-4" label="Submit" />
|
|
331
|
+
<InputText className="text-lg font-bold" />
|
|
332
|
+
<DataTable className="my-8" value={data} />
|
|
333
|
+
|
|
334
|
+
// ✅ DO THIS INSTEAD - Use component props + wrapper
|
|
335
|
+
<div className="w-full mt-4"> {/* Utility classes on wrapper */}
|
|
336
|
+
<Button label="Submit" />
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div className="text-lg"> {/* Styling on wrapper */}
|
|
340
|
+
<InputText />
|
|
341
|
+
</div>
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
**Why this matters:**
|
|
345
|
+
- ✅ **Components** are configured via **props** (size, variant, severity, etc.)
|
|
346
|
+
- ✅ **Utility classes** are for **layout/composition** (flex, grid, margins, width)
|
|
347
|
+
- ❌ Mixing utility classes with components breaks the design system
|
|
348
|
+
- ❌ Can cause unexpected visual bugs (icon misalignment, broken layouts)
|
|
349
|
+
|
|
350
|
+
**Correct approach:**
|
|
351
|
+
```tsx
|
|
352
|
+
// ✅ Layout utilities on wrappers/containers
|
|
353
|
+
<div className="flex gap-4 w-full">
|
|
354
|
+
<Button label="Cancel" severity="secondary" />
|
|
355
|
+
<Button label="Submit" />
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
// ✅ Component configuration via props
|
|
359
|
+
<Button label="Large Button" size="large" />
|
|
360
|
+
<InputText placeholder="Text" className="w-full" /> {/* Width is OK */}
|
|
361
|
+
```
|
|
362
|
+
|
|
248
363
|
## 🔍 Decision Tree for UI Development
|
|
249
364
|
|
|
250
365
|
```
|