@elenajs/components 0.15.0 → 0.16.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.
Files changed (2) hide show
  1. package/README.md +183 -0
  2. package/package.json +4 -4
package/README.md ADDED
@@ -0,0 +1,183 @@
1
+ <div align="center">
2
+ <picture>
3
+ <source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/img/elena-dark.png" alt="Elena" width="201" height="230">
4
+ </source>
5
+ <source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/img/elena.png" alt="Elena" width="201" height="230">
6
+ </source>
7
+ <img src="https://elenajs.com/img/elena.png" alt="Elena" width="201" height="230">
8
+ </picture>
9
+
10
+ ### Elena component library demonstrating how to build Progressive Web Components.
11
+
12
+ <br/>
13
+
14
+ <a href="https://arielsalminen.com"><img src="https://img.shields.io/badge/creator-@arielle-F95B1F" alt="Creator @arielle"/></a>
15
+ <a href="https://www.npmjs.com/package/@elenajs/components"><img src="https://img.shields.io/npm/v/@elenajs/components.svg" alt="Latest version on npm" /></a>
16
+ <a href="https://github.com/getelena/elena/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="Elena is released under the MIT license." /></a>
17
+ <a href="https://github.com/getelena/elena/actions/workflows/tests.yml"><img src="https://github.com/getelena/elena/actions/workflows/tests.yml/badge.svg" alt="Tests status" /></a>
18
+
19
+ </div>
20
+
21
+ <br/>
22
+
23
+ <p align="center"><strong>@elenajs/components</strong> is an example Progressive Web Component library built with <a href="https://elenajs.com">Elena</a>. It demonstrates Elena’s component patterns and ships with a <a href="https://custom-elements-manifest.open-wc.org/">Custom Elements Manifest</a>, TypeScript declarations, and individual CSS files for each component.</p>
24
+
25
+ <br/>
26
+
27
+ > [!WARNING]
28
+ > Please note that `@elenajs/components` is in active development and the APIs may change without notice.
29
+
30
+ <br/>
31
+
32
+ ## Table of contents
33
+
34
+ - **[Install](#install)**
35
+ - **[Usage](#usage)**
36
+ - **[Import all components](#import-all-components)**
37
+ - **[Import individual components](#import-individual-components)**
38
+ - **[Import styles](#import-styles)**
39
+ - **[Available components](#available-components)**
40
+ - **[Button](#button)**
41
+ - **[Stack](#stack)**
42
+ - **[TypeScript](#typescript)**
43
+ - **[Development](#development)**
44
+
45
+ ## Install
46
+
47
+ ```bash
48
+ npm install @elenajs/components
49
+ ```
50
+
51
+ ## Usage
52
+
53
+ ### Import all components
54
+
55
+ Import the full bundle to register all components at once:
56
+
57
+ ```js
58
+ import "@elenajs/components";
59
+ ```
60
+
61
+ ### Import individual components
62
+
63
+ Import only the components you need for better tree-shaking:
64
+
65
+ ```js
66
+ import "@elenajs/components/dist/button.js";
67
+ import "@elenajs/components/dist/stack.js";
68
+ ```
69
+
70
+ ### Import styles
71
+
72
+ Each component ships with a matching CSS file. Import the full bundle or individual files:
73
+
74
+ ```css
75
+ /* All component styles */
76
+ @import "@elenajs/components/dist/bundle.css";
77
+
78
+ /* Or individual styles */
79
+ @import "@elenajs/components/dist/button.css";
80
+ @import "@elenajs/components/dist/stack.css";
81
+ ```
82
+
83
+ ## Available components
84
+
85
+ ### Button
86
+
87
+ A **Primitive Component** that renders its own `<button>` element with built-in event delegation and variant styling.
88
+
89
+ ```html
90
+ <elena-button>Click me</elena-button>
91
+ <elena-button variant="primary">Save</elena-button>
92
+ <elena-button variant="danger">Delete</elena-button>
93
+ <elena-button disabled>Disabled</elena-button>
94
+ ```
95
+
96
+ #### Props
97
+
98
+ | Prop | Type | Default | Description |
99
+ | ---------- | ------------------------------------ | ----------- | ----------------------------------------------- |
100
+ | `variant` | `"default" \| "primary" \| "danger"` | `"default"` | The style variant of the button. |
101
+ | `disabled` | `Boolean` | `false` | Makes the component disabled. |
102
+ | `name` | `string` | `""` | The name used to identify the button in forms. |
103
+ | `value` | `string` | `""` | The value used to identify the button in forms. |
104
+ | `type` | `"submit" \| "reset" \| "button"` | `"button"` | The type of the button. |
105
+
106
+ #### Events
107
+
108
+ | Event | Description |
109
+ | ------- | ------------------------------------- |
110
+ | `click` | Fires when the button is clicked. |
111
+ | `focus` | Fires when the button receives focus. |
112
+ | `blur` | Fires when the button loses focus. |
113
+
114
+ #### CSS custom properties
115
+
116
+ | Property | Description |
117
+ | ----------------------- | --------------------------------------- |
118
+ | `--elena-button-text` | Overrides the default text color. |
119
+ | `--elena-button-bg` | Overrides the default background color. |
120
+ | `--elena-button-font` | Overrides the default font family. |
121
+ | `--elena-button-radius` | Overrides the default border radius. |
122
+
123
+ ### Stack
124
+
125
+ A **Composite Component** that manages flexbox layout of its children with optional spacing.
126
+
127
+ ```html
128
+ <elena-stack>
129
+ <elena-button>First</elena-button>
130
+ <elena-button>Second</elena-button>
131
+ </elena-stack>
132
+
133
+ <elena-stack direction="row">
134
+ <elena-button>Left</elena-button>
135
+ <elena-button>Right</elena-button>
136
+ </elena-stack>
137
+ ```
138
+
139
+ #### Props
140
+
141
+ | Prop | Type | Default | Description |
142
+ | ----------- | ------------------- | ---------- | ---------------------------------- |
143
+ | `direction` | `"column" \| "row"` | `"column"` | The direction of the stack layout. |
144
+
145
+ ## TypeScript
146
+
147
+ The package ships with TypeScript declarations for JSX integration. To get type checking in your framework:
148
+
149
+ ```ts
150
+ // types.d.ts
151
+ import type { CustomElements } from "@elenajs/components";
152
+
153
+ type ElenaIntrinsicElements = {
154
+ [K in keyof CustomElements]: CustomElements[K] & {
155
+ onClick?: (e: MouseEvent) => void;
156
+ onFocus?: (e: FocusEvent) => void;
157
+ onBlur?: (e: FocusEvent) => void;
158
+ children?: React.ReactNode;
159
+ };
160
+ };
161
+
162
+ declare module "react" {
163
+ namespace JSX {
164
+ interface IntrinsicElements extends ElenaIntrinsicElements {}
165
+ }
166
+ }
167
+ ```
168
+
169
+ ## Development
170
+
171
+ ```bash
172
+ pnpm start # Launch dev server with live reload
173
+ pnpm build # Build to dist/ (via elena build)
174
+ pnpm clean # Remove dist/
175
+ ```
176
+
177
+ ## License
178
+
179
+ MIT
180
+
181
+ ## Copyright
182
+
183
+ Copyright © 2026 [Ariel Salminen](https://arielsalminen.com)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elenajs/components",
3
- "version": "0.15.0",
3
+ "version": "0.16.0",
4
4
  "description": "Elena component library demonstrating how to build Progressive Web Components.",
5
5
  "author": "Elena <hi@elenajs.com>",
6
6
  "homepage": "https://elenajs.com/",
@@ -34,15 +34,15 @@
34
34
  "test": "vitest run"
35
35
  },
36
36
  "dependencies": {
37
- "@elenajs/core": "^0.13.0"
37
+ "@elenajs/core": "^0.14.0"
38
38
  },
39
39
  "devDependencies": {
40
- "@elenajs/bundler": "^0.7.0",
40
+ "@elenajs/bundler": "^0.8.0",
41
41
  "@web/dev-server": "0.4.6",
42
42
  "concurrently": "9.1.2",
43
43
  "happy-dom": "20.7.0",
44
44
  "nodemon": "3.1.10",
45
45
  "vitest": "4.0.18"
46
46
  },
47
- "gitHead": "81fe2fc78111f605854c07df2001f746231d9dfc"
47
+ "gitHead": "c181af0625f691a95a5cb1ef9adb0d7f2c796eae"
48
48
  }