glasswind 0.1.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.
Files changed (11) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +120 -0
  3. package/dist/index.cjs +1979 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.cts +735 -0
  6. package/dist/index.d.ts +735 -0
  7. package/dist/index.js +1930 -0
  8. package/dist/index.js.map +1 -0
  9. package/dist/styles.css +2663 -0
  10. package/dist/styles.css.map +1 -0
  11. package/package.json +75 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Glasswind
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,120 @@
1
+ <div align="center">
2
+
3
+ # 🧊 Glasswind
4
+
5
+ **A glassmorphism React component library.**
6
+ Beautiful frosted-glass UI components with smooth, GPU-accelerated animations — for React & Next.js.
7
+
8
+ ```bash
9
+ npm install glasswind
10
+ ```
11
+
12
+ </div>
13
+
14
+ ---
15
+
16
+ ## ✨ Why Glasswind?
17
+
18
+ - 🧊 **Signature glass look** — every component has the frosted / blurred "liquid glass" aesthetic (like iOS), out of the box.
19
+ - ⚡ **Buttery animations, zero lag** — only `transform` & `opacity` are animated, so everything runs on the GPU compositor. No layout thrash, no jank, no heavy runtime.
20
+ - 🎨 **Themeable with CSS variables** — change blur, tint, radius, colors, and dark mode by overriding a few CSS custom properties. No Tailwind required.
21
+ - 📦 **Just install & import** — plain bundled CSS. Works with Create React App, Vite, Next.js (App & Pages router), Remix, etc.
22
+ - 🔠 **Fully typed** — written in TypeScript, ships `.d.ts` types for perfect autocomplete.
23
+ - ♿ **Accessible** — keyboard navigation, ARIA attributes, focus rings, and `prefers-reduced-motion` support.
24
+ - 🪶 **Lightweight** — tree-shakeable ESM + CJS builds, no framework lock-in beyond React.
25
+
26
+ ## 🚀 Quick start
27
+
28
+ Install the package:
29
+
30
+ ```bash
31
+ npm install glasswind
32
+ # or: pnpm add glasswind / yarn add glasswind
33
+ ```
34
+
35
+ Import the stylesheet **once** at your app's root, then use components anywhere:
36
+
37
+ ```tsx
38
+ // App entry (e.g. main.tsx, _app.tsx, or app/layout.tsx)
39
+ import 'glasswind/styles.css';
40
+ ```
41
+
42
+ ```tsx
43
+ import { Button, Card, Modal } from 'glasswind';
44
+
45
+ export default function Example() {
46
+ return (
47
+ <Card>
48
+ <h3>Welcome to Glasswind</h3>
49
+ <Button variant="primary">Get started</Button>
50
+ </Card>
51
+ );
52
+ }
53
+ ```
54
+
55
+ ### Next.js (App Router)
56
+
57
+ Add the stylesheet in your root layout:
58
+
59
+ ```tsx
60
+ // app/layout.tsx
61
+ import 'glasswind/styles.css';
62
+
63
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
64
+ return (
65
+ <html lang="en">
66
+ <body>{children}</body>
67
+ </html>
68
+ );
69
+ }
70
+ ```
71
+
72
+ > Interactive components (Modal, Drawer, Dropdown, Toast…) are client components — use them inside a file marked `'use client'`. They're built SSR-safe, so no hydration errors.
73
+
74
+ ## 🎨 Theming
75
+
76
+ Glasswind is driven entirely by CSS variables. Override any of them on `:root` (or any wrapper) to re-skin the whole library:
77
+
78
+ ```css
79
+ :root {
80
+ --gl-blur: 20px; /* stronger frost */
81
+ --gl-primary: #ff6b6b; /* brand accent */
82
+ --gl-radius: 20px; /* rounder corners */
83
+ --gl-bg: rgba(255, 255, 255, 0.2);
84
+ }
85
+ ```
86
+
87
+ **Dark mode** — add `data-theme="dark"` (or the class `gl-dark`) to `<html>` or any container:
88
+
89
+ ```tsx
90
+ <html data-theme="dark">
91
+ ```
92
+
93
+ See [`docs/DESIGN.md`](docs/DESIGN.md) for the full token reference.
94
+
95
+ ## 🧩 Components
96
+
97
+ Buttons · Inputs · Textarea · Select · Checkbox · Radio · Switch · Slider ·
98
+ Card · Badge · Avatar · Accordion · Tabs · Progress · Spinner ·
99
+ Modal · Drawer · Dropdown · Tooltip · Toast — and growing.
100
+
101
+ Full props & examples: [`docs/COMPONENTS.md`](docs/COMPONENTS.md).
102
+
103
+ ## 🛠️ Local development
104
+
105
+ ```bash
106
+ npm install # install dev deps
107
+ npm run dev # open the live playground (Vite)
108
+ npm run build # build the library into dist/
109
+ npm run typecheck # type-check without emitting
110
+ ```
111
+
112
+ The **playground** (`playground/`) renders every component over an animated gradient so you can see the glass effect while you build.
113
+
114
+ ## 📦 Publishing & hosting
115
+
116
+ Step-by-step guide to push to **GitHub**, publish to **npm**, and host the docs site on **Vercel**: [`docs/PUBLISHING.md`](docs/PUBLISHING.md).
117
+
118
+ ## 📄 License
119
+
120
+ [MIT](LICENSE) — free for personal and commercial use.