@mobielnl/elements 0.10.1 → 0.10.3

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.
Files changed (6) hide show
  1. package/README.md +45 -183
  2. package/dist/elements.js +1 -1
  3. package/dist/elements.umd.cjs +129 -51
  4. package/dist/{index-6scNbCqx.js → index-BeAhOAEp.js} +1414 -1309
  5. package/dist/{index-DEscuNt4.js → index-CLgDsjnc.js} +1 -1
  6. package/package.json +11 -2
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Mobiel.nl Elements
2
2
 
3
- A React component library built with Vite library mode. Ships ES and UMD bundles plus TypeScript types and a Mobiel.nl theme.
3
+ A React component library built with Vite library mode. Ships ES and UMD bundles plus TypeScript types, default theme and 2 languages (Dutch and English).
4
4
 
5
5
  ## Documentation
6
6
 
@@ -10,44 +10,44 @@ To view the available elements and changelog, check out our [Documentation](http
10
10
 
11
11
  Only Websend developers can currently contribute. See [Contributing Guide](https://elements.mobiel.nl/?path=/docs/contributing--docs).
12
12
 
13
+ ## Getting Started
14
+
15
+ View our comprehensive [Getting Started](https://elements.mobiel.nl/?path=/docs/getting-started--docs) guide for a step-by-step introduction to using Elements.
16
+
13
17
  ## Installation
14
18
 
15
19
  ### For React projects
16
20
 
17
21
  You will need Node.js 18+ and React 19+.
18
22
 
19
- #### Install with your preferred package manager (pnpm, npm, yarn, bun, etc.)
23
+ #### Install the package via your preferred package manager:
20
24
 
21
25
  ```bash
22
26
  pnpm add @mobielnl/elements
27
+ # or
28
+ npm install @mobielnl/elements
29
+ # or
30
+ yarn add @mobielnl/elements
23
31
  ```
24
32
 
25
33
  #### Usage
26
34
 
27
35
  ```tsx
28
36
  import { ElementsRoot, ProductResults } from "@mobielnl/elements";
29
- import "@mobielnl/elements/style.css"; // can also be imported in (global) CSS file
37
+ import "@mobielnl/elements/style.css"; // Import styles globally
30
38
 
31
39
  export default function Example() {
32
40
  return (
33
41
  <ElementsRoot>
34
- <ProductResults />
42
+ <ProductResults productCategory="sim-only-proposition" />
35
43
  </ElementsRoot>
36
44
  );
37
45
  }
38
46
  ```
39
-
40
- All CSS styling is scoped to this `<ElementsRoot>` wrapper, which is essentially a `div` with a `"mobielnl-elements"` class:
41
-
42
- ```html
43
- <div class="mobielnl-elements">{children}</div>
44
- ```
45
-
46
- Components nested within this wrapper will inherit the styling. This is done so that it does not overwrite other CSS styling.
47
+ All CSS styling is scoped under the `<ElementsRoot>` wrapper, which has the class `"mobielnl-elements"`. Components nested within this wrapper will inherit the styling. This is done so that it does not overwrite other CSS styling.
47
48
 
48
49
  #### Shadow DOM (optional)
49
50
 
50
-
51
51
  You can opt in for a Shadow DOM to isolate the CSS from your application's global styles.
52
52
 
53
53
  It is possible to inject a CSS string or CSS path url into the Shadow DOM. The `withShadowDOM` prop accepts:
@@ -74,27 +74,6 @@ export default function Example() {
74
74
  }
75
75
  ```
76
76
 
77
- #### Custom Styling with Tailwind CSS
78
-
79
- You can customize component styling using the `classNames` prop.
80
-
81
- ```tsx
82
- import { ProductResults, type ProductResultsClassNames } from "@mobielnl/elements";
83
-
84
- const productResultsClassNames: ProductResultsClassNames = {
85
- propositionCard: {
86
- title: "text-5xl font-extrabold text-secondary",
87
- pricingSection: {
88
- monthlyFeeValue: "text-danger",
89
- },
90
- },
91
- };
92
-
93
- export default function Example() {
94
- return <ProductResults classNames={productResultsClassNames} />;
95
- }
96
- ```
97
-
98
77
  ### For non-React projects
99
78
 
100
79
  ```html
@@ -105,7 +84,7 @@ export default function Example() {
105
84
  <meta name="viewport" content="width=device-width, initial-scale=1" />
106
85
  <title>MobielNL UMD Test</title>
107
86
 
108
- <!-- Default MobielNL Stylesheet -->
87
+ <!-- Include the Elements CSS stylesheet -->
109
88
  <link rel="stylesheet" href="../dist/elements.css" />
110
89
  </head>
111
90
  <body>
@@ -116,9 +95,9 @@ export default function Example() {
116
95
  </div>
117
96
 
118
97
  <!-- React and ReactDOM (UMD) -->
119
- <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
98
+ <script src="https://unpkg.com/react@19/umd/react.production.min.js" crossorigin></script>
120
99
  <script
121
- src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
100
+ src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"
122
101
  crossorigin
123
102
  ></script>
124
103
 
@@ -154,7 +133,9 @@ Our compiled stylesheet uses HeroUI-compatible CSS custom properties.
154
133
  @import "@mobielnl/elements/style.css";
155
134
  ```
156
135
 
157
- 2. All CSS styles and variables are scoped under the `.mobielnl-elements` class. Wrap where you render elements or use `ElementsRoot` (only React).
136
+ 2. Scoped CSS styles
137
+
138
+ All CSS styles and variables are scoped under the `.mobielnl-elements` class. Wrap where you render elements or use `ElementsRoot` (only React).
158
139
 
159
140
  ```html
160
141
  <div className="mobielnl-elements">
@@ -166,158 +147,39 @@ Our compiled stylesheet uses HeroUI-compatible CSS custom properties.
166
147
  <ElementsRoot>{/* Elements here */}</ElementsRoot>
167
148
  ```
168
149
 
169
- 3. You can customize the theme with CSS variables on the wrapper or any ancestor.
170
-
171
- - Copy the token set and set your own theme. Color values are HSL triplets (h s% l%).
172
- - You can scope themes per element or toggle dark mode using `data-theme`.
150
+ 3. Theming with CSS Variables
173
151
 
174
- ### Default theme
152
+ The library uses CSS custom properties (variables) for all its styling. You can override these variables to match your brand.
175
153
 
176
- The default theme is the [default HeroUI theme](https://www.heroui.com/themes).
154
+ - Color values are HSL triplets (h s% l%).
177
155
 
178
156
  ```css
179
157
  .mobielnl-elements {
180
- --elements-background: 0 0% 100%;
181
- --elements-overlay: 0 0% 0%;
182
-
183
- --elements-foreground-50: 0 0% 98.04%;
184
- --elements-foreground-100: 240 4.76% 95.88%;
185
- --elements-foreground-200: 240 5.88% 90%;
186
- --elements-foreground-300: 240 4.88% 83.92%;
187
- --elements-foreground-400: 240 5.03% 64.9%;
188
- --elements-foreground-500: 240 3.83% 46.08%;
189
- --elements-foreground-600: 240 5.2% 33.92%;
190
- --elements-foreground-700: 240 5.26% 26.08%;
191
- --elements-foreground-800: 240 3.7% 15.88%;
192
- --elements-foreground-900: 240 5.88% 10%;
193
- --elements-foreground: 201.81999999999994 24.44% 8.82%;
194
-
195
- --elements-content1: 0 0% 100%;
196
- --elements-content1-foreground: 201.81999999999994 24.44% 8.82%;
197
- --elements-content2: 240 4.76% 95.88%;
198
- --elements-content2-foreground: 240 3.7% 15.88%;
199
- --elements-content3: 240 5.88% 90%;
200
- --elements-content3-foreground: 240 5.26% 26.08%;
201
- --elements-content4: 240 4.88% 83.92%;
202
- --elements-content4-foreground: 240 5.2% 33.92%;
203
-
204
- --elements-default-50: 0 0% 98.04%;
205
- --elements-default-100: 240 4.76% 95.88%;
206
- --elements-default-200: 240 5.88% 90%;
207
- --elements-default-300: 240 4.88% 83.92%;
208
- --elements-default-400: 240 5.03% 64.9%;
209
- --elements-default-500: 240 3.83% 46.08%;
210
- --elements-default-600: 240 5.2% 33.92%;
211
- --elements-default-700: 240 5.26% 26.08%;
212
- --elements-default-800: 240 3.7% 15.88%;
213
- --elements-default-900: 240 5.88% 10%;
214
- --elements-default-foreground: 0 0% 0%;
215
- --elements-default: 240 4.88% 83.92%;
216
-
217
- --elements-primary-50: 212.5 92.31% 94.9%;
218
- --elements-primary-100: 211.84000000000003 92.45% 89.61%;
219
- --elements-primary-200: 211.84000000000003 92.45% 79.22%;
220
- --elements-primary-300: 212.24 92.45% 68.82%;
221
- --elements-primary-400: 212.14 92.45% 58.43%;
222
- --elements-primary-500: 212.01999999999998 100% 46.67%;
223
- --elements-primary-600: 212.14 100% 38.43%;
224
- --elements-primary-700: 212.24 100% 28.82%;
225
- --elements-primary-800: 211.84000000000003 100% 19.22%;
226
- --elements-primary-900: 211.84000000000003 100% 9.61%;
227
- --elements-primary-foreground: 0 0% 100%;
228
- --elements-primary: 212.01999999999998 100% 46.67%;
229
-
230
- --elements-secondary-50: 270 61.54% 94.9%;
231
- --elements-secondary-100: 270 59.26% 89.41%;
232
- --elements-secondary-200: 270 59.26% 78.82%;
233
- --elements-secondary-300: 270 59.26% 68.24%;
234
- --elements-secondary-400: 270 59.26% 57.65%;
235
- --elements-secondary-500: 270 66.67% 47.06%;
236
- --elements-secondary-600: 270 66.67% 37.65%;
237
- --elements-secondary-700: 270 66.67% 28.24%;
238
- --elements-secondary-800: 270 66.67% 18.82%;
239
- --elements-secondary-900: 270 66.67% 9.41%;
240
- --elements-secondary-foreground: 0 0% 100%;
241
- --elements-secondary: 270 66.67% 47.06%;
242
-
243
- --elements-success-50: 146.66999999999996 64.29% 94.51%;
244
- --elements-success-100: 145.71000000000004 61.4% 88.82%;
245
- --elements-success-200: 146.2 61.74% 77.45%;
246
- --elements-success-300: 145.78999999999996 62.57% 66.47%;
247
- --elements-success-400: 146.01 62.45% 55.1%;
248
- --elements-success-500: 145.96000000000004 79.46% 43.92%;
249
- --elements-success-600: 146.01 79.89% 35.1%;
250
- --elements-success-700: 145.78999999999996 79.26% 26.47%;
251
- --elements-success-800: 146.2 79.78% 17.45%;
252
- --elements-success-900: 145.71000000000004 77.78% 8.82%;
253
- --elements-success-foreground: 0 0% 0%;
254
- --elements-success: 145.96000000000004 79.46% 43.92%;
255
-
256
- --elements-warning-50: 54.55000000000001 91.67% 95.29%;
257
- --elements-warning-100: 37.139999999999986 91.3% 90.98%;
258
- --elements-warning-200: 37.139999999999986 91.3% 81.96%;
259
- --elements-warning-300: 36.95999999999998 91.24% 73.14%;
260
- --elements-warning-400: 37.00999999999999 91.26% 64.12%;
261
- --elements-warning-500: 37.02999999999997 91.27% 55.1%;
262
- --elements-warning-600: 37.00999999999999 74.22% 44.12%;
263
- --elements-warning-700: 36.95999999999998 73.96% 33.14%;
264
- --elements-warning-800: 37.139999999999986 75% 21.96%;
265
- --elements-warning-900: 37.139999999999986 75% 10.98%;
266
- --elements-warning-foreground: 0 0% 0%;
267
- --elements-warning: 37.02999999999997 91.27% 55.1%;
268
-
269
- --elements-danger-50: 339.13 92% 95.1%;
270
- --elements-danger-100: 340 91.84% 90.39%;
271
- --elements-danger-200: 339.3299999999999 90% 80.39%;
272
- --elements-danger-300: 339.11 90.6% 70.78%;
273
- --elements-danger-400: 339 90% 60.78%;
274
- --elements-danger-500: 339.20000000000005 90.36% 51.18%;
275
- --elements-danger-600: 339 86.54% 40.78%;
276
- --elements-danger-700: 339.11 85.99% 30.78%;
277
- --elements-danger-800: 339.3299999999999 86.54% 20.39%;
278
- --elements-danger-900: 340 84.91% 10.39%;
279
- --elements-danger-foreground: 0 0% 100%;
280
- --elements-danger: 339.20000000000005 90.36% 51.18%;
281
-
282
- --elements-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
283
-
284
- --elements-font-size-tiny: 0.75rem;
285
- --elements-font-size-small: 0.875rem;
286
- --elements-font-size-medium: 1rem;
287
- --elements-font-size-large: 1.125rem;
288
-
289
- --elements-line-height-tiny: 1rem;
290
- --elements-line-height-small: 1.25rem;
291
- --elements-line-height-medium: 1.5rem;
292
- --elements-line-height-large: 1.75rem;
293
-
294
- --elements-radius-small: 8px;
295
- --elements-radius-medium: 12px;
296
- --elements-radius-large: 14px;
297
-
298
- --elements-divider: 0 0% 6.67%;
299
- --elements-divider-weight: 1px;
300
- --elements-border-width-small: 1px;
301
- --elements-border-width-medium: 2px;
302
- --elements-border-width-large: 3px;
303
-
304
- --elements-focus: 212.01999999999998 100% 46.67%;
305
- --elements-hover-opacity: .8;
306
- --elements-disabled-opacity: .5;
307
-
308
- --elements-box-shadow-small: 0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
309
- --elements-box-shadow-medium: 0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
310
- --elements-box-shadow-large: 0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3);
311
- }
158
+ /* Override to light blue background */
159
+ --elements-background: 220 67% 96%;
312
160
 
313
- /* Optional: dark theme overrides on the wrapper */
314
- [data-theme="dark"].mobielnl-elements,
315
- .mobielnl-elements[data-theme="dark"] {
316
- --elements-background: 0 0% 0%;
161
+ /* Override to monospace font */
162
+ --elements-font-family: monospace;
317
163
  }
318
164
  ```
319
165
 
320
- ### Notes
166
+ 4. Overriding Classes
321
167
 
322
- - Colors are HSL triplets (h s% l%). Use a HSL converter if needed.
323
- - You can define multiple named themes using `[data-theme="brand-x"] { ... }` and switch at runtime.
168
+ You can customize component styling using the `classNames` prop.
169
+
170
+ ```tsx
171
+ import { ProductResults, type ProductResultsClassNames } from "@mobielnl/elements";
172
+
173
+ const productResultsClassNames: ProductResultsClassNames = {
174
+ propositionCard: {
175
+ title: "text-5xl font-extrabold text-secondary",
176
+ pricingSection: {
177
+ monthlyFeeValue: "text-danger",
178
+ },
179
+ },
180
+ };
181
+
182
+ export default function Example() {
183
+ return <ProductResults classNames={productResultsClassNames} />;
184
+ }
185
+ ```
package/dist/elements.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { R as l, S as r } from "./index-6scNbCqx.js";
2
+ import { R as l, S as r } from "./index-BeAhOAEp.js";
3
3
  var s = typeof globalThis < "u" && globalThis.process ? globalThis.process : { env: { NODE_ENV: "production" } };
4
4
  export {
5
5
  l as ElementsRoot,