@mobielnl/elements 0.0.1
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 +241 -0
- package/dist/elements.css +1 -0
- package/dist/elements.js +11 -0
- package/dist/elements.umd.cjs +213 -0
- package/dist/index-C-wKqSMk.js +2597 -0
- package/dist/index-CSe9vMR8.js +17923 -0
- package/dist/index.d.ts +99 -0
- package/package.json +91 -0
package/README.md
ADDED
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
# @mobielnl/elements
|
|
2
|
+
|
|
3
|
+
A React component library built with Vite library mode. Ships ES and UMD bundles plus TypeScript types and a @mobielnl theme.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
### For React projects
|
|
8
|
+
|
|
9
|
+
#### Install with your preferred package manager (pnpm, npm, yarn, bun, etc.)
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
pnpm add @mobielnl/elements
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
#### Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { ElementsRoot, ProductResults } from "@mobielnl/elements";
|
|
19
|
+
import "@mobielnl/elements/style.css"; // can also be imported in (global) CSS file
|
|
20
|
+
|
|
21
|
+
export default function Example() {
|
|
22
|
+
return (
|
|
23
|
+
<ElementsRoot>
|
|
24
|
+
<ProductResults filterOptions={[]} />
|
|
25
|
+
</ElementsRoot>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
All CSS styling is scoped to this `<ElementsRoot>` wrapper, which is essentially a `div` with a `"mobielnl-elements"` class:
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<div class="mobielnl-elements">{children}</div>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Components nested within this wrapper will inherit the styling. This is done so that it does not overwrite other CSS styling.
|
|
37
|
+
|
|
38
|
+
### For non-React projects
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<!doctype html>
|
|
42
|
+
<html lang="en">
|
|
43
|
+
<head>
|
|
44
|
+
<meta charset="utf-8" />
|
|
45
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
46
|
+
<title>MobielNL UMD Test</title>
|
|
47
|
+
|
|
48
|
+
<!-- Default MobielNL Stylesheet -->
|
|
49
|
+
<link rel="stylesheet" href="../dist/elements.css" />
|
|
50
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<!-- Wrapper class for scoped styling -->
|
|
53
|
+
<div class="mobielnl-elements">
|
|
54
|
+
<!-- HTML placeholder for rendering -->
|
|
55
|
+
<div id="mobielnl-product-results"></div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<!-- React and ReactDOM (UMD) -->
|
|
59
|
+
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
|
|
60
|
+
<script
|
|
61
|
+
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
|
|
62
|
+
crossorigin
|
|
63
|
+
></script>
|
|
64
|
+
|
|
65
|
+
<!-- MobielNL UMD bundle attaches global `Elements` -->
|
|
66
|
+
<script src="../dist/elements.umd.cjs"></script>
|
|
67
|
+
|
|
68
|
+
<!-- Render MobielNL Button -->
|
|
69
|
+
<script>
|
|
70
|
+
ReactDOM.createRoot(document.getElementById("mobielnl-product-results")).render(
|
|
71
|
+
React.createElement(Elements.ProductResults, { filterOptions: [] }),
|
|
72
|
+
);
|
|
73
|
+
</script>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Theme
|
|
79
|
+
|
|
80
|
+
Our compiled stylesheet uses HeroUI-compatible CSS custom properties.
|
|
81
|
+
|
|
82
|
+
1. Import the stylesheet at the top of your (global) CSS file.
|
|
83
|
+
|
|
84
|
+
```css
|
|
85
|
+
@import "@mobielnl/elements/style.css";
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
2. All CSS styles and variables are scoped under the `.mobielnl-elements` class. Wrap where you render elements or use `ElementsRoot` (only React).
|
|
89
|
+
|
|
90
|
+
```html
|
|
91
|
+
<div className="mobielnl-elements">
|
|
92
|
+
<!-- Elements here -->
|
|
93
|
+
</div>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
<ElementsRoot>{/* Elements here */}</ElementsRoot>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
3. You can customize the theme with CSS variables on the wrapper or any ancestor.
|
|
101
|
+
|
|
102
|
+
- Copy the token set and set your own theme. Color values are HSL triplets (h s% l%).
|
|
103
|
+
- You can scope themes per element or toggle dark mode using `data-theme`.
|
|
104
|
+
|
|
105
|
+
```css
|
|
106
|
+
.mobielnl-elements {
|
|
107
|
+
--heroui-background: 0 0% 100%;
|
|
108
|
+
--heroui-foreground: 232 68% 21%;
|
|
109
|
+
|
|
110
|
+
/* Default */
|
|
111
|
+
--heroui-default-50: 37 100% 96%;
|
|
112
|
+
--heroui-default-100: 39 100% 92%;
|
|
113
|
+
--heroui-default-200: 36 100% 83%;
|
|
114
|
+
--heroui-default-300: 35 100% 72%;
|
|
115
|
+
--heroui-default-400: 31 99% 61%;
|
|
116
|
+
--heroui-default-500: 29 98% 51%;
|
|
117
|
+
--heroui-default-600: 25 93% 48%;
|
|
118
|
+
--heroui-default-700: 22 91% 40%;
|
|
119
|
+
--heroui-default-800: 19 81% 34%;
|
|
120
|
+
--heroui-default-900: 21 82% 27%;
|
|
121
|
+
--heroui-default: 27 97% 49%;
|
|
122
|
+
--heroui-default-foreground: 0 0% 100%;
|
|
123
|
+
|
|
124
|
+
/* Primary */
|
|
125
|
+
--heroui-primary-50: 219 68% 95%;
|
|
126
|
+
--heroui-primary-100: 218 71% 93%;
|
|
127
|
+
--heroui-primary-200: 213 97% 87%;
|
|
128
|
+
--heroui-primary-300: 212 96% 78%;
|
|
129
|
+
--heroui-primary-400: 213 95% 68%;
|
|
130
|
+
--heroui-primary-500: 218 89% 61%;
|
|
131
|
+
--heroui-primary-600: 223 72% 49%;
|
|
132
|
+
--heroui-primary-700: 228 70% 38%;
|
|
133
|
+
--heroui-primary-800: 231 69% 33%;
|
|
134
|
+
--heroui-primary-900: 232 68% 21%;
|
|
135
|
+
--heroui-primary: 231 69% 33%;
|
|
136
|
+
--heroui-primary-foreground: 0 0% 100%;
|
|
137
|
+
|
|
138
|
+
/* Secondary */
|
|
139
|
+
--heroui-secondary-50: 220 31% 94%;
|
|
140
|
+
--heroui-secondary-100: 218 23% 91%;
|
|
141
|
+
--heroui-secondary-200: 217 15% 83%;
|
|
142
|
+
--heroui-secondary-300: 217 19% 70%;
|
|
143
|
+
--heroui-secondary-400: 218 17% 59%;
|
|
144
|
+
--heroui-secondary-500: 218 14% 51%;
|
|
145
|
+
--heroui-secondary-600: 218 18% 39%;
|
|
146
|
+
--heroui-secondary-700: 218 19% 30%;
|
|
147
|
+
--heroui-secondary-800: 218 22% 26%;
|
|
148
|
+
--heroui-secondary-900: 216 21% 23%;
|
|
149
|
+
--heroui-secondary: 218 18% 39%;
|
|
150
|
+
--heroui-secondary-foreground: 0 0% 100%;
|
|
151
|
+
|
|
152
|
+
/* Success */
|
|
153
|
+
--heroui-success-50: 92 60% 95%;
|
|
154
|
+
--heroui-success-100: 93 60% 89%;
|
|
155
|
+
--heroui-success-200: 93 58% 80%;
|
|
156
|
+
--heroui-success-300: 94 56% 67%;
|
|
157
|
+
--heroui-success-400: 95 52% 55%;
|
|
158
|
+
--heroui-success-500: 96 53% 42%;
|
|
159
|
+
--heroui-success-600: 97 56% 35%;
|
|
160
|
+
--heroui-success-700: 98 51% 27%;
|
|
161
|
+
--heroui-success-800: 99 45% 23%;
|
|
162
|
+
--heroui-success-900: 100 40% 20%;
|
|
163
|
+
--heroui-success: 97 56% 35%;
|
|
164
|
+
--heroui-success-foreground: 0 0% 100%;
|
|
165
|
+
|
|
166
|
+
/* Warning */
|
|
167
|
+
--heroui-warning-50: 54 100% 96%;
|
|
168
|
+
--heroui-warning-100: 55 93% 89%;
|
|
169
|
+
--heroui-warning-200: 55 95% 77%;
|
|
170
|
+
--heroui-warning-300: 53 94% 65%;
|
|
171
|
+
--heroui-warning-400: 50 94% 56%;
|
|
172
|
+
--heroui-warning-500: 44 90% 53%;
|
|
173
|
+
--heroui-warning-600: 39 93% 44%;
|
|
174
|
+
--heroui-warning-700: 33 88% 37%;
|
|
175
|
+
--heroui-warning-800: 29 80% 31%;
|
|
176
|
+
--heroui-warning-900: 28 76% 26%;
|
|
177
|
+
--heroui-warning: 39 93% 44%;
|
|
178
|
+
--heroui-warning-foreground: 0 0% 100%;
|
|
179
|
+
|
|
180
|
+
/* Danger */
|
|
181
|
+
--heroui-danger-50: 0 71% 97%;
|
|
182
|
+
--heroui-danger-100: 0 80% 94%;
|
|
183
|
+
--heroui-danger-200: 0 85% 89%;
|
|
184
|
+
--heroui-danger-300: 0 83% 82%;
|
|
185
|
+
--heroui-danger-400: 0 80% 71%;
|
|
186
|
+
--heroui-danger-500: 0 74% 60%;
|
|
187
|
+
--heroui-danger-600: 0 63% 51%;
|
|
188
|
+
--heroui-danger-700: 0 65% 42%;
|
|
189
|
+
--heroui-danger-800: 0 62% 35%;
|
|
190
|
+
--heroui-danger-900: 0 55% 31%;
|
|
191
|
+
--heroui-danger: 0 63% 51%;
|
|
192
|
+
--heroui-danger-foreground: 0 0% 100%;
|
|
193
|
+
|
|
194
|
+
/* Content */
|
|
195
|
+
--heroui-content1: 0 0% 100%;
|
|
196
|
+
--heroui-content1-foreground: 232 68% 21%;
|
|
197
|
+
--heroui-content2: 230 75% 98%;
|
|
198
|
+
--heroui-content2-foreground: 232 68% 21%;
|
|
199
|
+
--heroui-content3: 220 67% 96%;
|
|
200
|
+
--heroui-content3-foreground: 232 68% 21%;
|
|
201
|
+
--heroui-content4: 219 68% 95%;
|
|
202
|
+
--heroui-content4-foreground: 232 68% 21%;
|
|
203
|
+
|
|
204
|
+
/* Radius */
|
|
205
|
+
--heroui-radius-small: 8px;
|
|
206
|
+
--heroui-radius-medium: 12px;
|
|
207
|
+
--heroui-radius-large: 16px;
|
|
208
|
+
|
|
209
|
+
/* Border Width */
|
|
210
|
+
--heroui-border-width-small: 1px;
|
|
211
|
+
--heroui-border-width-medium: 2px;
|
|
212
|
+
--heroui-border-width-large: 3px;
|
|
213
|
+
|
|
214
|
+
/* Box Shadow */
|
|
215
|
+
--heroui-box-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06),
|
|
216
|
+
0px 0px 1px 0px rgb(0 0 0 / 0.3);
|
|
217
|
+
--heroui-box-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08),
|
|
218
|
+
0px 0px 1px 0px rgb(0 0 0 / 0.3);
|
|
219
|
+
--heroui-box-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12),
|
|
220
|
+
0px 0px 1px 0px rgb(0 0 0 / 0.3);
|
|
221
|
+
|
|
222
|
+
/* Other */
|
|
223
|
+
--heroui-hover-opacity: 0.8;
|
|
224
|
+
--heroui-focus: 222 84% 54%;
|
|
225
|
+
--heroui-disabled-opacity: 0.5;
|
|
226
|
+
--heroui-divider: 218 23% 91%;
|
|
227
|
+
--heroui-overlay: 0 0% 0%;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* Optional: dark theme overrides on the wrapper */
|
|
231
|
+
[data-theme="dark"].mobielnl-elements,
|
|
232
|
+
.mobielnl-elements[data-theme="dark"] {
|
|
233
|
+
--heroui-background: 0 0% 0%;
|
|
234
|
+
--heroui-foreground: 0 0% 94%;
|
|
235
|
+
}
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
### Notes
|
|
239
|
+
|
|
240
|
+
- Colors are HSL triplets (h s% l%). Use a HSL converter if needed.
|
|
241
|
+
- You can define multiple named themes using `[data-theme="brand-x"] { ... }` and switch at runtime.
|