shadcn-glass-ui 1.0.10 → 1.0.11
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 +46 -16
- package/README.md +78 -15
- package/dist/r/popover-glass.json +1 -1
- package/dist/r/progress-glass.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,14 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
-
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
-
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
|
|
6
|
+
adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [1.0.9] - 2025-12-06
|
|
9
|
+
|
|
10
|
+
### 📚 AIDocumentation
|
|
11
|
+
|
|
12
|
+
- Added improved AI-focused documentation to help LLMs understand and work with the codebase more
|
|
13
|
+
effectively
|
|
14
|
+
- Added guidance for AI assistants, workflows, and common automation patterns
|
|
15
|
+
- Enhanced internal docs to optimize reasoning and code navigation for AI tools
|
|
16
|
+
- Added improved storybook stories
|
|
7
17
|
|
|
8
18
|
## [1.0.9] - 2025-12-06
|
|
9
19
|
|
|
10
20
|
### 🐛 Bug Fixes
|
|
11
21
|
|
|
12
22
|
**CSS Import Order:**
|
|
23
|
+
|
|
13
24
|
- Fixed PostCSS warnings by moving all `@import` directives before CSS rules
|
|
14
25
|
- All imports now precede style declarations (per CSS spec requirement)
|
|
15
26
|
- Build process now runs completely clean without warnings
|
|
@@ -21,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
21
32
|
### 📚 Documentation
|
|
22
33
|
|
|
23
34
|
**Major CLAUDE.md Restructure - AI-Friendly Documentation:**
|
|
35
|
+
|
|
24
36
|
- Added **Quick Commands Cheatsheet** at the top for instant reference
|
|
25
37
|
- Added **Common Tasks for AI** section with step-by-step workflows:
|
|
26
38
|
- Adding new Glass components
|
|
@@ -66,11 +78,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
66
78
|
### 🔄 Changed
|
|
67
79
|
|
|
68
80
|
**Package Name:**
|
|
81
|
+
|
|
69
82
|
- Renamed package from `@yhooi2/shadcn-glass-ui` to `shadcn-glass-ui`
|
|
70
83
|
- Simpler installation: `npm install shadcn-glass-ui`
|
|
71
|
-
- **Migration:** Update your `package.json` dependencies from `@yhooi2/shadcn-glass-ui` to
|
|
84
|
+
- **Migration:** Update your `package.json` dependencies from `@yhooi2/shadcn-glass-ui` to
|
|
85
|
+
`shadcn-glass-ui`
|
|
72
86
|
|
|
73
87
|
**Publishing:**
|
|
88
|
+
|
|
74
89
|
- Now publishing only to npm Registry (removed GitHub Packages)
|
|
75
90
|
- Simplified installation - no authentication required
|
|
76
91
|
- Single source of truth for package distribution
|
|
@@ -101,6 +116,7 @@ npm install shadcn-glass-ui
|
|
|
101
116
|
```
|
|
102
117
|
|
|
103
118
|
Update your imports (no changes needed - imports remain the same):
|
|
119
|
+
|
|
104
120
|
```tsx
|
|
105
121
|
// Still works the same way
|
|
106
122
|
import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
@@ -111,11 +127,14 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
|
111
127
|
### 🔄 Changed
|
|
112
128
|
|
|
113
129
|
**Package Name:**
|
|
130
|
+
|
|
114
131
|
- Renamed package from `@yhooi2/shadcn-glass-ui` to `shadcn-glass-ui`
|
|
115
132
|
- Simpler installation: `npm install shadcn-glass-ui`
|
|
116
|
-
- **Migration:** Update your `package.json` dependencies from `@yhooi2/shadcn-glass-ui` to
|
|
133
|
+
- **Migration:** Update your `package.json` dependencies from `@yhooi2/shadcn-glass-ui` to
|
|
134
|
+
`shadcn-glass-ui`
|
|
117
135
|
|
|
118
136
|
**Publishing:**
|
|
137
|
+
|
|
119
138
|
- Now publishing only to npm Registry (removed GitHub Packages)
|
|
120
139
|
- Simplified installation - no authentication required
|
|
121
140
|
- Single source of truth for package distribution
|
|
@@ -146,6 +165,7 @@ npm install shadcn-glass-ui
|
|
|
146
165
|
```
|
|
147
166
|
|
|
148
167
|
Update your imports (no changes needed - imports remain the same):
|
|
168
|
+
|
|
149
169
|
```tsx
|
|
150
170
|
// Still works the same way
|
|
151
171
|
import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
@@ -156,6 +176,7 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
|
156
176
|
### ✨ Added
|
|
157
177
|
|
|
158
178
|
**Glass Variants System:**
|
|
179
|
+
|
|
159
180
|
- New comprehensive glass effect variants: `crystal`, `frosted`, `fluted`, `glass`
|
|
160
181
|
- Color tint modifiers: `purple`, `cyan`, `amber`, `emerald`, `rose`
|
|
161
182
|
- Intensity modifiers: `subtle`, `medium`, `strong`
|
|
@@ -163,10 +184,12 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
|
163
184
|
- New CSS utility classes in `primitives.css` for all variants
|
|
164
185
|
|
|
165
186
|
**Components:**
|
|
187
|
+
|
|
166
188
|
- `GlassVariantsDemo` - Interactive showcase of all 72 glass variant combinations
|
|
167
189
|
- Updated `GlassCard.stories.tsx` with variant demonstrations
|
|
168
190
|
|
|
169
191
|
**Publishing:**
|
|
192
|
+
|
|
170
193
|
- Dual registry support: npm Registry + GitHub Packages
|
|
171
194
|
- Automated publishing to both registries on release
|
|
172
195
|
- Enhanced GitHub Actions workflow with registry validation
|
|
@@ -239,7 +262,8 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
|
239
262
|
|
|
240
263
|
- **ModalGlass:** Legacy props API completely removed
|
|
241
264
|
- **Old API:** `isOpen`, `onClose`, `title` props
|
|
242
|
-
- **New API:** Compound API only (`ModalGlass.Root`, `.Overlay`, `.Content`, `.Header`, `.Body`,
|
|
265
|
+
- **New API:** Compound API only (`ModalGlass.Root`, `.Overlay`, `.Content`, `.Header`, `.Body`,
|
|
266
|
+
`.Footer`, `.Title`, `.Description`, `.Close`)
|
|
243
267
|
- **Migration:** See [ModalGlass Compound API guide](docs/migration/modal-glass-compound-api.md)
|
|
244
268
|
- **Key Changes:**
|
|
245
269
|
- `isOpen` → `open` (on ModalGlass.Root)
|
|
@@ -291,7 +315,8 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
|
291
315
|
|
|
292
316
|
### ⚠️ BREAKING CHANGES
|
|
293
317
|
|
|
294
|
-
- **ButtonGlass:** Removed `danger` variant in favor of `destructive` for shadcn/ui API
|
|
318
|
+
- **ButtonGlass:** Removed `danger` variant in favor of `destructive` for shadcn/ui API
|
|
319
|
+
compatibility
|
|
295
320
|
- **Migration:** Replace `variant="danger"` with `variant="destructive"`
|
|
296
321
|
- **Affected:** 3 files in library, user code may require updates
|
|
297
322
|
- **Rationale:** Aligns with shadcn/ui design system standards
|
|
@@ -312,7 +337,8 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
|
|
|
312
337
|
|
|
313
338
|
### 🔧 Refactored
|
|
314
339
|
|
|
315
|
-
- **AlertGlass:** Migrated from deprecated `type` prop to `variant` prop (57 instances across
|
|
340
|
+
- **AlertGlass:** Migrated from deprecated `type` prop to `variant` prop (57 instances across
|
|
341
|
+
codebase)
|
|
316
342
|
- **NotificationGlass:** Migrated from deprecated `type` prop to `variant` prop (8 source files)
|
|
317
343
|
- Updated all visual regression tests to use new `variant` API (582 tests passing)
|
|
318
344
|
- Updated all unit tests to use new `variant` API (32 NotificationGlass tests, 32 AlertGlass tests)
|
|
@@ -398,8 +424,10 @@ If you're using this library and have code that breaks after updating, here's ho
|
|
|
398
424
|
|
|
399
425
|
All changes align the library with shadcn/ui design system standards:
|
|
400
426
|
|
|
401
|
-
1. **Consistent Naming**: `variant` is the standard prop name across shadcn/ui components (Button,
|
|
402
|
-
|
|
427
|
+
1. **Consistent Naming**: `variant` is the standard prop name across shadcn/ui components (Button,
|
|
428
|
+
Badge, Alert, etc.)
|
|
429
|
+
2. **Semantic Correctness**: `variant` describes visual style variations, while `type` describes
|
|
430
|
+
data types
|
|
403
431
|
3. **Better DX**: Consistent APIs across all Glass components improve developer experience
|
|
404
432
|
4. **Design System Compliance**: Makes the library easier to integrate with shadcn/ui projects
|
|
405
433
|
|
|
@@ -415,13 +443,13 @@ All changes align the library with shadcn/ui design system standards:
|
|
|
415
443
|
|
|
416
444
|
### Changes Summary
|
|
417
445
|
|
|
418
|
-
| Category | Count
|
|
419
|
-
|
|
446
|
+
| Category | Count |
|
|
447
|
+
| ------------------ | ---------------------------------------------- |
|
|
420
448
|
| Breaking changes | 3 (ButtonGlass, AlertGlass, NotificationGlass) |
|
|
421
|
-
| Files modified | 20+
|
|
422
|
-
| Empty dirs removed | 9
|
|
423
|
-
| Tests updated | 582 visual + 64 unit
|
|
424
|
-
| Documentation | 5 new files (1,967 lines)
|
|
449
|
+
| Files modified | 20+ |
|
|
450
|
+
| Empty dirs removed | 9 |
|
|
451
|
+
| Tests updated | 582 visual + 64 unit |
|
|
452
|
+
| Documentation | 5 new files (1,967 lines) |
|
|
425
453
|
|
|
426
454
|
### Quality Metrics
|
|
427
455
|
|
|
@@ -448,4 +476,6 @@ All changes align the library with shadcn/ui design system standards:
|
|
|
448
476
|
|
|
449
477
|
---
|
|
450
478
|
|
|
451
|
-
**Note**: This changelog documents the breaking changes and migrations performed during the legacy
|
|
479
|
+
**Note**: This changelog documents the breaking changes and migrations performed during the legacy
|
|
480
|
+
code cleanup initiative. For future releases, this file will continue to track all notable changes
|
|
481
|
+
to the project.
|
package/README.md
CHANGED
|
@@ -12,11 +12,13 @@
|
|
|
12
12
|
[](docs/AI_USAGE.md)
|
|
13
13
|
[](docs/AI_USAGE.md)
|
|
14
14
|
|
|
15
|
-
Glassmorphism UI library for React - AI-friendly with 55+ components, strict TypeScript, and
|
|
15
|
+
Glassmorphism UI library for React - AI-friendly with 55+ components, strict TypeScript, and
|
|
16
|
+
comprehensive docs.
|
|
16
17
|
|
|
17
18
|
## ✨ Highlights
|
|
18
19
|
|
|
19
|
-
- 🎨 **55 Components** - Core UI (18) + Atomic (6) + Composite (13) + Sections (7) + Specialized
|
|
20
|
+
- 🎨 **55 Components** - Core UI (18) + Atomic (6) + Composite (13) + Sections (7) + Specialized
|
|
21
|
+
(8) + Primitives (3)
|
|
20
22
|
- 🌈 **3 Themes** - Glass (dark glassmorphism), Light (clean minimal), Aurora (gradient glow)
|
|
21
23
|
- 🤖 **AI-Friendly** - Optimized for Claude Code, Copilot, GPT with comprehensive docs
|
|
22
24
|
- 🔮 **Advanced Patterns** - asChild polymorphic rendering, Compound components (Modal, Tabs)
|
|
@@ -25,7 +27,8 @@ Glassmorphism UI library for React - AI-friendly with 55+ components, strict Typ
|
|
|
25
27
|
- ⚡ **Modern Stack** - React 19, Tailwind v4, Vitest 4, Storybook 10, Vite 7
|
|
26
28
|
- 🧪 **1355+ Tests** - 650+ compliance + 580 visual regression + 125 unit tests
|
|
27
29
|
- 📦 **shadcn Compatible** - Works seamlessly with existing shadcn/ui projects
|
|
28
|
-
- 🎯 **Design System** - Comprehensive [UI_DESIGN.md](docs/design-system/UI_DESIGN.md)
|
|
30
|
+
- 🎯 **Design System** - Comprehensive [UI_DESIGN.md](docs/design-system/UI_DESIGN.md)
|
|
31
|
+
specifications
|
|
29
32
|
- 📦 **Bundle Size** - ~110KB gzipped (production build)
|
|
30
33
|
|
|
31
34
|
## Tech Stack
|
|
@@ -41,30 +44,78 @@ See [DEPENDENCIES.md](DEPENDENCIES.md) for detailed dependency documentation.
|
|
|
41
44
|
|
|
42
45
|
## 🤖 AI Assistant Support
|
|
43
46
|
|
|
44
|
-
This library is **optimized for AI coding assistants** including Claude Code, GitHub Copilot, and
|
|
47
|
+
This library is **optimized for AI coding assistants** including Claude Code, GitHub Copilot, and
|
|
48
|
+
ChatGPT:
|
|
45
49
|
|
|
46
50
|
- 📖 **Dedicated AI Guide** - [AI_USAGE.md](docs/AI_USAGE.md) with decision trees and workflows
|
|
47
51
|
- 🎯 **TypeScript Strict Mode** - Full type inference for autocomplete
|
|
48
52
|
- 📝 **Rich JSDoc** - Every component documented with @example, @accessibility
|
|
49
|
-
- 🗂️ **Component Catalog** - [COMPONENTS_CATALOG.md](docs/COMPONENTS_CATALOG.md) with searchable
|
|
53
|
+
- 🗂️ **Component Catalog** - [COMPONENTS_CATALOG.md](docs/COMPONENTS_CATALOG.md) with searchable
|
|
54
|
+
index
|
|
50
55
|
- 🔍 **Exports Map** - Machine-readable [EXPORTS_MAP.json](docs/EXPORTS_MAP.json)
|
|
51
56
|
- 🧪 **Real-World Examples** - Use-case based Storybook stories
|
|
52
|
-
- 📦 **shadcn CLI Compatible** - Install components via
|
|
57
|
+
- 📦 **shadcn CLI Compatible** - Install components via
|
|
58
|
+
`npx shadcn add @shadcn-glass-ui/button-glass`
|
|
53
59
|
|
|
54
|
-
[**→ Read AI Usage Guide**](docs/AI_USAGE.md) |
|
|
60
|
+
[**→ Read AI Usage Guide**](docs/AI_USAGE.md) |
|
|
61
|
+
[**→ Component Catalog**](docs/COMPONENTS_CATALOG.md)
|
|
55
62
|
|
|
56
63
|
## 📚 Documentation
|
|
57
64
|
|
|
58
|
-
- **[Live Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)** - Interactive component
|
|
65
|
+
- **[Live Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)** - Interactive component
|
|
66
|
+
demos
|
|
59
67
|
- **[npm Package](https://www.npmjs.com/package/shadcn-glass-ui)** - Public npm registry
|
|
68
|
+
- **[Registry Guide](docs/REGISTRY_USAGE.md)** - shadcn CLI installation via registry
|
|
60
69
|
- **[Getting Started Guide](docs/GETTING_STARTED.md)** - Setup tutorial
|
|
61
70
|
- **[GitHub](https://github.com/Yhooi2/shadcn-glass-ui-library)** - Source code
|
|
62
|
-
- [Component Documentation](https://yhooi2.github.io/shadcn-glass-ui-library/?path=/docs) - Detailed
|
|
63
|
-
|
|
71
|
+
- [Component Documentation](https://yhooi2.github.io/shadcn-glass-ui-library/?path=/docs) - Detailed
|
|
72
|
+
API references
|
|
64
73
|
- [Design System](docs/design-system/UI_DESIGN.md) - Comprehensive UI specifications
|
|
65
74
|
- [Migration Guides](docs/migration/) - Upgrade and API changes
|
|
66
75
|
|
|
67
|
-
## 📦 Installation
|
|
76
|
+
## 📦 Installation Methods
|
|
77
|
+
|
|
78
|
+
shadcn-glass-ui can be installed in two ways:
|
|
79
|
+
|
|
80
|
+
### Option 1: Registry (shadcn CLI) ⭐ Recommended
|
|
81
|
+
|
|
82
|
+
**Listed on [registry.directory](https://registry.directory)!**
|
|
83
|
+
|
|
84
|
+
Configure your `components.json`:
|
|
85
|
+
|
|
86
|
+
```json
|
|
87
|
+
{
|
|
88
|
+
"registries": {
|
|
89
|
+
"@shadcn-glass-ui": {
|
|
90
|
+
"url": "https://raw.githubusercontent.com/Yhooi2/shadcn-glass-ui-library/main/public/r"
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Install components via shadcn CLI:
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
# Single component
|
|
100
|
+
npx shadcn@latest add @shadcn-glass-ui/button-glass
|
|
101
|
+
|
|
102
|
+
# Multiple components
|
|
103
|
+
npx shadcn@latest add @shadcn-glass-ui/button-glass @shadcn-glass-ui/input-glass @shadcn-glass-ui/modal-glass
|
|
104
|
+
|
|
105
|
+
# With automatic dependencies
|
|
106
|
+
npx shadcn@latest add @shadcn-glass-ui/button-glass --deps
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
**Benefits:**
|
|
110
|
+
|
|
111
|
+
- ✅ Automatic dependency installation
|
|
112
|
+
- ✅ Type-safe CLI workflow
|
|
113
|
+
- ✅ Compatible with existing shadcn/ui projects
|
|
114
|
+
- ✅ 55+ components available
|
|
115
|
+
|
|
116
|
+
**[→ Full Registry Documentation](docs/REGISTRY_USAGE.md)**
|
|
117
|
+
|
|
118
|
+
### Option 2: npm Package
|
|
68
119
|
|
|
69
120
|
Install from npm registry:
|
|
70
121
|
|
|
@@ -72,9 +123,14 @@ Install from npm registry:
|
|
|
72
123
|
npm install shadcn-glass-ui
|
|
73
124
|
```
|
|
74
125
|
|
|
126
|
+
**[→ npm Installation Guide](docs/GETTING_STARTED.md)**
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
75
130
|
## 🚀 Quick Start
|
|
76
131
|
|
|
77
132
|
**Requirements:**
|
|
133
|
+
|
|
78
134
|
- React 18.0+ or 19.0+
|
|
79
135
|
- React-DOM 18.0+ or 19.0+
|
|
80
136
|
- Tailwind CSS 4.0+
|
|
@@ -171,7 +227,8 @@ import { ModalGlass, TabsGlass } from 'shadcn-glass-ui';
|
|
|
171
227
|
|
|
172
228
|
## ⚠️ Breaking Changes (v1.0.0)
|
|
173
229
|
|
|
174
|
-
**v1.0.0 removes all legacy/deprecated APIs.** This is a clean slate release with only Compound API
|
|
230
|
+
**v1.0.0 removes all legacy/deprecated APIs.** This is a clean slate release with only Compound API
|
|
231
|
+
support.
|
|
175
232
|
|
|
176
233
|
### Removed Components
|
|
177
234
|
|
|
@@ -223,8 +280,10 @@ import { ModalGlass, TabsGlass } from 'shadcn-glass-ui';
|
|
|
223
280
|
```
|
|
224
281
|
|
|
225
282
|
**Key Changes:**
|
|
283
|
+
|
|
226
284
|
- `isOpen` → `open` (on ModalGlass.Root)
|
|
227
|
-
- `onClose` → `onOpenChange` (callback signature changed from `() => void` to
|
|
285
|
+
- `onClose` → `onOpenChange` (callback signature changed from `() => void` to
|
|
286
|
+
`(open: boolean) => void`)
|
|
228
287
|
- `title` prop removed → use `<ModalGlass.Title>` component
|
|
229
288
|
- Manual structure required (Overlay, Content, Header, Body, Footer)
|
|
230
289
|
|
|
@@ -255,6 +314,7 @@ import { ModalGlass, TabsGlass } from 'shadcn-glass-ui';
|
|
|
255
314
|
```
|
|
256
315
|
|
|
257
316
|
**Key Changes:**
|
|
317
|
+
|
|
258
318
|
- `tabs` array prop removed → use individual `<TabsGlass.Trigger>` components
|
|
259
319
|
- `activeTab` → `value` (on TabsGlass.Root)
|
|
260
320
|
- `onChange` → `onValueChange`
|
|
@@ -364,7 +424,8 @@ Full-page sections ready to use in your application:
|
|
|
364
424
|
|
|
365
425
|
### Blocks (6 ready-to-use demo sections)
|
|
366
426
|
|
|
367
|
-
Complete component showcases following shadcn/ui pattern - these are demo/documentation components,
|
|
427
|
+
Complete component showcases following shadcn/ui pattern - these are demo/documentation components,
|
|
428
|
+
not production-ready blocks:
|
|
368
429
|
|
|
369
430
|
- **ButtonsBlock** - All button variants, sizes, states demo
|
|
370
431
|
- **FormElementsBlock** - Input, Slider, Toggle, Checkbox demos
|
|
@@ -373,7 +434,8 @@ Complete component showcases following shadcn/ui pattern - these are demo/docume
|
|
|
373
434
|
- **BadgesBlock** - Badge variants with tooltips demo
|
|
374
435
|
- **NotificationsBlock** - Notifications and alerts demo
|
|
375
436
|
|
|
376
|
-
**Note:** Blocks are showcase/demo components visible in Storybook. For production use, utilize
|
|
437
|
+
**Note:** Blocks are showcase/demo components visible in Storybook. For production use, utilize
|
|
438
|
+
individual components from the categories above.
|
|
377
439
|
|
|
378
440
|
[View Blocks in Storybook →](https://yhooi2.github.io/shadcn-glass-ui-library/?path=/story/glass-blocks--default)
|
|
379
441
|
|
|
@@ -491,6 +553,7 @@ GlassCard supports 3 intensity levels for customizable blur effects:
|
|
|
491
553
|
```
|
|
492
554
|
|
|
493
555
|
**Intensity Levels:**
|
|
556
|
+
|
|
494
557
|
- `subtle` - 8px blur (--blur-sm) - Light glass effect
|
|
495
558
|
- `medium` - 16px blur (--blur-md) - Standard cards (default)
|
|
496
559
|
- `strong` - 24px blur (--blur-lg) - Featured cards
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
{
|
|
16
16
|
"path": "components/glass/ui/popover-glass.tsx",
|
|
17
17
|
"type": "registry:component",
|
|
18
|
-
"content": "/**\n * PopoverGlass Component\n *\n * Floating glass-themed container for tooltips, dropdowns, and overlays with:\n * - Theme-aware styling (glass/light/aurora)\n * - Smooth animations with fade-in effect\n * - Arrow pointer with glass styling\n * - ESC key and click-outside to close\n * - Focus trap for accessibility\n * - All position/alignment options (top/right/bottom/left × start/center/end)\n *\n * @example\n * ```tsx\n * <PopoverGlass\n * trigger={<ButtonGlass>Open</ButtonGlass>}\n * side=\"top\"\n * align=\"center\"\n * >\n * <div className=\"p-4\">
|
|
18
|
+
"content": "/**\n * PopoverGlass Component\n *\n * Floating glass-themed container for tooltips, dropdowns, and overlays with:\n * - Theme-aware styling (glass/light/aurora)\n * - Smooth animations with fade-in effect\n * - Arrow pointer with glass styling\n * - ESC key and click-outside to close\n * - Focus trap for accessibility\n * - All position/alignment options (top/right/bottom/left × start/center/end)\n *\n * @example\n * ```tsx\n * <PopoverGlass\n * trigger={<ButtonGlass>Open</ButtonGlass>}\n * side=\"top\"\n * align=\"center\"\n * >\n * <div className=\"p-4\">\n * <h3 style={{ color: 'var(--text-primary)' }}>Title</h3>\n * <p style={{ color: 'var(--text-secondary)' }}>Content</p>\n * </div>\n * </PopoverGlass>\n * ```\n */\n\nimport * as React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\nexport interface PopoverGlassProps {\n /** The trigger element that opens the popover */\n readonly trigger: React.ReactNode;\n /** The content to display inside the popover */\n readonly children: React.ReactNode;\n /** The preferred side of the trigger to render against */\n readonly side?: 'top' | 'right' | 'bottom' | 'left';\n /** The preferred alignment against the trigger */\n readonly align?: 'start' | 'center' | 'end';\n /** The distance in pixels from the trigger */\n readonly sideOffset?: number;\n /** Controlled open state */\n readonly open?: boolean;\n /** Callback when open state changes */\n readonly onOpenChange?: (open: boolean) => void;\n /** Whether to show the arrow pointer */\n readonly showArrow?: boolean;\n /** Additional class name for the content wrapper */\n readonly className?: string;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const PopoverGlass = React.forwardRef<\n HTMLDivElement,\n PopoverGlassProps\n>(\n (\n {\n trigger,\n children,\n side = 'bottom',\n align = 'center',\n sideOffset = 8,\n open,\n onOpenChange,\n showArrow = true,\n className,\n },\n ref\n ) => {\n // Popover content styles with CSS variables\n const popoverStyles: React.CSSProperties = {\n background: 'var(--popover-bg)',\n border: '1px solid var(--popover-border)',\n boxShadow: 'var(--popover-shadow)',\n backdropFilter: 'blur(var(--blur-md))', // 16px - standard popover blur\n WebkitBackdropFilter: 'blur(var(--blur-md))',\n };\n\n // Arrow styles\n const arrowStyles: React.CSSProperties = {\n fill: 'var(--popover-arrow-bg)',\n };\n\n return (\n <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>\n <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>\n\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n side={side}\n align={align}\n sideOffset={sideOffset}\n className={cn(\n 'z-[50003] rounded-2xl',\n 'animate-in fade-in-0 zoom-in-95 duration-200',\n 'data-[side=bottom]:slide-in-from-top-2',\n 'data-[side=top]:slide-in-from-bottom-2',\n 'data-[side=right]:slide-in-from-left-2',\n 'data-[side=left]:slide-in-from-right-2',\n 'outline-none',\n className\n )}\n style={popoverStyles}\n role=\"dialog\"\n aria-modal=\"false\"\n >\n {children}\n\n {showArrow && (\n <PopoverPrimitive.Arrow\n className=\"fill-current\"\n style={arrowStyles}\n width={16}\n height={8}\n />\n )}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </PopoverPrimitive.Root>\n );\n }\n);\n\nPopoverGlass.displayName = 'PopoverGlass';\n"
|
|
19
19
|
}
|
|
20
20
|
],
|
|
21
21
|
"categories": [
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
{
|
|
17
17
|
"path": "components/glass/specialized/progress-glass.tsx",
|
|
18
18
|
"type": "registry:component",
|
|
19
|
-
"content": "/**\n * ProgressGlass Component\n *\n * Glass-themed progress bar with:\n * - Theme-aware styling (glass/light/aurora)\n * - Gradient fill with glow\n * - Size variants\n * - Optional label\n */\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { progressSizes, type ProgressGradient } from '@/lib/variants/progress-glass-variants';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\nexport interface ProgressGlassProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>,\n VariantProps<typeof progressSizes> {\n readonly value: number;\n readonly gradient?: ProgressGradient;\n readonly showLabel?: boolean;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\n// Gradient colors for the fill - CSS variable based\nconst getGradientColors = (gradient: ProgressGradient): { from: string; to: string; glowVar: string } => {\n const gradients: Record<ProgressGradient, { from: string; to: string; glowVar: string }> = {\n violet: { from: '#8b5cf6', to: '#a855f7', glowVar: '--progress-glow-violet' },\n blue: { from: '#3b82f6', to: '#60a5fa', glowVar: '--progress-glow-blue' },\n cyan: { from: '#06b6d4', to: '#22d3ee', glowVar: '--progress-glow-cyan' },\n amber: { from: '#f59e0b', to: '#fbbf24', glowVar: '--progress-glow-amber' },\n emerald: { from: '#10b981', to: '#34d399', glowVar: '--progress-glow-emerald' },\n rose: { from: '#f43f5e', to: '#fb7185', glowVar: '--progress-glow-rose' },\n };\n return gradients[gradient];\n};\n\nexport const ProgressGlass = forwardRef<HTMLDivElement, ProgressGlassProps>(\n (\n {\n className,\n size = 'md',\n value = 0,\n gradient = 'violet',\n showLabel,\n ...props\n },\n ref\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const gradientColors = getGradientColors(gradient
|
|
19
|
+
"content": "/**\n * ProgressGlass Component\n *\n * Glass-themed progress bar with:\n * - Theme-aware styling (glass/light/aurora)\n * - Gradient fill with glow\n * - Size variants\n * - Optional label\n */\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { progressSizes, type ProgressGradient } from '@/lib/variants/progress-glass-variants';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\nexport interface ProgressGlassProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>,\n VariantProps<typeof progressSizes> {\n readonly value: number;\n readonly gradient?: ProgressGradient;\n readonly showLabel?: boolean;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\n// Gradient colors for the fill - CSS variable based\nconst getGradientColors = (gradient: ProgressGradient = 'violet'): { from: string; to: string; glowVar: string } => {\n const gradients: Record<ProgressGradient, { from: string; to: string; glowVar: string }> = {\n violet: { from: '#8b5cf6', to: '#a855f7', glowVar: '--progress-glow-violet' },\n blue: { from: '#3b82f6', to: '#60a5fa', glowVar: '--progress-glow-blue' },\n cyan: { from: '#06b6d4', to: '#22d3ee', glowVar: '--progress-glow-cyan' },\n amber: { from: '#f59e0b', to: '#fbbf24', glowVar: '--progress-glow-amber' },\n emerald: { from: '#10b981', to: '#34d399', glowVar: '--progress-glow-emerald' },\n rose: { from: '#f43f5e', to: '#fb7185', glowVar: '--progress-glow-rose' },\n };\n return gradients[gradient] || gradients.violet;\n};\n\nexport const ProgressGlass = forwardRef<HTMLDivElement, ProgressGlassProps>(\n (\n {\n className,\n size = 'md',\n value = 0,\n gradient = 'violet',\n showLabel,\n ...props\n },\n ref\n ) => {\n const clampedValue = Math.min(100, Math.max(0, value));\n const gradientColors = getGradientColors(gradient);\n\n const trackStyles: CSSProperties = {\n background: 'var(--progress-bg)',\n };\n\n const fillStyles: CSSProperties = {\n width: `${clampedValue}%`,\n background: `linear-gradient(90deg, ${gradientColors.from}, ${gradientColors.to})`,\n boxShadow: `var(${gradientColors.glowVar})`,\n };\n\n return (\n <div ref={ref} className={cn('w-full', className)} {...props}>\n {showLabel && (\n <div className=\"flex justify-between mb-1 md:mb-1.5\">\n <span className=\"text-[10px] md:text-xs\" style={{ color: 'var(--text-muted)' }}>\n Progress\n </span>\n <span className=\"text-[10px] md:text-xs font-medium\" style={{ color: 'var(--text-secondary)' }}>\n {clampedValue}%\n </span>\n </div>\n )}\n <div className={cn(progressSizes({ size }))} style={trackStyles}>\n <div\n className=\"h-full rounded-full transition-all duration-700 ease-out\"\n style={fillStyles}\n role=\"progressbar\"\n aria-valuenow={clampedValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={`Progress: ${clampedValue}%`}\n />\n </div>\n </div>\n );\n }\n);\n\nProgressGlass.displayName = 'ProgressGlass';\n"
|
|
20
20
|
}
|
|
21
21
|
],
|
|
22
22
|
"categories": [
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "shadcn-glass-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.11",
|
|
5
5
|
"description": "Glassmorphism UI library for React - AI-friendly with 55+ components, strict TypeScript, and comprehensive docs",
|
|
6
6
|
"author": "Yhooi2",
|
|
7
7
|
"license": "MIT",
|