shadcn-glass-ui 2.0.5 → 2.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.
- package/README.md +156 -797
- package/dist/shadcn-glass-ui.css +1 -1
- package/docs/ADVANCED_PATTERNS.md +408 -0
- package/docs/AI_USAGE.md +31 -0
- package/docs/BREAKING_CHANGES.md +213 -0
- package/package.json +2 -2
|
@@ -0,0 +1,408 @@
|
|
|
1
|
+
# Advanced Patterns
|
|
2
|
+
|
|
3
|
+
This guide covers advanced usage patterns for shadcn-glass-ui components.
|
|
4
|
+
|
|
5
|
+
## Table of Contents
|
|
6
|
+
|
|
7
|
+
- [asChild Pattern](#aschild-pattern) - Polymorphic rendering
|
|
8
|
+
- [Compound Components](#compound-components) - Fine-grained composition
|
|
9
|
+
- [Theme Integration](#theme-integration) - Dynamic theming
|
|
10
|
+
- [Accessibility Patterns](#accessibility-patterns) - WCAG 2.1 AA compliance
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## asChild Pattern
|
|
15
|
+
|
|
16
|
+
The `asChild` prop enables polymorphic rendering using Radix UI Slot. This allows you to render a
|
|
17
|
+
component as any element while preserving all styles and behaviors.
|
|
18
|
+
|
|
19
|
+
### Supported Components
|
|
20
|
+
|
|
21
|
+
- `ButtonGlass`
|
|
22
|
+
- `AvatarGlass`
|
|
23
|
+
- `GlassCard`
|
|
24
|
+
|
|
25
|
+
### Basic Usage
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { ButtonGlass } from 'shadcn-glass-ui';
|
|
29
|
+
import { Link } from 'react-router-dom';
|
|
30
|
+
|
|
31
|
+
// Render button as React Router Link
|
|
32
|
+
<ButtonGlass asChild>
|
|
33
|
+
<Link to="/profile">View Profile</Link>
|
|
34
|
+
</ButtonGlass>
|
|
35
|
+
|
|
36
|
+
// Render button as anchor tag
|
|
37
|
+
<ButtonGlass asChild variant="primary">
|
|
38
|
+
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
|
|
39
|
+
External Link
|
|
40
|
+
</a>
|
|
41
|
+
</ButtonGlass>
|
|
42
|
+
|
|
43
|
+
// Render button as Next.js Link
|
|
44
|
+
import NextLink from 'next/link';
|
|
45
|
+
|
|
46
|
+
<ButtonGlass asChild variant="secondary">
|
|
47
|
+
<NextLink href="/dashboard">Dashboard</NextLink>
|
|
48
|
+
</ButtonGlass>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### With GlassCard
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { GlassCard } from 'shadcn-glass-ui';
|
|
55
|
+
|
|
56
|
+
// Render card as article
|
|
57
|
+
<GlassCard asChild>
|
|
58
|
+
<article>
|
|
59
|
+
<h2>Card Title</h2>
|
|
60
|
+
<p>Card content...</p>
|
|
61
|
+
</article>
|
|
62
|
+
</GlassCard>
|
|
63
|
+
|
|
64
|
+
// Render card as link
|
|
65
|
+
<GlassCard asChild>
|
|
66
|
+
<a href="/details" className="block">
|
|
67
|
+
<h3>Clickable Card</h3>
|
|
68
|
+
<p>Click anywhere to navigate</p>
|
|
69
|
+
</a>
|
|
70
|
+
</GlassCard>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### With AvatarGlass
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { AvatarGlass } from 'shadcn-glass-ui';
|
|
77
|
+
|
|
78
|
+
// Avatar as link to profile
|
|
79
|
+
<AvatarGlass asChild size="lg">
|
|
80
|
+
<a href="/user/123">
|
|
81
|
+
<img src="/avatar.jpg" alt="User" />
|
|
82
|
+
</a>
|
|
83
|
+
</AvatarGlass>;
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### When to Use asChild
|
|
87
|
+
|
|
88
|
+
| Use Case | Recommendation |
|
|
89
|
+
| ---------------------- | ------------------------------------- |
|
|
90
|
+
| Navigation buttons | Use `asChild` with `<Link>` or `<a>` |
|
|
91
|
+
| Form submit buttons | Regular `<ButtonGlass type="submit">` |
|
|
92
|
+
| Clickable cards | Use `asChild` with `<a>` or `<Link>` |
|
|
93
|
+
| Semantic HTML elements | Use `asChild` for proper semantics |
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Compound Components
|
|
98
|
+
|
|
99
|
+
Compound components provide fine-grained control over complex UI patterns through composition.
|
|
100
|
+
|
|
101
|
+
### ModalGlass
|
|
102
|
+
|
|
103
|
+
The Modal compound API provides 9 sub-components for complete control.
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
import { ModalGlass, ButtonGlass } from 'shadcn-glass-ui';
|
|
107
|
+
import { useState } from 'react';
|
|
108
|
+
|
|
109
|
+
function ConfirmDialog() {
|
|
110
|
+
const [open, setOpen] = useState(false);
|
|
111
|
+
|
|
112
|
+
return (
|
|
113
|
+
<>
|
|
114
|
+
<ButtonGlass onClick={() => setOpen(true)}>Open Modal</ButtonGlass>
|
|
115
|
+
|
|
116
|
+
<ModalGlass.Root open={open} onOpenChange={setOpen}>
|
|
117
|
+
<ModalGlass.Overlay />
|
|
118
|
+
<ModalGlass.Content>
|
|
119
|
+
<ModalGlass.Header>
|
|
120
|
+
<ModalGlass.Title>Confirm Action</ModalGlass.Title>
|
|
121
|
+
<ModalGlass.Description>
|
|
122
|
+
This action cannot be undone. Are you sure?
|
|
123
|
+
</ModalGlass.Description>
|
|
124
|
+
<ModalGlass.Close />
|
|
125
|
+
</ModalGlass.Header>
|
|
126
|
+
|
|
127
|
+
<ModalGlass.Body>
|
|
128
|
+
<p>You are about to delete this item permanently.</p>
|
|
129
|
+
</ModalGlass.Body>
|
|
130
|
+
|
|
131
|
+
<ModalGlass.Footer>
|
|
132
|
+
<ButtonGlass variant="ghost" onClick={() => setOpen(false)}>
|
|
133
|
+
Cancel
|
|
134
|
+
</ButtonGlass>
|
|
135
|
+
<ButtonGlass variant="destructive" onClick={handleDelete}>
|
|
136
|
+
Delete
|
|
137
|
+
</ButtonGlass>
|
|
138
|
+
</ModalGlass.Footer>
|
|
139
|
+
</ModalGlass.Content>
|
|
140
|
+
</ModalGlass.Root>
|
|
141
|
+
</>
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
#### Modal Sub-components
|
|
147
|
+
|
|
148
|
+
| Component | Purpose |
|
|
149
|
+
| ------------------------ | ------------------------------------------ |
|
|
150
|
+
| `ModalGlass.Root` | Context provider, manages open/close state |
|
|
151
|
+
| `ModalGlass.Overlay` | Backdrop with blur effect, click-to-close |
|
|
152
|
+
| `ModalGlass.Content` | Main content container |
|
|
153
|
+
| `ModalGlass.Header` | Header section |
|
|
154
|
+
| `ModalGlass.Title` | Accessible title (required for a11y) |
|
|
155
|
+
| `ModalGlass.Description` | Optional description text |
|
|
156
|
+
| `ModalGlass.Close` | Close button |
|
|
157
|
+
| `ModalGlass.Body` | Main content area |
|
|
158
|
+
| `ModalGlass.Footer` | Action buttons area |
|
|
159
|
+
|
|
160
|
+
### TabsGlass
|
|
161
|
+
|
|
162
|
+
The Tabs compound API provides 4 sub-components for flexible tab interfaces.
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
import { TabsGlass } from 'shadcn-glass-ui';
|
|
166
|
+
import { useState } from 'react';
|
|
167
|
+
|
|
168
|
+
function SettingsTabs() {
|
|
169
|
+
const [activeTab, setActiveTab] = useState('general');
|
|
170
|
+
|
|
171
|
+
return (
|
|
172
|
+
<TabsGlass.Root value={activeTab} onValueChange={setActiveTab}>
|
|
173
|
+
<TabsGlass.List>
|
|
174
|
+
<TabsGlass.Trigger value="general">General</TabsGlass.Trigger>
|
|
175
|
+
<TabsGlass.Trigger value="security">Security</TabsGlass.Trigger>
|
|
176
|
+
<TabsGlass.Trigger value="notifications">Notifications</TabsGlass.Trigger>
|
|
177
|
+
</TabsGlass.List>
|
|
178
|
+
|
|
179
|
+
<TabsGlass.Content value="general">
|
|
180
|
+
<h3>General Settings</h3>
|
|
181
|
+
<p>Configure your general preferences...</p>
|
|
182
|
+
</TabsGlass.Content>
|
|
183
|
+
|
|
184
|
+
<TabsGlass.Content value="security">
|
|
185
|
+
<h3>Security Settings</h3>
|
|
186
|
+
<p>Manage your security options...</p>
|
|
187
|
+
</TabsGlass.Content>
|
|
188
|
+
|
|
189
|
+
<TabsGlass.Content value="notifications">
|
|
190
|
+
<h3>Notification Settings</h3>
|
|
191
|
+
<p>Control your notification preferences...</p>
|
|
192
|
+
</TabsGlass.Content>
|
|
193
|
+
</TabsGlass.Root>
|
|
194
|
+
);
|
|
195
|
+
}
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
#### Tabs Sub-components
|
|
199
|
+
|
|
200
|
+
| Component | Purpose |
|
|
201
|
+
| ------------------- | ------------------------------------ |
|
|
202
|
+
| `TabsGlass.Root` | Context provider, manages active tab |
|
|
203
|
+
| `TabsGlass.List` | Container for tab triggers |
|
|
204
|
+
| `TabsGlass.Trigger` | Individual tab button |
|
|
205
|
+
| `TabsGlass.Content` | Content panel for each tab |
|
|
206
|
+
|
|
207
|
+
### StepperGlass
|
|
208
|
+
|
|
209
|
+
The Stepper compound API provides multi-step workflow support with 3 visual variants.
|
|
210
|
+
|
|
211
|
+
```tsx
|
|
212
|
+
import { StepperGlass, ButtonGlass } from 'shadcn-glass-ui';
|
|
213
|
+
import { useState } from 'react';
|
|
214
|
+
|
|
215
|
+
function CheckoutFlow() {
|
|
216
|
+
const [currentStep, setCurrentStep] = useState(0);
|
|
217
|
+
const steps = ['Cart', 'Shipping', 'Payment', 'Confirm'];
|
|
218
|
+
|
|
219
|
+
return (
|
|
220
|
+
<StepperGlass.Root
|
|
221
|
+
value={currentStep}
|
|
222
|
+
onValueChange={setCurrentStep}
|
|
223
|
+
variant="numbered" // or "icon" | "dots"
|
|
224
|
+
>
|
|
225
|
+
<StepperGlass.List>
|
|
226
|
+
{steps.map((step, index) => (
|
|
227
|
+
<StepperGlass.Step key={index} value={index}>
|
|
228
|
+
{step}
|
|
229
|
+
</StepperGlass.Step>
|
|
230
|
+
))}
|
|
231
|
+
</StepperGlass.List>
|
|
232
|
+
|
|
233
|
+
<StepperGlass.Content value={0}>
|
|
234
|
+
<h3>Shopping Cart</h3>
|
|
235
|
+
{/* Cart content */}
|
|
236
|
+
</StepperGlass.Content>
|
|
237
|
+
|
|
238
|
+
<StepperGlass.Content value={1}>
|
|
239
|
+
<h3>Shipping Address</h3>
|
|
240
|
+
{/* Shipping form */}
|
|
241
|
+
</StepperGlass.Content>
|
|
242
|
+
|
|
243
|
+
<StepperGlass.Content value={2}>
|
|
244
|
+
<h3>Payment Method</h3>
|
|
245
|
+
{/* Payment form */}
|
|
246
|
+
</StepperGlass.Content>
|
|
247
|
+
|
|
248
|
+
<StepperGlass.Content value={3}>
|
|
249
|
+
<h3>Order Confirmation</h3>
|
|
250
|
+
{/* Confirmation details */}
|
|
251
|
+
</StepperGlass.Content>
|
|
252
|
+
|
|
253
|
+
<div className="flex gap-4 mt-4">
|
|
254
|
+
<ButtonGlass
|
|
255
|
+
variant="ghost"
|
|
256
|
+
onClick={() => setCurrentStep((s) => s - 1)}
|
|
257
|
+
disabled={currentStep === 0}
|
|
258
|
+
>
|
|
259
|
+
Back
|
|
260
|
+
</ButtonGlass>
|
|
261
|
+
<ButtonGlass
|
|
262
|
+
variant="primary"
|
|
263
|
+
onClick={() => setCurrentStep((s) => s + 1)}
|
|
264
|
+
disabled={currentStep === steps.length - 1}
|
|
265
|
+
>
|
|
266
|
+
{currentStep === steps.length - 1 ? 'Complete' : 'Next'}
|
|
267
|
+
</ButtonGlass>
|
|
268
|
+
</div>
|
|
269
|
+
</StepperGlass.Root>
|
|
270
|
+
);
|
|
271
|
+
}
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
#### Stepper Variants
|
|
275
|
+
|
|
276
|
+
| Variant | Description |
|
|
277
|
+
| ---------- | --------------------------------------- |
|
|
278
|
+
| `numbered` | Steps displayed as numbers (1, 2, 3...) |
|
|
279
|
+
| `icon` | Steps with custom icons |
|
|
280
|
+
| `dots` | Minimal dot indicators |
|
|
281
|
+
|
|
282
|
+
---
|
|
283
|
+
|
|
284
|
+
## Theme Integration
|
|
285
|
+
|
|
286
|
+
### Using useTheme Hook
|
|
287
|
+
|
|
288
|
+
```tsx
|
|
289
|
+
import { useTheme, ThemeProvider } from 'shadcn-glass-ui';
|
|
290
|
+
|
|
291
|
+
function ThemeSwitcher() {
|
|
292
|
+
const { theme, setTheme, cycleTheme } = useTheme();
|
|
293
|
+
|
|
294
|
+
return (
|
|
295
|
+
<div>
|
|
296
|
+
<p>Current theme: {theme}</p>
|
|
297
|
+
|
|
298
|
+
{/* Cycle through themes */}
|
|
299
|
+
<button onClick={cycleTheme}>Next Theme</button>
|
|
300
|
+
|
|
301
|
+
{/* Set specific theme */}
|
|
302
|
+
<button onClick={() => setTheme('glass')}>Glass</button>
|
|
303
|
+
<button onClick={() => setTheme('light')}>Light</button>
|
|
304
|
+
<button onClick={() => setTheme('aurora')}>Aurora</button>
|
|
305
|
+
</div>
|
|
306
|
+
);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
// Wrap your app
|
|
310
|
+
function App() {
|
|
311
|
+
return (
|
|
312
|
+
<ThemeProvider defaultTheme="glass">
|
|
313
|
+
<ThemeSwitcher />
|
|
314
|
+
</ThemeProvider>
|
|
315
|
+
);
|
|
316
|
+
}
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
### Theme-Aware Components
|
|
320
|
+
|
|
321
|
+
```tsx
|
|
322
|
+
import { useTheme } from 'shadcn-glass-ui';
|
|
323
|
+
|
|
324
|
+
function ThemeAwareCard({ children }) {
|
|
325
|
+
const { theme } = useTheme();
|
|
326
|
+
|
|
327
|
+
return (
|
|
328
|
+
<div
|
|
329
|
+
className={`
|
|
330
|
+
rounded-lg p-4
|
|
331
|
+
${theme === 'glass' ? 'bg-white/10 backdrop-blur-md' : ''}
|
|
332
|
+
${theme === 'light' ? 'bg-white shadow-md' : ''}
|
|
333
|
+
${theme === 'aurora' ? 'bg-gradient-to-r from-purple-500/20 to-pink-500/20' : ''}
|
|
334
|
+
`}
|
|
335
|
+
>
|
|
336
|
+
{children}
|
|
337
|
+
</div>
|
|
338
|
+
);
|
|
339
|
+
}
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
---
|
|
343
|
+
|
|
344
|
+
## Accessibility Patterns
|
|
345
|
+
|
|
346
|
+
### Focus Management
|
|
347
|
+
|
|
348
|
+
All components support keyboard navigation out of the box:
|
|
349
|
+
|
|
350
|
+
```tsx
|
|
351
|
+
// Modal auto-focuses first focusable element
|
|
352
|
+
<ModalGlass.Root open={open} onOpenChange={setOpen}>
|
|
353
|
+
<ModalGlass.Content>
|
|
354
|
+
{/* First focusable element receives focus */}
|
|
355
|
+
<input type="text" placeholder="Auto-focused" />
|
|
356
|
+
</ModalGlass.Content>
|
|
357
|
+
</ModalGlass.Root>
|
|
358
|
+
|
|
359
|
+
// Tabs support arrow key navigation
|
|
360
|
+
<TabsGlass.Root>
|
|
361
|
+
<TabsGlass.List>
|
|
362
|
+
{/* Arrow Left/Right to navigate */}
|
|
363
|
+
<TabsGlass.Trigger value="1">Tab 1</TabsGlass.Trigger>
|
|
364
|
+
<TabsGlass.Trigger value="2">Tab 2</TabsGlass.Trigger>
|
|
365
|
+
</TabsGlass.List>
|
|
366
|
+
</TabsGlass.Root>
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
### ARIA Labels
|
|
370
|
+
|
|
371
|
+
```tsx
|
|
372
|
+
// Buttons with icons need aria-label
|
|
373
|
+
<ButtonGlass aria-label="Close menu">
|
|
374
|
+
<XIcon />
|
|
375
|
+
</ButtonGlass>
|
|
376
|
+
|
|
377
|
+
// Progress indicators
|
|
378
|
+
<ProgressGlass value={75} aria-label="Upload progress: 75%" />
|
|
379
|
+
|
|
380
|
+
// Form inputs
|
|
381
|
+
<InputGlass
|
|
382
|
+
id="email"
|
|
383
|
+
aria-describedby="email-hint"
|
|
384
|
+
/>
|
|
385
|
+
<span id="email-hint">We'll never share your email</span>
|
|
386
|
+
```
|
|
387
|
+
|
|
388
|
+
### Touch Targets
|
|
389
|
+
|
|
390
|
+
All interactive components have minimum 44×44px touch targets (Apple HIG compliant):
|
|
391
|
+
|
|
392
|
+
```tsx
|
|
393
|
+
// Small visual, full touch target
|
|
394
|
+
<CheckboxGlass size="sm" /> {/* Visual: 16px, Touch: 44px */}
|
|
395
|
+
|
|
396
|
+
// Icon buttons maintain touch targets
|
|
397
|
+
<IconButtonGlass size="sm">
|
|
398
|
+
<MenuIcon />
|
|
399
|
+
</IconButtonGlass>
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
---
|
|
403
|
+
|
|
404
|
+
## See Also
|
|
405
|
+
|
|
406
|
+
- [BREAKING_CHANGES.md](BREAKING_CHANGES.md) - Migration from legacy APIs
|
|
407
|
+
- [COMPONENTS_CATALOG.md](COMPONENTS_CATALOG.md) - Full component reference
|
|
408
|
+
- [migration/](migration/) - Detailed migration guides
|
package/docs/AI_USAGE.md
CHANGED
|
@@ -3,6 +3,37 @@
|
|
|
3
3
|
This guide is specifically for **AI assistants** (Claude Code, GitHub Copilot, GPT-based tools)
|
|
4
4
|
helping users integrate shadcn-glass-ui into their projects.
|
|
5
5
|
|
|
6
|
+
## Badges & Integrations
|
|
7
|
+
|
|
8
|
+
[](https://github.com/Yhooi2/shadcn-glass-ui-library/actions)
|
|
9
|
+
[](https://bundlephobia.com/package/shadcn-glass-ui)
|
|
10
|
+
[](https://reactjs.org/)
|
|
11
|
+
[](https://tailwindcss.com/)
|
|
12
|
+
[](docs/AI_USAGE.md)
|
|
13
|
+
[](docs/AI_USAGE.md)
|
|
14
|
+
[](https://context7.com/yhooi2/shadcn-glass-ui-library)
|
|
15
|
+
|
|
16
|
+
### AI Tool Integration Status
|
|
17
|
+
|
|
18
|
+
| Tool | Status | Integration |
|
|
19
|
+
| ------------------ | --------- | ------------------------------------------------------------ |
|
|
20
|
+
| **Claude Code** | Optimized | [CLAUDE.md](../CLAUDE.md) with 500+ lines of project context |
|
|
21
|
+
| **GitHub Copilot** | Supported | TypeScript strict mode + comprehensive JSDoc |
|
|
22
|
+
| **ChatGPT/GPT-4** | Supported | [EXPORTS_MAP.json](EXPORTS_MAP.json) with component metadata |
|
|
23
|
+
| **Context7 MCP** | Indexed | [59 rules](../context7.json) covering breaking changes, APIs |
|
|
24
|
+
| **Cursor** | Supported | Full TypeScript inference |
|
|
25
|
+
|
|
26
|
+
### Library Identifiers
|
|
27
|
+
|
|
28
|
+
| Identifier | Value |
|
|
29
|
+
| ------------------ | --------------------------------- |
|
|
30
|
+
| npm package | `shadcn-glass-ui` |
|
|
31
|
+
| Registry namespace | `@shadcn-glass-ui` |
|
|
32
|
+
| Context7 ID | `/yhooi2/shadcn-glass-ui-library` |
|
|
33
|
+
| GitHub | `Yhooi2/shadcn-glass-ui-library` |
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
6
37
|
## 🎯 Quick Decision Tree
|
|
7
38
|
|
|
8
39
|
### When a user asks "I want to use shadcn-glass-ui"
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
# Breaking Changes
|
|
2
|
+
|
|
3
|
+
This document consolidates all breaking changes across major versions of shadcn-glass-ui.
|
|
4
|
+
|
|
5
|
+
## Quick Navigation
|
|
6
|
+
|
|
7
|
+
- [v2.0.0](#v200---css-variable-renames) - CSS variable renames (token architecture)
|
|
8
|
+
- [v1.0.0](#v100---legacy-api-removal) - Legacy API removal (Compound API only)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## v2.0.0 - CSS Variable Renames
|
|
13
|
+
|
|
14
|
+
**Released:** December 2024
|
|
15
|
+
|
|
16
|
+
v2.0.0 removes deprecated CSS variables as part of the 3-layer token architecture migration.
|
|
17
|
+
|
|
18
|
+
### Removed CSS Variables
|
|
19
|
+
|
|
20
|
+
| Removed (v1.x) | Replacement (v2.0+) | Semantic Meaning |
|
|
21
|
+
| -------------------- | ------------------------ | --------------------------------- |
|
|
22
|
+
| `--metric-emerald-*` | `--metric-success-*` | Success states (positive metrics) |
|
|
23
|
+
| `--metric-amber-*` | `--metric-warning-*` | Warning states (attention needed) |
|
|
24
|
+
| `--metric-blue-*` | `--metric-default-*` | Neutral/default states |
|
|
25
|
+
| `--metric-red-*` | `--metric-destructive-*` | Error/danger states (critical) |
|
|
26
|
+
|
|
27
|
+
**Total removed:** 16 variables (4 color families × 4 properties each: bg, text, border, glow)
|
|
28
|
+
|
|
29
|
+
### Why This Change?
|
|
30
|
+
|
|
31
|
+
- **Semantic Clarity**: Color names (emerald, amber, blue, red) → semantic roles (success, warning,
|
|
32
|
+
default, destructive)
|
|
33
|
+
- **shadcn/ui Compatibility**: Aligns with shadcn/ui variant naming conventions
|
|
34
|
+
- **Consistency**: Matches AlertGlass/BadgeGlass/ButtonGlass variant prop values
|
|
35
|
+
- **Token Architecture**: Part of the 3-layer token system migration
|
|
36
|
+
|
|
37
|
+
### Migration Guide
|
|
38
|
+
|
|
39
|
+
**Automated Migration (Recommended):**
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
# macOS/BSD
|
|
43
|
+
find src/ -type f \( -name "*.tsx" -o -name "*.ts" -o -name "*.css" \) -exec sed -i '' \
|
|
44
|
+
-e 's/--metric-emerald-/--metric-success-/g' \
|
|
45
|
+
-e 's/--metric-amber-/--metric-warning-/g' \
|
|
46
|
+
-e 's/--metric-blue-/--metric-default-/g' \
|
|
47
|
+
-e 's/--metric-red-/--metric-destructive-/g' \
|
|
48
|
+
{} +
|
|
49
|
+
|
|
50
|
+
# Linux
|
|
51
|
+
find src/ -type f \( -name "*.tsx" -o -name "*.ts" -o -name "*.css" \) -exec sed -i \
|
|
52
|
+
-e 's/--metric-emerald-/--metric-success-/g' \
|
|
53
|
+
-e 's/--metric-amber-/--metric-warning-/g' \
|
|
54
|
+
-e 's/--metric-blue-/--metric-default-/g' \
|
|
55
|
+
-e 's/--metric-red-/--metric-destructive-/g' \
|
|
56
|
+
{} +
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
**Example:**
|
|
60
|
+
|
|
61
|
+
```css
|
|
62
|
+
/* v1.x (REMOVED in v2.0) */
|
|
63
|
+
.metric-card-success {
|
|
64
|
+
background: var(--metric-emerald-bg);
|
|
65
|
+
color: var(--metric-emerald-text);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* v2.0+ */
|
|
69
|
+
.metric-card-success {
|
|
70
|
+
background: var(--metric-success-bg);
|
|
71
|
+
color: var(--metric-success-text);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
**[Complete Migration Guide](migration/CSS_VARIABLES_MIGRATION_2.0.md)** - Includes manual examples,
|
|
76
|
+
troubleshooting, and affected components.
|
|
77
|
+
|
|
78
|
+
### New in v2.0.0
|
|
79
|
+
|
|
80
|
+
**Token Architecture:**
|
|
81
|
+
|
|
82
|
+
- **3-Layer System**: Primitive → Semantic → Component tokens
|
|
83
|
+
- **207 Primitive Tokens**: Complete OKLCH color palette in `oklch-primitives.css`
|
|
84
|
+
- **Zero Hardcoded Colors**: 100% migration to CSS variables
|
|
85
|
+
- **Theme Creation**: 90% faster (2-3 hours → 10-15 minutes)
|
|
86
|
+
|
|
87
|
+
**New Components:**
|
|
88
|
+
|
|
89
|
+
- **StepperGlass** - Compound stepper with 3 variants (numbered, icon, dots), 2 orientations
|
|
90
|
+
|
|
91
|
+
**Custom Hooks (Exported):**
|
|
92
|
+
|
|
93
|
+
- `useFocus`, `useHover`, `useResponsive`, `useWallpaperTint`
|
|
94
|
+
|
|
95
|
+
**Documentation:**
|
|
96
|
+
|
|
97
|
+
- [TOKEN_ARCHITECTURE.md](TOKEN_ARCHITECTURE.md) - Complete token system guide
|
|
98
|
+
- [THEME_CREATION_GUIDE.md](THEME_CREATION_GUIDE.md) - Create themes in 15 minutes
|
|
99
|
+
- [CSS_VARIABLES_AUDIT.md](CSS_VARIABLES_AUDIT.md) - Complete audit of 296+ variables per theme
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## v1.0.0 - Legacy API Removal
|
|
104
|
+
|
|
105
|
+
**Released:** November 2024
|
|
106
|
+
|
|
107
|
+
v1.0.0 removes all legacy/deprecated APIs. This is a clean slate release with only Compound API
|
|
108
|
+
support.
|
|
109
|
+
|
|
110
|
+
### Removed Components
|
|
111
|
+
|
|
112
|
+
#### SelectGlass
|
|
113
|
+
|
|
114
|
+
**SelectGlass has been removed.** Use **ComboBoxGlass** instead.
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
// v0.x (REMOVED in v1.0)
|
|
118
|
+
<SelectGlass
|
|
119
|
+
options={options}
|
|
120
|
+
value={value}
|
|
121
|
+
onChange={setValue}
|
|
122
|
+
placeholder="Select option"
|
|
123
|
+
/>
|
|
124
|
+
|
|
125
|
+
// v1.0+ - Use ComboBoxGlass
|
|
126
|
+
<ComboBoxGlass
|
|
127
|
+
options={options}
|
|
128
|
+
value={value}
|
|
129
|
+
onChange={setValue}
|
|
130
|
+
placeholder="Select option"
|
|
131
|
+
/>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
**[SelectGlass → ComboBoxGlass Migration](migration/select-to-combobox.md)**
|
|
135
|
+
|
|
136
|
+
### Removed Legacy APIs
|
|
137
|
+
|
|
138
|
+
#### ModalGlass: Legacy Props API
|
|
139
|
+
|
|
140
|
+
**The old props-based API has been removed.** Use Compound API instead.
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
// v0.x (REMOVED in v1.0)
|
|
144
|
+
<ModalGlass isOpen={true} onClose={() => {}} title="Test">
|
|
145
|
+
Content
|
|
146
|
+
</ModalGlass>
|
|
147
|
+
|
|
148
|
+
// v1.0+ - Use Compound API
|
|
149
|
+
<ModalGlass.Root open={true} onOpenChange={() => {}}>
|
|
150
|
+
<ModalGlass.Overlay />
|
|
151
|
+
<ModalGlass.Content>
|
|
152
|
+
<ModalGlass.Header>
|
|
153
|
+
<ModalGlass.Title>Test</ModalGlass.Title>
|
|
154
|
+
<ModalGlass.Close />
|
|
155
|
+
</ModalGlass.Header>
|
|
156
|
+
<ModalGlass.Body>Content</ModalGlass.Body>
|
|
157
|
+
</ModalGlass.Content>
|
|
158
|
+
</ModalGlass.Root>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
**Key Changes:**
|
|
162
|
+
|
|
163
|
+
| v0.x Prop | v1.0+ Equivalent |
|
|
164
|
+
| --------- | ----------------------------------------------------- |
|
|
165
|
+
| `isOpen` | `open` (on ModalGlass.Root) |
|
|
166
|
+
| `onClose` | `onOpenChange` (signature: `(open: boolean) => void`) |
|
|
167
|
+
| `title` | `<ModalGlass.Title>` component |
|
|
168
|
+
|
|
169
|
+
**[ModalGlass Compound API Migration](migration/modal-glass-compound-api.md)**
|
|
170
|
+
|
|
171
|
+
#### TabsGlass: Legacy Props API
|
|
172
|
+
|
|
173
|
+
**The old props-based API has been removed.** Use Compound API instead.
|
|
174
|
+
|
|
175
|
+
```tsx
|
|
176
|
+
// v0.x (REMOVED in v1.0)
|
|
177
|
+
<TabsGlass
|
|
178
|
+
tabs={[
|
|
179
|
+
{ id: 'tab1', label: 'Tab 1' },
|
|
180
|
+
{ id: 'tab2', label: 'Tab 2' }
|
|
181
|
+
]}
|
|
182
|
+
activeTab="tab1"
|
|
183
|
+
onChange={setActiveTab}
|
|
184
|
+
/>
|
|
185
|
+
|
|
186
|
+
// v1.0+ - Use Compound API
|
|
187
|
+
<TabsGlass.Root value="tab1" onValueChange={setActiveTab}>
|
|
188
|
+
<TabsGlass.List>
|
|
189
|
+
<TabsGlass.Trigger value="tab1">Tab 1</TabsGlass.Trigger>
|
|
190
|
+
<TabsGlass.Trigger value="tab2">Tab 2</TabsGlass.Trigger>
|
|
191
|
+
</TabsGlass.List>
|
|
192
|
+
<TabsGlass.Content value="tab1">Content 1</TabsGlass.Content>
|
|
193
|
+
<TabsGlass.Content value="tab2">Content 2</TabsGlass.Content>
|
|
194
|
+
</TabsGlass.Root>
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
**Key Changes:**
|
|
198
|
+
|
|
199
|
+
| v0.x Prop | v1.0+ Equivalent |
|
|
200
|
+
| ------------ | ------------------------------------------- |
|
|
201
|
+
| `tabs` array | Individual `<TabsGlass.Trigger>` components |
|
|
202
|
+
| `activeTab` | `value` (on TabsGlass.Root) |
|
|
203
|
+
| `onChange` | `onValueChange` |
|
|
204
|
+
|
|
205
|
+
**[TabsGlass Compound API Migration](migration/tabs-glass-compound-api.md)**
|
|
206
|
+
|
|
207
|
+
---
|
|
208
|
+
|
|
209
|
+
## See Also
|
|
210
|
+
|
|
211
|
+
- [CHANGELOG.md](../CHANGELOG.md) - Complete version history
|
|
212
|
+
- [migration/](migration/) - Detailed migration guides
|
|
213
|
+
- [ADVANCED_PATTERNS.md](ADVANCED_PATTERNS.md) - Compound API usage examples
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "shadcn-glass-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "2.0.
|
|
5
|
-
"description": "Glassmorphism UI
|
|
4
|
+
"version": "2.0.6",
|
|
5
|
+
"description": "Glassmorphism UI components for React — drop-in shadcn/ui compatible, AI-optimized. 58 components, 3 themes, WCAG 2.1 AA.",
|
|
6
6
|
"author": "Yhooi2",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"keywords": [
|