minora 0.1.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/LICENSE +21 -0
- package/README.md +292 -0
- package/dist/minora.css +7499 -0
- package/dist/minora.js +779 -0
- package/dist/minora.min.css +7 -0
- package/dist/minora.min.js +2 -0
- package/dist/tokens.css +542 -0
- package/package.json +45 -0
- package/src/components/alert.css +659 -0
- package/src/components/avatar.css +463 -0
- package/src/components/badge.css +577 -0
- package/src/components/button.css +493 -0
- package/src/components/checkbox.css +605 -0
- package/src/components/divider.css +295 -0
- package/src/components/form-validation.css +700 -0
- package/src/components/input.css +625 -0
- package/src/components/modal.css +437 -0
- package/src/components/select.css +616 -0
- package/src/components/toast.css +586 -0
- package/src/components/toggle.css +457 -0
- package/src/components/tooltip.css +401 -0
- package/src/js/modal.js +127 -0
- package/src/js/select.js +272 -0
- package/src/js/toast.js +140 -0
- package/src/js/tooltip.js +224 -0
- package/src/tokens.css +542 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 minora
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
# Minora
|
|
2
|
+
|
|
3
|
+
> Elegant minimalist UI kit — clean components with warm gold accent, zero dependencies.
|
|
4
|
+
|
|
5
|
+
[]()
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
[](dist/minora.min.css)
|
|
8
|
+
[](https://www.jsdelivr.com/package/gh/username/minora)
|
|
9
|
+
|
|
10
|
+
Minora is a handcrafted UI kit built with **vanilla HTML, CSS, and JavaScript**. Every component uses CSS custom properties from a single source of truth — change one token, the entire system adapts. No frameworks. No dependencies. Just clean, elegant components.
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
┌─────────────────────────────────────────────────────┐
|
|
14
|
+
│ ╭────────────╮ ╭────────────╮ ╭────────────╮ │
|
|
15
|
+
│ │ Button │ │ Badge │ │ Toggle │ │
|
|
16
|
+
│ ╰────────────╯ ╰────────────╯ ╰────────────╯ │
|
|
17
|
+
│ │
|
|
18
|
+
│ ┌───────────────────────────────────────────┐ │
|
|
19
|
+
│ │ Input with label & helper text │ │
|
|
20
|
+
│ └───────────────────────────────────────────┘ │
|
|
21
|
+
│ │
|
|
22
|
+
│ ╭─ Radio ○ ─╮ ╭─ Checkbox ☑ ─╮ ╭─ Alert ─╮ │
|
|
23
|
+
│ ╰───────────╯ ╰──────────────╯ ╰─────────╯ │
|
|
24
|
+
│ │
|
|
25
|
+
│ ┌───────────────────────────────────────────┐ │
|
|
26
|
+
│ │ Toast notification: ✓ Saved! │ │
|
|
27
|
+
│ └───────────────────────────────────────────┘ │
|
|
28
|
+
│ │
|
|
29
|
+
│ Modal backdrop with dialog [ Confirm ] │
|
|
30
|
+
└─────────────────────────────────────────────────────┘
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Quick Start — CDN
|
|
36
|
+
|
|
37
|
+
### CSS Only
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<link rel="stylesheet"
|
|
41
|
+
href="https://cdn.jsdelivr.net/gh/username/minora@latest/dist/minora.min.css">
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### JS Only (modals, toasts, selects, tooltips)
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<script src="https://cdn.jsdelivr.net/gh/username/minora@latest/dist/minora.min.js"></script>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### CSS + JS (complete)
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<link rel="stylesheet"
|
|
54
|
+
href="https://cdn.jsdelivr.net/gh/username/minora@latest/dist/minora.min.css">
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/gh/username/minora@latest/dist/minora.min.js"></script>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Specific Version (recommended for production)
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<link rel="stylesheet"
|
|
62
|
+
href="https://cdn.jsdelivr.net/gh/username/minora@v0.1.0/dist/minora.min.css">
|
|
63
|
+
<script src="https://cdn.jsdelivr.net/gh/username/minora@v0.1.0/dist/minora.min.js"></script>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Design Tokens Only
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<link rel="stylesheet"
|
|
70
|
+
href="https://cdn.jsdelivr.net/gh/username/minora@latest/dist/tokens.css">
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Complete Example
|
|
76
|
+
|
|
77
|
+
Copy-paste this into an `.html` file and open in your browser:
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<!DOCTYPE html>
|
|
81
|
+
<html lang="en">
|
|
82
|
+
<head>
|
|
83
|
+
<meta charset="UTF-8">
|
|
84
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
85
|
+
<title>Minora Quick Start</title>
|
|
86
|
+
<link rel="stylesheet"
|
|
87
|
+
href="https://cdn.jsdelivr.net/gh/username/minora@latest/dist/minora.min.css">
|
|
88
|
+
</head>
|
|
89
|
+
<body style="max-width:480px; margin:4rem auto; padding:0 1rem;">
|
|
90
|
+
|
|
91
|
+
<h1 style="font-family:var(--font-serif); font-size:var(--text-2xl);
|
|
92
|
+
margin-bottom:var(--space-6);">Quick Start</h1>
|
|
93
|
+
|
|
94
|
+
<!-- Button -->
|
|
95
|
+
<button class="btn btn-primary btn-md" onclick="demo()">Click Me</button>
|
|
96
|
+
|
|
97
|
+
<!-- Input -->
|
|
98
|
+
<div class="input-group" style="margin-top:var(--space-6);">
|
|
99
|
+
<label class="input-label" for="name">Full Name</label>
|
|
100
|
+
<div class="input-wrapper">
|
|
101
|
+
<input class="input input-md" id="name"
|
|
102
|
+
type="text" placeholder="John Doe" />
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<!-- Toast (needs JS) -->
|
|
107
|
+
<script src="https://cdn.jsdelivr.net/gh/username/minora@latest/dist/minora.min.js"></script>
|
|
108
|
+
<script>
|
|
109
|
+
function demo() {
|
|
110
|
+
ToastManager.show({
|
|
111
|
+
type: 'success',
|
|
112
|
+
message: 'It works! Minora is loaded via CDN.'
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
</script>
|
|
116
|
+
|
|
117
|
+
</body>
|
|
118
|
+
</html>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Available Components
|
|
124
|
+
|
|
125
|
+
| Component | Description | Status |
|
|
126
|
+
|---|---|---|
|
|
127
|
+
| **[Button](https://github.com/username/minora#button)** | Solid, outline, ghost, destructive — 3 sizes, icon-only, loading spinner | ✅ Stable |
|
|
128
|
+
| **[Badge](https://github.com/username/minora#badge)** | Solid/subtle/outline — with dot indicator, notification overlay | ✅ Stable |
|
|
129
|
+
| **[Tag](https://github.com/username/minora#tag)** | Dismissible tags with fade animation, clickable, icon support | ✅ Stable |
|
|
130
|
+
| **[Avatar](https://github.com/username/minora#avatar)** | Image/initials/icon fallback, status dots, overlapping groups | ✅ Stable |
|
|
131
|
+
| **[Divider](https://github.com/username/minora#divider)** | Horizontal rules, text/icon separators, vertical separators | ✅ Stable |
|
|
132
|
+
| **[Input](https://github.com/username/minora#input)** | Default/filled/underline variants, icon addons, clear button | ✅ Stable |
|
|
133
|
+
| **[Textarea](https://github.com/username/minora#textarea)** | Auto-resize, character counter, validation states | ✅ Stable |
|
|
134
|
+
| **[Select](https://github.com/username/minora#select)** | Custom dropdown with search, grouped options, keyboard nav | ✅ Stable |
|
|
135
|
+
| **[Multiselect](https://github.com/username/minora#multiselect)** | Tag-based selection, select all/clear, counter badge | ✅ Stable |
|
|
136
|
+
| **[Checkbox](https://github.com/username/minora#checkbox)** | Standard/filled/card, radio buttons, segmented controls | ✅ Stable |
|
|
137
|
+
| **[Toggle](https://github.com/username/minora#toggle)** | Smooth animated switches with icon support | ✅ Stable |
|
|
138
|
+
| **[Form Validation](https://github.com/username/minora#form-validation)** | Inline errors, password strength, form-level alerts | ✅ Stable |
|
|
139
|
+
| **[Toast](https://github.com/username/minora#toast)** | 6 positions, progress bar, stacking, auto-dismiss, actions | ✅ Stable |
|
|
140
|
+
| **[Modal](https://github.com/username/minora#modal)** | Focus trap, scroll lock, nested stacking, multi-step | ✅ Stable |
|
|
141
|
+
| **[Dialog](https://github.com/username/minora#dialog)** | Confirm, destructive, info, input-based confirmation | ✅ Stable |
|
|
142
|
+
| **[Tooltip](https://github.com/username/minora#tooltip)** | 9 positions, auto-flip, rich content, interactive | ✅ Stable |
|
|
143
|
+
| **[Popover](https://github.com/username/minora#popover)** | Click-triggered panels with header/body/footer | ✅ Stable |
|
|
144
|
+
| **[Alert](https://github.com/username/minora#alert)** | Subtle/filled/outline, inline messages, page banners | ✅ Stable |
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
## Customization
|
|
149
|
+
|
|
150
|
+
All colors, spacing, typography, and animation values come from `tokens.css` — a single source of truth. Override them **after** loading Minora CSS:
|
|
151
|
+
|
|
152
|
+
```html
|
|
153
|
+
<link rel="stylesheet" href=".../minora.min.css">
|
|
154
|
+
<style>
|
|
155
|
+
:root {
|
|
156
|
+
/* Change accent color */
|
|
157
|
+
--color-accent-500: #3b82f6; /* blue instead of gold */
|
|
158
|
+
--color-accent-600: #2563eb;
|
|
159
|
+
--color-accent-700: #1d4ed8;
|
|
160
|
+
|
|
161
|
+
/* Use your own fonts */
|
|
162
|
+
--font-serif: 'Merriweather', serif;
|
|
163
|
+
--font-sans: 'Source Sans 3', sans-serif;
|
|
164
|
+
|
|
165
|
+
/* Adjust spacing */
|
|
166
|
+
--space-4: 20px; /* default: 16px */
|
|
167
|
+
|
|
168
|
+
/* Customize focus ring */
|
|
169
|
+
--focus-ring-color: var(--color-info);
|
|
170
|
+
}
|
|
171
|
+
</style>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Full Token List
|
|
175
|
+
|
|
176
|
+
See [tokens.css](src/tokens.css) for all available custom properties:
|
|
177
|
+
|
|
178
|
+
| Category | Tokens |
|
|
179
|
+
|---|---|
|
|
180
|
+
| **Colors** | `--color-neutral-*` (50–950), `--color-accent-*` (50–950), `--color-success-*`, `--color-warning-*`, `--color-error-*`, `--color-info-*` |
|
|
181
|
+
| **Typography** | `--font-serif`, `--font-sans`, `--font-mono`, `--text-*`, `--leading-*`, `--tracking-*`, `--font-*` |
|
|
182
|
+
| **Spacing** | `--space-0` to `--space-32` (4px base) |
|
|
183
|
+
| **Radius** | `--radius-none`, `--radius-sm`, `--radius-md`, `--radius-pill` |
|
|
184
|
+
| **Shadows** | `--shadow-sm`, `--shadow-md` |
|
|
185
|
+
| **Transitions** | `--duration-*`, `--ease-*`, `--transition-*` |
|
|
186
|
+
| **Z-Index** | `--z-base` to `--z-toast` |
|
|
187
|
+
|
|
188
|
+
---
|
|
189
|
+
|
|
190
|
+
## Design System
|
|
191
|
+
|
|
192
|
+
**Palette:** Warm gold (`#d4872e`) on cool gray — timeless, sophisticated, minimal.
|
|
193
|
+
|
|
194
|
+
**Typography:** Playfair Display (serif) for headings + Inter (sans-serif) for body. Classical meets modern.
|
|
195
|
+
|
|
196
|
+
**Philosophy:** Every value is a CSS custom property. Change one token, the entire system adapts. No hardcoded values anywhere.
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
200
|
+
## Browser Support
|
|
201
|
+
|
|
202
|
+
| Browser | Version |
|
|
203
|
+
|---|---|
|
|
204
|
+
| Chrome | 88+ |
|
|
205
|
+
| Firefox | 85+ |
|
|
206
|
+
| Safari | 14.1+ |
|
|
207
|
+
| Edge | 88+ |
|
|
208
|
+
| Opera | 74+ |
|
|
209
|
+
|
|
210
|
+
> **Note:** Some components use `:has()` selector (input focus states). Polyfill available at [css-has-pseudo](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-has-pseudo).
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
## File Size
|
|
215
|
+
|
|
216
|
+
| File | Size | Gzip |
|
|
217
|
+
|---|---|---|
|
|
218
|
+
| `minora.css` | 246 KB | 38 KB |
|
|
219
|
+
| `minora.min.css` | 112 KB | **22 KB** |
|
|
220
|
+
| `minora.js` | 39 KB | 13 KB |
|
|
221
|
+
| `minora.min.js` | 22 KB | **9 KB** |
|
|
222
|
+
| `tokens.css` | 28 KB | 6 KB |
|
|
223
|
+
| **Total (min + gzipped)** | | **~37 KB** |
|
|
224
|
+
|
|
225
|
+
---
|
|
226
|
+
|
|
227
|
+
## Build from Source
|
|
228
|
+
|
|
229
|
+
```bash
|
|
230
|
+
git clone https://github.com/username/minora.git
|
|
231
|
+
cd minora
|
|
232
|
+
npm install
|
|
233
|
+
npm run build:all # CSS + JS concat + minify
|
|
234
|
+
npm run watch # auto-rebuild on changes
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
**Build output:** `dist/` folder with concatenated and minified files, ready for CDN.
|
|
238
|
+
|
|
239
|
+
---
|
|
240
|
+
|
|
241
|
+
## Project Structure
|
|
242
|
+
|
|
243
|
+
```
|
|
244
|
+
minora/
|
|
245
|
+
├── dist/ ← CDN-ready files
|
|
246
|
+
│ ├── minora.css ← All components
|
|
247
|
+
│ ├── minora.min.css ← Minified
|
|
248
|
+
│ ├── minora.js ← All JS modules
|
|
249
|
+
│ ├── minora.min.js ← Minified
|
|
250
|
+
│ └── tokens.css ← Standalone tokens
|
|
251
|
+
├── src/
|
|
252
|
+
│ ├── tokens.css ← Design tokens (source of truth)
|
|
253
|
+
│ ├── components/ ← 13 CSS component files
|
|
254
|
+
│ └── js/ ← 4 JS module files
|
|
255
|
+
├── docs/ ← Documentation
|
|
256
|
+
├── package.json
|
|
257
|
+
├── build.mjs ← Build script (csso + terser)
|
|
258
|
+
├── LICENSE ← MIT
|
|
259
|
+
└── README.md
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
|
|
264
|
+
## Changelog
|
|
265
|
+
|
|
266
|
+
See [CHANGELOG.md](CHANGELOG.md) for the full version history.
|
|
267
|
+
|
|
268
|
+
---
|
|
269
|
+
|
|
270
|
+
## Contributing
|
|
271
|
+
|
|
272
|
+
1. Fork the repository
|
|
273
|
+
2. Create a feature branch (`git checkout -b feature/amazing-component`)
|
|
274
|
+
3. Commit your changes (`git commit -m 'Add amazing component'`)
|
|
275
|
+
4. Push to the branch (`git push origin feature/amazing-component`)
|
|
276
|
+
5. Open a Pull Request
|
|
277
|
+
|
|
278
|
+
**Guidelines:**
|
|
279
|
+
- All CSS values must use custom properties — no hardcoded colors or pixel values
|
|
280
|
+
- Follow the existing naming convention: `.component`, `.component-variant`, `.component-size`
|
|
281
|
+
- Include anatomy comments at the top of each component file
|
|
282
|
+
- Test across Chrome, Firefox, Safari, and Edge
|
|
283
|
+
|
|
284
|
+
---
|
|
285
|
+
|
|
286
|
+
## License
|
|
287
|
+
|
|
288
|
+
[MIT](LICENSE) — use freely in personal and commercial projects. Attribution appreciated but not required.
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
Built with ☕ by the Minora team.
|