@gsk_poc/untitled-ui-base 0.1.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.
Files changed (89) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +44 -0
  3. package/components/application/app-navigation/base-components/featured-cards.demo.tsx +86 -0
  4. package/components/application/app-navigation/base-components/featured-cards.story.tsx +49 -0
  5. package/components/application/app-navigation/header-navigation.demo.tsx +59 -0
  6. package/components/application/app-navigation/header-navigation.story.tsx +23 -0
  7. package/components/application/app-navigation/sidebar-navigation.demo.tsx +409 -0
  8. package/components/application/app-navigation/sidebar-navigation.story.tsx +47 -0
  9. package/components/application/carousel/carousel.demo.tsx +107 -0
  10. package/components/application/carousel/carousel.story.tsx +21 -0
  11. package/components/application/charts/activity-gauges.demo.tsx +251 -0
  12. package/components/application/charts/activity-gauges.story.tsx +27 -0
  13. package/components/application/charts/bar-charts.demo.tsx +506 -0
  14. package/components/application/charts/bar-charts.story.tsx +36 -0
  15. package/components/application/charts/line-charts.demo.tsx +604 -0
  16. package/components/application/charts/line-charts.story.tsx +43 -0
  17. package/components/application/charts/pie-charts.demo.tsx +193 -0
  18. package/components/application/charts/pie-charts.story.tsx +30 -0
  19. package/components/application/charts/progress-circles.demo.tsx +110 -0
  20. package/components/application/charts/progress-circles.story.tsx +33 -0
  21. package/components/application/charts/radar-charts.demo.tsx +203 -0
  22. package/components/application/charts/radar-charts.story.tsx +18 -0
  23. package/components/application/date-picker/date-picker.demo.tsx +217 -0
  24. package/components/application/date-picker/date-picker.story.tsx +44 -0
  25. package/components/application/file-upload/file-upload.demo.tsx +292 -0
  26. package/components/application/file-upload/file-upload.story.tsx +70 -0
  27. package/components/application/loading-indicator/loading-indicator.demo.tsx +73 -0
  28. package/components/application/loading-indicator/loading-indicator.story.tsx +22 -0
  29. package/components/application/pagination/pagination.demo.tsx +104 -0
  30. package/components/application/pagination/pagination.story.tsx +54 -0
  31. package/components/application/table/table.demo.tsx +1038 -0
  32. package/components/application/table/table.story.tsx +119 -0
  33. package/components/application/tabs/tabs.demo.tsx +322 -0
  34. package/components/application/tabs/tabs.story.tsx +43 -0
  35. package/components/base/avatar/avatar.demo.tsx +865 -0
  36. package/components/base/avatar/avatar.story.tsx +27 -0
  37. package/components/base/badges/badge-groups.demo.tsx +357 -0
  38. package/components/base/badges/badge-groups.story.tsx +25 -0
  39. package/components/base/badges/badges.demo.tsx +497 -0
  40. package/components/base/badges/badges.story.tsx +83 -0
  41. package/components/base/button-group/button-group.demo.tsx +131 -0
  42. package/components/base/button-group/button-group.story.tsx +16 -0
  43. package/components/base/buttons/app-store-buttons.demo.tsx +129 -0
  44. package/components/base/buttons/app-store-buttons.story.tsx +13 -0
  45. package/components/base/buttons/buttons.demo.tsx +1022 -0
  46. package/components/base/buttons/buttons.story.tsx +42 -0
  47. package/components/base/buttons/social-buttons.demo.tsx +432 -0
  48. package/components/base/buttons/social-buttons.story.tsx +20 -0
  49. package/components/base/checkbox/checkbox.demo.tsx +62 -0
  50. package/components/base/checkbox/checkbox.story.tsx +18 -0
  51. package/components/base/dropdown/dropdown.demo.tsx +137 -0
  52. package/components/base/dropdown/dropdown.story.tsx +22 -0
  53. package/components/base/input/inputs.demo.tsx +758 -0
  54. package/components/base/input/inputs.story.tsx +52 -0
  55. package/components/base/pin-input/pin-input.demo.tsx +126 -0
  56. package/components/base/pin-input/pin-input.story.tsx +22 -0
  57. package/components/base/progress-indicators/progress-indicators.demo.tsx +54 -0
  58. package/components/base/progress-indicators/progress-indicators.story.tsx +57 -0
  59. package/components/base/radio-buttons/radio-buttons.demo.tsx +77 -0
  60. package/components/base/radio-buttons/radio-buttons.story.tsx +19 -0
  61. package/components/base/select/select.demo.tsx +936 -0
  62. package/components/base/select/select.story.tsx +43 -0
  63. package/components/base/slider/slider.demo.tsx +19 -0
  64. package/components/base/slider/slider.story.tsx +26 -0
  65. package/components/base/tags/tags.demo.tsx +341 -0
  66. package/components/base/tags/tags.story.tsx +28 -0
  67. package/components/base/textarea/textarea.demo.tsx +25 -0
  68. package/components/base/textarea/textarea.story.tsx +15 -0
  69. package/components/base/toggle/toggle.demo.tsx +76 -0
  70. package/components/base/toggle/toggle.story.tsx +23 -0
  71. package/components/base/tooltip/tooltip.demo.tsx +125 -0
  72. package/components/base/tooltip/tooltip.story.tsx +21 -0
  73. package/components/foundations/featured-icon/featured-icon.demo.tsx +160 -0
  74. package/components/foundations/featured-icon/featured-icon.story.tsx +25 -0
  75. package/components/shared-assets/credit-card/credit-card.demo.tsx +106 -0
  76. package/components/shared-assets/credit-card/credit-card.story.tsx +41 -0
  77. package/dist/index.d.mts +1417 -0
  78. package/dist/index.d.ts +1417 -0
  79. package/dist/index.js +10435 -0
  80. package/dist/index.js.map +1 -0
  81. package/dist/index.mjs +10345 -0
  82. package/dist/index.mjs.map +1 -0
  83. package/package.json +126 -0
  84. package/styles/globals.css +65 -0
  85. package/styles/theme.css +430 -0
  86. package/styles/tokens-mapped.css +233 -0
  87. package/styles/tokens.css +807 -0
  88. package/styles/typography.css +430 -0
  89. package/tokens/design-tokens.dtcg.json +3515 -0
