stoop 0.0.4 → 0.0.5
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 +6 -66
- package/dist/Button.module-h78z3dbd.css +18 -0
- package/dist/components/Button/Button.d.ts +4 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +32 -1426
- package/dist/{globals-h4nepkxv.css → styles/globals.css} +11 -12
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +8 -5
- package/dist/components/ThemeProvider.d.ts +0 -12
package/README.md
CHANGED
|
@@ -4,16 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
## Features
|
|
8
|
-
|
|
9
|
-
- 🎨 Theme system with dark mode support
|
|
10
|
-
- 🎯 Zero-config theme switching
|
|
11
|
-
- 🎭 System preference detection
|
|
12
|
-
- 🎪 SSR-friendly
|
|
13
|
-
- 🎭 No flash of unstyled content
|
|
14
|
-
- 🎨 Type-safe CSS variables
|
|
15
|
-
- 🎭 Stitches-like variants API
|
|
16
|
-
|
|
17
7
|
## Install
|
|
18
8
|
|
|
19
9
|
```sh
|
|
@@ -22,44 +12,24 @@ bun add stoop
|
|
|
22
12
|
|
|
23
13
|
## Usage
|
|
24
14
|
|
|
25
|
-
###
|
|
15
|
+
### Global Styles
|
|
26
16
|
|
|
27
|
-
|
|
17
|
+
Import the global styles in your app:
|
|
28
18
|
|
|
29
19
|
```tsx
|
|
30
|
-
import
|
|
31
|
-
|
|
32
|
-
export default function RootLayout({ children }) {
|
|
33
|
-
return (
|
|
34
|
-
<html lang="en">
|
|
35
|
-
<body>
|
|
36
|
-
<ThemeProvider>{children}</ThemeProvider>
|
|
37
|
-
</body>
|
|
38
|
-
</html>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
20
|
+
import "stoop/globalStyles";
|
|
41
21
|
```
|
|
42
22
|
|
|
43
|
-
### Using
|
|
23
|
+
### Using Components
|
|
44
24
|
|
|
45
25
|
```tsx
|
|
46
|
-
import {
|
|
26
|
+
import { Button } from "stoop";
|
|
47
27
|
|
|
48
28
|
function MyComponent() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
return <button onClick={toggleTheme}>Current theme: {mode}</button>;
|
|
29
|
+
return <Button>Click me</Button>;
|
|
52
30
|
}
|
|
53
31
|
```
|
|
54
32
|
|
|
55
|
-
### Global Styles
|
|
56
|
-
|
|
57
|
-
Import the global styles in your app:
|
|
58
|
-
|
|
59
|
-
```tsx
|
|
60
|
-
import "stoop/styles/global.css";
|
|
61
|
-
```
|
|
62
|
-
|
|
63
33
|
### Using CSS Variables
|
|
64
34
|
|
|
65
35
|
The theme system provides CSS variables that you can use in your components:
|
|
@@ -73,36 +43,6 @@ The theme system provides CSS variables that you can use in your components:
|
|
|
73
43
|
}
|
|
74
44
|
```
|
|
75
45
|
|
|
76
|
-
### Using Variants
|
|
77
|
-
|
|
78
|
-
Create type-safe component variants using the `createVariants` utility:
|
|
79
|
-
|
|
80
|
-
```tsx
|
|
81
|
-
import { createVariants } from "stoop";
|
|
82
|
-
|
|
83
|
-
const buttonVariants = createVariants({
|
|
84
|
-
size: {
|
|
85
|
-
small: "text-sm px-2 py-1",
|
|
86
|
-
medium: "text-base px-4 py-2",
|
|
87
|
-
large: "text-lg px-6 py-3",
|
|
88
|
-
},
|
|
89
|
-
variant: {
|
|
90
|
-
primary: "bg-primary text-white",
|
|
91
|
-
secondary: "bg-muted text-text",
|
|
92
|
-
outline: "border border-border",
|
|
93
|
-
},
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
function Button({ size, variant, ...props }) {
|
|
97
|
-
return <button className={buttonVariants({ size, variant })} {...props} />;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
// Usage:
|
|
101
|
-
<Button size="medium" variant="primary">
|
|
102
|
-
Click me
|
|
103
|
-
</Button>;
|
|
104
|
-
```
|
|
105
|
-
|
|
106
46
|
## Development
|
|
107
47
|
|
|
108
48
|
For local development:
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.button {
|
|
2
|
+
background-color: var(--color-primary);
|
|
3
|
+
color: var(--color-background);
|
|
4
|
+
border: none;
|
|
5
|
+
padding: var(--space-small) var(--space-medium);
|
|
6
|
+
border-radius: var(--radius-small);
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
font-size: 1.6rem;
|
|
9
|
+
transition: opacity 0.2s ease;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.button:hover {
|
|
13
|
+
opacity: 0.9;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.button:active {
|
|
17
|
+
opacity: 0.8;
|
|
18
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { Button } from "./components/Button/Button";
|