@storm-ds/ui 0.1.1 → 1.0.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/README.md +1 -88
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/plugin.d.mts +124 -4
- package/dist/plugin.d.ts +124 -4
- package/package.json +3 -4
package/README.md
CHANGED
|
@@ -1,88 +1 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
Lightning-fast component library optimized for Next.js — 58 components, zero runtime dependencies.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @storm-ds/ui
|
|
9
|
-
# or
|
|
10
|
-
pnpm add @storm-ds/ui
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
### Peer Dependencies
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm install react react-dom tailwindcss
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Tailwind Plugin Setup
|
|
20
|
-
|
|
21
|
-
Add the Storm plugin to your `tailwind.config.js`:
|
|
22
|
-
|
|
23
|
-
```js
|
|
24
|
-
/** @type {import('tailwindcss').Config} */
|
|
25
|
-
module.exports = {
|
|
26
|
-
content: [
|
|
27
|
-
// ...your content paths
|
|
28
|
-
'./node_modules/@storm-ds/ui/dist/**/*.{js,mjs}',
|
|
29
|
-
],
|
|
30
|
-
darkMode: 'class',
|
|
31
|
-
plugins: [
|
|
32
|
-
require('@storm-ds/ui/plugin').default || require('@storm-ds/ui/plugin'),
|
|
33
|
-
],
|
|
34
|
-
}
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
The plugin registers Storm's design tokens as CSS variables (colors, spacing, radii) and extends your Tailwind theme with `storm-*` utilities like `bg-storm-primary`, `text-storm-muted`, `border-storm-border`.
|
|
38
|
-
|
|
39
|
-
## Dark Mode
|
|
40
|
-
|
|
41
|
-
Storm uses `darkMode: 'class'`. Toggle the `dark` class on `<html>` to switch themes:
|
|
42
|
-
|
|
43
|
-
```js
|
|
44
|
-
document.documentElement.classList.toggle('dark')
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
To prevent flash of unstyled content (FOUC), add this script in your `<head>`:
|
|
48
|
-
|
|
49
|
-
```html
|
|
50
|
-
<script>
|
|
51
|
-
if (localStorage.getItem('storm-theme') === 'dark' ||
|
|
52
|
-
(!localStorage.getItem('storm-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
53
|
-
document.documentElement.classList.add('dark')
|
|
54
|
-
}
|
|
55
|
-
</script>
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
## Usage
|
|
59
|
-
|
|
60
|
-
```tsx
|
|
61
|
-
import { Button, Card, CardBody } from '@storm-ds/ui'
|
|
62
|
-
|
|
63
|
-
export default function Home() {
|
|
64
|
-
return (
|
|
65
|
-
<Card>
|
|
66
|
-
<CardBody>
|
|
67
|
-
<Button>Click me</Button>
|
|
68
|
-
</CardBody>
|
|
69
|
-
</Card>
|
|
70
|
-
)
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
## Charts
|
|
75
|
-
|
|
76
|
-
Chart components (powered by Recharts) are available as a separate entry point:
|
|
77
|
-
|
|
78
|
-
```bash
|
|
79
|
-
npm install recharts
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
```tsx
|
|
83
|
-
import { AreaChart, BarChart, LineChart, PieChart } from '@storm-ds/ui/charts'
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
## License
|
|
87
|
-
|
|
88
|
-
MIT
|
|
1
|
+
# storm-ui
|
package/dist/index.js
CHANGED
|
@@ -321,7 +321,7 @@ var Checkbox = _react.forwardRef.call(void 0,
|
|
|
321
321
|
className: cn(
|
|
322
322
|
"shrink-0 cursor-pointer appearance-none rounded-storm-sm border border-storm-border bg-storm-background transition-colors",
|
|
323
323
|
"checked:border-storm-primary checked:bg-storm-primary",
|
|
324
|
-
|
|
324
|
+
'checked:bg-[url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2016%2016%27%20fill%3D%27white%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M12.207%204.793a1%201%200%20010%201.414l-5%205a1%201%200%2001-1.414%200l-2-2a1%201%200%20011.414-1.414L6.5%209.086l4.293-4.293a1%201%200%20011.414%200z%27%2F%3E%3C%2Fsvg%3E")] checked:bg-center checked:bg-no-repeat checked:bg-[length:100%_100%]',
|
|
325
325
|
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-storm-ring",
|
|
326
326
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
327
327
|
sizeStyles4[size],
|