shadcn-glass-ui 2.0.11 → 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
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
[**shadcn-glass-ui API Reference v1.0.7**](../README.md)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
---
|
|
4
4
|
|
|
5
5
|
[shadcn-glass-ui API Reference](../globals.md) / ButtonGlassProps
|
|
6
6
|
|
|
7
7
|
# Interface: ButtonGlassProps
|
|
8
8
|
|
|
9
|
-
Defined in:
|
|
9
|
+
Defined in:
|
|
10
|
+
[src/components/glass/ui/button-glass.tsx:157](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L157)
|
|
10
11
|
|
|
11
12
|
Props for the ButtonGlass component
|
|
12
13
|
|
|
13
|
-
A glass-themed button with ripple effects, loading states, and icon support.
|
|
14
|
-
|
|
14
|
+
A glass-themed button with ripple effects, loading states, and icon support. Features theme-aware
|
|
15
|
+
styling and hover animations.
|
|
15
16
|
|
|
16
17
|
## Accessibility
|
|
17
18
|
|
|
@@ -27,7 +28,7 @@ Features theme-aware styling and hover animations.
|
|
|
27
28
|
|
|
28
29
|
```tsx
|
|
29
30
|
// Basic button
|
|
30
|
-
<ButtonGlass variant="
|
|
31
|
+
<ButtonGlass variant="default">Click me</ButtonGlass>
|
|
31
32
|
|
|
32
33
|
// With icon and aria-label for icon-only buttons
|
|
33
34
|
<ButtonGlass icon={Check} iconPosition="left">Save</ButtonGlass>
|
|
@@ -42,7 +43,7 @@ Features theme-aware styling and hover animations.
|
|
|
42
43
|
<ButtonGlass variant="destructive">Delete</ButtonGlass>
|
|
43
44
|
|
|
44
45
|
// As a link (asChild pattern) - maintains semantic HTML
|
|
45
|
-
<ButtonGlass asChild variant="
|
|
46
|
+
<ButtonGlass asChild variant="default">
|
|
46
47
|
<a href="/dashboard">Go to Dashboard</a>
|
|
47
48
|
</ButtonGlass>
|
|
48
49
|
|
|
@@ -52,14 +53,15 @@ Features theme-aware styling and hover animations.
|
|
|
52
53
|
</ButtonGlass>
|
|
53
54
|
|
|
54
55
|
// Form submit button
|
|
55
|
-
<ButtonGlass type="submit" variant="
|
|
56
|
+
<ButtonGlass type="submit" variant="default">
|
|
56
57
|
Submit Form
|
|
57
58
|
</ButtonGlass>
|
|
58
59
|
```
|
|
59
60
|
|
|
60
61
|
## Extends
|
|
61
62
|
|
|
62
|
-
- `Omit`\<`React.ButtonHTMLAttributes`\<`HTMLButtonElement`\>, `"style"`\>.`VariantProps
|
|
63
|
+
- `Omit`\<`React.ButtonHTMLAttributes`\<`HTMLButtonElement`\>, `"style"`\>.`VariantProps`\<_typeof_
|
|
64
|
+
[`buttonGlassVariants`](../variables/buttonGlassVariants.md)\>
|
|
63
65
|
|
|
64
66
|
## Properties
|
|
65
67
|
|
|
@@ -67,19 +69,19 @@ Features theme-aware styling and hover animations.
|
|
|
67
69
|
|
|
68
70
|
> `readonly` `optional` **asChild**: `boolean`
|
|
69
71
|
|
|
70
|
-
Defined in:
|
|
72
|
+
Defined in:
|
|
73
|
+
[src/components/glass/ui/button-glass.tsx:176](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L176)
|
|
71
74
|
|
|
72
|
-
Render as child element instead of button (polymorphic rendering).
|
|
73
|
-
|
|
75
|
+
Render as child element instead of button (polymorphic rendering). Useful for rendering buttons as
|
|
76
|
+
links or other interactive elements.
|
|
74
77
|
|
|
75
|
-
**Note:** When using `asChild`, decorative effects (ripple, shine, glow)
|
|
76
|
-
|
|
77
|
-
Only styles and event handlers are passed to the child element.
|
|
78
|
+
**Note:** When using `asChild`, decorative effects (ripple, shine, glow) are disabled to maintain
|
|
79
|
+
compatibility with Radix UI Slot. Only styles and event handlers are passed to the child element.
|
|
78
80
|
|
|
79
81
|
#### Default
|
|
80
82
|
|
|
81
83
|
```ts
|
|
82
|
-
false
|
|
84
|
+
false;
|
|
83
85
|
```
|
|
84
86
|
|
|
85
87
|
#### Example
|
|
@@ -90,88 +92,93 @@ false
|
|
|
90
92
|
</ButtonGlass>
|
|
91
93
|
```
|
|
92
94
|
|
|
93
|
-
|
|
95
|
+
---
|
|
94
96
|
|
|
95
97
|
### variant?
|
|
96
98
|
|
|
97
99
|
> `readonly` `optional` **variant**: [`ButtonGlassVariant`](../type-aliases/ButtonGlassVariant.md)
|
|
98
100
|
|
|
99
|
-
Defined in:
|
|
101
|
+
Defined in:
|
|
102
|
+
[src/components/glass/ui/button-glass.tsx:182](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L182)
|
|
100
103
|
|
|
101
104
|
Visual style variant of the button
|
|
102
105
|
|
|
103
106
|
#### Default
|
|
104
107
|
|
|
105
108
|
```ts
|
|
106
|
-
|
|
109
|
+
'primary';
|
|
107
110
|
```
|
|
108
111
|
|
|
109
112
|
#### Overrides
|
|
110
113
|
|
|
111
114
|
`VariantProps.variant`
|
|
112
115
|
|
|
113
|
-
|
|
116
|
+
---
|
|
114
117
|
|
|
115
118
|
### loading?
|
|
116
119
|
|
|
117
120
|
> `readonly` `optional` **loading**: `boolean`
|
|
118
121
|
|
|
119
|
-
Defined in:
|
|
122
|
+
Defined in:
|
|
123
|
+
[src/components/glass/ui/button-glass.tsx:188](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L188)
|
|
120
124
|
|
|
121
125
|
Show loading spinner and disable interactions
|
|
122
126
|
|
|
123
127
|
#### Default
|
|
124
128
|
|
|
125
129
|
```ts
|
|
126
|
-
false
|
|
130
|
+
false;
|
|
127
131
|
```
|
|
128
132
|
|
|
129
|
-
|
|
133
|
+
---
|
|
130
134
|
|
|
131
135
|
### icon?
|
|
132
136
|
|
|
133
137
|
> `readonly` `optional` **icon**: `LucideIcon`
|
|
134
138
|
|
|
135
|
-
Defined in:
|
|
139
|
+
Defined in:
|
|
140
|
+
[src/components/glass/ui/button-glass.tsx:194](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L194)
|
|
136
141
|
|
|
137
142
|
Icon component from lucide-react to display
|
|
138
143
|
|
|
139
144
|
#### Example
|
|
140
145
|
|
|
141
146
|
```ts
|
|
142
|
-
icon={Check}
|
|
147
|
+
icon = { Check };
|
|
143
148
|
```
|
|
144
149
|
|
|
145
|
-
|
|
150
|
+
---
|
|
146
151
|
|
|
147
152
|
### iconPosition?
|
|
148
153
|
|
|
149
154
|
> `readonly` `optional` **iconPosition**: `"left"` \| `"right"`
|
|
150
155
|
|
|
151
|
-
Defined in:
|
|
156
|
+
Defined in:
|
|
157
|
+
[src/components/glass/ui/button-glass.tsx:200](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L200)
|
|
152
158
|
|
|
153
159
|
Position of the icon relative to button text
|
|
154
160
|
|
|
155
161
|
#### Default
|
|
156
162
|
|
|
157
163
|
```ts
|
|
158
|
-
|
|
164
|
+
'left';
|
|
159
165
|
```
|
|
160
166
|
|
|
161
|
-
|
|
167
|
+
---
|
|
162
168
|
|
|
163
169
|
### size?
|
|
164
170
|
|
|
165
171
|
> `readonly` `optional` **size**: `"sm"` \| `"md"` \| `"lg"` \| `"icon"`
|
|
166
172
|
|
|
167
|
-
Defined in:
|
|
173
|
+
Defined in:
|
|
174
|
+
[src/components/glass/ui/button-glass.tsx:206](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/button-glass.tsx#L206)
|
|
168
175
|
|
|
169
176
|
Size variant of the button
|
|
170
177
|
|
|
171
178
|
#### Default
|
|
172
179
|
|
|
173
180
|
```ts
|
|
174
|
-
|
|
181
|
+
'md';
|
|
175
182
|
```
|
|
176
183
|
|
|
177
184
|
#### Overrides
|
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 library for React - AI-friendly with
|
|
4
|
+
"version": "2.1.0",
|
|
5
|
+
"description": "Glassmorphism UI library for React - AI-friendly with 57 components, strict TypeScript, and comprehensive docs",
|
|
6
6
|
"author": "Yhooi2",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"keywords": [
|
|
@@ -26,7 +26,8 @@
|
|
|
26
26
|
"wcag-2.1-aa",
|
|
27
27
|
"typescript-strict",
|
|
28
28
|
"visual-regression",
|
|
29
|
-
"storybook"
|
|
29
|
+
"storybook",
|
|
30
|
+
"context7"
|
|
30
31
|
],
|
|
31
32
|
"repository": {
|
|
32
33
|
"type": "git",
|