@sirlund/mindset-ui 0.2.1 → 0.2.2
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 +69 -18
- package/dist/components-manifest.json +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,13 +22,12 @@ import { Button, Card, Icon } from '@sirlund/mindset-ui';
|
|
|
22
22
|
function App() {
|
|
23
23
|
return (
|
|
24
24
|
<div>
|
|
25
|
-
<Button variant="primary"
|
|
26
|
-
|
|
27
|
-
</Button>
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<Icon name="check" size="md" />
|
|
25
|
+
<Button variant="primary">Primary</Button>
|
|
26
|
+
<Button variant="accent">Accent</Button>
|
|
27
|
+
<Button variant="tertiary">Tertiary</Button>
|
|
28
|
+
<Button variant="danger">Danger</Button>
|
|
29
|
+
<Card plan="Individual" price={20} />
|
|
30
|
+
<Icon name="check" size="M" />
|
|
32
31
|
</div>
|
|
33
32
|
);
|
|
34
33
|
}
|
|
@@ -37,15 +36,72 @@ function App() {
|
|
|
37
36
|
## Components
|
|
38
37
|
|
|
39
38
|
### Button
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
|
|
40
|
+
| Prop | Type | Default | Description |
|
|
41
|
+
|------|------|---------|-------------|
|
|
42
|
+
| `variant` | `'primary' \| 'accent' \| 'tertiary' \| 'text' \| 'danger'` | `'primary'` | Visual style |
|
|
43
|
+
| `size` | `'xsmall' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Button size |
|
|
44
|
+
| `disabled` | `boolean` | `false` | Disabled state |
|
|
45
|
+
| `loading` | `boolean` | `false` | Loading spinner |
|
|
46
|
+
| `fullWidth` | `boolean` | `false` | Full width |
|
|
47
|
+
| `startIcon` | `ReactNode` | - | Icon before text |
|
|
48
|
+
| `endIcon` | `ReactNode` | - | Icon after text |
|
|
43
49
|
|
|
44
50
|
### Card
|
|
45
|
-
|
|
51
|
+
|
|
52
|
+
Pricing card component for subscription plans.
|
|
53
|
+
|
|
54
|
+
| Prop | Type | Default |
|
|
55
|
+
|------|------|---------|
|
|
56
|
+
| `plan` | `'Starter' \| 'Individual' \| 'Teams'` | `'Starter'` |
|
|
57
|
+
| `price` | `number` | `0` |
|
|
58
|
+
| `seats` | `number` | `1` |
|
|
46
59
|
|
|
47
60
|
### Icon
|
|
48
|
-
|
|
61
|
+
|
|
62
|
+
| Prop | Type | Default |
|
|
63
|
+
|------|------|---------|
|
|
64
|
+
| `name` | `IconName` | required |
|
|
65
|
+
| `size` | `'XS' \| 'S' \| 'M' \| 'L'` | `'M'` |
|
|
66
|
+
| `color` | `string` | `'#29292a'` |
|
|
67
|
+
|
|
68
|
+
Available icons: `add`, `check`, `close`, `search`, `user`, `settings`, `mail`, `calendar`, `trash`, `pencil`, `arrow-left`, `arrow-right`, `chevron-down`, `chevron-up`, and more.
|
|
69
|
+
|
|
70
|
+
## Dark Mode
|
|
71
|
+
|
|
72
|
+
The library supports dark mode via the `data-theme` attribute. Light mode is the default.
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
// Light mode (default)
|
|
76
|
+
<html>
|
|
77
|
+
<body>
|
|
78
|
+
<Button variant="primary">Dark background</Button>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
81
|
+
|
|
82
|
+
// Dark mode - add data-theme="dark" to html or body
|
|
83
|
+
<html data-theme="dark">
|
|
84
|
+
<body>
|
|
85
|
+
<Button variant="primary">Light background</Button>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Components Manifest
|
|
91
|
+
|
|
92
|
+
For programmatic access to component definitions (useful for AI/code generation):
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
// Import as JSON
|
|
96
|
+
import manifest from '@sirlund/mindset-ui/manifest';
|
|
97
|
+
|
|
98
|
+
// Or fetch from CDN
|
|
99
|
+
fetch('https://unpkg.com/@sirlund/mindset-ui/dist/components-manifest.json')
|
|
100
|
+
.then(res => res.json())
|
|
101
|
+
.then(manifest => {
|
|
102
|
+
console.log(manifest.components.Button.props);
|
|
103
|
+
});
|
|
104
|
+
```
|
|
49
105
|
|
|
50
106
|
## Design Tokens
|
|
51
107
|
|
|
@@ -55,12 +111,11 @@ The library exports design tokens for consistent styling:
|
|
|
55
111
|
import { tokens, colors, spacing, getCSSVar } from '@sirlund/mindset-ui';
|
|
56
112
|
```
|
|
57
113
|
|
|
58
|
-
## Storybook
|
|
114
|
+
## Storybook
|
|
59
115
|
|
|
60
116
|
View the live component documentation:
|
|
61
117
|
|
|
62
118
|
```bash
|
|
63
|
-
# Clone the repo
|
|
64
119
|
git clone https://github.com/sirlund/MindsetDS.git
|
|
65
120
|
cd MindsetDS
|
|
66
121
|
npm install
|
|
@@ -70,7 +125,3 @@ npm run storybook
|
|
|
70
125
|
## License
|
|
71
126
|
|
|
72
127
|
MIT
|
|
73
|
-
|
|
74
|
-
## Team
|
|
75
|
-
|
|
76
|
-
MindSet Team
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sirlund/mindset-ui",
|
|
3
3
|
"description": "MindSet Design System - Storybook documentation and component library extracted from Figma",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.2",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "MindSet Team",
|
|
7
7
|
"main": "./dist/index.cjs",
|