@geckoui/geckoui 2.0.0 → 2.0.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 +31 -7
- package/dist/styles.css +2 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,6 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
📚 **Documentation**: [Gecko](https://geckoui.dev)
|
|
12
12
|
|
|
13
|
+
Upgrading from v1? See the [migration guide](https://geckoui.dev/docs/migrating-to-v2).
|
|
14
|
+
|
|
13
15
|
## Installation
|
|
14
16
|
|
|
15
17
|
```bash
|
|
@@ -52,7 +54,28 @@ import "@geckoui/geckoui/styles.css";
|
|
|
52
54
|
}
|
|
53
55
|
```
|
|
54
56
|
|
|
55
|
-
### 2.
|
|
57
|
+
### 2. Wrap Your App
|
|
58
|
+
|
|
59
|
+
`GeckoUIProvider` owns the overlay stack. `Toast`, `ConfirmDialog` and the imperative
|
|
60
|
+
`Dialog.show()` / `Drawer.show()` need it; the declarative `<Dialog open>` and
|
|
61
|
+
`<Drawer open>` forms do not. Put it below your own context providers, so content opened
|
|
62
|
+
from anywhere can still read them.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import { GeckoUIProvider } from "@geckoui/geckoui";
|
|
66
|
+
|
|
67
|
+
export default function RootLayout({ children }) {
|
|
68
|
+
return (
|
|
69
|
+
<html lang="en">
|
|
70
|
+
<body>
|
|
71
|
+
<GeckoUIProvider>{children}</GeckoUIProvider>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### 3. Use Components
|
|
56
79
|
|
|
57
80
|
```tsx
|
|
58
81
|
import { Alert, Button, Input } from "@geckoui/geckoui";
|
|
@@ -60,13 +83,13 @@ import { Alert, Button, Input } from "@geckoui/geckoui";
|
|
|
60
83
|
function App() {
|
|
61
84
|
return (
|
|
62
85
|
<div>
|
|
63
|
-
<Button variant="
|
|
86
|
+
<Button variant="filled" color="primary">
|
|
64
87
|
Click me
|
|
65
88
|
</Button>
|
|
66
89
|
|
|
67
90
|
<Input placeholder="Enter your name" />
|
|
68
91
|
|
|
69
|
-
<Alert
|
|
92
|
+
<Alert color="success" title="Operation completed successfully!" />
|
|
70
93
|
</div>
|
|
71
94
|
);
|
|
72
95
|
}
|
|
@@ -78,14 +101,15 @@ GeckoUI uses [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/color_valu
|
|
|
78
101
|
|
|
79
102
|
### Dark Mode
|
|
80
103
|
|
|
81
|
-
Add the
|
|
104
|
+
Nothing switches on its own. Add the `dark` class above your app — normally `<html>` — or
|
|
105
|
+
every component stays light:
|
|
82
106
|
|
|
83
107
|
```tsx
|
|
84
|
-
<
|
|
85
|
-
<App />
|
|
86
|
-
</div>
|
|
108
|
+
<html lang="en" className="dark">
|
|
87
109
|
```
|
|
88
110
|
|
|
111
|
+
On a wrapper instead of the root, it themes only that subtree.
|
|
112
|
+
|
|
89
113
|
### Customizing Colors
|
|
90
114
|
|
|
91
115
|
Override CSS variables to match your brand:
|
package/dist/styles.css
CHANGED
|
@@ -1696,15 +1696,8 @@
|
|
|
1696
1696
|
transition-property: none;
|
|
1697
1697
|
transition-delay: 0ms;
|
|
1698
1698
|
}
|
|
1699
|
-
.GeckoUIDrawer__drawer[data-state=open]
|
|
1700
|
-
|
|
1701
|
-
--tw-translate-y: calc(var(--spacing, 0.25rem) * 0);
|
|
1702
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1703
|
-
}
|
|
1704
|
-
.GeckoUIDrawer__drawer[data-state=open][data-placement=right],
|
|
1705
|
-
.GeckoUIDrawer__drawer[data-state=open][data-placement=left] {
|
|
1706
|
-
--tw-translate-x: calc(var(--spacing, 0.25rem) * 0);
|
|
1707
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1699
|
+
.GeckoUIDrawer__drawer[data-state=open] {
|
|
1700
|
+
translate: none;
|
|
1708
1701
|
}
|
|
1709
1702
|
.GeckoUIDrawer__drawer[data-state=closed][data-placement=right] {
|
|
1710
1703
|
--tw-translate-x: 100%;
|