wally-ui 1.10.0 → 1.11.1
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 +89 -93
- package/package.json +1 -1
- package/playground/showcase/src/app/components/button/button.html +3 -9
- package/playground/showcase/src/app/components/button/button.ts +28 -2
- package/playground/showcase/src/app/components/carousel/carousel.html +33 -1
- package/playground/showcase/src/app/components/carousel/carousel.ts +251 -199
- package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.html +186 -114
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +291 -28
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +825 -404
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +36 -9
- package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +326 -253
- package/playground/showcase/src/app/pages/documentation/components/components.html +136 -74
- package/playground/showcase/src/app/pages/documentation/components/input-docs/input-docs.html +370 -292
- package/playground/showcase/src/app/pages/documentation/documentation.html +204 -153
- package/playground/showcase/src/app/pages/home/home.html +153 -50
- package/playground/showcase/src/app/pages/home/home.ts +2 -1
- package/playground/showcase/src/app/pages/mcp/mcp.html +235 -179
- package/playground/showcase/src/index.html +13 -6
|
@@ -1,196 +1,252 @@
|
|
|
1
|
-
<
|
|
2
|
-
<div class="
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<!-- Installation Section -->
|
|
17
|
-
<section class="mb-8">
|
|
18
|
-
<h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
|
|
19
|
-
Installation
|
|
20
|
-
</h2>
|
|
21
|
-
|
|
22
|
-
<div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 mb-4">
|
|
23
|
-
<code class="text-[#0a0a0a] dark:text-white">
|
|
24
|
-
<pre class="m-0">npm install -g wally-ui-mcp</pre>
|
|
25
|
-
</code>
|
|
26
|
-
</div>
|
|
27
|
-
</section>
|
|
28
|
-
|
|
29
|
-
<!-- Configuration Section -->
|
|
30
|
-
<section class="mb-8">
|
|
31
|
-
<h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
|
|
32
|
-
Configuration
|
|
33
|
-
</h2>
|
|
34
|
-
|
|
35
|
-
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
36
|
-
Add to your Claude Desktop configuration file:
|
|
37
|
-
</p>
|
|
38
|
-
|
|
39
|
-
<div class="mb-4">
|
|
40
|
-
<p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
|
|
41
|
-
<strong>Mac:</strong> <code
|
|
42
|
-
class="bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">~/Library/Application Support/Claude/claude_desktop_config.json</code>
|
|
1
|
+
<main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
|
|
2
|
+
<div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
|
|
3
|
+
|
|
4
|
+
<!-- Breadcrumb Navigation -->
|
|
5
|
+
<nav class="mb-8" aria-label="Breadcrumb navigation">
|
|
6
|
+
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
7
|
+
</nav>
|
|
8
|
+
|
|
9
|
+
<!-- Header -->
|
|
10
|
+
<header class="mb-12" role="banner">
|
|
11
|
+
<h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
|
|
12
|
+
<span aria-hidden="true">>_ </span>MCP Server
|
|
13
|
+
</h1>
|
|
14
|
+
<p class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4">
|
|
15
|
+
Model Context Protocol server for intelligent AI-powered component installation with Claude Desktop and other AI coding assistants.
|
|
43
16
|
</p>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
17
|
+
</header>
|
|
18
|
+
|
|
19
|
+
<!-- Installation Section -->
|
|
20
|
+
<section id="installation" class="mb-12" aria-labelledby="installation-heading">
|
|
21
|
+
<h2 id="installation-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
22
|
+
[ Installation ]
|
|
23
|
+
</h2>
|
|
24
|
+
|
|
25
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
|
|
26
|
+
aria-label="Installation command for Wally UI MCP Server">
|
|
27
|
+
<pre class="m-0">$ npm install -g wally-ui-mcp</pre>
|
|
28
|
+
</code>
|
|
29
|
+
</section>
|
|
30
|
+
|
|
31
|
+
<!-- Configuration Section -->
|
|
32
|
+
<section id="configuration" class="mb-12" aria-labelledby="configuration-heading">
|
|
33
|
+
<h2 id="configuration-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
34
|
+
[ Configuration ]
|
|
35
|
+
</h2>
|
|
36
|
+
|
|
37
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300 mb-4 leading-relaxed">
|
|
38
|
+
Add to your Claude Desktop configuration file:
|
|
47
39
|
</p>
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"args": ["wally-ui-mcp"],<br>
|
|
57
|
-
"env": {{ '{' }}{{ '}' }}<br>
|
|
58
|
-
{{ '}' }}<br>
|
|
59
|
-
{{ '}' }}<br>
|
|
60
|
-
{{ '}' }}
|
|
61
|
-
</code>
|
|
62
|
-
</div>
|
|
63
|
-
</section>
|
|
64
|
-
|
|
65
|
-
<!-- Features Section -->
|
|
66
|
-
<section class="mb-8">
|
|
67
|
-
<h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
|
|
68
|
-
Available Tools
|
|
69
|
-
</h2>
|
|
70
|
-
|
|
71
|
-
<div class="grid gap-4 md:grid-cols-2">
|
|
72
|
-
<div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
|
|
73
|
-
<h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
|
|
74
|
-
install-component
|
|
75
|
-
</h3>
|
|
76
|
-
<p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
|
|
77
|
-
Installs Wally UI components directly into your Angular project.
|
|
78
|
-
</p>
|
|
79
|
-
<code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
|
|
80
|
-
componentName: string
|
|
40
|
+
|
|
41
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700 mb-4" role="list" aria-label="Configuration file paths by operating system">
|
|
42
|
+
<div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
43
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2">
|
|
44
|
+
<span aria-hidden="true">> </span>Mac
|
|
45
|
+
</h3>
|
|
46
|
+
<code class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 block">
|
|
47
|
+
~/Library/Application Support/Claude/claude_desktop_config.json
|
|
81
48
|
</code>
|
|
82
|
-
|
|
49
|
+
</div>
|
|
83
50
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</p>
|
|
91
|
-
<code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
|
|
92
|
-
No parameters
|
|
51
|
+
<div class="p-4 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
52
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2">
|
|
53
|
+
<span aria-hidden="true">> </span>Windows
|
|
54
|
+
</h3>
|
|
55
|
+
<code class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 block">
|
|
56
|
+
%APPDATA%\Claude\claude_desktop_config.json
|
|
93
57
|
</code>
|
|
58
|
+
</div>
|
|
94
59
|
</div>
|
|
95
60
|
|
|
96
|
-
<
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
61
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300 mb-3 leading-relaxed">
|
|
62
|
+
Add the following configuration to your file:
|
|
63
|
+
</p>
|
|
64
|
+
|
|
65
|
+
<pre class="font-mono text-xs sm:text-sm text-[#0a0a0a] dark:text-white leading-tight bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 overflow-x-auto"
|
|
66
|
+
role="img"
|
|
67
|
+
aria-label="JSON configuration example for Claude Desktop MCP server integration">{{ '{' }}
|
|
68
|
+
"mcpServers": {{ '{' }}
|
|
69
|
+
"wally-ui": {{ '{' }}
|
|
70
|
+
"command": "npx",
|
|
71
|
+
"args": ["wally-ui-mcp"],
|
|
72
|
+
"env": {{ '{' }}{{ '}' }}
|
|
73
|
+
{{ '}' }}
|
|
74
|
+
{{ '}' }}
|
|
75
|
+
{{ '}' }}</pre>
|
|
76
|
+
</section>
|
|
77
|
+
|
|
78
|
+
<!-- Available Tools Section -->
|
|
79
|
+
<section id="available-tools" class="mb-12" aria-labelledby="tools-heading">
|
|
80
|
+
<h2 id="tools-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
81
|
+
[ Available Tools ]
|
|
82
|
+
</h2>
|
|
83
|
+
|
|
84
|
+
<div class="grid gap-0 md:grid-cols-2 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="MCP server tools and their descriptions">
|
|
85
|
+
<article class="p-4 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
86
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
87
|
+
<span aria-hidden="true">[ </span>install-component<span aria-hidden="true"> ]</span>
|
|
88
|
+
</h3>
|
|
89
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-2">
|
|
90
|
+
Installs Wally UI components directly into your Angular project.
|
|
91
|
+
</p>
|
|
92
|
+
<code class="text-xs text-neutral-500 dark:text-neutral-500">
|
|
104
93
|
componentName: string
|
|
105
94
|
</code>
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
95
|
+
</article>
|
|
96
|
+
|
|
97
|
+
<article class="p-4 border-b-2 md:border-b-0 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
98
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
99
|
+
<span aria-hidden="true">[ </span>list-components<span aria-hidden="true"> ]</span>
|
|
100
|
+
</h3>
|
|
101
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-2">
|
|
102
|
+
Lists all available components in the Wally UI library.
|
|
103
|
+
</p>
|
|
104
|
+
<code class="text-xs text-neutral-500 dark:text-neutral-500">
|
|
105
|
+
No parameters
|
|
106
|
+
</code>
|
|
107
|
+
</article>
|
|
108
|
+
|
|
109
|
+
<article class="p-4 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
110
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
111
|
+
<span aria-hidden="true">[ </span>validate-component<span aria-hidden="true"> ]</span>
|
|
112
|
+
</h3>
|
|
113
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-2">
|
|
114
|
+
Validates component structure and integrity.
|
|
115
|
+
</p>
|
|
116
|
+
<code class="text-xs text-neutral-500 dark:text-neutral-500">
|
|
117
|
+
componentName: string
|
|
118
|
+
</code>
|
|
119
|
+
</article>
|
|
120
|
+
|
|
121
|
+
<article class="p-4 border-b-2 md:border-b-0 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
122
|
+
<h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
|
|
123
|
+
<span aria-hidden="true">[ </span>generate-docs<span aria-hidden="true"> ]</span>
|
|
124
|
+
</h3>
|
|
125
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-2">
|
|
126
|
+
Generates documentation for components.
|
|
127
|
+
</p>
|
|
128
|
+
<code class="text-xs text-neutral-500 dark:text-neutral-500">
|
|
116
129
|
componentName: string
|
|
117
130
|
</code>
|
|
131
|
+
</article>
|
|
118
132
|
</div>
|
|
119
|
-
</
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
133
|
+
</section>
|
|
134
|
+
|
|
135
|
+
<!-- Usage Examples -->
|
|
136
|
+
<section id="usage-examples" class="mb-12" aria-labelledby="examples-heading">
|
|
137
|
+
<h2 id="examples-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
138
|
+
[ Usage Examples ]
|
|
139
|
+
</h2>
|
|
140
|
+
|
|
141
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700">
|
|
142
|
+
<div id="example-list" class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" aria-labelledby="example-list-heading">
|
|
143
|
+
<h3 id="example-list-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
144
|
+
<span aria-hidden="true">> </span>List Available Components
|
|
145
|
+
</h3>
|
|
146
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3">
|
|
147
|
+
Ask Claude to show you what components are available:
|
|
148
|
+
</p>
|
|
149
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
|
|
150
|
+
aria-label="Example prompt for listing components">
|
|
151
|
+
<pre class="m-0">"Show me the available Wally UI components"</pre>
|
|
152
|
+
</code>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<div id="example-install" class="p-4 bg-white dark:bg-[#0a0a0a]" aria-labelledby="example-install-heading">
|
|
156
|
+
<h3 id="example-install-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
|
|
157
|
+
<span aria-hidden="true">> </span>Install a Component
|
|
158
|
+
</h3>
|
|
159
|
+
<p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3">
|
|
160
|
+
Ask Claude to install a specific component in your project:
|
|
161
|
+
</p>
|
|
162
|
+
<code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
|
|
163
|
+
aria-label="Example prompt for installing button component">
|
|
164
|
+
<pre class="m-0">"Install the button component from Wally UI in my Angular project"</pre>
|
|
165
|
+
</code>
|
|
140
166
|
</div>
|
|
141
167
|
</div>
|
|
168
|
+
</section>
|
|
169
|
+
|
|
170
|
+
<!-- Requirements -->
|
|
171
|
+
<section id="requirements" class="mb-12" aria-labelledby="requirements-heading">
|
|
172
|
+
<h2 id="requirements-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
173
|
+
[ Requirements ]
|
|
174
|
+
</h2>
|
|
175
|
+
|
|
176
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="System requirements for MCP server">
|
|
177
|
+
<div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
178
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
|
|
179
|
+
<span aria-hidden="true">> </span>Node.js 18+
|
|
180
|
+
</p>
|
|
181
|
+
</div>
|
|
142
182
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
183
|
+
<div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
184
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
|
|
185
|
+
<span aria-hidden="true">> </span>Claude Desktop with MCP support
|
|
186
|
+
</p>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
190
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
|
|
191
|
+
<span aria-hidden="true">> </span>Angular project (for component installation)
|
|
192
|
+
</p>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class="p-4 bg-white dark:bg-[#0a0a0a]" role="listitem">
|
|
196
|
+
<p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
|
|
197
|
+
<span aria-hidden="true">> </span>Tailwind CSS configured in your project
|
|
198
|
+
</p>
|
|
154
199
|
</div>
|
|
155
200
|
</div>
|
|
156
|
-
</
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
201
|
+
</section>
|
|
202
|
+
|
|
203
|
+
<!-- Links -->
|
|
204
|
+
<section id="links" class="mb-12" aria-labelledby="links-heading">
|
|
205
|
+
<h2 id="links-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
|
|
206
|
+
[ Links ]
|
|
207
|
+
</h2>
|
|
208
|
+
|
|
209
|
+
<div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="External resources and documentation links">
|
|
210
|
+
<a href="https://www.npmjs.com/package/wally-ui-mcp" target="_blank"
|
|
211
|
+
class="block p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
212
|
+
rel="noopener noreferrer"
|
|
213
|
+
role="listitem"
|
|
214
|
+
aria-label="View Wally UI MCP Server package on NPM (opens in new tab)">
|
|
215
|
+
<span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-white dark:hover:text-[#0a0a0a] underline underline-offset-4 transition-colors duration-150">
|
|
216
|
+
NPM Package
|
|
217
|
+
</span>
|
|
218
|
+
</a>
|
|
219
|
+
|
|
220
|
+
<a href="https://github.com/WalissonCF/wally-ui" target="_blank"
|
|
221
|
+
class="block p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
222
|
+
rel="noopener noreferrer"
|
|
223
|
+
role="listitem"
|
|
224
|
+
aria-label="View Wally UI source code on GitHub (opens in new tab)">
|
|
225
|
+
<span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-white dark:hover:text-[#0a0a0a] underline underline-offset-4 transition-colors duration-150">
|
|
226
|
+
GitHub Repository
|
|
227
|
+
</span>
|
|
228
|
+
</a>
|
|
229
|
+
|
|
230
|
+
<a href="https://modelcontextprotocol.io/" target="_blank"
|
|
231
|
+
class="block p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
232
|
+
rel="noopener noreferrer"
|
|
233
|
+
role="listitem"
|
|
234
|
+
aria-label="Learn about Model Context Protocol specification (opens in new tab)">
|
|
235
|
+
<span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-white dark:hover:text-[#0a0a0a] underline underline-offset-4 transition-colors duration-150">
|
|
236
|
+
Model Context Protocol
|
|
237
|
+
</span>
|
|
238
|
+
</a>
|
|
239
|
+
|
|
240
|
+
<a href="/documentation/components"
|
|
241
|
+
class="block p-4 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
|
|
242
|
+
role="listitem"
|
|
243
|
+
aria-label="Browse all available Wally UI components with examples and documentation">
|
|
244
|
+
<span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-white dark:hover:text-[#0a0a0a] underline underline-offset-4 transition-colors duration-150">
|
|
245
|
+
Browse Components
|
|
246
|
+
</span>
|
|
247
|
+
</a>
|
|
248
|
+
</div>
|
|
249
|
+
</section>
|
|
250
|
+
|
|
251
|
+
</div>
|
|
252
|
+
</main>
|
|
@@ -48,12 +48,19 @@
|
|
|
48
48
|
|
|
49
49
|
<script>
|
|
50
50
|
// Tailwind V4
|
|
51
|
-
|
|
52
|
-
"dark"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
function updateTheme() {
|
|
52
|
+
const isDark = localStorage.theme === "dark" ||
|
|
53
|
+
(!("theme" in localStorage) &&
|
|
54
|
+
window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
55
|
+
|
|
56
|
+
document.documentElement.classList.toggle("dark", isDark);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
// Initial theme
|
|
60
|
+
updateTheme();
|
|
61
|
+
|
|
62
|
+
// Listen for system theme changes
|
|
63
|
+
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateTheme);
|
|
57
64
|
</script>
|
|
58
65
|
|
|
59
66
|
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
|