@stackvibe-studio/registry 0.2.0 → 0.3.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/README.md +56 -10
- package/dist/index.cjs +219 -26
- package/dist/index.d.ts +1 -0
- package/dist/index.js +217 -25
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,24 +1,70 @@
|
|
|
1
1
|
# @stackvibe-studio/registry
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Centralized component metadata registry and catalog indexing all 30 StackVibe UI components across Core UI, Motion, and 3D WebGL packages.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Powering the CLI (`stackvibe add`), documentation search, and automated component discovery workflows.
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
- Exposes component package mapping and tags
|
|
10
|
-
- Updated in v0.2.0 with tabs, skeleton, fade-in-section, and orb-cluster entries
|
|
7
|
+
[](https://www.npmjs.com/package/@stackvibe-studio/registry)
|
|
8
|
+
[](https://opensource.org/licenses/MIT)
|
|
11
9
|
|
|
12
|
-
##
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- **30 Indexed Components**: Full coverage of UI primitives, animations, physics, and WebGL canvases.
|
|
13
|
+
- **Categorized Taxonomy**: `core-ui`, `motion`, and `three`.
|
|
14
|
+
- **Dependency Resolution**: Automatically maps required peer dependencies (e.g., `framer-motion`, `three`, `@react-three/fiber`).
|
|
15
|
+
- **Tag Search**: Searchable by design system keywords (e.g. `dialog`, `modal`, `spring`, `ticker`, `matrix`).
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
13
18
|
|
|
14
19
|
```bash
|
|
20
|
+
pnpm add @stackvibe-studio/registry
|
|
21
|
+
# or
|
|
15
22
|
npm install @stackvibe-studio/registry
|
|
16
23
|
```
|
|
17
24
|
|
|
18
|
-
##
|
|
25
|
+
## Usage
|
|
19
26
|
|
|
20
27
|
```ts
|
|
21
|
-
import {
|
|
28
|
+
import {
|
|
29
|
+
getRegistryEntry,
|
|
30
|
+
listRegistryEntries,
|
|
31
|
+
getRegistryEntriesByCategory
|
|
32
|
+
} from '@stackvibe-studio/registry';
|
|
33
|
+
|
|
34
|
+
// Get metadata for a single component
|
|
35
|
+
const dialog = getRegistryEntry('dialog');
|
|
36
|
+
console.log(dialog);
|
|
37
|
+
/*
|
|
38
|
+
{
|
|
39
|
+
name: 'dialog',
|
|
40
|
+
package: '@stackvibe-studio/ui',
|
|
41
|
+
category: 'core-ui',
|
|
42
|
+
description: 'Accessible modal dialog with backdrop blur...',
|
|
43
|
+
dependencies: ['lucide-react'],
|
|
44
|
+
tags: ['modal', 'dialog', 'overlay', 'popup', 'window']
|
|
45
|
+
}
|
|
46
|
+
*/
|
|
47
|
+
|
|
48
|
+
// List all motion components
|
|
49
|
+
const motionComponents = getRegistryEntriesByCategory('motion');
|
|
50
|
+
|
|
51
|
+
// List all registered components
|
|
52
|
+
const allComponents = listRegistryEntries();
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Schema
|
|
22
56
|
|
|
23
|
-
|
|
57
|
+
```ts
|
|
58
|
+
export interface RegistryEntry {
|
|
59
|
+
name: string;
|
|
60
|
+
package: '@stackvibe-studio/ui' | '@stackvibe-studio/motion' | '@stackvibe-studio/three';
|
|
61
|
+
category: 'core-ui' | 'motion' | 'three';
|
|
62
|
+
description: string;
|
|
63
|
+
dependencies: string[];
|
|
64
|
+
tags: string[];
|
|
65
|
+
}
|
|
24
66
|
```
|
|
67
|
+
|
|
68
|
+
## License
|
|
69
|
+
|
|
70
|
+
MIT © [StackVibe Studio](https://github.com/StackVibe-Studio/stackvibe-ui)
|
package/dist/index.cjs
CHANGED
|
@@ -21,26 +21,222 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
23
|
componentRegistry: () => componentRegistry,
|
|
24
|
-
getRegistryEntry: () => getRegistryEntry
|
|
24
|
+
getRegistryEntry: () => getRegistryEntry,
|
|
25
|
+
listComponentsByCategory: () => listComponentsByCategory
|
|
25
26
|
});
|
|
26
27
|
module.exports = __toCommonJS(index_exports);
|
|
27
28
|
var componentRegistry = [
|
|
29
|
+
// Core UI
|
|
28
30
|
{
|
|
29
31
|
name: "button",
|
|
30
32
|
packageName: "@stackvibe-studio/ui",
|
|
31
33
|
category: "core",
|
|
32
|
-
description: "Primary action control with accessible focus and
|
|
34
|
+
description: "Primary action control with accessible focus, anchor support, and 4 variants.",
|
|
33
35
|
dependencies: [],
|
|
34
36
|
tags: ["button", "cta", "action"]
|
|
35
37
|
},
|
|
38
|
+
{
|
|
39
|
+
name: "input",
|
|
40
|
+
packageName: "@stackvibe-studio/ui",
|
|
41
|
+
category: "core",
|
|
42
|
+
description: "Text input with dark styling, accessible focus rings, and validation states.",
|
|
43
|
+
dependencies: [],
|
|
44
|
+
tags: ["input", "form", "text"]
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: "textarea",
|
|
48
|
+
packageName: "@stackvibe-studio/ui",
|
|
49
|
+
category: "core",
|
|
50
|
+
description: "Multi-line text area with auto-flowing layout and strong contrast.",
|
|
51
|
+
dependencies: [],
|
|
52
|
+
tags: ["textarea", "form", "multiline"]
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: "select",
|
|
56
|
+
packageName: "@stackvibe-studio/ui",
|
|
57
|
+
category: "core",
|
|
58
|
+
description: "Dropdown selection menu with accessible option lists and dark theme tokens.",
|
|
59
|
+
dependencies: [],
|
|
60
|
+
tags: ["select", "dropdown", "form"]
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
name: "checkbox",
|
|
64
|
+
packageName: "@stackvibe-studio/ui",
|
|
65
|
+
category: "core",
|
|
66
|
+
description: "Accessible toggle control designed for settings, lists, and multi-selection.",
|
|
67
|
+
dependencies: [],
|
|
68
|
+
tags: ["checkbox", "form", "toggle"]
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
name: "card",
|
|
72
|
+
packageName: "@stackvibe-studio/ui",
|
|
73
|
+
category: "core",
|
|
74
|
+
description: "Layout surface container with subtle glassmorphic borders and soft backdrop blur.",
|
|
75
|
+
dependencies: [],
|
|
76
|
+
tags: ["card", "layout", "surface"]
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
name: "alert",
|
|
80
|
+
packageName: "@stackvibe-studio/ui",
|
|
81
|
+
category: "core",
|
|
82
|
+
description: "Status messaging banners with success, info, warning, and error tones.",
|
|
83
|
+
dependencies: [],
|
|
84
|
+
tags: ["alert", "feedback", "notification"]
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
name: "badge",
|
|
88
|
+
packageName: "@stackvibe-studio/ui",
|
|
89
|
+
category: "core",
|
|
90
|
+
description: "Compact metadata markers for status tags, versions, and highlights.",
|
|
91
|
+
dependencies: [],
|
|
92
|
+
tags: ["badge", "meta", "pill"]
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
name: "avatar",
|
|
96
|
+
packageName: "@stackvibe-studio/ui",
|
|
97
|
+
category: "core",
|
|
98
|
+
description: "User profile thumbnail with fallback initials and multiple size presets.",
|
|
99
|
+
dependencies: [],
|
|
100
|
+
tags: ["avatar", "profile", "media"]
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
name: "tabs",
|
|
104
|
+
packageName: "@stackvibe-studio/ui",
|
|
105
|
+
category: "core",
|
|
106
|
+
description: "Segmented tabs to cleanly separate complex views and workflows.",
|
|
107
|
+
dependencies: [],
|
|
108
|
+
tags: ["tabs", "navigation", "content"]
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
name: "skeleton",
|
|
112
|
+
packageName: "@stackvibe-studio/ui",
|
|
113
|
+
category: "core",
|
|
114
|
+
description: "Smooth pulsing placeholders that match the visual rhythm of the library.",
|
|
115
|
+
dependencies: [],
|
|
116
|
+
tags: ["loading", "placeholder", "skeleton"]
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
name: "dialog",
|
|
120
|
+
packageName: "@stackvibe-studio/ui",
|
|
121
|
+
category: "core",
|
|
122
|
+
description: "Accessible modal dialog with overlay backdrop blur, escape key, and header/footer.",
|
|
123
|
+
dependencies: [],
|
|
124
|
+
tags: ["dialog", "modal", "overlay"]
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
name: "drawer",
|
|
128
|
+
packageName: "@stackvibe-studio/ui",
|
|
129
|
+
category: "core",
|
|
130
|
+
description: "Slide-out drawer panel from left, right, or bottom with smooth animation.",
|
|
131
|
+
dependencies: [],
|
|
132
|
+
tags: ["drawer", "sheet", "slideout"]
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
name: "tooltip",
|
|
136
|
+
packageName: "@stackvibe-studio/ui",
|
|
137
|
+
category: "core",
|
|
138
|
+
description: "Hover/focus floating tooltip with arrow and directional positioning.",
|
|
139
|
+
dependencies: [],
|
|
140
|
+
tags: ["tooltip", "popover", "hover"]
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
name: "accordion",
|
|
144
|
+
packageName: "@stackvibe-studio/ui",
|
|
145
|
+
category: "core",
|
|
146
|
+
description: "Collapsible accordion panels with smooth rotation and single/multi expand.",
|
|
147
|
+
dependencies: [],
|
|
148
|
+
tags: ["accordion", "collapse", "faq"]
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
name: "switch",
|
|
152
|
+
packageName: "@stackvibe-studio/ui",
|
|
153
|
+
category: "core",
|
|
154
|
+
description: "Modern sliding toggle switch with animated thumb and keyboard accessibility.",
|
|
155
|
+
dependencies: [],
|
|
156
|
+
tags: ["switch", "toggle", "form"]
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
name: "progress",
|
|
160
|
+
packageName: "@stackvibe-studio/ui",
|
|
161
|
+
category: "core",
|
|
162
|
+
description: "Linear progress bar with gradient fills and percentage display.",
|
|
163
|
+
dependencies: [],
|
|
164
|
+
tags: ["progress", "meter", "loading"]
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
name: "toast",
|
|
168
|
+
packageName: "@stackvibe-studio/ui",
|
|
169
|
+
category: "core",
|
|
170
|
+
description: "Notification toast system with toast.success(), toast.error(), and auto-dismiss.",
|
|
171
|
+
dependencies: [],
|
|
172
|
+
tags: ["toast", "notification", "feedback"]
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
name: "dropdown-menu",
|
|
176
|
+
packageName: "@stackvibe-studio/ui",
|
|
177
|
+
category: "core",
|
|
178
|
+
description: "Action popover menu with click-outside listener and keyboard navigation.",
|
|
179
|
+
dependencies: [],
|
|
180
|
+
tags: ["dropdown", "menu", "popover"]
|
|
181
|
+
},
|
|
182
|
+
// Motion
|
|
36
183
|
{
|
|
37
184
|
name: "spotlight-card",
|
|
38
185
|
packageName: "@stackvibe-studio/motion",
|
|
39
186
|
category: "motion",
|
|
40
|
-
description: "Interactive card with
|
|
41
|
-
dependencies: ["motion"],
|
|
42
|
-
tags: ["card", "hover", "glow"]
|
|
187
|
+
description: "Interactive card with dynamic cursor-following radial spotlight illumination.",
|
|
188
|
+
dependencies: ["framer-motion"],
|
|
189
|
+
tags: ["card", "hover", "glow", "spotlight"]
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
name: "fade-in",
|
|
193
|
+
packageName: "@stackvibe-studio/motion",
|
|
194
|
+
category: "motion",
|
|
195
|
+
description: "Scroll-aware reveal wrapper for onboarding sections and storytelling layouts.",
|
|
196
|
+
dependencies: ["framer-motion"],
|
|
197
|
+
tags: ["reveal", "fade", "motion"]
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
name: "text-reveal",
|
|
201
|
+
packageName: "@stackvibe-studio/motion",
|
|
202
|
+
category: "motion",
|
|
203
|
+
description: "Typography reveal effect that animates text elements smoothly on entry.",
|
|
204
|
+
dependencies: ["framer-motion"],
|
|
205
|
+
tags: ["typography", "text", "reveal"]
|
|
43
206
|
},
|
|
207
|
+
{
|
|
208
|
+
name: "magnetic",
|
|
209
|
+
packageName: "@stackvibe-studio/motion",
|
|
210
|
+
category: "motion",
|
|
211
|
+
description: "Physics-based magnetic attraction that draws elements toward the cursor.",
|
|
212
|
+
dependencies: ["framer-motion"],
|
|
213
|
+
tags: ["magnetic", "cursor", "physics"]
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
name: "number-ticker",
|
|
217
|
+
packageName: "@stackvibe-studio/motion",
|
|
218
|
+
category: "motion",
|
|
219
|
+
description: "Smooth animated counter from 0 to N with cubic easing for metric counters.",
|
|
220
|
+
dependencies: [],
|
|
221
|
+
tags: ["counter", "ticker", "numbers"]
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
name: "marquee",
|
|
225
|
+
packageName: "@stackvibe-studio/motion",
|
|
226
|
+
category: "motion",
|
|
227
|
+
description: "Infinite looping ticker with pause-on-hover for partners, logos, or news.",
|
|
228
|
+
dependencies: [],
|
|
229
|
+
tags: ["marquee", "ticker", "infinite"]
|
|
230
|
+
},
|
|
231
|
+
{
|
|
232
|
+
name: "tilt-card",
|
|
233
|
+
packageName: "@stackvibe-studio/motion",
|
|
234
|
+
category: "motion",
|
|
235
|
+
description: "3D perspective mouse-tracking tilt card with realistic specular glare.",
|
|
236
|
+
dependencies: [],
|
|
237
|
+
tags: ["tilt", "3d", "perspective"]
|
|
238
|
+
},
|
|
239
|
+
// 3D
|
|
44
240
|
{
|
|
45
241
|
name: "glass-3d-card",
|
|
46
242
|
packageName: "@stackvibe-studio/three",
|
|
@@ -50,12 +246,12 @@ var componentRegistry = [
|
|
|
50
246
|
tags: ["glass", "3d", "card"]
|
|
51
247
|
},
|
|
52
248
|
{
|
|
53
|
-
name: "
|
|
54
|
-
packageName: "@stackvibe-studio/
|
|
55
|
-
category: "
|
|
56
|
-
description: "
|
|
57
|
-
dependencies: ["
|
|
58
|
-
tags: ["
|
|
249
|
+
name: "floating-sphere",
|
|
250
|
+
packageName: "@stackvibe-studio/three",
|
|
251
|
+
category: "3d",
|
|
252
|
+
description: "Organic floating distorted sphere with metallic reflection.",
|
|
253
|
+
dependencies: ["three", "@react-three/fiber", "@react-three/drei"],
|
|
254
|
+
tags: ["sphere", "3d", "float"]
|
|
59
255
|
},
|
|
60
256
|
{
|
|
61
257
|
name: "orb-cluster",
|
|
@@ -66,27 +262,24 @@ var componentRegistry = [
|
|
|
66
262
|
tags: ["orb", "3d", "hero"]
|
|
67
263
|
},
|
|
68
264
|
{
|
|
69
|
-
name: "
|
|
70
|
-
packageName: "@stackvibe-studio/
|
|
71
|
-
category: "
|
|
72
|
-
description: "
|
|
73
|
-
dependencies: [],
|
|
74
|
-
tags: ["
|
|
75
|
-
},
|
|
76
|
-
{
|
|
77
|
-
name: "skeleton",
|
|
78
|
-
packageName: "@stackvibe-studio/ui",
|
|
79
|
-
category: "core",
|
|
80
|
-
description: "Loading placeholders that match the visual rhythm of the library.",
|
|
81
|
-
dependencies: [],
|
|
82
|
-
tags: ["loading", "placeholder", "skeleton"]
|
|
265
|
+
name: "wave-canvas",
|
|
266
|
+
packageName: "@stackvibe-studio/three",
|
|
267
|
+
category: "3d",
|
|
268
|
+
description: "Undulating sinusoidal mesh wave canvas responsive to scene time and lighting.",
|
|
269
|
+
dependencies: ["three", "@react-three/fiber"],
|
|
270
|
+
tags: ["wave", "mesh", "canvas"]
|
|
83
271
|
}
|
|
84
272
|
];
|
|
85
273
|
function getRegistryEntry(name) {
|
|
86
274
|
return componentRegistry.find((item) => item.name === name);
|
|
87
275
|
}
|
|
276
|
+
function listComponentsByCategory(category) {
|
|
277
|
+
if (!category) return componentRegistry;
|
|
278
|
+
return componentRegistry.filter((item) => item.category === category);
|
|
279
|
+
}
|
|
88
280
|
// Annotate the CommonJS export names for ESM import in node:
|
|
89
281
|
0 && (module.exports = {
|
|
90
282
|
componentRegistry,
|
|
91
|
-
getRegistryEntry
|
|
283
|
+
getRegistryEntry,
|
|
284
|
+
listComponentsByCategory
|
|
92
285
|
});
|
package/dist/index.d.ts
CHANGED
|
@@ -8,3 +8,4 @@ export type RegistryComponent = {
|
|
|
8
8
|
};
|
|
9
9
|
export declare const componentRegistry: RegistryComponent[];
|
|
10
10
|
export declare function getRegistryEntry(name: string): RegistryComponent | undefined;
|
|
11
|
+
export declare function listComponentsByCategory(category?: RegistryComponent['category']): RegistryComponent[];
|
package/dist/index.js
CHANGED
|
@@ -1,21 +1,216 @@
|
|
|
1
1
|
// src/index.ts
|
|
2
2
|
var componentRegistry = [
|
|
3
|
+
// Core UI
|
|
3
4
|
{
|
|
4
5
|
name: "button",
|
|
5
6
|
packageName: "@stackvibe-studio/ui",
|
|
6
7
|
category: "core",
|
|
7
|
-
description: "Primary action control with accessible focus and
|
|
8
|
+
description: "Primary action control with accessible focus, anchor support, and 4 variants.",
|
|
8
9
|
dependencies: [],
|
|
9
10
|
tags: ["button", "cta", "action"]
|
|
10
11
|
},
|
|
12
|
+
{
|
|
13
|
+
name: "input",
|
|
14
|
+
packageName: "@stackvibe-studio/ui",
|
|
15
|
+
category: "core",
|
|
16
|
+
description: "Text input with dark styling, accessible focus rings, and validation states.",
|
|
17
|
+
dependencies: [],
|
|
18
|
+
tags: ["input", "form", "text"]
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: "textarea",
|
|
22
|
+
packageName: "@stackvibe-studio/ui",
|
|
23
|
+
category: "core",
|
|
24
|
+
description: "Multi-line text area with auto-flowing layout and strong contrast.",
|
|
25
|
+
dependencies: [],
|
|
26
|
+
tags: ["textarea", "form", "multiline"]
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: "select",
|
|
30
|
+
packageName: "@stackvibe-studio/ui",
|
|
31
|
+
category: "core",
|
|
32
|
+
description: "Dropdown selection menu with accessible option lists and dark theme tokens.",
|
|
33
|
+
dependencies: [],
|
|
34
|
+
tags: ["select", "dropdown", "form"]
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
name: "checkbox",
|
|
38
|
+
packageName: "@stackvibe-studio/ui",
|
|
39
|
+
category: "core",
|
|
40
|
+
description: "Accessible toggle control designed for settings, lists, and multi-selection.",
|
|
41
|
+
dependencies: [],
|
|
42
|
+
tags: ["checkbox", "form", "toggle"]
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: "card",
|
|
46
|
+
packageName: "@stackvibe-studio/ui",
|
|
47
|
+
category: "core",
|
|
48
|
+
description: "Layout surface container with subtle glassmorphic borders and soft backdrop blur.",
|
|
49
|
+
dependencies: [],
|
|
50
|
+
tags: ["card", "layout", "surface"]
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
name: "alert",
|
|
54
|
+
packageName: "@stackvibe-studio/ui",
|
|
55
|
+
category: "core",
|
|
56
|
+
description: "Status messaging banners with success, info, warning, and error tones.",
|
|
57
|
+
dependencies: [],
|
|
58
|
+
tags: ["alert", "feedback", "notification"]
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: "badge",
|
|
62
|
+
packageName: "@stackvibe-studio/ui",
|
|
63
|
+
category: "core",
|
|
64
|
+
description: "Compact metadata markers for status tags, versions, and highlights.",
|
|
65
|
+
dependencies: [],
|
|
66
|
+
tags: ["badge", "meta", "pill"]
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
name: "avatar",
|
|
70
|
+
packageName: "@stackvibe-studio/ui",
|
|
71
|
+
category: "core",
|
|
72
|
+
description: "User profile thumbnail with fallback initials and multiple size presets.",
|
|
73
|
+
dependencies: [],
|
|
74
|
+
tags: ["avatar", "profile", "media"]
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
name: "tabs",
|
|
78
|
+
packageName: "@stackvibe-studio/ui",
|
|
79
|
+
category: "core",
|
|
80
|
+
description: "Segmented tabs to cleanly separate complex views and workflows.",
|
|
81
|
+
dependencies: [],
|
|
82
|
+
tags: ["tabs", "navigation", "content"]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
name: "skeleton",
|
|
86
|
+
packageName: "@stackvibe-studio/ui",
|
|
87
|
+
category: "core",
|
|
88
|
+
description: "Smooth pulsing placeholders that match the visual rhythm of the library.",
|
|
89
|
+
dependencies: [],
|
|
90
|
+
tags: ["loading", "placeholder", "skeleton"]
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
name: "dialog",
|
|
94
|
+
packageName: "@stackvibe-studio/ui",
|
|
95
|
+
category: "core",
|
|
96
|
+
description: "Accessible modal dialog with overlay backdrop blur, escape key, and header/footer.",
|
|
97
|
+
dependencies: [],
|
|
98
|
+
tags: ["dialog", "modal", "overlay"]
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
name: "drawer",
|
|
102
|
+
packageName: "@stackvibe-studio/ui",
|
|
103
|
+
category: "core",
|
|
104
|
+
description: "Slide-out drawer panel from left, right, or bottom with smooth animation.",
|
|
105
|
+
dependencies: [],
|
|
106
|
+
tags: ["drawer", "sheet", "slideout"]
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
name: "tooltip",
|
|
110
|
+
packageName: "@stackvibe-studio/ui",
|
|
111
|
+
category: "core",
|
|
112
|
+
description: "Hover/focus floating tooltip with arrow and directional positioning.",
|
|
113
|
+
dependencies: [],
|
|
114
|
+
tags: ["tooltip", "popover", "hover"]
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
name: "accordion",
|
|
118
|
+
packageName: "@stackvibe-studio/ui",
|
|
119
|
+
category: "core",
|
|
120
|
+
description: "Collapsible accordion panels with smooth rotation and single/multi expand.",
|
|
121
|
+
dependencies: [],
|
|
122
|
+
tags: ["accordion", "collapse", "faq"]
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
name: "switch",
|
|
126
|
+
packageName: "@stackvibe-studio/ui",
|
|
127
|
+
category: "core",
|
|
128
|
+
description: "Modern sliding toggle switch with animated thumb and keyboard accessibility.",
|
|
129
|
+
dependencies: [],
|
|
130
|
+
tags: ["switch", "toggle", "form"]
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
name: "progress",
|
|
134
|
+
packageName: "@stackvibe-studio/ui",
|
|
135
|
+
category: "core",
|
|
136
|
+
description: "Linear progress bar with gradient fills and percentage display.",
|
|
137
|
+
dependencies: [],
|
|
138
|
+
tags: ["progress", "meter", "loading"]
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
name: "toast",
|
|
142
|
+
packageName: "@stackvibe-studio/ui",
|
|
143
|
+
category: "core",
|
|
144
|
+
description: "Notification toast system with toast.success(), toast.error(), and auto-dismiss.",
|
|
145
|
+
dependencies: [],
|
|
146
|
+
tags: ["toast", "notification", "feedback"]
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
name: "dropdown-menu",
|
|
150
|
+
packageName: "@stackvibe-studio/ui",
|
|
151
|
+
category: "core",
|
|
152
|
+
description: "Action popover menu with click-outside listener and keyboard navigation.",
|
|
153
|
+
dependencies: [],
|
|
154
|
+
tags: ["dropdown", "menu", "popover"]
|
|
155
|
+
},
|
|
156
|
+
// Motion
|
|
11
157
|
{
|
|
12
158
|
name: "spotlight-card",
|
|
13
159
|
packageName: "@stackvibe-studio/motion",
|
|
14
160
|
category: "motion",
|
|
15
|
-
description: "Interactive card with
|
|
16
|
-
dependencies: ["motion"],
|
|
17
|
-
tags: ["card", "hover", "glow"]
|
|
161
|
+
description: "Interactive card with dynamic cursor-following radial spotlight illumination.",
|
|
162
|
+
dependencies: ["framer-motion"],
|
|
163
|
+
tags: ["card", "hover", "glow", "spotlight"]
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
name: "fade-in",
|
|
167
|
+
packageName: "@stackvibe-studio/motion",
|
|
168
|
+
category: "motion",
|
|
169
|
+
description: "Scroll-aware reveal wrapper for onboarding sections and storytelling layouts.",
|
|
170
|
+
dependencies: ["framer-motion"],
|
|
171
|
+
tags: ["reveal", "fade", "motion"]
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
name: "text-reveal",
|
|
175
|
+
packageName: "@stackvibe-studio/motion",
|
|
176
|
+
category: "motion",
|
|
177
|
+
description: "Typography reveal effect that animates text elements smoothly on entry.",
|
|
178
|
+
dependencies: ["framer-motion"],
|
|
179
|
+
tags: ["typography", "text", "reveal"]
|
|
18
180
|
},
|
|
181
|
+
{
|
|
182
|
+
name: "magnetic",
|
|
183
|
+
packageName: "@stackvibe-studio/motion",
|
|
184
|
+
category: "motion",
|
|
185
|
+
description: "Physics-based magnetic attraction that draws elements toward the cursor.",
|
|
186
|
+
dependencies: ["framer-motion"],
|
|
187
|
+
tags: ["magnetic", "cursor", "physics"]
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
name: "number-ticker",
|
|
191
|
+
packageName: "@stackvibe-studio/motion",
|
|
192
|
+
category: "motion",
|
|
193
|
+
description: "Smooth animated counter from 0 to N with cubic easing for metric counters.",
|
|
194
|
+
dependencies: [],
|
|
195
|
+
tags: ["counter", "ticker", "numbers"]
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
name: "marquee",
|
|
199
|
+
packageName: "@stackvibe-studio/motion",
|
|
200
|
+
category: "motion",
|
|
201
|
+
description: "Infinite looping ticker with pause-on-hover for partners, logos, or news.",
|
|
202
|
+
dependencies: [],
|
|
203
|
+
tags: ["marquee", "ticker", "infinite"]
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
name: "tilt-card",
|
|
207
|
+
packageName: "@stackvibe-studio/motion",
|
|
208
|
+
category: "motion",
|
|
209
|
+
description: "3D perspective mouse-tracking tilt card with realistic specular glare.",
|
|
210
|
+
dependencies: [],
|
|
211
|
+
tags: ["tilt", "3d", "perspective"]
|
|
212
|
+
},
|
|
213
|
+
// 3D
|
|
19
214
|
{
|
|
20
215
|
name: "glass-3d-card",
|
|
21
216
|
packageName: "@stackvibe-studio/three",
|
|
@@ -25,12 +220,12 @@ var componentRegistry = [
|
|
|
25
220
|
tags: ["glass", "3d", "card"]
|
|
26
221
|
},
|
|
27
222
|
{
|
|
28
|
-
name: "
|
|
29
|
-
packageName: "@stackvibe-studio/
|
|
30
|
-
category: "
|
|
31
|
-
description: "
|
|
32
|
-
dependencies: ["
|
|
33
|
-
tags: ["
|
|
223
|
+
name: "floating-sphere",
|
|
224
|
+
packageName: "@stackvibe-studio/three",
|
|
225
|
+
category: "3d",
|
|
226
|
+
description: "Organic floating distorted sphere with metallic reflection.",
|
|
227
|
+
dependencies: ["three", "@react-three/fiber", "@react-three/drei"],
|
|
228
|
+
tags: ["sphere", "3d", "float"]
|
|
34
229
|
},
|
|
35
230
|
{
|
|
36
231
|
name: "orb-cluster",
|
|
@@ -41,26 +236,23 @@ var componentRegistry = [
|
|
|
41
236
|
tags: ["orb", "3d", "hero"]
|
|
42
237
|
},
|
|
43
238
|
{
|
|
44
|
-
name: "
|
|
45
|
-
packageName: "@stackvibe-studio/
|
|
46
|
-
category: "
|
|
47
|
-
description: "
|
|
48
|
-
dependencies: [],
|
|
49
|
-
tags: ["
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
name: "skeleton",
|
|
53
|
-
packageName: "@stackvibe-studio/ui",
|
|
54
|
-
category: "core",
|
|
55
|
-
description: "Loading placeholders that match the visual rhythm of the library.",
|
|
56
|
-
dependencies: [],
|
|
57
|
-
tags: ["loading", "placeholder", "skeleton"]
|
|
239
|
+
name: "wave-canvas",
|
|
240
|
+
packageName: "@stackvibe-studio/three",
|
|
241
|
+
category: "3d",
|
|
242
|
+
description: "Undulating sinusoidal mesh wave canvas responsive to scene time and lighting.",
|
|
243
|
+
dependencies: ["three", "@react-three/fiber"],
|
|
244
|
+
tags: ["wave", "mesh", "canvas"]
|
|
58
245
|
}
|
|
59
246
|
];
|
|
60
247
|
function getRegistryEntry(name) {
|
|
61
248
|
return componentRegistry.find((item) => item.name === name);
|
|
62
249
|
}
|
|
250
|
+
function listComponentsByCategory(category) {
|
|
251
|
+
if (!category) return componentRegistry;
|
|
252
|
+
return componentRegistry.filter((item) => item.category === category);
|
|
253
|
+
}
|
|
63
254
|
export {
|
|
64
255
|
componentRegistry,
|
|
65
|
-
getRegistryEntry
|
|
256
|
+
getRegistryEntry,
|
|
257
|
+
listComponentsByCategory
|
|
66
258
|
};
|