wally-ui 1.10.0 → 1.11.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/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/pages/documentation/components/button-docs/button-docs.examples.ts +177 -28
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +517 -364
- package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +26 -10
- package/playground/showcase/src/index.html +13 -6
package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html
CHANGED
|
@@ -4,11 +4,13 @@
|
|
|
4
4
|
<wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
+
<!-- Header -->
|
|
7
8
|
<h1 class="text-2xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
|
|
8
9
|
Button
|
|
9
10
|
</h1>
|
|
10
11
|
<p class="text-gray-700 dark:text-gray-400 mb-4">
|
|
11
|
-
A
|
|
12
|
+
A production-ready button component with multiple variants, loading states, notifications, and comprehensive
|
|
13
|
+
accessibility support. Built with Angular Signals and optimized for modern applications.
|
|
12
14
|
</p>
|
|
13
15
|
|
|
14
16
|
<!-- AI Prompts -->
|
|
@@ -19,7 +21,6 @@
|
|
|
19
21
|
<path fill="currentColor"
|
|
20
22
|
d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z" />
|
|
21
23
|
</svg>
|
|
22
|
-
|
|
23
24
|
Open in Claude
|
|
24
25
|
</a>
|
|
25
26
|
|
|
@@ -39,7 +40,6 @@
|
|
|
39
40
|
<path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
|
|
40
41
|
d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
|
|
41
42
|
</svg>
|
|
42
|
-
|
|
43
43
|
Open in ChatGPT
|
|
44
44
|
</a>
|
|
45
45
|
</div>
|
|
@@ -52,60 +52,6 @@
|
|
|
52
52
|
</div>
|
|
53
53
|
</section>
|
|
54
54
|
|
|
55
|
-
<!-- Preview -->
|
|
56
|
-
<section class="mb-8">
|
|
57
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Preview</h2>
|
|
58
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] text-center">
|
|
59
|
-
<div class="flex flex-col gap-4">
|
|
60
|
-
<wally-button>Wally Button</wally-button>
|
|
61
|
-
<wally-button>
|
|
62
|
-
Send
|
|
63
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
64
|
-
stroke="currentColor" class="size-5">
|
|
65
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
66
|
-
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
67
|
-
</svg>
|
|
68
|
-
</wally-button>
|
|
69
|
-
<wally-button [disabled]="true">Disabled</wally-button>
|
|
70
|
-
<wally-button [loading]="true">
|
|
71
|
-
Loading
|
|
72
|
-
</wally-button>
|
|
73
|
-
<wally-button variant="primary">Primary Button</wally-button>
|
|
74
|
-
<wally-button variant="secondary">Secondary Button</wally-button>
|
|
75
|
-
<wally-button variant="secondary" [disabled]="true">Secondary Disabled</wally-button>
|
|
76
|
-
<wally-button variant="secondary" [loading]="true">Secondary Loading</wally-button>
|
|
77
|
-
|
|
78
|
-
<div class="w-full flex justify-center items-center gap-2">
|
|
79
|
-
<div class="w-full">
|
|
80
|
-
<wally-button [showNotification]="true">
|
|
81
|
-
Messages
|
|
82
|
-
</wally-button>
|
|
83
|
-
</div>
|
|
84
|
-
|
|
85
|
-
<div class="flex justify-center">
|
|
86
|
-
<wally-button [showNotification]="true">
|
|
87
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
88
|
-
stroke-width="1.5" stroke="currentColor" class="size-5">
|
|
89
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
90
|
-
d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
|
|
91
|
-
</svg>
|
|
92
|
-
</wally-button>
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
<div class="flex justify-center">
|
|
96
|
-
<wally-button [showNotification]="true">
|
|
97
|
-
<svg slot="icon-left" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
98
|
-
stroke-width="1.5" stroke="currentColor" class="size-5">
|
|
99
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
100
|
-
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
101
|
-
</svg>
|
|
102
|
-
</wally-button>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
</section>
|
|
108
|
-
|
|
109
55
|
<!-- Import -->
|
|
110
56
|
<section class="mb-8">
|
|
111
57
|
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
|
|
@@ -113,7 +59,6 @@
|
|
|
113
59
|
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
114
60
|
<pre><code [innerHTML]="importCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
115
61
|
</div>
|
|
116
|
-
|
|
117
62
|
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
118
63
|
<pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
119
64
|
</div>
|
|
@@ -122,194 +67,218 @@
|
|
|
122
67
|
|
|
123
68
|
<!-- Basic Usage -->
|
|
124
69
|
<section class="mb-8">
|
|
125
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
<div class="
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
70
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Basic Usage</h2>
|
|
71
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
72
|
+
<pre><code [innerHTML]="basicUsageTemplateCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
75
|
+
<wally-button>Click me</wally-button>
|
|
76
|
+
</div>
|
|
77
|
+
</section>
|
|
78
|
+
|
|
79
|
+
<!-- All Variants Preview -->
|
|
80
|
+
<section class="mb-8">
|
|
81
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">All Variants</h2>
|
|
82
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
83
|
+
<div class="flex flex-col gap-4">
|
|
84
|
+
<wally-button variant="primary">Primary</wally-button>
|
|
85
|
+
<wally-button variant="secondary">Secondary</wally-button>
|
|
86
|
+
<wally-button variant="destructive">Destructive</wally-button>
|
|
87
|
+
<wally-button variant="outline">Outline</wally-button>
|
|
88
|
+
<wally-button variant="ghost">Ghost</wally-button>
|
|
89
|
+
<wally-button variant="link" href="/components">Link</wally-button>
|
|
137
90
|
</div>
|
|
138
91
|
</div>
|
|
139
92
|
</section>
|
|
140
93
|
|
|
141
|
-
<!--
|
|
94
|
+
<!-- Variants Documentation -->
|
|
142
95
|
<section class="mb-8">
|
|
143
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
<wally-button variant="primary">
|
|
96
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Variants</h2>
|
|
97
|
+
|
|
98
|
+
<!-- Primary -->
|
|
99
|
+
<div class="mb-6">
|
|
100
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Primary (Default)</h3>
|
|
101
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
102
|
+
High emphasis. Use for main actions and CTAs.
|
|
103
|
+
</p>
|
|
104
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
105
|
+
<pre><code [innerHTML]="primaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
108
|
+
<div class="flex flex-col gap-2">
|
|
109
|
+
<wally-button variant="primary">Primary</wally-button>
|
|
110
|
+
<wally-button variant="primary" [disabled]="true">Disabled</wally-button>
|
|
111
|
+
<wally-button variant="primary" [loading]="true">Loading</wally-button>
|
|
158
112
|
</div>
|
|
159
113
|
</div>
|
|
114
|
+
</div>
|
|
160
115
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
</
|
|
116
|
+
<!-- Secondary -->
|
|
117
|
+
<div class="mb-6">
|
|
118
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Secondary</h3>
|
|
119
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
120
|
+
Medium emphasis. Use for secondary actions.
|
|
121
|
+
</p>
|
|
122
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
123
|
+
<pre><code [innerHTML]="secondaryVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
126
|
+
<div class="flex flex-col gap-2">
|
|
127
|
+
<wally-button variant="secondary">Secondary</wally-button>
|
|
128
|
+
<wally-button variant="secondary" [disabled]="true">Disabled</wally-button>
|
|
129
|
+
<wally-button variant="secondary" [loading]="true">Loading</wally-button>
|
|
175
130
|
</div>
|
|
176
131
|
</div>
|
|
177
132
|
</div>
|
|
178
|
-
</section>
|
|
179
133
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
<
|
|
194
|
-
</div>
|
|
195
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
196
|
-
<wally-button [disabled]="true">Disabled</wally-button>
|
|
134
|
+
<!-- Destructive -->
|
|
135
|
+
<div class="mb-6">
|
|
136
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Destructive</h3>
|
|
137
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
138
|
+
Use for dangerous actions like delete or remove.
|
|
139
|
+
</p>
|
|
140
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
141
|
+
<pre><code [innerHTML]="destructiveVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
144
|
+
<div class="flex flex-col gap-2">
|
|
145
|
+
<wally-button variant="destructive">Delete</wally-button>
|
|
146
|
+
<wally-button variant="destructive" [disabled]="true">Disabled</wally-button>
|
|
147
|
+
<wally-button variant="destructive" [loading]="true">Deleting...</wally-button>
|
|
197
148
|
</div>
|
|
198
149
|
</div>
|
|
150
|
+
</div>
|
|
199
151
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
152
|
+
<!-- Outline -->
|
|
153
|
+
<div class="mb-6">
|
|
154
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Outline</h3>
|
|
155
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
156
|
+
Low emphasis with border. Use for tertiary actions.
|
|
157
|
+
</p>
|
|
158
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
159
|
+
<pre><code [innerHTML]="outlineVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
160
|
+
</div>
|
|
161
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
162
|
+
<div class="flex flex-col gap-2">
|
|
163
|
+
<wally-button variant="outline">Outline</wally-button>
|
|
164
|
+
<wally-button variant="outline" [disabled]="true">Disabled</wally-button>
|
|
165
|
+
<wally-button variant="outline" [loading]="true">Loading</wally-button>
|
|
210
166
|
</div>
|
|
211
167
|
</div>
|
|
168
|
+
</div>
|
|
212
169
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
170
|
+
<!-- Ghost -->
|
|
171
|
+
<div class="mb-6">
|
|
172
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Ghost</h3>
|
|
173
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
174
|
+
Minimal styling. Use for less prominent actions.
|
|
175
|
+
</p>
|
|
176
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
177
|
+
<pre><code [innerHTML]="ghostVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
180
|
+
<div class="flex flex-col gap-2">
|
|
181
|
+
<wally-button variant="ghost">Ghost</wally-button>
|
|
182
|
+
<wally-button variant="ghost" [disabled]="true">Disabled</wally-button>
|
|
183
|
+
<wally-button variant="ghost" [loading]="true">Loading</wally-button>
|
|
223
184
|
</div>
|
|
224
185
|
</div>
|
|
225
186
|
</div>
|
|
226
|
-
</section>
|
|
227
187
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
<wally-button
|
|
188
|
+
<!-- Link -->
|
|
189
|
+
<div class="mb-6">
|
|
190
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Link</h3>
|
|
191
|
+
<p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
|
|
192
|
+
Styled as a link. Supports internal routing and external URLs.
|
|
193
|
+
</p>
|
|
194
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
195
|
+
<pre><code [innerHTML]="linkVariantCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
198
|
+
<div class="flex flex-col gap-2">
|
|
199
|
+
<wally-button variant="link" href="/components">Internal Link</wally-button>
|
|
200
|
+
<wally-button variant="link" href="https://github.com">External Link</wally-button>
|
|
201
|
+
<wally-button variant="link" [disabled]="true">Disabled</wally-button>
|
|
242
202
|
</div>
|
|
243
203
|
</div>
|
|
244
204
|
</div>
|
|
245
205
|
</section>
|
|
246
206
|
|
|
247
|
-
<!--
|
|
207
|
+
<!-- Production Examples -->
|
|
248
208
|
<section class="mb-8">
|
|
249
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
<div>
|
|
255
|
-
<
|
|
256
|
-
|
|
257
|
-
|
|
209
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Production Examples</h2>
|
|
210
|
+
|
|
211
|
+
<!-- CTA -->
|
|
212
|
+
<div class="mb-6">
|
|
213
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Call-to-Action Button</h3>
|
|
214
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
215
|
+
<pre><code [innerHTML]="ctaExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
218
|
+
<wally-button>
|
|
219
|
+
Get Started Free
|
|
220
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
221
|
+
stroke="currentColor" class="size-5">
|
|
222
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
|
223
|
+
</svg>
|
|
224
|
+
</wally-button>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<!-- Login Form -->
|
|
229
|
+
<div class="mb-6">
|
|
230
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Login Form</h3>
|
|
231
|
+
<div class="space-y-4">
|
|
232
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
233
|
+
<pre><code [innerHTML]="loginExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
258
234
|
</div>
|
|
259
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg
|
|
260
|
-
<pre><code [innerHTML]="
|
|
235
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
236
|
+
<pre><code [innerHTML]="loginExampleTsCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
261
237
|
</div>
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
{{ clickMessage() }}
|
|
268
|
-
</p>
|
|
269
|
-
}
|
|
270
|
-
</div>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] mt-4">
|
|
240
|
+
<div class="flex gap-2">
|
|
241
|
+
<wally-button type="submit">Sign In</wally-button>
|
|
242
|
+
<wally-button variant="secondary">Create Account</wally-button>
|
|
271
243
|
</div>
|
|
272
244
|
</div>
|
|
273
245
|
</div>
|
|
274
|
-
</section>
|
|
275
246
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
287
|
-
<pre><code [innerHTML]="iconCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
247
|
+
<!-- Delete Confirmation -->
|
|
248
|
+
<div class="mb-6">
|
|
249
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Delete Confirmation Modal</h3>
|
|
250
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
251
|
+
<pre><code [innerHTML]="deleteExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
254
|
+
<div class="flex gap-2 justify-end">
|
|
255
|
+
<wally-button variant="ghost">Cancel</wally-button>
|
|
256
|
+
<wally-button variant="destructive">Delete Account</wally-button>
|
|
288
257
|
</div>
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
<!-- Dashboard Actions -->
|
|
262
|
+
<div class="mb-6">
|
|
263
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Dashboard Actions</h3>
|
|
264
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
265
|
+
<pre><code [innerHTML]="dashboardExampleCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
268
|
+
<div class="flex gap-2">
|
|
269
|
+
<wally-button variant="outline">
|
|
270
|
+
Export
|
|
292
271
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
293
272
|
stroke="currentColor" class="size-5">
|
|
294
273
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
295
|
-
d="
|
|
274
|
+
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
296
275
|
</svg>
|
|
297
276
|
</wally-button>
|
|
298
|
-
</div>
|
|
299
|
-
</div>
|
|
300
|
-
|
|
301
|
-
<!-- Icon Only -->
|
|
302
|
-
<div>
|
|
303
|
-
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon Only</h3>
|
|
304
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
305
|
-
<pre><code [innerHTML]="iconNotificationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
306
|
-
</div>
|
|
307
|
-
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
308
277
|
<wally-button>
|
|
309
|
-
|
|
278
|
+
Create New
|
|
279
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
310
280
|
stroke="currentColor" class="size-5">
|
|
311
|
-
<path stroke-linecap="round" stroke-linejoin="round"
|
|
312
|
-
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
281
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
313
282
|
</svg>
|
|
314
283
|
</wally-button>
|
|
315
284
|
</div>
|
|
@@ -317,52 +286,216 @@
|
|
|
317
286
|
</div>
|
|
318
287
|
</section>
|
|
319
288
|
|
|
289
|
+
<!-- States -->
|
|
290
|
+
<section class="mb-8">
|
|
291
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">States</h2>
|
|
292
|
+
|
|
293
|
+
<!-- Disabled -->
|
|
294
|
+
<div class="mb-6">
|
|
295
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Disabled</h3>
|
|
296
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
297
|
+
<pre><code [innerHTML]="disabledCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
298
|
+
</div>
|
|
299
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
300
|
+
<wally-button [disabled]="true">Disabled Button</wally-button>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
|
|
304
|
+
<!-- Loading -->
|
|
305
|
+
<div class="mb-6">
|
|
306
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Loading</h3>
|
|
307
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
308
|
+
<pre><code [innerHTML]="loadingCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
311
|
+
<wally-button [loading]="true">Loading...</wally-button>
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<!-- Notification -->
|
|
316
|
+
<div class="mb-6">
|
|
317
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">With Notification Badge</h3>
|
|
318
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
319
|
+
<pre><code [innerHTML]="notificationButtonCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
322
|
+
<wally-button [showNotification]="true" ariaLabel="View messages">
|
|
323
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
324
|
+
stroke="currentColor" class="size-5">
|
|
325
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
326
|
+
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
|
|
327
|
+
</svg>
|
|
328
|
+
</wally-button>
|
|
329
|
+
</div>
|
|
330
|
+
</div>
|
|
331
|
+
</section>
|
|
332
|
+
|
|
333
|
+
<!-- Button Types -->
|
|
334
|
+
<section class="mb-8">
|
|
335
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Button Types</h2>
|
|
336
|
+
|
|
337
|
+
<!-- Submit -->
|
|
338
|
+
<div class="mb-6">
|
|
339
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Submit Button</h3>
|
|
340
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
341
|
+
<pre><code [innerHTML]="submitCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
344
|
+
<wally-button type="submit">Submit Form</wally-button>
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
|
|
348
|
+
<!-- Reset -->
|
|
349
|
+
<div class="mb-6">
|
|
350
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Reset Button</h3>
|
|
351
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
352
|
+
<pre><code [innerHTML]="resetCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
355
|
+
<wally-button type="reset" variant="ghost">Reset</wally-button>
|
|
356
|
+
</div>
|
|
357
|
+
</div>
|
|
358
|
+
</section>
|
|
359
|
+
|
|
360
|
+
<!-- Events -->
|
|
361
|
+
<section class="mb-8">
|
|
362
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Click Events</h2>
|
|
363
|
+
|
|
364
|
+
<div class="space-y-4">
|
|
365
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
366
|
+
<pre><code [innerHTML]="clickCodeHTML" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
369
|
+
<pre><code [innerHTML]="clickCodeTs" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
370
|
+
</div>
|
|
371
|
+
</div>
|
|
372
|
+
|
|
373
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212] mt-4">
|
|
374
|
+
<div class="flex flex-col gap-2 text-center">
|
|
375
|
+
<wally-button (click)="handleClick()">Click Me</wally-button>
|
|
376
|
+
@if (clickMessage()) {
|
|
377
|
+
<p class="text-sm text-green-600 dark:text-green-400 font-medium">
|
|
378
|
+
{{ clickMessage() }}
|
|
379
|
+
</p>
|
|
380
|
+
}
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</section>
|
|
384
|
+
|
|
385
|
+
<!-- Icons -->
|
|
386
|
+
<section class="mb-8">
|
|
387
|
+
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Button with Icons</h2>
|
|
388
|
+
|
|
389
|
+
<!-- Icon with Text -->
|
|
390
|
+
<div class="mb-6">
|
|
391
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon with Text</h3>
|
|
392
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
393
|
+
<pre><code [innerHTML]="iconCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
394
|
+
</div>
|
|
395
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
396
|
+
<wally-button>
|
|
397
|
+
Save Changes
|
|
398
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
399
|
+
stroke="currentColor" class="size-5">
|
|
400
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
401
|
+
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
402
|
+
</svg>
|
|
403
|
+
</wally-button>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<!-- Icon Only -->
|
|
408
|
+
<div class="mb-6">
|
|
409
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon Only</h3>
|
|
410
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
411
|
+
<pre><code [innerHTML]="iconOnlyCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
412
|
+
</div>
|
|
413
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
414
|
+
<wally-button ariaLabel="Notifications">
|
|
415
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
416
|
+
stroke="currentColor" class="size-5">
|
|
417
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
418
|
+
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
|
|
419
|
+
</svg>
|
|
420
|
+
</wally-button>
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
|
|
424
|
+
<!-- Icon Left -->
|
|
425
|
+
<div class="mb-6">
|
|
426
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon Left</h3>
|
|
427
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
428
|
+
<pre><code [innerHTML]="iconLeftCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
429
|
+
</div>
|
|
430
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
431
|
+
<wally-button>
|
|
432
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
433
|
+
stroke="currentColor" class="size-5">
|
|
434
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
|
435
|
+
</svg>
|
|
436
|
+
Back
|
|
437
|
+
</wally-button>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
</section>
|
|
441
|
+
|
|
320
442
|
<!-- Accessibility -->
|
|
321
443
|
<section class="mb-8">
|
|
322
444
|
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Accessibility</h2>
|
|
323
445
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
<
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
</div>
|
|
446
|
+
<!-- ARIA Label -->
|
|
447
|
+
<div class="mb-6">
|
|
448
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">ARIA Label (Essential for Icon-Only
|
|
449
|
+
Buttons)</h3>
|
|
450
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
451
|
+
<pre><code [innerHTML]="ariaLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
452
|
+
</div>
|
|
453
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
454
|
+
<wally-button ariaLabel="Save document">
|
|
455
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
456
|
+
stroke="currentColor" class="size-5">
|
|
457
|
+
<path stroke-linecap="round" stroke-linejoin="round"
|
|
458
|
+
d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
|
|
459
|
+
</svg>
|
|
460
|
+
</wally-button>
|
|
340
461
|
</div>
|
|
462
|
+
</div>
|
|
341
463
|
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
</div>
|
|
464
|
+
<!-- Toggle Button -->
|
|
465
|
+
<div class="mb-6">
|
|
466
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Toggle Button with ARIA Pressed</h3>
|
|
467
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
468
|
+
<pre><code [innerHTML]="ariaPressedCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
469
|
+
</div>
|
|
470
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
471
|
+
<wally-button [ariaPressed]="toggleState()">
|
|
472
|
+
{{ toggleState() ? 'On' : 'Off' }}
|
|
473
|
+
</wally-button>
|
|
353
474
|
</div>
|
|
475
|
+
</div>
|
|
354
476
|
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
477
|
+
<!-- Loading State ARIA -->
|
|
478
|
+
<div class="mb-6">
|
|
479
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Loading State (Automatic ARIA Busy)</h3>
|
|
480
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
481
|
+
<pre><code [innerHTML]="ariaBusyCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
482
|
+
</div>
|
|
483
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
484
|
+
<wally-button [loading]="true">Processing...</wally-button>
|
|
485
|
+
</div>
|
|
486
|
+
</div>
|
|
487
|
+
|
|
488
|
+
<!-- ARIA Described By -->
|
|
489
|
+
<div class="mb-6">
|
|
490
|
+
<h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">ARIA Described By</h3>
|
|
491
|
+
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
|
|
492
|
+
<pre><code [innerHTML]="ariaDescribedByCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
|
|
493
|
+
</div>
|
|
494
|
+
<div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
|
|
495
|
+
<wally-button ariaDescribedBy="save-description">Save</wally-button>
|
|
496
|
+
<p id="save-description" class="text-xs text-gray-600 dark:text-gray-400 mt-2">
|
|
497
|
+
Saves your changes permanently
|
|
498
|
+
</p>
|
|
366
499
|
</div>
|
|
367
500
|
</div>
|
|
368
501
|
</section>
|
|
@@ -371,75 +504,96 @@
|
|
|
371
504
|
<section class="mb-8">
|
|
372
505
|
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">API Reference</h2>
|
|
373
506
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
<
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
<
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
<
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
<
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
<
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
<
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
507
|
+
<!-- Input Properties -->
|
|
508
|
+
<div class="mb-6">
|
|
509
|
+
<h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Input Properties</h3>
|
|
510
|
+
<div
|
|
511
|
+
class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
|
|
512
|
+
<div class="overflow-x-auto">
|
|
513
|
+
<table class="w-full text-sm">
|
|
514
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
515
|
+
<tr>
|
|
516
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
|
|
517
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
|
|
518
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Default</th>
|
|
519
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
520
|
+
</tr>
|
|
521
|
+
</thead>
|
|
522
|
+
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
523
|
+
<tr>
|
|
524
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">type</td>
|
|
525
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
526
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">'button'</td>
|
|
527
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">HTML button type: 'button', 'submit', or 'reset'
|
|
528
|
+
</td>
|
|
529
|
+
</tr>
|
|
530
|
+
<tr>
|
|
531
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">variant</td>
|
|
532
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">'primary' | 'secondary' |
|
|
533
|
+
'destructive' | 'outline' | 'ghost' | 'link'</td>
|
|
534
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">'primary'</td>
|
|
535
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Visual style variant of the button</td>
|
|
536
|
+
</tr>
|
|
537
|
+
<tr>
|
|
538
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">href</td>
|
|
539
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
540
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
541
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">URL for navigation (used with variant="link").
|
|
542
|
+
Supports internal routes and external URLs</td>
|
|
543
|
+
</tr>
|
|
544
|
+
<tr>
|
|
545
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">disabled</td>
|
|
546
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
547
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
548
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Disables the button, preventing user interaction
|
|
549
|
+
</td>
|
|
550
|
+
</tr>
|
|
551
|
+
<tr>
|
|
552
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">loading</td>
|
|
553
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
554
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
555
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Shows loading spinner and disables button.
|
|
556
|
+
Automatically sets aria-busy="true"</td>
|
|
557
|
+
</tr>
|
|
558
|
+
<tr>
|
|
559
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">showNotification</td>
|
|
560
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean</td>
|
|
561
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">false</td>
|
|
562
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Shows animated notification badge in top-right
|
|
563
|
+
corner</td>
|
|
564
|
+
</tr>
|
|
565
|
+
<tr>
|
|
566
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaLabel</td>
|
|
567
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
568
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
569
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Accessible label for screen readers. Essential for
|
|
570
|
+
icon-only buttons</td>
|
|
571
|
+
</tr>
|
|
572
|
+
<tr>
|
|
573
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaPressed</td>
|
|
574
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">boolean | undefined</td>
|
|
575
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">undefined</td>
|
|
576
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Indicates pressed state for toggle buttons. Use
|
|
577
|
+
true/false for toggle functionality</td>
|
|
578
|
+
</tr>
|
|
579
|
+
<tr>
|
|
580
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">ariaDescribedBy</td>
|
|
581
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">string</td>
|
|
582
|
+
<td class="p-4 font-mono text-green-600 dark:text-green-400">''</td>
|
|
583
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">ID(s) of element(s) that describe the button for
|
|
584
|
+
screen readers</td>
|
|
585
|
+
</tr>
|
|
586
|
+
</tbody>
|
|
587
|
+
</table>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
|
|
592
|
+
<!-- Output Events -->
|
|
593
|
+
<div class="mb-6">
|
|
594
|
+
<h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Output Events</h3>
|
|
595
|
+
<div
|
|
596
|
+
class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
|
|
443
597
|
<div class="overflow-x-auto">
|
|
444
598
|
<table class="w-full text-sm">
|
|
445
599
|
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
@@ -453,71 +607,70 @@
|
|
|
453
607
|
<tr>
|
|
454
608
|
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">click</td>
|
|
455
609
|
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">void</td>
|
|
456
|
-
<td class="p-4 text-gray-700 dark:text-gray-300">Emitted when button is clicked
|
|
610
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Emitted when button is clicked. Also handles
|
|
611
|
+
navigation for link variant</td>
|
|
457
612
|
</tr>
|
|
458
613
|
</tbody>
|
|
459
614
|
</table>
|
|
460
615
|
</div>
|
|
461
616
|
</div>
|
|
462
617
|
</div>
|
|
463
|
-
</section>
|
|
464
|
-
|
|
465
|
-
<!-- Under Construction -->
|
|
466
|
-
<section class="mb-8">
|
|
467
|
-
<h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Under Construction</h2>
|
|
468
|
-
|
|
469
|
-
<div class="space-y-4">
|
|
470
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
471
|
-
<div class="flex items-center gap-2 mb-2">
|
|
472
|
-
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Additional Button Variants</h3>
|
|
473
|
-
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
474
|
-
</div>
|
|
475
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
476
|
-
Additional button styles including outline, ghost, and destructive variants.
|
|
477
|
-
</p>
|
|
478
|
-
</div>
|
|
479
|
-
|
|
480
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
481
|
-
<div class="flex items-center gap-2 mb-2">
|
|
482
|
-
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Ripple Effect</h3>
|
|
483
|
-
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
484
|
-
</div>
|
|
485
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
486
|
-
Visual feedback with ripple animation on button press for enhanced user experience.
|
|
487
|
-
</p>
|
|
488
|
-
</div>
|
|
489
|
-
|
|
490
|
-
<div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
|
|
491
|
-
<div class="flex items-center gap-2 mb-2">
|
|
492
|
-
<h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Tooltip Support</h3>
|
|
493
|
-
<span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
|
|
494
|
-
</div>
|
|
495
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
496
|
-
Built-in tooltip integration for providing additional context and information.
|
|
497
|
-
</p>
|
|
498
|
-
</div>
|
|
499
618
|
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
619
|
+
<!-- Methods -->
|
|
620
|
+
<div class="mb-6">
|
|
621
|
+
<h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Methods</h3>
|
|
622
|
+
<div
|
|
623
|
+
class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
|
|
624
|
+
<div class="overflow-x-auto">
|
|
625
|
+
<table class="w-full text-sm">
|
|
626
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
627
|
+
<tr>
|
|
628
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Method</th>
|
|
629
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Parameters</th>
|
|
630
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Return</th>
|
|
631
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
632
|
+
</tr>
|
|
633
|
+
</thead>
|
|
634
|
+
<tbody>
|
|
635
|
+
<tr>
|
|
636
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">handleClick()</td>
|
|
637
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">event: MouseEvent</td>
|
|
638
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">void</td>
|
|
639
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Internal click handler. Manages navigation for link
|
|
640
|
+
variant and emits click event</td>
|
|
641
|
+
</tr>
|
|
642
|
+
</tbody>
|
|
643
|
+
</table>
|
|
504
644
|
</div>
|
|
505
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
506
|
-
Button that functions as a link with href support while maintaining button styling.
|
|
507
|
-
</p>
|
|
508
645
|
</div>
|
|
646
|
+
</div>
|
|
509
647
|
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
648
|
+
<!-- Computed Properties -->
|
|
649
|
+
<div class="mb-6">
|
|
650
|
+
<h3 class="text-md font-medium mb-4 text-[#0a0a0a] dark:text-white">Computed Properties</h3>
|
|
651
|
+
<div
|
|
652
|
+
class="bg-white dark:bg-[#0f0f0f] border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
|
|
653
|
+
<div class="overflow-x-auto">
|
|
654
|
+
<table class="w-full text-sm">
|
|
655
|
+
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
656
|
+
<tr>
|
|
657
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Property</th>
|
|
658
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Type</th>
|
|
659
|
+
<th class="text-left p-4 font-medium text-gray-900 dark:text-gray-100">Description</th>
|
|
660
|
+
</tr>
|
|
661
|
+
</thead>
|
|
662
|
+
<tbody>
|
|
663
|
+
<tr>
|
|
664
|
+
<td class="p-4 font-mono text-blue-600 dark:text-blue-400">variantClasses</td>
|
|
665
|
+
<td class="p-4 font-mono text-purple-600 dark:text-purple-400">Signal<string></td>
|
|
666
|
+
<td class="p-4 text-gray-700 dark:text-gray-300">Computed signal that returns CSS classes based on
|
|
667
|
+
variant. Automatically updates when variant changes</td>
|
|
668
|
+
</tr>
|
|
669
|
+
</tbody>
|
|
670
|
+
</table>
|
|
514
671
|
</div>
|
|
515
|
-
<p class="text-sm text-gray-700 dark:text-gray-400">
|
|
516
|
-
Group multiple buttons together with proper spacing and border handling.
|
|
517
|
-
</p>
|
|
518
672
|
</div>
|
|
519
673
|
</div>
|
|
520
674
|
</section>
|
|
521
|
-
|
|
522
675
|
</div>
|
|
523
|
-
</div>
|
|
676
|
+
</div>
|