@banzamel/mineralui 0.2.0 → 0.2.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 +114 -0
- package/package.json +14 -4
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# MineralUI
|
|
2
|
+
|
|
3
|
+
Modern React UI component library with a unique **mineral dark aesthetic** — glassmorphism effects, cyan accents, and dark backgrounds. Zero runtime dependencies.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @banzamel/mineralui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import {MineralThemeProvider, Input, Select, DatePicker} from '@banzamel/mineralui';
|
|
15
|
+
import '@banzamel/mineralui/styles.css';
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
return (
|
|
19
|
+
<MineralThemeProvider>
|
|
20
|
+
<Input label="Name" variant="outlined" />
|
|
21
|
+
<Select
|
|
22
|
+
label="Country"
|
|
23
|
+
options={[
|
|
24
|
+
{value: 'pl', label: 'Poland'},
|
|
25
|
+
{value: 'de', label: 'Germany'},
|
|
26
|
+
]}
|
|
27
|
+
/>
|
|
28
|
+
<DatePicker label="Birth date" locale="pl" />
|
|
29
|
+
</MineralThemeProvider>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Components
|
|
35
|
+
|
|
36
|
+
### Inputs
|
|
37
|
+
| Component | Description |
|
|
38
|
+
|-----------|-------------|
|
|
39
|
+
| `Input` | Base input — variants, sizes, colors, icons, loading, clearable |
|
|
40
|
+
| `Textarea` | Multiline with autoResize, minRows/maxRows |
|
|
41
|
+
| `InputPassword` | Show/hide toggle, strength indicator |
|
|
42
|
+
| `InputNumber` | Stepper buttons, min/max/step, long-press |
|
|
43
|
+
| `InputSearch` | Debounced search with instant Enter |
|
|
44
|
+
| `InputEmail` | RFC email validation |
|
|
45
|
+
| `InputPhone` | Country code prefix, digit formatting |
|
|
46
|
+
| `InputName` | Auto-capitalize, strip special chars |
|
|
47
|
+
| `InputIBAN` | MOD-97 checksum, country-aware formatting |
|
|
48
|
+
| `InputTaxId` | NIP/PESEL/REGON with weighted checksum |
|
|
49
|
+
| `InputCurrency` | Symbol, thousand separators, precision |
|
|
50
|
+
|
|
51
|
+
### Controls
|
|
52
|
+
| Component | Description |
|
|
53
|
+
|-----------|-------------|
|
|
54
|
+
| `Checkbox` | Custom visual, indeterminate state, colors |
|
|
55
|
+
| `Radio` / `RadioGroup` | Context-based group, arrow key navigation |
|
|
56
|
+
| `Toggle` | Switch on/off with sliding knob |
|
|
57
|
+
|
|
58
|
+
### Dropdowns
|
|
59
|
+
| Component | Description |
|
|
60
|
+
|-----------|-------------|
|
|
61
|
+
| `Select` | Single/multi (chips), searchable, grouped, keyboard nav |
|
|
62
|
+
| `Autocomplete` | Generic\<T\>, freeSolo, async loading, multiple tags |
|
|
63
|
+
| `DatePicker` | Calendar grid, month/year nav, min/max, locale pl/en |
|
|
64
|
+
| `TimePicker` | Scrollable columns, minuteStep, 12h/24h format |
|
|
65
|
+
|
|
66
|
+
### Form
|
|
67
|
+
| Component | Description |
|
|
68
|
+
|-----------|-------------|
|
|
69
|
+
| `Form` | FormContext provider, validation modes, submit handling |
|
|
70
|
+
| `useFormField` | Hook for field registration and validation |
|
|
71
|
+
|
|
72
|
+
### Primitives
|
|
73
|
+
`Portal`, `Popover` (auto-flip positioning, glassmorphism)
|
|
74
|
+
|
|
75
|
+
## Theming
|
|
76
|
+
|
|
77
|
+
MineralUI uses CSS Custom Properties for full customization:
|
|
78
|
+
|
|
79
|
+
```css
|
|
80
|
+
:root {
|
|
81
|
+
--mineral-primary: #00A5DE;
|
|
82
|
+
--mineral-dark: #0f172a;
|
|
83
|
+
--mineral-surface: #1a1a2e;
|
|
84
|
+
--mineral-text: #e2e8f0;
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
**4 levels of customization:** CSS Variables → Props → className → ThemeProvider
|
|
89
|
+
|
|
90
|
+
## Built-in Utilities
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
// Validators (zero dependencies)
|
|
94
|
+
import {validateIBAN, validateNIP, validatePESEL, validateEmail} from '@banzamel/mineralui';
|
|
95
|
+
|
|
96
|
+
// Formatters
|
|
97
|
+
import {formatIBAN, formatCurrency, formatPhone} from '@banzamel/mineralui';
|
|
98
|
+
|
|
99
|
+
// Hooks
|
|
100
|
+
import {useDebounce, useClickOutside, useKeyboardNav} from '@banzamel/mineralui';
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Key Features
|
|
104
|
+
|
|
105
|
+
- **Zero dependencies** — only React 18+ as peer dependency
|
|
106
|
+
- **TypeScript-first** — complete types, full IDE autocomplete
|
|
107
|
+
- **CSS Modules** — isolated styles, no global collisions
|
|
108
|
+
- **API-friendly props** — `loading`, `debounceMs`, `validateOnBlur`, `onValueChange`
|
|
109
|
+
- **Keyboard navigation** — full ARIA support, focus management
|
|
110
|
+
- **Polish validators** — IBAN MOD-97, NIP/PESEL/REGON checksum built-in
|
|
111
|
+
|
|
112
|
+
## License
|
|
113
|
+
|
|
114
|
+
MIT — [Rafal Polak](https://bitbucket.org/polaczq/mineralui)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@banzamel/mineralui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Modern React UI component framework with mineral dark aesthetic",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -57,13 +57,23 @@
|
|
|
57
57
|
"vitest": "^3.0.0"
|
|
58
58
|
},
|
|
59
59
|
"keywords": [
|
|
60
|
+
"css",
|
|
61
|
+
"responsive",
|
|
60
62
|
"react",
|
|
63
|
+
"react-components",
|
|
61
64
|
"ui",
|
|
62
|
-
"
|
|
65
|
+
"ui-library",
|
|
66
|
+
"ui-components",
|
|
67
|
+
"component-library",
|
|
63
68
|
"framework",
|
|
64
|
-
"
|
|
69
|
+
"design-system",
|
|
65
70
|
"mineral",
|
|
66
|
-
"typescript"
|
|
71
|
+
"typescript",
|
|
72
|
+
"css-modules",
|
|
73
|
+
"css-variables",
|
|
74
|
+
"theming",
|
|
75
|
+
"validation",
|
|
76
|
+
"keyboard-navigation"
|
|
67
77
|
],
|
|
68
78
|
"license": "MIT",
|
|
69
79
|
"repository": {
|