@object-ui/components 2.0.0 → 3.0.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/.turbo/turbo-build.log +12 -12
- package/CHANGELOG.md +28 -0
- package/dist/index.css +1 -1
- package/dist/index.js +19610 -19344
- package/dist/index.umd.cjs +29 -29
- package/dist/src/custom/index.d.ts +2 -0
- package/dist/src/custom/view-skeleton.d.ts +37 -0
- package/dist/src/custom/view-states.d.ts +33 -0
- package/package.json +17 -17
- package/src/__tests__/__snapshots__/snapshot-critical.test.tsx.snap +811 -0
- package/src/__tests__/__snapshots__/snapshot.test.tsx.snap +327 -0
- package/src/__tests__/accessibility.test.tsx +137 -0
- package/src/__tests__/api-consistency.test.tsx +596 -0
- package/src/__tests__/color-contrast.test.tsx +212 -0
- package/src/__tests__/edge-cases.test.tsx +285 -0
- package/src/__tests__/snapshot-critical.test.tsx +317 -0
- package/src/__tests__/snapshot.test.tsx +205 -0
- package/src/__tests__/wcag-audit.test.tsx +493 -0
- package/src/custom/index.ts +2 -0
- package/src/custom/view-skeleton.tsx +243 -0
- package/src/custom/view-states.tsx +153 -0
- package/src/renderers/complex/data-table.tsx +28 -13
- package/src/renderers/complex/resizable.tsx +20 -17
- package/src/renderers/data-display/list.tsx +1 -1
- package/src/renderers/data-display/table.tsx +1 -1
- package/src/renderers/data-display/tree-view.tsx +2 -1
- package/src/renderers/form/form.tsx +10 -6
- package/src/renderers/layout/aspect-ratio.tsx +1 -1
- package/src/stories-json/Accessibility.mdx +297 -0
- package/src/stories-json/EdgeCases.stories.tsx +160 -0
- package/src/stories-json/GettingStarted.mdx +89 -0
- package/src/stories-json/Introduction.mdx +127 -0
- package/src/ui/slider.tsx +6 -2
- package/src/stories/Introduction.mdx +0 -61
|
@@ -0,0 +1,811 @@
|
|
|
1
|
+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
|
+
|
|
3
|
+
exports[`Accordion snapshots > renders accordion with first item expanded 1`] = `
|
|
4
|
+
<div
|
|
5
|
+
data-orientation="vertical"
|
|
6
|
+
>
|
|
7
|
+
<div
|
|
8
|
+
class="border-b"
|
|
9
|
+
data-orientation="vertical"
|
|
10
|
+
data-state="open"
|
|
11
|
+
>
|
|
12
|
+
<h3
|
|
13
|
+
class="flex"
|
|
14
|
+
data-orientation="vertical"
|
|
15
|
+
data-state="open"
|
|
16
|
+
>
|
|
17
|
+
<button
|
|
18
|
+
aria-controls="radix-_r_h_"
|
|
19
|
+
aria-disabled="true"
|
|
20
|
+
aria-expanded="true"
|
|
21
|
+
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
|
|
22
|
+
data-orientation="vertical"
|
|
23
|
+
data-radix-collection-item=""
|
|
24
|
+
data-state="open"
|
|
25
|
+
id="radix-_r_g_"
|
|
26
|
+
type="button"
|
|
27
|
+
>
|
|
28
|
+
Section One
|
|
29
|
+
<svg
|
|
30
|
+
aria-hidden="true"
|
|
31
|
+
class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"
|
|
32
|
+
fill="none"
|
|
33
|
+
height="24"
|
|
34
|
+
stroke="currentColor"
|
|
35
|
+
stroke-linecap="round"
|
|
36
|
+
stroke-linejoin="round"
|
|
37
|
+
stroke-width="2"
|
|
38
|
+
viewBox="0 0 24 24"
|
|
39
|
+
width="24"
|
|
40
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
41
|
+
>
|
|
42
|
+
<path
|
|
43
|
+
d="m6 9 6 6 6-6"
|
|
44
|
+
/>
|
|
45
|
+
</svg>
|
|
46
|
+
</button>
|
|
47
|
+
</h3>
|
|
48
|
+
<div
|
|
49
|
+
aria-labelledby="radix-_r_g_"
|
|
50
|
+
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
|
51
|
+
data-orientation="vertical"
|
|
52
|
+
data-state="open"
|
|
53
|
+
id="radix-_r_h_"
|
|
54
|
+
role="region"
|
|
55
|
+
style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width); transition-duration: 0s; animation-name: none;"
|
|
56
|
+
>
|
|
57
|
+
<div
|
|
58
|
+
class="pb-4 pt-0"
|
|
59
|
+
>
|
|
60
|
+
Content for section one.
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
<div
|
|
65
|
+
class="border-b"
|
|
66
|
+
data-orientation="vertical"
|
|
67
|
+
data-state="closed"
|
|
68
|
+
>
|
|
69
|
+
<h3
|
|
70
|
+
class="flex"
|
|
71
|
+
data-orientation="vertical"
|
|
72
|
+
data-state="closed"
|
|
73
|
+
>
|
|
74
|
+
<button
|
|
75
|
+
aria-controls="radix-_r_j_"
|
|
76
|
+
aria-expanded="false"
|
|
77
|
+
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
|
|
78
|
+
data-orientation="vertical"
|
|
79
|
+
data-radix-collection-item=""
|
|
80
|
+
data-state="closed"
|
|
81
|
+
id="radix-_r_i_"
|
|
82
|
+
type="button"
|
|
83
|
+
>
|
|
84
|
+
Section Two
|
|
85
|
+
<svg
|
|
86
|
+
aria-hidden="true"
|
|
87
|
+
class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"
|
|
88
|
+
fill="none"
|
|
89
|
+
height="24"
|
|
90
|
+
stroke="currentColor"
|
|
91
|
+
stroke-linecap="round"
|
|
92
|
+
stroke-linejoin="round"
|
|
93
|
+
stroke-width="2"
|
|
94
|
+
viewBox="0 0 24 24"
|
|
95
|
+
width="24"
|
|
96
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
97
|
+
>
|
|
98
|
+
<path
|
|
99
|
+
d="m6 9 6 6 6-6"
|
|
100
|
+
/>
|
|
101
|
+
</svg>
|
|
102
|
+
</button>
|
|
103
|
+
</h3>
|
|
104
|
+
<div
|
|
105
|
+
aria-labelledby="radix-_r_i_"
|
|
106
|
+
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
|
107
|
+
data-orientation="vertical"
|
|
108
|
+
data-state="closed"
|
|
109
|
+
hidden=""
|
|
110
|
+
id="radix-_r_j_"
|
|
111
|
+
role="region"
|
|
112
|
+
style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"
|
|
113
|
+
/>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
`;
|
|
117
|
+
|
|
118
|
+
exports[`Accordion snapshots > renders accordion with multiple items 1`] = `
|
|
119
|
+
<div
|
|
120
|
+
data-orientation="vertical"
|
|
121
|
+
>
|
|
122
|
+
<div
|
|
123
|
+
class="border-b"
|
|
124
|
+
data-orientation="vertical"
|
|
125
|
+
data-state="closed"
|
|
126
|
+
>
|
|
127
|
+
<h3
|
|
128
|
+
class="flex"
|
|
129
|
+
data-orientation="vertical"
|
|
130
|
+
data-state="closed"
|
|
131
|
+
>
|
|
132
|
+
<button
|
|
133
|
+
aria-controls="radix-_r_b_"
|
|
134
|
+
aria-expanded="false"
|
|
135
|
+
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
|
|
136
|
+
data-orientation="vertical"
|
|
137
|
+
data-radix-collection-item=""
|
|
138
|
+
data-state="closed"
|
|
139
|
+
id="radix-_r_a_"
|
|
140
|
+
type="button"
|
|
141
|
+
>
|
|
142
|
+
Is it accessible?
|
|
143
|
+
<svg
|
|
144
|
+
aria-hidden="true"
|
|
145
|
+
class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"
|
|
146
|
+
fill="none"
|
|
147
|
+
height="24"
|
|
148
|
+
stroke="currentColor"
|
|
149
|
+
stroke-linecap="round"
|
|
150
|
+
stroke-linejoin="round"
|
|
151
|
+
stroke-width="2"
|
|
152
|
+
viewBox="0 0 24 24"
|
|
153
|
+
width="24"
|
|
154
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
155
|
+
>
|
|
156
|
+
<path
|
|
157
|
+
d="m6 9 6 6 6-6"
|
|
158
|
+
/>
|
|
159
|
+
</svg>
|
|
160
|
+
</button>
|
|
161
|
+
</h3>
|
|
162
|
+
<div
|
|
163
|
+
aria-labelledby="radix-_r_a_"
|
|
164
|
+
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
|
165
|
+
data-orientation="vertical"
|
|
166
|
+
data-state="closed"
|
|
167
|
+
hidden=""
|
|
168
|
+
id="radix-_r_b_"
|
|
169
|
+
role="region"
|
|
170
|
+
style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"
|
|
171
|
+
/>
|
|
172
|
+
</div>
|
|
173
|
+
<div
|
|
174
|
+
class="border-b"
|
|
175
|
+
data-orientation="vertical"
|
|
176
|
+
data-state="closed"
|
|
177
|
+
>
|
|
178
|
+
<h3
|
|
179
|
+
class="flex"
|
|
180
|
+
data-orientation="vertical"
|
|
181
|
+
data-state="closed"
|
|
182
|
+
>
|
|
183
|
+
<button
|
|
184
|
+
aria-controls="radix-_r_d_"
|
|
185
|
+
aria-expanded="false"
|
|
186
|
+
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
|
|
187
|
+
data-orientation="vertical"
|
|
188
|
+
data-radix-collection-item=""
|
|
189
|
+
data-state="closed"
|
|
190
|
+
id="radix-_r_c_"
|
|
191
|
+
type="button"
|
|
192
|
+
>
|
|
193
|
+
Is it styled?
|
|
194
|
+
<svg
|
|
195
|
+
aria-hidden="true"
|
|
196
|
+
class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"
|
|
197
|
+
fill="none"
|
|
198
|
+
height="24"
|
|
199
|
+
stroke="currentColor"
|
|
200
|
+
stroke-linecap="round"
|
|
201
|
+
stroke-linejoin="round"
|
|
202
|
+
stroke-width="2"
|
|
203
|
+
viewBox="0 0 24 24"
|
|
204
|
+
width="24"
|
|
205
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
206
|
+
>
|
|
207
|
+
<path
|
|
208
|
+
d="m6 9 6 6 6-6"
|
|
209
|
+
/>
|
|
210
|
+
</svg>
|
|
211
|
+
</button>
|
|
212
|
+
</h3>
|
|
213
|
+
<div
|
|
214
|
+
aria-labelledby="radix-_r_c_"
|
|
215
|
+
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
|
216
|
+
data-orientation="vertical"
|
|
217
|
+
data-state="closed"
|
|
218
|
+
hidden=""
|
|
219
|
+
id="radix-_r_d_"
|
|
220
|
+
role="region"
|
|
221
|
+
style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"
|
|
222
|
+
/>
|
|
223
|
+
</div>
|
|
224
|
+
<div
|
|
225
|
+
class="border-b"
|
|
226
|
+
data-orientation="vertical"
|
|
227
|
+
data-state="closed"
|
|
228
|
+
>
|
|
229
|
+
<h3
|
|
230
|
+
class="flex"
|
|
231
|
+
data-orientation="vertical"
|
|
232
|
+
data-state="closed"
|
|
233
|
+
>
|
|
234
|
+
<button
|
|
235
|
+
aria-controls="radix-_r_f_"
|
|
236
|
+
aria-expanded="false"
|
|
237
|
+
class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180"
|
|
238
|
+
data-orientation="vertical"
|
|
239
|
+
data-radix-collection-item=""
|
|
240
|
+
data-state="closed"
|
|
241
|
+
id="radix-_r_e_"
|
|
242
|
+
type="button"
|
|
243
|
+
>
|
|
244
|
+
Is it animated?
|
|
245
|
+
<svg
|
|
246
|
+
aria-hidden="true"
|
|
247
|
+
class="lucide lucide-chevron-down h-4 w-4 shrink-0 transition-transform duration-200"
|
|
248
|
+
fill="none"
|
|
249
|
+
height="24"
|
|
250
|
+
stroke="currentColor"
|
|
251
|
+
stroke-linecap="round"
|
|
252
|
+
stroke-linejoin="round"
|
|
253
|
+
stroke-width="2"
|
|
254
|
+
viewBox="0 0 24 24"
|
|
255
|
+
width="24"
|
|
256
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
257
|
+
>
|
|
258
|
+
<path
|
|
259
|
+
d="m6 9 6 6 6-6"
|
|
260
|
+
/>
|
|
261
|
+
</svg>
|
|
262
|
+
</button>
|
|
263
|
+
</h3>
|
|
264
|
+
<div
|
|
265
|
+
aria-labelledby="radix-_r_e_"
|
|
266
|
+
class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
|
267
|
+
data-orientation="vertical"
|
|
268
|
+
data-state="closed"
|
|
269
|
+
hidden=""
|
|
270
|
+
id="radix-_r_f_"
|
|
271
|
+
role="region"
|
|
272
|
+
style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"
|
|
273
|
+
/>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
`;
|
|
277
|
+
|
|
278
|
+
exports[`Alert snapshots > renders default alert with title and description 1`] = `
|
|
279
|
+
<div
|
|
280
|
+
class="relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground bg-background text-foreground"
|
|
281
|
+
role="alert"
|
|
282
|
+
>
|
|
283
|
+
<h5
|
|
284
|
+
class="mb-1 font-medium leading-none tracking-tight"
|
|
285
|
+
>
|
|
286
|
+
Heads up!
|
|
287
|
+
</h5>
|
|
288
|
+
<div
|
|
289
|
+
class="text-sm [&_p]:leading-relaxed"
|
|
290
|
+
>
|
|
291
|
+
You can add components to your app using the CLI.
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
`;
|
|
295
|
+
|
|
296
|
+
exports[`Alert snapshots > renders destructive alert with title and description 1`] = `
|
|
297
|
+
<div
|
|
298
|
+
class="relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
|
|
299
|
+
role="alert"
|
|
300
|
+
>
|
|
301
|
+
<h5
|
|
302
|
+
class="mb-1 font-medium leading-none tracking-tight"
|
|
303
|
+
>
|
|
304
|
+
Error
|
|
305
|
+
</h5>
|
|
306
|
+
<div
|
|
307
|
+
class="text-sm [&_p]:leading-relaxed"
|
|
308
|
+
>
|
|
309
|
+
Your session has expired. Please log in again.
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
`;
|
|
313
|
+
|
|
314
|
+
exports[`Avatar snapshots > renders avatar with fallback only 1`] = `
|
|
315
|
+
<span
|
|
316
|
+
class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
|
|
317
|
+
>
|
|
318
|
+
<span
|
|
319
|
+
class="flex h-full w-full items-center justify-center rounded-full bg-muted"
|
|
320
|
+
>
|
|
321
|
+
AB
|
|
322
|
+
</span>
|
|
323
|
+
</span>
|
|
324
|
+
`;
|
|
325
|
+
|
|
326
|
+
exports[`Avatar snapshots > renders avatar with image and fallback 1`] = `
|
|
327
|
+
<span
|
|
328
|
+
class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
|
|
329
|
+
>
|
|
330
|
+
<span
|
|
331
|
+
class="flex h-full w-full items-center justify-center rounded-full bg-muted"
|
|
332
|
+
>
|
|
333
|
+
JD
|
|
334
|
+
</span>
|
|
335
|
+
</span>
|
|
336
|
+
`;
|
|
337
|
+
|
|
338
|
+
exports[`Breadcrumb snapshots > renders multi-level breadcrumb 1`] = `
|
|
339
|
+
<nav
|
|
340
|
+
aria-label="breadcrumb"
|
|
341
|
+
>
|
|
342
|
+
<ol
|
|
343
|
+
class="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"
|
|
344
|
+
>
|
|
345
|
+
<li
|
|
346
|
+
class="inline-flex items-center gap-1.5"
|
|
347
|
+
>
|
|
348
|
+
<a
|
|
349
|
+
class="transition-colors hover:text-foreground"
|
|
350
|
+
href="/"
|
|
351
|
+
>
|
|
352
|
+
Home
|
|
353
|
+
</a>
|
|
354
|
+
</li>
|
|
355
|
+
<li
|
|
356
|
+
aria-hidden="true"
|
|
357
|
+
class="[&>svg]:w-3.5 [&>svg]:h-3.5"
|
|
358
|
+
role="presentation"
|
|
359
|
+
>
|
|
360
|
+
<svg
|
|
361
|
+
aria-hidden="true"
|
|
362
|
+
class="lucide lucide-chevron-right"
|
|
363
|
+
fill="none"
|
|
364
|
+
height="24"
|
|
365
|
+
stroke="currentColor"
|
|
366
|
+
stroke-linecap="round"
|
|
367
|
+
stroke-linejoin="round"
|
|
368
|
+
stroke-width="2"
|
|
369
|
+
viewBox="0 0 24 24"
|
|
370
|
+
width="24"
|
|
371
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
372
|
+
>
|
|
373
|
+
<path
|
|
374
|
+
d="m9 18 6-6-6-6"
|
|
375
|
+
/>
|
|
376
|
+
</svg>
|
|
377
|
+
</li>
|
|
378
|
+
<li
|
|
379
|
+
class="inline-flex items-center gap-1.5"
|
|
380
|
+
>
|
|
381
|
+
<a
|
|
382
|
+
class="transition-colors hover:text-foreground"
|
|
383
|
+
href="/products"
|
|
384
|
+
>
|
|
385
|
+
Products
|
|
386
|
+
</a>
|
|
387
|
+
</li>
|
|
388
|
+
<li
|
|
389
|
+
aria-hidden="true"
|
|
390
|
+
class="[&>svg]:w-3.5 [&>svg]:h-3.5"
|
|
391
|
+
role="presentation"
|
|
392
|
+
>
|
|
393
|
+
<svg
|
|
394
|
+
aria-hidden="true"
|
|
395
|
+
class="lucide lucide-chevron-right"
|
|
396
|
+
fill="none"
|
|
397
|
+
height="24"
|
|
398
|
+
stroke="currentColor"
|
|
399
|
+
stroke-linecap="round"
|
|
400
|
+
stroke-linejoin="round"
|
|
401
|
+
stroke-width="2"
|
|
402
|
+
viewBox="0 0 24 24"
|
|
403
|
+
width="24"
|
|
404
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
405
|
+
>
|
|
406
|
+
<path
|
|
407
|
+
d="m9 18 6-6-6-6"
|
|
408
|
+
/>
|
|
409
|
+
</svg>
|
|
410
|
+
</li>
|
|
411
|
+
<li
|
|
412
|
+
class="inline-flex items-center gap-1.5"
|
|
413
|
+
>
|
|
414
|
+
<span
|
|
415
|
+
aria-current="page"
|
|
416
|
+
aria-disabled="true"
|
|
417
|
+
class="font-normal text-foreground"
|
|
418
|
+
role="link"
|
|
419
|
+
>
|
|
420
|
+
Current Page
|
|
421
|
+
</span>
|
|
422
|
+
</li>
|
|
423
|
+
</ol>
|
|
424
|
+
</nav>
|
|
425
|
+
`;
|
|
426
|
+
|
|
427
|
+
exports[`Dialog snapshots > renders open dialog structure 1`] = `
|
|
428
|
+
<body
|
|
429
|
+
data-scroll-locked="1"
|
|
430
|
+
style="pointer-events: none;"
|
|
431
|
+
>
|
|
432
|
+
<span
|
|
433
|
+
aria-hidden="true"
|
|
434
|
+
data-aria-hidden="true"
|
|
435
|
+
data-radix-focus-guard=""
|
|
436
|
+
style="opacity: 0; position: fixed; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;"
|
|
437
|
+
tabindex="0"
|
|
438
|
+
/>
|
|
439
|
+
<div
|
|
440
|
+
aria-hidden="true"
|
|
441
|
+
data-aria-hidden="true"
|
|
442
|
+
>
|
|
443
|
+
<button
|
|
444
|
+
aria-controls="radix-_r_0_"
|
|
445
|
+
aria-expanded="true"
|
|
446
|
+
aria-haspopup="dialog"
|
|
447
|
+
data-state="open"
|
|
448
|
+
type="button"
|
|
449
|
+
>
|
|
450
|
+
Open
|
|
451
|
+
</button>
|
|
452
|
+
</div>
|
|
453
|
+
<div
|
|
454
|
+
aria-hidden="true"
|
|
455
|
+
class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
|
|
456
|
+
data-aria-hidden="true"
|
|
457
|
+
data-state="open"
|
|
458
|
+
style="pointer-events: auto;"
|
|
459
|
+
/>
|
|
460
|
+
<div
|
|
461
|
+
aria-describedby="radix-_r_2_"
|
|
462
|
+
aria-labelledby="radix-_r_1_"
|
|
463
|
+
class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
|
|
464
|
+
data-state="open"
|
|
465
|
+
id="radix-_r_0_"
|
|
466
|
+
role="dialog"
|
|
467
|
+
style="pointer-events: auto;"
|
|
468
|
+
tabindex="-1"
|
|
469
|
+
>
|
|
470
|
+
<div
|
|
471
|
+
class="flex flex-col space-y-1.5 text-center sm:text-left"
|
|
472
|
+
>
|
|
473
|
+
<h2
|
|
474
|
+
class="text-lg font-semibold leading-none tracking-tight"
|
|
475
|
+
id="radix-_r_1_"
|
|
476
|
+
>
|
|
477
|
+
Edit Profile
|
|
478
|
+
</h2>
|
|
479
|
+
<p
|
|
480
|
+
class="text-sm text-muted-foreground"
|
|
481
|
+
id="radix-_r_2_"
|
|
482
|
+
>
|
|
483
|
+
Make changes to your profile here.
|
|
484
|
+
</p>
|
|
485
|
+
</div>
|
|
486
|
+
<p>
|
|
487
|
+
Dialog body content
|
|
488
|
+
</p>
|
|
489
|
+
<div
|
|
490
|
+
class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
|
|
491
|
+
>
|
|
492
|
+
<button
|
|
493
|
+
type="submit"
|
|
494
|
+
>
|
|
495
|
+
Save changes
|
|
496
|
+
</button>
|
|
497
|
+
</div>
|
|
498
|
+
<button
|
|
499
|
+
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
|
|
500
|
+
type="button"
|
|
501
|
+
>
|
|
502
|
+
<svg
|
|
503
|
+
aria-hidden="true"
|
|
504
|
+
class="lucide lucide-x h-4 w-4"
|
|
505
|
+
fill="none"
|
|
506
|
+
height="24"
|
|
507
|
+
stroke="currentColor"
|
|
508
|
+
stroke-linecap="round"
|
|
509
|
+
stroke-linejoin="round"
|
|
510
|
+
stroke-width="2"
|
|
511
|
+
viewBox="0 0 24 24"
|
|
512
|
+
width="24"
|
|
513
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
514
|
+
>
|
|
515
|
+
<path
|
|
516
|
+
d="M18 6 6 18"
|
|
517
|
+
/>
|
|
518
|
+
<path
|
|
519
|
+
d="m6 6 12 12"
|
|
520
|
+
/>
|
|
521
|
+
</svg>
|
|
522
|
+
<span
|
|
523
|
+
class="sr-only"
|
|
524
|
+
>
|
|
525
|
+
Close
|
|
526
|
+
</span>
|
|
527
|
+
</button>
|
|
528
|
+
</div>
|
|
529
|
+
<span
|
|
530
|
+
aria-hidden="true"
|
|
531
|
+
data-aria-hidden="true"
|
|
532
|
+
data-radix-focus-guard=""
|
|
533
|
+
style="opacity: 0; position: fixed; pointer-events: none; outline-color: none; outline-style: none; outline-width: initial;"
|
|
534
|
+
tabindex="0"
|
|
535
|
+
/>
|
|
536
|
+
</body>
|
|
537
|
+
`;
|
|
538
|
+
|
|
539
|
+
exports[`Progress snapshots > renders progress at 0% 1`] = `
|
|
540
|
+
<div
|
|
541
|
+
aria-valuemax="100"
|
|
542
|
+
aria-valuemin="0"
|
|
543
|
+
class="relative h-4 w-full overflow-hidden rounded-full bg-secondary"
|
|
544
|
+
data-max="100"
|
|
545
|
+
data-state="indeterminate"
|
|
546
|
+
role="progressbar"
|
|
547
|
+
>
|
|
548
|
+
<div
|
|
549
|
+
class="h-full w-full flex-1 bg-primary transition-all"
|
|
550
|
+
data-max="100"
|
|
551
|
+
data-state="indeterminate"
|
|
552
|
+
style="transform: translateX(-100%);"
|
|
553
|
+
/>
|
|
554
|
+
</div>
|
|
555
|
+
`;
|
|
556
|
+
|
|
557
|
+
exports[`Progress snapshots > renders progress at 50% 1`] = `
|
|
558
|
+
<div
|
|
559
|
+
aria-valuemax="100"
|
|
560
|
+
aria-valuemin="0"
|
|
561
|
+
class="relative h-4 w-full overflow-hidden rounded-full bg-secondary"
|
|
562
|
+
data-max="100"
|
|
563
|
+
data-state="indeterminate"
|
|
564
|
+
role="progressbar"
|
|
565
|
+
>
|
|
566
|
+
<div
|
|
567
|
+
class="h-full w-full flex-1 bg-primary transition-all"
|
|
568
|
+
data-max="100"
|
|
569
|
+
data-state="indeterminate"
|
|
570
|
+
style="transform: translateX(-50%);"
|
|
571
|
+
/>
|
|
572
|
+
</div>
|
|
573
|
+
`;
|
|
574
|
+
|
|
575
|
+
exports[`Progress snapshots > renders progress at 100% 1`] = `
|
|
576
|
+
<div
|
|
577
|
+
aria-valuemax="100"
|
|
578
|
+
aria-valuemin="0"
|
|
579
|
+
class="relative h-4 w-full overflow-hidden rounded-full bg-secondary"
|
|
580
|
+
data-max="100"
|
|
581
|
+
data-state="indeterminate"
|
|
582
|
+
role="progressbar"
|
|
583
|
+
>
|
|
584
|
+
<div
|
|
585
|
+
class="h-full w-full flex-1 bg-primary transition-all"
|
|
586
|
+
data-max="100"
|
|
587
|
+
data-state="indeterminate"
|
|
588
|
+
style="transform: translateX(-0%);"
|
|
589
|
+
/>
|
|
590
|
+
</div>
|
|
591
|
+
`;
|
|
592
|
+
|
|
593
|
+
exports[`Separator snapshots > renders horizontal separator 1`] = `
|
|
594
|
+
<div
|
|
595
|
+
class="shrink-0 bg-border h-[1px] w-full"
|
|
596
|
+
data-orientation="horizontal"
|
|
597
|
+
role="none"
|
|
598
|
+
/>
|
|
599
|
+
`;
|
|
600
|
+
|
|
601
|
+
exports[`Separator snapshots > renders vertical separator 1`] = `
|
|
602
|
+
<div
|
|
603
|
+
class="shrink-0 bg-border h-full w-[1px]"
|
|
604
|
+
data-orientation="vertical"
|
|
605
|
+
role="none"
|
|
606
|
+
/>
|
|
607
|
+
`;
|
|
608
|
+
|
|
609
|
+
exports[`Skeleton snapshots > renders default skeleton 1`] = `
|
|
610
|
+
<div
|
|
611
|
+
class="animate-pulse rounded-md bg-muted"
|
|
612
|
+
/>
|
|
613
|
+
`;
|
|
614
|
+
|
|
615
|
+
exports[`Skeleton snapshots > renders skeleton loading card layout 1`] = `
|
|
616
|
+
<div
|
|
617
|
+
class="flex flex-col space-y-3"
|
|
618
|
+
>
|
|
619
|
+
<div
|
|
620
|
+
class="animate-pulse bg-muted h-[125px] w-[250px] rounded-xl"
|
|
621
|
+
/>
|
|
622
|
+
<div
|
|
623
|
+
class="space-y-2"
|
|
624
|
+
>
|
|
625
|
+
<div
|
|
626
|
+
class="animate-pulse rounded-md bg-muted h-4 w-[250px]"
|
|
627
|
+
/>
|
|
628
|
+
<div
|
|
629
|
+
class="animate-pulse rounded-md bg-muted h-4 w-[200px]"
|
|
630
|
+
/>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
`;
|
|
634
|
+
|
|
635
|
+
exports[`Skeleton snapshots > renders skeleton with circular avatar dimensions 1`] = `
|
|
636
|
+
<div
|
|
637
|
+
class="animate-pulse bg-muted h-12 w-12 rounded-full"
|
|
638
|
+
/>
|
|
639
|
+
`;
|
|
640
|
+
|
|
641
|
+
exports[`Skeleton snapshots > renders skeleton with text line dimensions 1`] = `
|
|
642
|
+
<div
|
|
643
|
+
class="animate-pulse rounded-md bg-muted h-4 w-[250px]"
|
|
644
|
+
/>
|
|
645
|
+
`;
|
|
646
|
+
|
|
647
|
+
exports[`Tabs snapshots > renders tabs with multiple panels 1`] = `
|
|
648
|
+
<div
|
|
649
|
+
data-orientation="horizontal"
|
|
650
|
+
dir="ltr"
|
|
651
|
+
>
|
|
652
|
+
<div
|
|
653
|
+
aria-orientation="horizontal"
|
|
654
|
+
class="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
|
|
655
|
+
data-orientation="horizontal"
|
|
656
|
+
role="tablist"
|
|
657
|
+
style="outline-color: none; outline-style: none; outline-width: initial;"
|
|
658
|
+
tabindex="0"
|
|
659
|
+
>
|
|
660
|
+
<button
|
|
661
|
+
aria-controls="radix-_r_3_-content-account"
|
|
662
|
+
aria-selected="true"
|
|
663
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
|
|
664
|
+
data-orientation="horizontal"
|
|
665
|
+
data-radix-collection-item=""
|
|
666
|
+
data-state="active"
|
|
667
|
+
id="radix-_r_3_-trigger-account"
|
|
668
|
+
role="tab"
|
|
669
|
+
tabindex="-1"
|
|
670
|
+
type="button"
|
|
671
|
+
>
|
|
672
|
+
Account
|
|
673
|
+
</button>
|
|
674
|
+
<button
|
|
675
|
+
aria-controls="radix-_r_3_-content-password"
|
|
676
|
+
aria-selected="false"
|
|
677
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
|
|
678
|
+
data-orientation="horizontal"
|
|
679
|
+
data-radix-collection-item=""
|
|
680
|
+
data-state="inactive"
|
|
681
|
+
id="radix-_r_3_-trigger-password"
|
|
682
|
+
role="tab"
|
|
683
|
+
tabindex="-1"
|
|
684
|
+
type="button"
|
|
685
|
+
>
|
|
686
|
+
Password
|
|
687
|
+
</button>
|
|
688
|
+
<button
|
|
689
|
+
aria-controls="radix-_r_3_-content-settings"
|
|
690
|
+
aria-selected="false"
|
|
691
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
|
|
692
|
+
data-orientation="horizontal"
|
|
693
|
+
data-radix-collection-item=""
|
|
694
|
+
data-state="inactive"
|
|
695
|
+
id="radix-_r_3_-trigger-settings"
|
|
696
|
+
role="tab"
|
|
697
|
+
tabindex="-1"
|
|
698
|
+
type="button"
|
|
699
|
+
>
|
|
700
|
+
Settings
|
|
701
|
+
</button>
|
|
702
|
+
</div>
|
|
703
|
+
<div
|
|
704
|
+
aria-labelledby="radix-_r_3_-trigger-account"
|
|
705
|
+
class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
706
|
+
data-orientation="horizontal"
|
|
707
|
+
data-state="active"
|
|
708
|
+
id="radix-_r_3_-content-account"
|
|
709
|
+
role="tabpanel"
|
|
710
|
+
style="animation-duration: 0s;"
|
|
711
|
+
tabindex="0"
|
|
712
|
+
>
|
|
713
|
+
Account settings here.
|
|
714
|
+
</div>
|
|
715
|
+
<div
|
|
716
|
+
aria-labelledby="radix-_r_3_-trigger-password"
|
|
717
|
+
class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
718
|
+
data-orientation="horizontal"
|
|
719
|
+
data-state="inactive"
|
|
720
|
+
hidden=""
|
|
721
|
+
id="radix-_r_3_-content-password"
|
|
722
|
+
role="tabpanel"
|
|
723
|
+
tabindex="0"
|
|
724
|
+
/>
|
|
725
|
+
<div
|
|
726
|
+
aria-labelledby="radix-_r_3_-trigger-settings"
|
|
727
|
+
class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
728
|
+
data-orientation="horizontal"
|
|
729
|
+
data-state="inactive"
|
|
730
|
+
hidden=""
|
|
731
|
+
id="radix-_r_3_-content-settings"
|
|
732
|
+
role="tabpanel"
|
|
733
|
+
tabindex="0"
|
|
734
|
+
/>
|
|
735
|
+
</div>
|
|
736
|
+
`;
|
|
737
|
+
|
|
738
|
+
exports[`Tabs snapshots > renders tabs with second tab active 1`] = `
|
|
739
|
+
<div
|
|
740
|
+
data-orientation="horizontal"
|
|
741
|
+
dir="ltr"
|
|
742
|
+
>
|
|
743
|
+
<div
|
|
744
|
+
aria-orientation="horizontal"
|
|
745
|
+
class="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
|
|
746
|
+
data-orientation="horizontal"
|
|
747
|
+
role="tablist"
|
|
748
|
+
style="outline-color: none; outline-style: none; outline-width: initial;"
|
|
749
|
+
tabindex="0"
|
|
750
|
+
>
|
|
751
|
+
<button
|
|
752
|
+
aria-controls="radix-_r_7_-content-account"
|
|
753
|
+
aria-selected="false"
|
|
754
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
|
|
755
|
+
data-orientation="horizontal"
|
|
756
|
+
data-radix-collection-item=""
|
|
757
|
+
data-state="inactive"
|
|
758
|
+
id="radix-_r_7_-trigger-account"
|
|
759
|
+
role="tab"
|
|
760
|
+
tabindex="-1"
|
|
761
|
+
type="button"
|
|
762
|
+
>
|
|
763
|
+
Account
|
|
764
|
+
</button>
|
|
765
|
+
<button
|
|
766
|
+
aria-controls="radix-_r_7_-content-password"
|
|
767
|
+
aria-selected="true"
|
|
768
|
+
class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
|
|
769
|
+
data-orientation="horizontal"
|
|
770
|
+
data-radix-collection-item=""
|
|
771
|
+
data-state="active"
|
|
772
|
+
id="radix-_r_7_-trigger-password"
|
|
773
|
+
role="tab"
|
|
774
|
+
tabindex="-1"
|
|
775
|
+
type="button"
|
|
776
|
+
>
|
|
777
|
+
Password
|
|
778
|
+
</button>
|
|
779
|
+
</div>
|
|
780
|
+
<div
|
|
781
|
+
aria-labelledby="radix-_r_7_-trigger-account"
|
|
782
|
+
class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
783
|
+
data-orientation="horizontal"
|
|
784
|
+
data-state="inactive"
|
|
785
|
+
hidden=""
|
|
786
|
+
id="radix-_r_7_-content-account"
|
|
787
|
+
role="tabpanel"
|
|
788
|
+
tabindex="0"
|
|
789
|
+
/>
|
|
790
|
+
<div
|
|
791
|
+
aria-labelledby="radix-_r_7_-trigger-password"
|
|
792
|
+
class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
793
|
+
data-orientation="horizontal"
|
|
794
|
+
data-state="active"
|
|
795
|
+
id="radix-_r_7_-content-password"
|
|
796
|
+
role="tabpanel"
|
|
797
|
+
style="animation-duration: 0s;"
|
|
798
|
+
tabindex="0"
|
|
799
|
+
>
|
|
800
|
+
Password settings.
|
|
801
|
+
</div>
|
|
802
|
+
</div>
|
|
803
|
+
`;
|
|
804
|
+
|
|
805
|
+
exports[`Tooltip snapshots > renders tooltip trigger 1`] = `
|
|
806
|
+
<button
|
|
807
|
+
data-state="closed"
|
|
808
|
+
>
|
|
809
|
+
Hover me
|
|
810
|
+
</button>
|
|
811
|
+
`;
|