shadcn-glass-ui 2.0.12 → 2.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.
- package/CHANGELOG.md +109 -5
- package/README.md +132 -43
- package/context7.json +2 -1
- package/dist/cli/index.cjs +1 -1
- package/dist/components.cjs +4 -4
- package/dist/components.d.ts +103 -29
- package/dist/components.js +1 -1
- package/dist/demo-screenshot-aurora.png +0 -0
- package/dist/demo-screenshot.png +0 -0
- package/dist/demo-screenshot.png.zip +0 -0
- package/dist/hooks.cjs +2 -2
- package/dist/index.cjs +5 -5
- package/dist/index.js +28 -28
- package/dist/index.js.map +1 -1
- package/dist/r/ai-card-glass.json +1 -1
- package/dist/r/avatar-glass.json +1 -1
- package/dist/r/badge-glass.json +1 -1
- package/dist/r/button-glass.json +1 -1
- package/dist/r/combobox-glass.json +1 -1
- package/dist/r/registry.json +2 -2
- package/dist/r/repository-card-glass.json +2 -1
- package/dist/r/slider-glass.json +4 -5
- package/dist/r/toggle-glass.json +2 -2
- package/dist/r/year-card-glass.json +1 -1
- package/dist/shadcn-glass-ui.css +1 -1
- package/dist/{theme-context-DNe_2vWJ.cjs → theme-context-BHXYJ4RE.cjs} +2 -2
- package/dist/{theme-context-DNe_2vWJ.cjs.map → theme-context-BHXYJ4RE.cjs.map} +1 -1
- package/dist/themes.cjs +1 -1
- package/dist/{trust-score-card-glass-Dgu46oWI.cjs → trust-score-card-glass-CGXmOIfq.cjs} +850 -150
- package/dist/trust-score-card-glass-CGXmOIfq.cjs.map +1 -0
- package/dist/{trust-score-card-glass-A7kas5OS.js → trust-score-card-glass-L9g0qamo.js} +1182 -482
- package/dist/trust-score-card-glass-L9g0qamo.js.map +1 -0
- package/dist/{use-focus-BRkQtQCj.cjs → use-focus-CeNHOiBa.cjs} +2 -2
- package/dist/{use-focus-BRkQtQCj.cjs.map → use-focus-CeNHOiBa.cjs.map} +1 -1
- package/dist/{use-wallpaper-tint-CfShPBo2.cjs → use-wallpaper-tint-Bt2G3g1v.cjs} +2 -2
- package/dist/{use-wallpaper-tint-CfShPBo2.cjs.map → use-wallpaper-tint-Bt2G3g1v.cjs.map} +1 -1
- package/dist/{utils-BXN7AcRu.cjs → utils-LYxxWvUn.cjs} +2 -2
- package/dist/{utils-BXN7AcRu.cjs.map → utils-LYxxWvUn.cjs.map} +1 -1
- package/dist/utils.cjs +1 -1
- package/docs/ADVANCED_PATTERNS.md +584 -0
- package/docs/AI_USAGE.md +135 -611
- package/docs/BEST_PRACTICES.md +2 -2
- package/docs/BREAKING_CHANGES.md +239 -0
- package/docs/COMPONENTS_CATALOG.md +8 -8
- package/docs/EXPORTS_STRUCTURE.md +3 -3
- package/docs/GETTING_STARTED.md +13 -8
- package/docs/PUBLISHING.md +1 -1
- package/docs/REGISTRY_SUMMARY.md +2 -2
- package/docs/REGISTRY_USAGE.md +1 -1
- package/docs/api/README.md +11 -11
- package/docs/api/interfaces/BadgeGlassProps.md +21 -14
- package/docs/api/interfaces/ButtonGlassProps.md +37 -30
- package/package.json +4 -3
- package/dist/trust-score-card-glass-A7kas5OS.js.map +0 -1
- package/dist/trust-score-card-glass-Dgu46oWI.cjs.map +0 -1
- package/dist/vite.svg +0 -1
- package/docs/migration/modal-glass-compound-api.md +0 -458
- package/docs/migration/select-to-combobox.md +0 -386
- package/docs/migration/tabs-glass-compound-api.md +0 -579
package/CHANGELOG.md
CHANGED
|
@@ -5,7 +5,91 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
|
|
6
6
|
adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
-
## [2.0.0] - 2025-12-
|
|
8
|
+
## [2.0.0] - 2025-12-14
|
|
9
|
+
|
|
10
|
+
### 🎉 MAJOR MILESTONE: 100% shadcn/ui API Compatibility
|
|
11
|
+
|
|
12
|
+
All 20 core components now follow shadcn/ui naming conventions and API patterns.
|
|
13
|
+
|
|
14
|
+
### 💥 BREAKING CHANGES
|
|
15
|
+
|
|
16
|
+
#### ButtonGlass
|
|
17
|
+
|
|
18
|
+
- **`variant="default"`** → **`variant="default"`** (shadcn/ui standard)
|
|
19
|
+
- **`variant="link"`** → **`variant="link"`** (shadcn/ui standard)
|
|
20
|
+
- **`size="default"`** → **`size="default"`** (shadcn/ui standard)
|
|
21
|
+
- **Added**: `variant="outline"` with full theme support
|
|
22
|
+
|
|
23
|
+
**Migration:**
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
// Before v2.0
|
|
27
|
+
<ButtonGlass variant="default" size="default">Click me</ButtonGlass>
|
|
28
|
+
<ButtonGlass variant="link">Link</ButtonGlass>
|
|
29
|
+
|
|
30
|
+
// After v2.0
|
|
31
|
+
<ButtonGlass variant="default" size="default">Click me</ButtonGlass>
|
|
32
|
+
<ButtonGlass variant="link">Link</ButtonGlass>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
#### ToggleGlass
|
|
36
|
+
|
|
37
|
+
- **`checked`** → **`pressed`** (shadcn/ui Toggle API)
|
|
38
|
+
- **`onChange`** → **`onPressedChange`** (shadcn/ui convention)
|
|
39
|
+
- **`size="default"`** → **`size="default"`**
|
|
40
|
+
- **Added**: `defaultPressed` prop for uncontrolled mode
|
|
41
|
+
- **Added**: `variant` prop ('default' | 'outline')
|
|
42
|
+
- **ARIA**: `aria-checked` → `aria-pressed` (correct semantics for toggle switches)
|
|
43
|
+
|
|
44
|
+
**Migration:**
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
// Before v2.0
|
|
48
|
+
<ToggleGlass checked={isOn} onChange={setIsOn} size="default" />
|
|
49
|
+
|
|
50
|
+
// After v2.0 - Controlled
|
|
51
|
+
<ToggleGlass pressed={isOn} onPressedChange={setIsOn} size="default" />
|
|
52
|
+
|
|
53
|
+
// After v2.0 - Uncontrolled
|
|
54
|
+
<ToggleGlass defaultPressed={true} variant="outline" />
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
#### SliderGlass
|
|
58
|
+
|
|
59
|
+
- **Full migration to Radix UI primitives** (`@radix-ui/react-slider`)
|
|
60
|
+
- **`value: number`** → **`value: number[]`** (range slider support)
|
|
61
|
+
- **`onChange`** → **`onValueChange`** (shadcn/ui Slider API)
|
|
62
|
+
- **Added**: `defaultValue: number[]` for uncontrolled mode
|
|
63
|
+
- **Added**: `onValueCommit` callback (fires on mouse up / touch end)
|
|
64
|
+
- **Added**: `orientation` prop ('horizontal' | 'vertical')
|
|
65
|
+
- **Added**: Multiple thumbs support for range sliders
|
|
66
|
+
|
|
67
|
+
**Migration:**
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
// Before v2.0 - Single value
|
|
71
|
+
<SliderGlass value={50} onChange={setValue} />
|
|
72
|
+
|
|
73
|
+
// After v2.0 - Single value
|
|
74
|
+
<SliderGlass value={[50]} onValueChange={setValue} />
|
|
75
|
+
|
|
76
|
+
// After v2.0 - Range slider (NEW!)
|
|
77
|
+
<SliderGlass defaultValue={[25, 75]} onValueChange={setRange} />
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
#### ComboBoxGlass
|
|
81
|
+
|
|
82
|
+
- **`onChange`** → **`onValueChange`** (shadcn/ui convention)
|
|
83
|
+
|
|
84
|
+
**Migration:**
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
// Before v2.0
|
|
88
|
+
<ComboBoxGlass options={options} value={value} onChange={setValue} />
|
|
89
|
+
|
|
90
|
+
// After v2.0
|
|
91
|
+
<ComboBoxGlass options={options} value={value} onValueChange={setValue} />
|
|
92
|
+
```
|
|
9
93
|
|
|
10
94
|
### ✨ Added
|
|
11
95
|
|
|
@@ -124,13 +208,33 @@ find src/ -type f \( -name "*.tsx" -o -name "*.css" \) -exec sed -i '' \
|
|
|
124
208
|
{} +
|
|
125
209
|
```
|
|
126
210
|
|
|
211
|
+
### 🧪 Testing & Quality
|
|
212
|
+
|
|
213
|
+
**Migration Test Coverage:**
|
|
214
|
+
|
|
215
|
+
- **ButtonGlass**: 24/24 tests pass ✅
|
|
216
|
+
- **ToggleGlass**: 36/36 tests pass ✅
|
|
217
|
+
- **SliderGlass**: 34/34 tests pass ✅
|
|
218
|
+
- **ComboBoxGlass**: 44/44 tests pass ✅
|
|
219
|
+
- **Total migrated tests**: 138/138 pass (100%) ✅
|
|
220
|
+
|
|
221
|
+
**Quality Checks:**
|
|
222
|
+
|
|
223
|
+
- ✅ TypeScript: `tsc --noEmit` - No errors
|
|
224
|
+
- ✅ Linting: `npm run lint` - No errors
|
|
225
|
+
- ✅ Build: Production build successful (902ms)
|
|
226
|
+
- ✅ All unit tests pass
|
|
227
|
+
- ✅ All Storybook stories functional
|
|
228
|
+
|
|
127
229
|
### 📊 Statistics
|
|
128
230
|
|
|
129
|
-
- **
|
|
231
|
+
- **shadcn/ui API Compatibility**: **100%** (20/20 components)
|
|
232
|
+
- **Components Migrated**: 4 (ButtonGlass, ToggleGlass, SliderGlass, ComboBoxGlass)
|
|
233
|
+
- **Total Components**: 57 → **58** (added StepperGlass)
|
|
130
234
|
- **Tests**: 1,355+ → **~1,570+**
|
|
131
235
|
- Visual: 582 → **802** (+220 screenshots from StepperGlass variants)
|
|
132
236
|
- Compliance: ~650
|
|
133
|
-
- Unit: ~125
|
|
237
|
+
- Unit: ~125 → **~138** (migrated components)
|
|
134
238
|
- **Primitive Tokens**: **207** OKLCH color primitives
|
|
135
239
|
- **CSS Variables**: **296+** per theme (glass, light, aurora)
|
|
136
240
|
- **Hardcoded OKLCH**: **0** (was 98 in glass.css)
|
|
@@ -477,7 +581,7 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
|
477
581
|
- **Old API:** `isOpen`, `onClose`, `title` props
|
|
478
582
|
- **New API:** Compound API only (`ModalGlass.Root`, `.Overlay`, `.Content`, `.Header`, `.Body`,
|
|
479
583
|
`.Footer`, `.Title`, `.Description`, `.Close`)
|
|
480
|
-
- **Migration:** See [
|
|
584
|
+
- **Migration:** See [Compound Components guide](docs/migration/compound-components-v2.md)
|
|
481
585
|
- **Key Changes:**
|
|
482
586
|
- `isOpen` → `open` (on ModalGlass.Root)
|
|
483
587
|
- `onClose` → `onOpenChange` with new signature: `(open: boolean) => void`
|
|
@@ -487,7 +591,7 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
|
487
591
|
- **TabsGlass:** Legacy props API completely removed
|
|
488
592
|
- **Old API:** `tabs`, `activeTab`, `onChange` props
|
|
489
593
|
- **New API:** Compound API only (`TabsGlass.Root`, `.List`, `.Trigger`, `.Content`)
|
|
490
|
-
- **Migration:** See [
|
|
594
|
+
- **Migration:** See [Compound Components guide](docs/migration/compound-components-v2.md)
|
|
491
595
|
- **Key Changes:**
|
|
492
596
|
- `tabs` array prop removed → use individual `<TabsGlass.Trigger>` components
|
|
493
597
|
- `activeTab` → `value` (on TabsGlass.Root)
|
package/README.md
CHANGED
|
@@ -4,15 +4,20 @@
|
|
|
4
4
|
[](https://www.npmjs.com/package/shadcn-glass-ui)
|
|
5
5
|
[](https://www.typescriptlang.org/)
|
|
6
6
|
[](docs/AI_USAGE.md)
|
|
7
|
-
[](https://bundlephobia.com/package/shadcn-glass-ui)
|
|
8
8
|
|
|
9
|
-
**Glassmorphism UI components for React** — beautiful frosted glass effects,
|
|
9
|
+
**Glassmorphism UI components for React** — beautiful frosted glass effects, 57 production-ready
|
|
10
10
|
components, 3 themes, drop-in compatible with shadcn/ui.
|
|
11
11
|
|
|
12
12
|
**[Live Demo](https://yhooi2.github.io/shadcn-glass-ui-library/)** |
|
|
13
13
|
**[Interactive Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)** |
|
|
14
14
|
**[npm Package](https://www.npmjs.com/package/shadcn-glass-ui)**
|
|
15
15
|
|
|
16
|
+
<div align="center">
|
|
17
|
+
<img src="https://yhooi2.github.io/shadcn-glass-ui-library/demo-screenshot.png" alt="shadcn-glass-ui Demo - Glass Theme" width="100%" />
|
|
18
|
+
<p><em>Glass theme showcase with glassmorphism effects</em></p>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
16
21
|
---
|
|
17
22
|
|
|
18
23
|
## Why shadcn-glass-ui?
|
|
@@ -22,16 +27,16 @@ components, 3 themes, drop-in compatible with shadcn/ui.
|
|
|
22
27
|
| **Themes** | 3 built-in (Glass/Light/Aurora) | 1 base theme |
|
|
23
28
|
| **Glass Effects** | Native blur, glow, transparency | Manual CSS required |
|
|
24
29
|
| **AI Documentation** | Optimized for Claude, Copilot, GPT | Basic docs |
|
|
25
|
-
| **Components** |
|
|
26
|
-
| **Token System** |
|
|
30
|
+
| **Components** | 57 specialized glassmorphism | ~40 base components |
|
|
31
|
+
| **Token System** | 225 OKLCH primitives, zero hardcoded | CSS variables |
|
|
27
32
|
| **Accessibility** | WCAG 2.1 AA + 44px touch targets | Basic a11y |
|
|
28
33
|
|
|
29
34
|
**Key advantages:**
|
|
30
35
|
|
|
31
36
|
- Works alongside existing shadcn/ui components — same patterns, same CLI
|
|
32
37
|
- AI-first documentation with decision trees and Context7 integration
|
|
33
|
-
- 1,
|
|
34
|
-
-
|
|
38
|
+
- 1,500+ tests (visual regression, compliance, unit)
|
|
39
|
+
- 3-layer token system with zero hardcoded values
|
|
35
40
|
|
|
36
41
|
---
|
|
37
42
|
|
|
@@ -55,7 +60,7 @@ function App() {
|
|
|
55
60
|
return (
|
|
56
61
|
<ThemeProvider defaultTheme="glass">
|
|
57
62
|
<div className="p-8 space-y-4">
|
|
58
|
-
<ButtonGlass variant="
|
|
63
|
+
<ButtonGlass variant="default" size="lg">
|
|
59
64
|
Click me
|
|
60
65
|
</ButtonGlass>
|
|
61
66
|
<InputGlass placeholder="Enter text..." />
|
|
@@ -181,21 +186,131 @@ function ThemeSwitcher() {
|
|
|
181
186
|
}
|
|
182
187
|
```
|
|
183
188
|
|
|
184
|
-
**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
|
|
189
|
+
**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
## 3-Layer Token System
|
|
194
|
+
|
|
195
|
+
Centralized color management with **zero hardcoded values**.
|
|
196
|
+
|
|
197
|
+
```
|
|
198
|
+
┌─────────────────────────────────────────────────────────────┐
|
|
199
|
+
│ Component Tokens --btn-primary-bg, --modal-surface │
|
|
200
|
+
│ ↓ │
|
|
201
|
+
│ Semantic Tokens --semantic-primary, --semantic-surface │
|
|
202
|
+
│ ↓ │
|
|
203
|
+
│ Primitive Tokens --oklch-purple-500 (225 OKLCH colors) │
|
|
204
|
+
└─────────────────────────────────────────────────────────────┘
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
| Metric | Before (v1.x) | After (v2.0) |
|
|
208
|
+
| ----------------------- | -------------- | -------------------- |
|
|
209
|
+
| Hardcoded OKLCH values | ~280 per theme | **0** |
|
|
210
|
+
| CSS variables per theme | ~85 | **296+ (inherited)** |
|
|
211
|
+
|
|
212
|
+
**How it works:**
|
|
213
|
+
|
|
214
|
+
1. Define ~15 semantic tokens for your theme
|
|
215
|
+
2. 280+ component tokens are inherited automatically
|
|
216
|
+
3. All 57 components update instantly
|
|
217
|
+
|
|
218
|
+
```css
|
|
219
|
+
/* Create a "neon" theme */
|
|
220
|
+
[data-theme='neon'] {
|
|
221
|
+
--semantic-primary: var(--oklch-cyan-400);
|
|
222
|
+
--semantic-surface: var(--oklch-slate-950);
|
|
223
|
+
--semantic-text: var(--oklch-white-95);
|
|
224
|
+
/* ... ~12 more tokens */
|
|
225
|
+
}
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
**[Token Architecture Guide →](docs/TOKEN_ARCHITECTURE.md)** |
|
|
229
|
+
**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
|
|
230
|
+
|
|
231
|
+
---
|
|
232
|
+
|
|
233
|
+
## Full shadcn/ui Compatibility
|
|
234
|
+
|
|
235
|
+
### 🎉 v2.0.0: 100% API Compatible
|
|
236
|
+
|
|
237
|
+
**Install on top of existing shadcn/ui projects** — no migration required!
|
|
238
|
+
|
|
239
|
+
All components now follow **exact shadcn/ui API conventions**:
|
|
240
|
+
|
|
241
|
+
| Component | shadcn/ui API | shadcn-glass-ui v2.0+ | Status |
|
|
242
|
+
| ----------------- | ---------------------------------- | --------------------- | ------ |
|
|
243
|
+
| **ButtonGlass** | `variant="default"` | ✅ Same | 100% |
|
|
244
|
+
| **ToggleGlass** | `pressed`, `onPressedChange` | ✅ Same | 100% |
|
|
245
|
+
| **SliderGlass** | `value: number[]`, `onValueChange` | ✅ Same | 100% |
|
|
246
|
+
| **ComboBoxGlass** | `value`, `onValueChange` | ✅ Same | 100% |
|
|
247
|
+
|
|
248
|
+
**Key improvements in v2.0:**
|
|
249
|
+
|
|
250
|
+
- `onChange` → `onValueChange` (Select, ComboBox, Slider)
|
|
251
|
+
- `checked` → `pressed` (Toggle components)
|
|
252
|
+
- `variant="default"` → `variant="default"` (Button)
|
|
253
|
+
- Array-based values for Slider (`number[]` instead of `number`)
|
|
254
|
+
|
|
255
|
+
| Feature | shadcn-glass-ui | Standard shadcn/ui |
|
|
256
|
+
| ----------------- | ----------------------------------------------- | ----------------------- |
|
|
257
|
+
| CLI installation | `npx shadcn add @shadcn-glass-ui/button-glass` | `npx shadcn add button` |
|
|
258
|
+
| Core props | `variant`, `size`, `className` | Same |
|
|
259
|
+
| Callback names | `onValueChange`, `onPressedChange` | Same |
|
|
260
|
+
| asChild pattern | Full support | Full support |
|
|
261
|
+
| TypeScript | Strict mode | Same |
|
|
262
|
+
| Extended features | `loading`, `icon`, compound APIs, glassmorphism | — |
|
|
263
|
+
|
|
264
|
+
**Mix and match freely:**
|
|
265
|
+
|
|
266
|
+
```tsx
|
|
267
|
+
import { Button } from '@/components/ui/button'; // Standard shadcn/ui
|
|
268
|
+
import { ButtonGlass } from '@/components/glass/ui/button-glass'; // Glass variant
|
|
269
|
+
|
|
270
|
+
function App() {
|
|
271
|
+
return (
|
|
272
|
+
<>
|
|
273
|
+
<Button variant="outline">Standard</Button>
|
|
274
|
+
<ButtonGlass variant="default">Glassmorphism</ButtonGlass>
|
|
275
|
+
</>
|
|
276
|
+
);
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
**Add to existing project:**
|
|
281
|
+
|
|
282
|
+
```bash
|
|
283
|
+
# No migration needed - just add to components.json
|
|
284
|
+
npx shadcn@latest add @shadcn-glass-ui/button-glass
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
**[Registry Documentation →](docs/REGISTRY_USAGE.md)**
|
|
185
288
|
|
|
186
289
|
---
|
|
187
290
|
|
|
188
|
-
## AI
|
|
291
|
+
## AI-First Documentation
|
|
292
|
+
|
|
293
|
+
Built for AI coding assistants — Claude, Copilot, GPT understand this library perfectly.
|
|
189
294
|
|
|
190
|
-
|
|
295
|
+
| AI Tool | Integration | What it provides |
|
|
296
|
+
| ------------------ | -------------------------------------------------------------- | ------------------------------------------ |
|
|
297
|
+
| **Claude Code** | [CLAUDE.md](CLAUDE.md) | 365-line project context, all patterns |
|
|
298
|
+
| **Context7 MCP** | [Indexed](https://context7.com/yhooi2/shadcn-glass-ui-library) | 41 rules, auto-fetched docs, version-aware |
|
|
299
|
+
| **GitHub Copilot** | TypeScript strict + JSDoc | Accurate completions, type inference |
|
|
300
|
+
| **ChatGPT/GPT-4** | [EXPORTS_MAP.json](docs/EXPORTS_MAP.json) | Machine-readable component registry |
|
|
191
301
|
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
302
|
+
**Context7 MCP enables:**
|
|
303
|
+
|
|
304
|
+
```
|
|
305
|
+
AI: "Add a stepper component to my checkout flow"
|
|
306
|
+
|
|
307
|
+
→ Context7 fetches StepperGlass docs automatically
|
|
308
|
+
→ AI reads: "compound API, linear mode for wizards"
|
|
309
|
+
→ AI generates correct code with all props
|
|
310
|
+
```
|
|
197
311
|
|
|
198
|
-
**[AI Usage Guide →](docs/AI_USAGE.md)**
|
|
312
|
+
**[AI Usage Guide →](docs/AI_USAGE.md)** — Decision trees, migration scripts, component
|
|
313
|
+
recommendations
|
|
199
314
|
|
|
200
315
|
---
|
|
201
316
|
|
|
@@ -228,14 +343,6 @@ find src/ -type f \( -name "*.tsx" -o -name "*.css" \) -exec sed -i '' \
|
|
|
228
343
|
|
|
229
344
|
</details>
|
|
230
345
|
|
|
231
|
-
<details>
|
|
232
|
-
<summary><strong>Does it work with existing shadcn/ui components?</strong></summary>
|
|
233
|
-
|
|
234
|
-
Yes! Glass components use the same patterns and can coexist with standard shadcn/ui components. Same
|
|
235
|
-
CLI, same structure.
|
|
236
|
-
|
|
237
|
-
</details>
|
|
238
|
-
|
|
239
346
|
<details>
|
|
240
347
|
<summary><strong>What are the requirements?</strong></summary>
|
|
241
348
|
|
|
@@ -255,24 +362,6 @@ CLI, same structure.
|
|
|
255
362
|
|
|
256
363
|
</details>
|
|
257
364
|
|
|
258
|
-
<details>
|
|
259
|
-
<summary><strong>How do I create a custom theme?</strong></summary>
|
|
260
|
-
|
|
261
|
-
Use the 3-layer token system. Define ~15 semantic tokens and component tokens are inherited
|
|
262
|
-
automatically.
|
|
263
|
-
|
|
264
|
-
```css
|
|
265
|
-
[data-theme='custom'] {
|
|
266
|
-
--semantic-primary: var(--oklch-cyan-400);
|
|
267
|
-
--semantic-surface: var(--oklch-slate-900);
|
|
268
|
-
/* ... */
|
|
269
|
-
}
|
|
270
|
-
```
|
|
271
|
-
|
|
272
|
-
**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
|
|
273
|
-
|
|
274
|
-
</details>
|
|
275
|
-
|
|
276
365
|
<details>
|
|
277
366
|
<summary><strong>How do I use Compound Components (Modal, Tabs, Stepper)?</strong></summary>
|
|
278
367
|
|
|
@@ -301,7 +390,7 @@ automatically.
|
|
|
301
390
|
| ------------------------------------------------------------------ | --------------------------- |
|
|
302
391
|
| **[Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)** | Interactive component demos |
|
|
303
392
|
| **[Getting Started](docs/GETTING_STARTED.md)** | Setup tutorial |
|
|
304
|
-
| **[Component Catalog](docs/COMPONENTS_CATALOG.md)** | All
|
|
393
|
+
| **[Component Catalog](docs/COMPONENTS_CATALOG.md)** | All 57 components |
|
|
305
394
|
| **[AI Usage Guide](docs/AI_USAGE.md)** | For Claude, Copilot, GPT |
|
|
306
395
|
| **[Theme Guide](docs/THEME_CREATION_GUIDE.md)** | Create custom themes |
|
|
307
396
|
| **[Token Architecture](docs/TOKEN_ARCHITECTURE.md)** | 3-layer CSS token system |
|
package/context7.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://context7.com/schema/context7.json",
|
|
3
3
|
"projectTitle": "shadcn-glass-ui",
|
|
4
|
-
"description": "Glassmorphism UI library for React - AI-friendly with
|
|
4
|
+
"description": "Glassmorphism UI library for React - AI-friendly with 57 components, strict TypeScript, and comprehensive docs",
|
|
5
5
|
"branch": "main",
|
|
6
6
|
"folders": ["docs"],
|
|
7
|
+
"includeFiles": ["README.md", "CLAUDE.md", "CHANGELOG.md"],
|
|
7
8
|
"excludeFolders": ["src", "node_modules", "dist", ".storybook", ".github", "public", "coverage"],
|
|
8
9
|
"excludeFiles": ["package-lock.json", ".DS_Store"],
|
|
9
10
|
"rules": [
|
package/dist/cli/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
const require_trust_score_card_glass = require("../trust-score-card-glass-
|
|
2
|
+
const require_trust_score_card_glass = require("../trust-score-card-glass-CGXmOIfq.cjs");
|
|
3
3
|
let node_util = require("node:util");
|
|
4
4
|
let node_fs = require("node:fs");
|
|
5
5
|
let node_path = require("node:path");
|
package/dist/components.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const require_trust_score_card_glass = require("./trust-score-card-glass-
|
|
2
|
-
require("./utils-
|
|
3
|
-
require("./use-focus-
|
|
4
|
-
require("./theme-context-
|
|
1
|
+
const require_trust_score_card_glass = require("./trust-score-card-glass-CGXmOIfq.cjs");
|
|
2
|
+
require("./utils-LYxxWvUn.cjs");
|
|
3
|
+
require("./use-focus-CeNHOiBa.cjs");
|
|
4
|
+
require("./theme-context-BHXYJ4RE.cjs");
|
|
5
5
|
exports.AICardGlass = require_trust_score_card_glass.AICardGlass;
|
|
6
6
|
exports.AlertGlass = require_trust_score_card_glass.AlertGlass;
|
|
7
7
|
exports.AvatarGlass = require_trust_score_card_glass.AvatarGlass;
|
package/dist/components.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
2
2
|
import { ButtonHTMLAttributes } from 'react';
|
|
3
3
|
import { ClassProp } from 'class-variance-authority/types';
|
|
4
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
4
5
|
import { default as default_2 } from 'react';
|
|
5
6
|
import { FC } from 'react';
|
|
6
7
|
import { ForwardRefExoticComponent } from 'react';
|
|
@@ -12,6 +13,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
|
12
13
|
import * as React_2 from 'react';
|
|
13
14
|
import { ReactNode } from 'react';
|
|
14
15
|
import { RefAttributes } from 'react';
|
|
16
|
+
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
15
17
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
16
18
|
import { VariantProps } from 'class-variance-authority';
|
|
17
19
|
|
|
@@ -95,7 +97,7 @@ export declare const BadgeGlass: ForwardRefExoticComponent<BadgeGlassProps & Ref
|
|
|
95
97
|
*
|
|
96
98
|
* // Size variants
|
|
97
99
|
* <BadgeGlass size="sm">Small</BadgeGlass>
|
|
98
|
-
* <BadgeGlass size="
|
|
100
|
+
* <BadgeGlass size="default">Medium</BadgeGlass>
|
|
99
101
|
* <BadgeGlass size="lg">Large</BadgeGlass>
|
|
100
102
|
*
|
|
101
103
|
* // Inside interactive elements (ensure accessible labels)
|
|
@@ -144,6 +146,15 @@ export declare const ButtonGlass: ForwardRefExoticComponent<ButtonGlassProps & R
|
|
|
144
146
|
* A glass-themed button with ripple effects, loading states, and icon support.
|
|
145
147
|
* Features theme-aware styling and hover animations.
|
|
146
148
|
*
|
|
149
|
+
* **shadcn/ui compatible variants:**
|
|
150
|
+
* - `default` - Primary action button with glow effects
|
|
151
|
+
* - `secondary` - Secondary action with border
|
|
152
|
+
* - `ghost` - Minimal visual presence
|
|
153
|
+
* - `destructive` - Dangerous/delete actions (red)
|
|
154
|
+
* - `outline` - Border with transparent background
|
|
155
|
+
* - `link` - Text-only button with underline on hover
|
|
156
|
+
* - `success` - Positive feedback (glass-ui extension)
|
|
157
|
+
*
|
|
147
158
|
* @accessibility
|
|
148
159
|
* - **Keyboard Navigation:** Fully keyboard accessible with native `<button>` element
|
|
149
160
|
* - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)
|
|
@@ -155,8 +166,9 @@ export declare const ButtonGlass: ForwardRefExoticComponent<ButtonGlassProps & R
|
|
|
155
166
|
*
|
|
156
167
|
* @example
|
|
157
168
|
* ```tsx
|
|
158
|
-
* // Basic button
|
|
159
|
-
* <ButtonGlass
|
|
169
|
+
* // Basic button (default variant)
|
|
170
|
+
* <ButtonGlass>Click me</ButtonGlass>
|
|
171
|
+
* <ButtonGlass variant="default">Primary action</ButtonGlass>
|
|
160
172
|
*
|
|
161
173
|
* // With icon and aria-label for icon-only buttons
|
|
162
174
|
* <ButtonGlass icon={Check} iconPosition="left">Save</ButtonGlass>
|
|
@@ -165,13 +177,16 @@ export declare const ButtonGlass: ForwardRefExoticComponent<ButtonGlassProps & R
|
|
|
165
177
|
* // Loading state (automatically disables and shows spinner)
|
|
166
178
|
* <ButtonGlass loading aria-live="polite">Processing...</ButtonGlass>
|
|
167
179
|
*
|
|
168
|
-
* // Different variants
|
|
180
|
+
* // Different variants (shadcn/ui compatible)
|
|
181
|
+
* <ButtonGlass variant="secondary">Secondary</ButtonGlass>
|
|
169
182
|
* <ButtonGlass variant="ghost">Cancel</ButtonGlass>
|
|
170
|
-
* <ButtonGlass variant="
|
|
183
|
+
* <ButtonGlass variant="outline">Outline</ButtonGlass>
|
|
171
184
|
* <ButtonGlass variant="destructive">Delete</ButtonGlass>
|
|
185
|
+
* <ButtonGlass variant="link">Learn more</ButtonGlass>
|
|
186
|
+
* <ButtonGlass variant="success">Confirm</ButtonGlass>
|
|
172
187
|
*
|
|
173
188
|
* // As a link (asChild pattern) - maintains semantic HTML
|
|
174
|
-
* <ButtonGlass asChild
|
|
189
|
+
* <ButtonGlass asChild>
|
|
175
190
|
* <a href="/dashboard">Go to Dashboard</a>
|
|
176
191
|
* </ButtonGlass>
|
|
177
192
|
*
|
|
@@ -181,7 +196,7 @@ export declare const ButtonGlass: ForwardRefExoticComponent<ButtonGlassProps & R
|
|
|
181
196
|
* </ButtonGlass>
|
|
182
197
|
*
|
|
183
198
|
* // Form submit button
|
|
184
|
-
* <ButtonGlass type="submit"
|
|
199
|
+
* <ButtonGlass type="submit">
|
|
185
200
|
* Submit Form
|
|
186
201
|
* </ButtonGlass>
|
|
187
202
|
* ```
|
|
@@ -205,8 +220,8 @@ declare interface ButtonGlassProps extends Omit<React.ButtonHTMLAttributes<HTMLB
|
|
|
205
220
|
*/
|
|
206
221
|
readonly asChild?: boolean;
|
|
207
222
|
/**
|
|
208
|
-
* Visual style variant of the button
|
|
209
|
-
* @default "
|
|
223
|
+
* Visual style variant of the button (shadcn/ui compatible)
|
|
224
|
+
* @default "default"
|
|
210
225
|
*/
|
|
211
226
|
readonly variant?: ButtonGlassVariant;
|
|
212
227
|
/**
|
|
@@ -225,21 +240,31 @@ declare interface ButtonGlassProps extends Omit<React.ButtonHTMLAttributes<HTMLB
|
|
|
225
240
|
*/
|
|
226
241
|
readonly iconPosition?: 'left' | 'right';
|
|
227
242
|
/**
|
|
228
|
-
* Size variant of the button
|
|
229
|
-
* @default "
|
|
243
|
+
* Size variant of the button (shadcn/ui compatible)
|
|
244
|
+
* @default "default"
|
|
230
245
|
*/
|
|
231
|
-
readonly size?: '
|
|
246
|
+
readonly size?: 'default' | 'sm' | 'lg' | 'xl' | 'icon';
|
|
232
247
|
}
|
|
233
248
|
|
|
234
249
|
/**
|
|
235
250
|
* ButtonGlass CVA Variants
|
|
236
251
|
* Extracted for Fast Refresh compatibility
|
|
237
252
|
*/
|
|
238
|
-
|
|
253
|
+
/**
|
|
254
|
+
* ButtonGlass variant types (shadcn/ui compatible)
|
|
255
|
+
* - default: Primary action (was 'primary')
|
|
256
|
+
* - secondary: Secondary action
|
|
257
|
+
* - ghost: Minimal visual presence
|
|
258
|
+
* - destructive: Dangerous/delete actions
|
|
259
|
+
* - outline: Border with transparent background (shadcn/ui standard)
|
|
260
|
+
* - success: Positive feedback (glass-ui extension)
|
|
261
|
+
* - link: Text-only button (was 'text', shadcn/ui standard name)
|
|
262
|
+
*/
|
|
263
|
+
declare type ButtonGlassVariant = 'default' | 'secondary' | 'ghost' | 'destructive' | 'outline' | 'success' | 'link';
|
|
239
264
|
|
|
240
265
|
declare const buttonGlassVariants: (props?: ({
|
|
241
|
-
variant?: "destructive" | "success" | "
|
|
242
|
-
size?: "
|
|
266
|
+
variant?: "default" | "destructive" | "success" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
|
|
267
|
+
size?: "default" | "sm" | "lg" | "xl" | "icon" | null | undefined;
|
|
243
268
|
} & ClassProp) | undefined) => string;
|
|
244
269
|
|
|
245
270
|
declare const cardIntensity: (props?: ({
|
|
@@ -420,7 +445,7 @@ export declare const ComboBoxGlass: <T = string>(props: ComboBoxGlassProps<T> &
|
|
|
420
445
|
ref?: React.ForwardedRef<HTMLButtonElement>;
|
|
421
446
|
}) => ReturnType<typeof ComboBoxGlassInner>;
|
|
422
447
|
|
|
423
|
-
declare function ComboBoxGlassInner<T = string>({ options, value,
|
|
448
|
+
declare function ComboBoxGlassInner<T = string>({ options, value, onValueChange, placeholder, emptyText, searchPlaceholder, glassVariant, disabled, className, popoverClassName, clearable, side, align, label, error, success, required, size, searchable, icon: TriggerIcon, }: ComboBoxGlassProps<T>, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element;
|
|
424
449
|
|
|
425
450
|
declare namespace ComboBoxGlassInner {
|
|
426
451
|
var displayName: string;
|
|
@@ -432,7 +457,7 @@ declare interface ComboBoxGlassProps<T = string> {
|
|
|
432
457
|
/** Currently selected value */
|
|
433
458
|
readonly value?: T;
|
|
434
459
|
/** Callback when value changes */
|
|
435
|
-
readonly
|
|
460
|
+
readonly onValueChange?: (value: T | undefined) => void;
|
|
436
461
|
/** Placeholder text for trigger button */
|
|
437
462
|
readonly placeholder?: string;
|
|
438
463
|
/** Text shown when no results found */
|
|
@@ -1439,7 +1464,7 @@ declare interface RepositoryCardGlassProps extends React.HTMLAttributes<HTMLDivE
|
|
|
1439
1464
|
readonly onAIAnalysisClick?: () => void;
|
|
1440
1465
|
}
|
|
1441
1466
|
|
|
1442
|
-
declare type RepositoryFlagType =
|
|
1467
|
+
declare type RepositoryFlagType = 'green' | 'yellow' | 'red';
|
|
1443
1468
|
|
|
1444
1469
|
declare type RepositoryFlagType_2 = 'green' | 'yellow' | 'red';
|
|
1445
1470
|
|
|
@@ -1512,17 +1537,40 @@ declare const skeletonVariants: (props?: ({
|
|
|
1512
1537
|
variant?: "title" | "text" | "avatar" | "thumbnail" | "card" | null | undefined;
|
|
1513
1538
|
} & ClassProp) | undefined) => string;
|
|
1514
1539
|
|
|
1515
|
-
export declare const SliderGlass: ForwardRefExoticComponent<SliderGlassProps & RefAttributes<
|
|
1540
|
+
export declare const SliderGlass: ForwardRefExoticComponent<SliderGlassProps & RefAttributes<HTMLSpanElement>>;
|
|
1516
1541
|
|
|
1517
|
-
declare interface SliderGlassProps extends Omit<
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
readonly
|
|
1522
|
-
|
|
1542
|
+
declare interface SliderGlassProps extends Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value' | 'defaultValue' | 'onValueChange'> {
|
|
1543
|
+
/**
|
|
1544
|
+
* Controlled value (shadcn/ui compatible - array for range support)
|
|
1545
|
+
*/
|
|
1546
|
+
readonly value?: number[];
|
|
1547
|
+
/**
|
|
1548
|
+
* Default value for uncontrolled usage (array for range support)
|
|
1549
|
+
*/
|
|
1550
|
+
readonly defaultValue?: number[];
|
|
1551
|
+
/**
|
|
1552
|
+
* Callback when value changes (shadcn/ui compatible)
|
|
1553
|
+
*/
|
|
1554
|
+
readonly onValueChange?: (value: number[]) => void;
|
|
1555
|
+
/**
|
|
1556
|
+
* Callback when interaction ends (mouse up / touch end)
|
|
1557
|
+
*/
|
|
1558
|
+
readonly onValueCommit?: (value: number[]) => void;
|
|
1559
|
+
/**
|
|
1560
|
+
* Show current value(s) next to label
|
|
1561
|
+
*/
|
|
1523
1562
|
readonly showValue?: boolean;
|
|
1563
|
+
/**
|
|
1564
|
+
* Optional label text
|
|
1565
|
+
*/
|
|
1524
1566
|
readonly label?: string;
|
|
1567
|
+
/**
|
|
1568
|
+
* Error message to display
|
|
1569
|
+
*/
|
|
1525
1570
|
readonly error?: string;
|
|
1571
|
+
/**
|
|
1572
|
+
* Success message to display
|
|
1573
|
+
*/
|
|
1526
1574
|
readonly success?: string;
|
|
1527
1575
|
}
|
|
1528
1576
|
|
|
@@ -1736,14 +1784,40 @@ declare interface ThemeToggleGlassProps extends ButtonHTMLAttributes<HTMLButtonE
|
|
|
1736
1784
|
|
|
1737
1785
|
export declare const ToggleGlass: ForwardRefExoticComponent<ToggleGlassProps & RefAttributes<HTMLButtonElement>>;
|
|
1738
1786
|
|
|
1739
|
-
declare interface ToggleGlassProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>, VariantProps<typeof toggleSizes> {
|
|
1740
|
-
|
|
1741
|
-
|
|
1787
|
+
declare interface ToggleGlassProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'defaultValue'>, VariantProps<typeof toggleSizes> {
|
|
1788
|
+
/**
|
|
1789
|
+
* Controlled pressed state (shadcn/ui compatible)
|
|
1790
|
+
*/
|
|
1791
|
+
readonly pressed?: boolean;
|
|
1792
|
+
/**
|
|
1793
|
+
* Default pressed state for uncontrolled usage
|
|
1794
|
+
*/
|
|
1795
|
+
readonly defaultPressed?: boolean;
|
|
1796
|
+
/**
|
|
1797
|
+
* Callback when pressed state changes (shadcn/ui compatible)
|
|
1798
|
+
*/
|
|
1799
|
+
readonly onPressedChange?: (pressed: boolean) => void;
|
|
1800
|
+
/**
|
|
1801
|
+
* Visual variant (shadcn/ui compatible)
|
|
1802
|
+
* @default "default"
|
|
1803
|
+
*/
|
|
1804
|
+
readonly variant?: ToggleGlassVariant;
|
|
1805
|
+
/**
|
|
1806
|
+
* Optional label text
|
|
1807
|
+
*/
|
|
1742
1808
|
readonly label?: string;
|
|
1743
1809
|
}
|
|
1744
1810
|
|
|
1811
|
+
/**
|
|
1812
|
+
* Toggle variant types (shadcn/ui compatible)
|
|
1813
|
+
* - default: Filled toggle with glass effect
|
|
1814
|
+
* - outline: Border only toggle
|
|
1815
|
+
*/
|
|
1816
|
+
declare type ToggleGlassVariant = 'default' | 'outline';
|
|
1817
|
+
|
|
1745
1818
|
declare const toggleSizes: (props?: ({
|
|
1746
|
-
size?: "
|
|
1819
|
+
size?: "default" | "sm" | "lg" | null | undefined;
|
|
1820
|
+
variant?: "default" | "outline" | null | undefined;
|
|
1747
1821
|
} & ClassProp) | undefined) => string;
|
|
1748
1822
|
|
|
1749
1823
|
export declare const TooltipGlass: React_2.FC<TooltipPrimitive.TooltipProps>;
|