package/components/base/avatar/avatar.demo.tsx ADDED
@@ -0,0 +1,865 @@
1
+ "use client";
2
+
3
+ import { User01 } from "@untitledui/icons";
4
+ import { Avatar } from "@/components/base/avatar/avatar";
5
+ import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group";
6
+ import { AvatarProfilePhoto } from "@/components/base/avatar/avatar-profile-photo";
7
+ import { AvatarAddButton, AvatarCompanyIcon } from "@/components/base/avatar/base-components";
8
+
9
+ export const DefaultDemo = () => {
10
+ return (
11
+ <AvatarLabelGroup
12
+ size="md"
13
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
14
+ alt="Olivia Rhye"
15
+ title="Olivia Rhye"
16
+ subtitle="olivia@untitledui.com"
17
+ />
18
+ );
19
+ };
20
+
21
+ export const BaseDemo = () => {
22
+ return <Avatar size="md" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" alt="Olivia Rhye" />;
23
+ };
24
+
25
+ export const StatusIndicatorDemo = () => {
26
+ return (
27
+ <div className="flex gap-8">
28
+ <Avatar status="online" size="md" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" alt="Olivia Rhye" />
29
+ <Avatar status="offline" size="md" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" alt="Olivia Rhye" />
30
+ </div>
31
+ );
32
+ };
33
+
34
+ export const CompanyLogoDemo = () => {
35
+ return (
36
+ <Avatar
37
+ size="md"
38
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
39
+ alt="Olivia Rhye"
40
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="md" />}
41
+ />
42
+ );
43
+ };
44
+
45
+ export const VerifiedDemo = () => {
46
+ return <Avatar verified size="md" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" alt="Olivia Rhye" />;
47
+ };
48
+
49
+ export const PlaceholderDemo = () => {
50
+ return <Avatar size="md" alt="Olivia Rhye" placeholderIcon={User01} />;
51
+ };
52
+
53
+ export const InitialsDemo = () => {
54
+ return <Avatar size="md" alt="Olivia Rhye" initials="OR" />;
55
+ };
56
+
57
+ export const LabelGroupDemo = () => {
58
+ return (
59
+ <AvatarLabelGroup
60
+ size="md"
61
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
62
+ alt="Olivia Rhye"
63
+ title="Olivia Rhye"
64
+ subtitle="olivia@untitledui.com"
65
+ />
66
+ );
67
+ };
68
+
69
+ export const GroupDemo = () => {
70
+ return (
71
+ <div className="flex gap-2">
72
+ <div className="flex -space-x-2">
73
+ <Avatar
74
+ className="ring-[1.5px] ring-bg-primary"
75
+ size="sm"
76
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
77
+ alt="Olivia Rhye"
78
+ />
79
+ <Avatar
80
+ className="ring-[1.5px] ring-bg-primary"
81
+ size="sm"
82
+ src="https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80"
83
+ alt="Phoenix Baker"
84
+ />
85
+ <Avatar
86
+ className="ring-[1.5px] ring-bg-primary"
87
+ size="sm"
88
+ src="https://www.untitledui.com/images/avatars/lana-steiner?fm=webp&q=80"
89
+ alt="Lana Steiner"
90
+ />
91
+ <Avatar
92
+ className="ring-[1.5px] ring-bg-primary"
93
+ size="sm"
94
+ src="https://www.untitledui.com/images/avatars/demi-wilkinson?fm=webp&q=80"
95
+ alt="Demi Wilkinson"
96
+ />
97
+ <Avatar
98
+ className="ring-[1.5px] ring-bg-primary"
99
+ size="sm"
100
+ src="https://www.untitledui.com/images/avatars/candice-wu?fm=webp&q=80"
101
+ alt="Candice Wu"
102
+ />
103
+ <Avatar
104
+ className="ring-[1.5px] ring-bg-primary"
105
+ size="sm"
106
+ src="https://www.untitledui.com/images/avatars/natali-craig?fm=webp&q=80"
107
+ alt="Natali Craig"
108
+ />
109
+ <Avatar
110
+ className="ring-[1.5px] ring-bg-primary"
111
+ size="sm"
112
+ src="https://www.untitledui.com/images/avatars/drew-cano?fm=webp&q=80"
113
+ alt="Drew Cano"
114
+ />
115
+ <Avatar
116
+ className="ring-[1.5px] ring-bg-primary"
117
+ size="sm"
118
+ src="https://www.untitledui.com/images/avatars/orlando-diggs?fm=webp&q=80"
119
+ alt="Orlando Diggs"
120
+ />
121
+ <Avatar
122
+ className="ring-[1.5px] ring-bg-primary"
123
+ size="sm"
124
+ src="https://www.untitledui.com/images/avatars/andi-lane?fm=webp&q=80"
125
+ alt="Andi Lane"
126
+ />
127
+ <Avatar
128
+ className="ring-[1.5px] ring-bg-primary"
129
+ size="sm"
130
+ src="https://www.untitledui.com/images/avatars/kate-morrison?fm=webp&q=80"
131
+ alt="Kate Morrison"
132
+ />
133
+ <Avatar
134
+ size="sm"
135
+ className="ring-[1.5px] ring-bg-primary"
136
+ placeholder={<span className="flex items-center justify-center text-sm font-semibold text-quaternary">+5</span>}
137
+ />
138
+ </div>
139
+ <AvatarAddButton size="sm" />
140
+ </div>
141
+ );
142
+ };
143
+
144
+ export const ProfilePhotoDemo = () => {
145
+ return (
146
+ <div className="flex gap-8">
147
+ <AvatarProfilePhoto verified size="md" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" alt="Olivia Rhye" />
148
+ <AvatarProfilePhoto verified size="md" alt="Olivia Rhye" placeholderIcon={User01} />
149
+ <AvatarProfilePhoto verified size="md" alt="Olivia Rhye" initials="OR" />
150
+ </div>
151
+ );
152
+ };
153
+
154
+ export const Group = () => (
155
+ <div className="flex flex-col gap-4">
156
+ <div className="flex gap-2">
157
+ <div className="flex -space-x-1">
158
+ <Avatar
159
+ className="ring-[1.5px] ring-bg-primary"
160
+ size="xs"
161
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
162
+ alt="Olivia Rhye"
163
+ />
164
+ <Avatar
165
+ className="ring-[1.5px] ring-bg-primary"
166
+ size="xs"
167
+ src="https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80"
168
+ alt="Phoenix Baker"
169
+ />
170
+ <Avatar
171
+ className="ring-[1.5px] ring-bg-primary"
172
+ size="xs"
173
+ src="https://www.untitledui.com/images/avatars/lana-steiner?fm=webp&q=80"
174
+ alt="Lana Steiner"
175
+ />
176
+ <Avatar
177
+ className="ring-[1.5px] ring-bg-primary"
178
+ size="xs"
179
+ src="https://www.untitledui.com/images/avatars/demi-wilkinson?fm=webp&q=80"
180
+ alt="Demi Wilkinson"
181
+ />
182
+ <Avatar
183
+ className="ring-[1.5px] ring-bg-primary"
184
+ size="xs"
185
+ src="https://www.untitledui.com/images/avatars/candice-wu?fm=webp&q=80"
186
+ alt="Candice Wu"
187
+ />
188
+ <Avatar
189
+ className="ring-[1.5px] ring-bg-primary"
190
+ size="xs"
191
+ src="https://www.untitledui.com/images/avatars/natali-craig?fm=webp&q=80"
192
+ alt="Natali Craig"
193
+ />
194
+ <Avatar
195
+ className="ring-[1.5px] ring-bg-primary"
196
+ size="xs"
197
+ src="https://www.untitledui.com/images/avatars/drew-cano?fm=webp&q=80"
198
+ alt="Drew Cano"
199
+ />
200
+ <Avatar
201
+ className="ring-[1.5px] ring-bg-primary"
202
+ size="xs"
203
+ src="https://www.untitledui.com/images/avatars/orlando-diggs?fm=webp&q=80"
204
+ alt="Orlando Diggs"
205
+ />
206
+ <Avatar
207
+ className="ring-[1.5px] ring-bg-primary"
208
+ size="xs"
209
+ src="https://www.untitledui.com/images/avatars/andi-lane?fm=webp&q=80"
210
+ alt="Andi Lane"
211
+ />
212
+ <Avatar
213
+ className="ring-[1.5px] ring-bg-primary"
214
+ size="xs"
215
+ src="https://www.untitledui.com/images/avatars/kate-morrison?fm=webp&q=80"
216
+ alt="Kate Morrison"
217
+ />
218
+ <Avatar
219
+ size="xs"
220
+ className="ring-[1.5px] ring-bg-primary"
221
+ placeholder={<span className="flex items-center justify-center text-xs font-semibold text-quaternary">+5</span>}
222
+ />
223
+ </div>
224
+ <AvatarAddButton size="xs" />
225
+ </div>
226
+ <div className="flex gap-2">
227
+ <div className="flex -space-x-2">
228
+ <Avatar
229
+ className="ring-[1.5px] ring-bg-primary"
230
+ size="sm"
231
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
232
+ alt="Olivia Rhye"
233
+ />
234
+ <Avatar
235
+ className="ring-[1.5px] ring-bg-primary"
236
+ size="sm"
237
+ src="https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80"
238
+ alt="Phoenix Baker"
239
+ />
240
+ <Avatar
241
+ className="ring-[1.5px] ring-bg-primary"
242
+ size="sm"
243
+ src="https://www.untitledui.com/images/avatars/lana-steiner?fm=webp&q=80"
244
+ alt="Lana Steiner"
245
+ />
246
+ <Avatar
247
+ className="ring-[1.5px] ring-bg-primary"
248
+ size="sm"
249
+ src="https://www.untitledui.com/images/avatars/demi-wilkinson?fm=webp&q=80"
250
+ alt="Demi Wilkinson"
251
+ />
252
+ <Avatar
253
+ className="ring-[1.5px] ring-bg-primary"
254
+ size="sm"
255
+ src="https://www.untitledui.com/images/avatars/candice-wu?fm=webp&q=80"
256
+ alt="Candice Wu"
257
+ />
258
+ <Avatar
259
+ className="ring-[1.5px] ring-bg-primary"
260
+ size="sm"
261
+ src="https://www.untitledui.com/images/avatars/natali-craig?fm=webp&q=80"
262
+ alt="Natali Craig"
263
+ />
264
+ <Avatar
265
+ className="ring-[1.5px] ring-bg-primary"
266
+ size="sm"
267
+ src="https://www.untitledui.com/images/avatars/drew-cano?fm=webp&q=80"
268
+ alt="Drew Cano"
269
+ />
270
+ <Avatar
271
+ className="ring-[1.5px] ring-bg-primary"
272
+ size="sm"
273
+ src="https://www.untitledui.com/images/avatars/orlando-diggs?fm=webp&q=80"
274
+ alt="Orlando Diggs"
275
+ />
276
+ <Avatar
277
+ className="ring-[1.5px] ring-bg-primary"
278
+ size="sm"
279
+ src="https://www.untitledui.com/images/avatars/andi-lane?fm=webp&q=80"
280
+ alt="Andi Lane"
281
+ />
282
+ <Avatar
283
+ className="ring-[1.5px] ring-bg-primary"
284
+ size="sm"
285
+ src="https://www.untitledui.com/images/avatars/kate-morrison?fm=webp&q=80"
286
+ alt="Kate Morrison"
287
+ />
288
+ <Avatar
289
+ size="sm"
290
+ className="ring-[1.5px] ring-bg-primary"
291
+ placeholder={<span className="flex items-center justify-center text-sm font-semibold text-quaternary">+5</span>}
292
+ />
293
+ </div>
294
+ <AvatarAddButton size="sm" />
295
+ </div>
296
+ <div className="flex gap-2">
297
+ <div className="flex -space-x-3">
298
+ <Avatar
299
+ className="ring-[1.5px] ring-bg-primary"
300
+ size="md"
301
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
302
+ alt="Olivia Rhye"
303
+ />
304
+ <Avatar
305
+ className="ring-[1.5px] ring-bg-primary"
306
+ size="md"
307
+ src="https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80"
308
+ alt="Phoenix Baker"
309
+ />
310
+ <Avatar
311
+ className="ring-[1.5px] ring-bg-primary"
312
+ size="md"
313
+ src="https://www.untitledui.com/images/avatars/lana-steiner?fm=webp&q=80"
314
+ alt="Lana Steiner"
315
+ />
316
+ <Avatar
317
+ className="ring-[1.5px] ring-bg-primary"
318
+ size="md"
319
+ src="https://www.untitledui.com/images/avatars/demi-wilkinson?fm=webp&q=80"
320
+ alt="Demi Wilkinson"
321
+ />
322
+ <Avatar
323
+ className="ring-[1.5px] ring-bg-primary"
324
+ size="md"
325
+ src="https://www.untitledui.com/images/avatars/candice-wu?fm=webp&q=80"
326
+ alt="Candice Wu"
327
+ />
328
+ <Avatar
329
+ className="ring-[1.5px] ring-bg-primary"
330
+ size="md"
331
+ src="https://www.untitledui.com/images/avatars/natali-craig?fm=webp&q=80"
332
+ alt="Natali Craig"
333
+ />
334
+ <Avatar
335
+ className="ring-[1.5px] ring-bg-primary"
336
+ size="md"
337
+ src="https://www.untitledui.com/images/avatars/drew-cano?fm=webp&q=80"
338
+ alt="Drew Cano"
339
+ />
340
+ <Avatar
341
+ className="ring-[1.5px] ring-bg-primary"
342
+ size="md"
343
+ src="https://www.untitledui.com/images/avatars/orlando-diggs?fm=webp&q=80"
344
+ alt="Orlando Diggs"
345
+ />
346
+ <Avatar
347
+ className="ring-[1.5px] ring-bg-primary"
348
+ size="md"
349
+ src="https://www.untitledui.com/images/avatars/andi-lane?fm=webp&q=80"
350
+ alt="Andi Lane"
351
+ />
352
+ <Avatar
353
+ className="ring-[1.5px] ring-bg-primary"
354
+ size="md"
355
+ src="https://www.untitledui.com/images/avatars/kate-morrison?fm=webp&q=80"
356
+ alt="Kate Morrison"
357
+ />
358
+ <Avatar
359
+ size="md"
360
+ className="ring-[1.5px] ring-bg-primary"
361
+ placeholder={<span className="flex items-center justify-center text-md font-semibold text-quaternary">+5</span>}
362
+ />
363
+ </div>
364
+ <AvatarAddButton size="md" />
365
+ </div>
366
+ </div>
367
+ );
368
+
369
+ export const Default = () => (
370
+ <div className="flex flex-col gap-4">
371
+ <div className="flex items-start gap-8">
372
+ <a href="#" className="group inline-flex focus:outline-hidden">
373
+ <Avatar
374
+ size="xs"
375
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
376
+ alt="Olivia Rhye"
377
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
378
+ />
379
+ </a>
380
+ <a href="#" className="group inline-flex focus:outline-hidden">
381
+ <Avatar
382
+ size="sm"
383
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
384
+ alt="Olivia Rhye"
385
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
386
+ />
387
+ </a>
388
+ <a href="#" className="group inline-flex focus:outline-hidden">
389
+ <Avatar
390
+ size="md"
391
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
392
+ alt="Olivia Rhye"
393
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
394
+ />
395
+ </a>
396
+ <a href="#" className="group inline-flex focus:outline-hidden">
397
+ <Avatar
398
+ size="lg"
399
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
400
+ alt="Olivia Rhye"
401
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
402
+ />
403
+ </a>
404
+ <a href="#" className="group inline-flex focus:outline-hidden">
405
+ <Avatar
406
+ size="xl"
407
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
408
+ alt="Olivia Rhye"
409
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
410
+ />
411
+ </a>
412
+ <a href="#" className="group inline-flex focus:outline-hidden">
413
+ <Avatar
414
+ size="2xl"
415
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
416
+ alt="Olivia Rhye"
417
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
418
+ />
419
+ </a>
420
+ </div>
421
+
422
+ <div className="flex items-start gap-8">
423
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
424
+ <Avatar
425
+ size="xs"
426
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
427
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
428
+ alt="Olivia Rhye"
429
+ status="online"
430
+ />
431
+ </a>
432
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
433
+ <Avatar
434
+ size="sm"
435
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
436
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
437
+ alt="Olivia Rhye"
438
+ status="online"
439
+ />
440
+ </a>
441
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
442
+ <Avatar
443
+ size="md"
444
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
445
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
446
+ alt="Olivia Rhye"
447
+ status="online"
448
+ />
449
+ </a>
450
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
451
+ <Avatar
452
+ size="lg"
453
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
454
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
455
+ alt="Olivia Rhye"
456
+ status="online"
457
+ />
458
+ </a>
459
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
460
+ <Avatar
461
+ size="xl"
462
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
463
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
464
+ alt="Olivia Rhye"
465
+ status="online"
466
+ />
467
+ </a>
468
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
469
+ <Avatar
470
+ size="2xl"
471
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
472
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
473
+ alt="Olivia Rhye"
474
+ status="online"
475
+ />
476
+ </a>
477
+ </div>
478
+
479
+ <div className="flex items-start gap-8">
480
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
481
+ <Avatar
482
+ size="xs"
483
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
484
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
485
+ alt="Olivia Rhye"
486
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="xs" />}
487
+ />
488
+ </a>
489
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
490
+ <Avatar
491
+ size="sm"
492
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
493
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
494
+ alt="Olivia Rhye"
495
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="sm" />}
496
+ />
497
+ </a>
498
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
499
+ <Avatar
500
+ size="md"
501
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
502
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
503
+ alt="Olivia Rhye"
504
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="md" />}
505
+ />
506
+ </a>
507
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
508
+ <Avatar
509
+ size="lg"
510
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
511
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
512
+ alt="Olivia Rhye"
513
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="lg" />}
514
+ />
515
+ </a>
516
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
517
+ <Avatar
518
+ size="xl"
519
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
520
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
521
+ alt="Olivia Rhye"
522
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="xl" />}
523
+ />
524
+ </a>
525
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
526
+ <Avatar
527
+ size="2xl"
528
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
529
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
530
+ alt="Olivia Rhye"
531
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="2xl" />}
532
+ />
533
+ </a>
534
+ </div>
535
+
536
+ <div className="flex items-start gap-8">
537
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
538
+ <Avatar
539
+ size="xs"
540
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
541
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
542
+ alt="Olivia Rhye"
543
+ verified
544
+ />
545
+ </a>
546
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
547
+ <Avatar
548
+ size="sm"
549
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
550
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
551
+ alt="Olivia Rhye"
552
+ verified
553
+ />
554
+ </a>
555
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
556
+ <Avatar
557
+ size="md"
558
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
559
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
560
+ alt="Olivia Rhye"
561
+ verified
562
+ />
563
+ </a>
564
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
565
+ <Avatar
566
+ size="lg"
567
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
568
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
569
+ alt="Olivia Rhye"
570
+ verified
571
+ />
572
+ </a>
573
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
574
+ <Avatar
575
+ size="xl"
576
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
577
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
578
+ alt="Olivia Rhye"
579
+ verified
580
+ />
581
+ </a>
582
+ <a href="#" className="group relative inline-flex focus:outline-hidden">
583
+ <Avatar
584
+ size="2xl"
585
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
586
+ className="ring-focus-ring ring-offset-bg-primary group-focus:ring-2 group-focus:ring-offset-2"
587
+ alt="Olivia Rhye"
588
+ verified
589
+ />
590
+ </a>
591
+ </div>
592
+ </div>
593
+ );
594
+
595
+ export const Placeholder = () => (
596
+ <div className="flex flex-col gap-4">
597
+ <div className="flex items-start gap-8">
598
+ <Avatar size="xs" placeholderIcon={User01} />
599
+ <Avatar size="sm" placeholderIcon={User01} />
600
+ <Avatar size="md" placeholderIcon={User01} />
601
+ <Avatar size="lg" placeholderIcon={User01} />
602
+ <Avatar size="xl" placeholderIcon={User01} />
603
+ <Avatar size="2xl" placeholderIcon={User01} />
604
+ </div>
605
+
606
+ <div className="flex items-start gap-8">
607
+ <Avatar size="xs" status="online" placeholderIcon={User01} />
608
+ <Avatar size="sm" status="online" placeholderIcon={User01} />
609
+ <Avatar size="md" status="online" placeholderIcon={User01} />
610
+ <Avatar size="lg" status="online" placeholderIcon={User01} />
611
+ <Avatar size="xl" status="online" placeholderIcon={User01} />
612
+ <Avatar size="2xl" status="online" placeholderIcon={User01} />
613
+ </div>
614
+
615
+ <div className="flex items-start gap-8">
616
+ <Avatar
617
+ size="xs"
618
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="xs" />}
619
+ placeholderIcon={User01}
620
+ />
621
+ <Avatar
622
+ size="sm"
623
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="sm" />}
624
+ placeholderIcon={User01}
625
+ />
626
+ <Avatar
627
+ size="md"
628
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="md" />}
629
+ placeholderIcon={User01}
630
+ />
631
+ <Avatar
632
+ size="lg"
633
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="lg" />}
634
+ placeholderIcon={User01}
635
+ />
636
+ <Avatar
637
+ size="xl"
638
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="xl" />}
639
+ placeholderIcon={User01}
640
+ />
641
+ <Avatar
642
+ size="2xl"
643
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="2xl" />}
644
+ placeholderIcon={User01}
645
+ />
646
+ </div>
647
+ </div>
648
+ );
649
+
650
+ export const Initials = () => (
651
+ <div className="flex flex-col gap-4">
652
+ <div className="flex items-start gap-8">
653
+ <Avatar size="xs" initials="OR" />
654
+ <Avatar size="sm" initials="OR" />
655
+ <Avatar size="md" initials="OR" />
656
+ <Avatar size="lg" initials="OR" />
657
+ <Avatar size="xl" initials="OR" />
658
+ <Avatar size="2xl" initials="OR" />
659
+ </div>
660
+
661
+ <div className="flex items-start gap-8">
662
+ <Avatar size="xs" status="online" initials="OR" />
663
+ <Avatar size="sm" status="online" initials="OR" />
664
+ <Avatar size="md" status="online" initials="OR" />
665
+ <Avatar size="lg" status="online" initials="OR" />
666
+ <Avatar size="xl" status="online" initials="OR" />
667
+ <Avatar size="2xl" status="online" initials="OR" />
668
+ </div>
669
+
670
+ <div className="flex items-start gap-8">
671
+ <Avatar
672
+ size="xs"
673
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="xs" />}
674
+ initials="OR"
675
+ />
676
+ <Avatar
677
+ size="sm"
678
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="sm" />}
679
+ initials="OR"
680
+ />
681
+ <Avatar
682
+ size="md"
683
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="md" />}
684
+ initials="OR"
685
+ />
686
+ <Avatar
687
+ size="lg"
688
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="lg" />}
689
+ initials="OR"
690
+ />
691
+ <Avatar
692
+ size="xl"
693
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="xl" />}
694
+ initials="OR"
695
+ />
696
+ <Avatar
697
+ size="2xl"
698
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="2xl" />}
699
+ initials="OR"
700
+ />
701
+ </div>
702
+ </div>
703
+ );
704
+
705
+ export const LabelGroup = () => (
706
+ <div className="flex flex-col gap-4">
707
+ <div className="flex items-start gap-8">
708
+ <AvatarLabelGroup
709
+ size="sm"
710
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
711
+ alt="Olivia Rhye"
712
+ title="Olivia Rhye"
713
+ subtitle="olivia@untitledui.com"
714
+ />
715
+ <AvatarLabelGroup
716
+ size="md"
717
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
718
+ alt="Olivia Rhye"
719
+ title="Olivia Rhye"
720
+ subtitle="olivia@untitledui.com"
721
+ />
722
+ <AvatarLabelGroup
723
+ size="lg"
724
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
725
+ alt="Olivia Rhye"
726
+ title="Olivia Rhye"
727
+ subtitle="olivia@untitledui.com"
728
+ />
729
+ <AvatarLabelGroup
730
+ size="xl"
731
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
732
+ alt="Olivia Rhye"
733
+ title="Olivia Rhye"
734
+ subtitle="olivia@untitledui.com"
735
+ />
736
+ </div>
737
+
738
+ <div className="flex items-start gap-8">
739
+ <AvatarLabelGroup
740
+ size="sm"
741
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
742
+ alt="Olivia Rhye"
743
+ title="Olivia Rhye"
744
+ subtitle="olivia@untitledui.com"
745
+ status="online"
746
+ />
747
+ <AvatarLabelGroup
748
+ size="md"
749
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
750
+ alt="Olivia Rhye"
751
+ title="Olivia Rhye"
752
+ subtitle="olivia@untitledui.com"
753
+ status="online"
754
+ />
755
+ <AvatarLabelGroup
756
+ size="lg"
757
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
758
+ alt="Olivia Rhye"
759
+ title="Olivia Rhye"
760
+ subtitle="olivia@untitledui.com"
761
+ status="online"
762
+ />
763
+ <AvatarLabelGroup
764
+ size="xl"
765
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
766
+ alt="Olivia Rhye"
767
+ title="Olivia Rhye"
768
+ subtitle="olivia@untitledui.com"
769
+ status="online"
770
+ />
771
+ </div>
772
+
773
+ <div className="flex items-start gap-8">
774
+ <AvatarLabelGroup
775
+ size="sm"
776
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
777
+ alt="Olivia Rhye"
778
+ title="Olivia Rhye"
779
+ subtitle="olivia@untitledui.com"
780
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="sm" />}
781
+ />
782
+ <AvatarLabelGroup
783
+ size="md"
784
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
785
+ alt="Olivia Rhye"
786
+ title="Olivia Rhye"
787
+ subtitle="olivia@untitledui.com"
788
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="md" />}
789
+ />
790
+ <AvatarLabelGroup
791
+ size="lg"
792
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
793
+ alt="Olivia Rhye"
794
+ title="Olivia Rhye"
795
+ subtitle="olivia@untitledui.com"
796
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="lg" />}
797
+ />
798
+ <AvatarLabelGroup
799
+ size="xl"
800
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
801
+ alt="Olivia Rhye"
802
+ title="Olivia Rhye"
803
+ subtitle="olivia@untitledui.com"
804
+ badge={<AvatarCompanyIcon src="https://www.untitledui.com/logos/images/Layers.jpg" alt="Layers Inc." size="xl" />}
805
+ />
806
+ </div>
807
+
808
+ <div className="flex items-start gap-8">
809
+ <AvatarLabelGroup
810
+ size="sm"
811
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
812
+ alt="Olivia Rhye"
813
+ title="Olivia Rhye"
814
+ subtitle="olivia@untitledui.com"
815
+ verified
816
+ />
817
+ <AvatarLabelGroup
818
+ size="md"
819
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
820
+ alt="Olivia Rhye"
821
+ title="Olivia Rhye"
822
+ subtitle="olivia@untitledui.com"
823
+ verified
824
+ />
825
+ <AvatarLabelGroup
826
+ size="lg"
827
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
828
+ alt="Olivia Rhye"
829
+ title="Olivia Rhye"
830
+ subtitle="olivia@untitledui.com"
831
+ verified
832
+ />
833
+ <AvatarLabelGroup
834
+ size="xl"
835
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
836
+ alt="Olivia Rhye"
837
+ title="Olivia Rhye"
838
+ subtitle="olivia@untitledui.com"
839
+ verified
840
+ />
841
+ </div>
842
+ </div>
843
+ );
844
+
845
+ export const ProfilePhoto = () => (
846
+ <div className="flex flex-col gap-16">
847
+ <div className="flex gap-8">
848
+ <AvatarProfilePhoto verified size="sm" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" alt="Olivia Rhye" />
849
+ <AvatarProfilePhoto verified size="md" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" alt="Olivia Rhye" />
850
+ <AvatarProfilePhoto verified size="lg" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" alt="Olivia Rhye" />
851
+ </div>
852
+
853
+ <div className="flex gap-8">
854
+ <AvatarProfilePhoto verified size="sm" placeholderIcon={User01} />
855
+ <AvatarProfilePhoto verified size="md" placeholderIcon={User01} />
856
+ <AvatarProfilePhoto verified size="lg" placeholderIcon={User01} />
857
+ </div>
858
+
859
+ <div className="flex gap-8">
860
+ <AvatarProfilePhoto verified size="sm" initials="OR" />
861
+ <AvatarProfilePhoto verified size="md" initials="OR" />
862
+ <AvatarProfilePhoto verified size="lg" initials="OR" />
863
+ </div>
864
+ </div>
865
+ );