stoop 0.0.4 → 0.0.6

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.
Files changed (9) hide show
  1. package/README.md +6 -66
  2. package/dist/Button.module-h78z3dbd.css +18 -0
  3. package/dist/components/Button/Button.d.ts +4 -0
  4. package/dist/{globals-h4nepkxv.css → globals.css} +11 -12
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +32 -1426
  7. package/dist/tsconfig.build.tsbuildinfo +1 -1
  8. package/package.json +11 -5
  9. package/dist/components/ThemeProvider.d.ts +0 -12
package/README.md CHANGED
@@ -4,16 +4,6 @@
4
4
 
5
5
  ![Stoop Kid Steps Off](https://nomeatballs.files.wordpress.com/2012/08/stoop-kid-steps-off.png)
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
- ### Theme Provider
15
+ ### Global Styles
26
16
 
27
- Wrap your app with the ThemeProvider:
17
+ Import the global styles in your app:
28
18
 
29
19
  ```tsx
30
- import { ThemeProvider } from "stoop";
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 the Theme
23
+ ### Using Components
44
24
 
45
25
  ```tsx
46
- import { useTheme } from "stoop";
26
+ import { Button } from "stoop";
47
27
 
48
28
  function MyComponent() {
49
- const { mode, toggleTheme } = useTheme();
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:
package/dist/Button.module-h78z3dbd.css ADDED
@@ -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/components/Button/Button.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { type ButtonHTMLAttributes, type JSX } from "react";
2
+ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
3
+ export declare function Button({ className, ...props }: ButtonProps): JSX.Element;
4
+ export {};
package/dist/{globals-h4nepkxv.css → globals.css} RENAMED
@@ -2,7 +2,7 @@
2
2
  /* Colors */
3
3
  --color-text: #000000;
4
4
  --color-background: #ffffff;
5
- --color-border: rgba(0, 0, 0, 0.5);
5
+ --color-border: rgba(0, 0, 0, 0.1);
6
6
  --color-primary: #000000;
7
7
  --color-muted: #666666;
8
8
 
@@ -29,12 +29,14 @@
29
29
  --breakpoint-desktop: 1440px;
30
30
  }
31
31
 
32
- [data-theme="dark"] {
33
- --color-text: #ffffff;
34
- --color-background: #212121;
35
- --color-border: rgba(255, 255, 255, 0.5);
36
- --color-primary: #ffffff;
37
- --color-muted: #424242;
32
+ @media (prefers-color-scheme: dark) {
33
+ :root {
34
+ --color-text: #ffffff;
35
+ --color-background: #000000;
36
+ --color-border: rgba(255, 255, 255, 0.1);
37
+ --color-primary: #ffffff;
38
+ --color-muted: #999999;
39
+ }
38
40
  }
39
41
 
40
42
  /* Reset */
@@ -57,12 +59,9 @@ body {
57
59
  font-family:
58
60
  system-ui,
59
61
  -apple-system,
60
- BlinkMacSystemFont,
61
- "Segoe UI",
62
- Roboto,
63
62
  sans-serif;
64
63
  font-size: 1.6rem;
65
64
  line-height: 1.5;
66
- background-color: inherit;
67
- color: inherit;
65
+ margin: 0;
66
+ padding: 0;
68
67
  }
package/dist/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { ThemeProvider, useTheme } from "./components/ThemeProvider";
1
+ export { Button } from "./components/Button/Button";