@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/input/inputs.demo.tsx ADDED
@@ -0,0 +1,758 @@
1
+ "use client";
2
+
3
+ import { useState } from "react";
4
+ import React from "react";
5
+ import { Check, Copy01, Mail01 } from "@untitledui/icons";
6
+ import { Button } from "@/components/base/buttons/button";
7
+ import { Input, InputBase } from "@/components/base/input/input";
8
+ import { InputGroup } from "@/components/base/input/input-group";
9
+ import { PaymentInput } from "@/components/base/input/input-payment";
10
+ import { NativeSelect } from "@/components/base/select/select-native";
11
+ import { useClipboard } from "@/hooks/use-clipboard";
12
+
13
+ export const DefaultDemo = () => {
14
+ return <Input isRequired label="Email" hint="This is a hint text to help user." placeholder="olivia@untitledui.com" tooltip="This is a tooltip" />;
15
+ };
16
+
17
+ export const DisabledDemo = () => {
18
+ return (
19
+ <Input isRequired isDisabled label="Email" hint="This is a hint text to help user." placeholder="olivia@untitledui.com" tooltip="This is a tooltip" />
20
+ );
21
+ };
22
+
23
+ export const InvalidDemo = () => {
24
+ return <Input isRequired isInvalid label="Email" hint="This is an error message." placeholder="olivia@untitledui.com" tooltip="This is a tooltip" />;
25
+ };
26
+
27
+ export const SizesDemo = () => {
28
+ return (
29
+ <div className="flex flex-col gap-8">
30
+ {/* Small */}
31
+ <Input isRequired label="Email" hint="This is a hint text to help user." placeholder="olivia@untitledui.com" tooltip="This is a tooltip" />
32
+
33
+ {/* Medium */}
34
+ <Input
35
+ isRequired
36
+ size="md"
37
+ label="Email"
38
+ hint="This is a hint text to help user."
39
+ placeholder="olivia@untitledui.com"
40
+ tooltip="This is a tooltip"
41
+ />
42
+ </div>
43
+ );
44
+ };
45
+
46
+ export const LeadingIconDemo = () => {
47
+ return (
48
+ <Input
49
+ isRequired
50
+ icon={Mail01}
51
+ label="Email"
52
+ hint="This is a hint text to help user."
53
+ placeholder="olivia@untitledui.com"
54
+ tooltip="This is a tooltip"
55
+ />
56
+ );
57
+ };
58
+
59
+ export const LeadingDropdownDemo = () => {
60
+ return (
61
+ <InputGroup
62
+ isRequired
63
+ label="Phone number"
64
+ hint="This is a hint text to help user."
65
+ leadingAddon={
66
+ <NativeSelect
67
+ aria-label="Country"
68
+ options={[
69
+ { value: "US", label: "US" },
70
+ { value: "CA", label: "CA" },
71
+ { value: "EU", label: "EU" },
72
+ ]}
73
+ />
74
+ }
75
+ >
76
+ <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" />
77
+ </InputGroup>
78
+ );
79
+ };
80
+
81
+ export const TrailingDropdownDemo = () => {
82
+ return (
83
+ <InputGroup
84
+ isRequired
85
+ prefix="$"
86
+ label="Sale amount"
87
+ hint="This is a hint text to help user."
88
+ trailingAddon={
89
+ <NativeSelect
90
+ aria-label="Sale amount"
91
+ options={[
92
+ { value: "USD", label: "USD" },
93
+ { value: "CAD", label: "CAD" },
94
+ { value: "EUR", label: "EUR" },
95
+ ]}
96
+ />
97
+ }
98
+ >
99
+ <InputBase type="tel" placeholder="1,000.00" tooltip="This is a tooltip" />
100
+ </InputGroup>
101
+ );
102
+ };
103
+
104
+ export const LeadingTextDemo = () => {
105
+ return (
106
+ <InputGroup isRequired label="Website" hint="This is a hint text to help user." leadingAddon={<InputGroup.Prefix>https://</InputGroup.Prefix>}>
107
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
108
+ </InputGroup>
109
+ );
110
+ };
111
+
112
+ export const PaymentInputDemo = () => {
113
+ return (
114
+ <PaymentInput
115
+ isRequired
116
+ label="Card number"
117
+ placeholder="1234 1234 1234 1234"
118
+ hint="This is a hint text to help user."
119
+ size="sm"
120
+ tooltip="This is a tooltip"
121
+ />
122
+ );
123
+ };
124
+
125
+ export const TrailingButtonDemo = () => {
126
+ const { copy, copied } = useClipboard();
127
+ const [value, setValue] = useState("");
128
+
129
+ return (
130
+ <InputGroup
131
+ isRequired
132
+ label="Website"
133
+ hint="This is a hint text to help user."
134
+ onChange={setValue}
135
+ trailingAddon={
136
+ <Button color="secondary" iconLeading={copied ? Check : Copy01} onClick={() => copy(value || "www.untitledui.com")}>
137
+ Copy
138
+ </Button>
139
+ }
140
+ >
141
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
142
+ </InputGroup>
143
+ );
144
+ };
145
+
146
+ export const Default = () => {
147
+ return (
148
+ <div className="flex flex-col gap-8">
149
+ <div className="flex flex-col gap-4">
150
+ <Input isRequired label="Email" hint="This is a hint text to help user." placeholder="olivia@untitledui.com" tooltip="This is a tooltip" />
151
+ <Input
152
+ isRequired
153
+ isDisabled
154
+ label="Email"
155
+ hint="This is a hint text to help user."
156
+ placeholder="olivia@untitledui.com"
157
+ tooltip="This is a tooltip"
158
+ />
159
+ <Input isRequired isInvalid label="Email" hint="This is an error message." placeholder="olivia@untitledui.com" tooltip="This is a tooltip" />
160
+ </div>
161
+ <div className="flex flex-col gap-4">
162
+ <Input
163
+ isRequired
164
+ size="md"
165
+ label="Email"
166
+ hint="This is a hint text to help user."
167
+ placeholder="olivia@untitledui.com"
168
+ tooltip="This is a tooltip"
169
+ />
170
+ <Input
171
+ isRequired
172
+ size="md"
173
+ isDisabled
174
+ label="Email"
175
+ hint="This is a hint text to help user."
176
+ placeholder="olivia@untitledui.com"
177
+ tooltip="This is a tooltip"
178
+ />
179
+ <Input
180
+ isRequired
181
+ size="md"
182
+ isInvalid
183
+ label="Email"
184
+ hint="This is an error message."
185
+ placeholder="olivia@untitledui.com"
186
+ tooltip="This is a tooltip"
187
+ />
188
+ </div>
189
+ </div>
190
+ );
191
+ };
192
+
193
+ export const LeadingIcon = () => {
194
+ return (
195
+ <div className="flex flex-col gap-8">
196
+ <div className="flex flex-col gap-4">
197
+ <Input
198
+ isRequired
199
+ icon={Mail01}
200
+ label="Email"
201
+ hint="This is a hint text to help user."
202
+ placeholder="olivia@untitledui.com"
203
+ tooltip="This is a tooltip"
204
+ />
205
+ <Input
206
+ isRequired
207
+ isDisabled
208
+ icon={Mail01}
209
+ label="Email"
210
+ hint="This is a hint text to help user."
211
+ placeholder="olivia@untitledui.com"
212
+ tooltip="This is a tooltip"
213
+ />
214
+ <Input
215
+ isRequired
216
+ isInvalid
217
+ icon={Mail01}
218
+ label="Email"
219
+ hint="This is an error message."
220
+ placeholder="olivia@untitledui.com"
221
+ tooltip="This is a tooltip"
222
+ />
223
+ </div>
224
+ <div className="flex flex-col gap-4">
225
+ <Input
226
+ isRequired
227
+ size="md"
228
+ icon={Mail01}
229
+ label="Email"
230
+ hint="This is a hint text to help user."
231
+ placeholder="olivia@untitledui.com"
232
+ tooltip="This is a tooltip"
233
+ />
234
+ <Input
235
+ isRequired
236
+ isDisabled
237
+ size="md"
238
+ icon={Mail01}
239
+ label="Email"
240
+ hint="This is a hint text to help user."
241
+ placeholder="olivia@untitledui.com"
242
+ tooltip="This is a tooltip"
243
+ />
244
+ <Input
245
+ isRequired
246
+ isInvalid
247
+ size="md"
248
+ icon={Mail01}
249
+ label="Email"
250
+ hint="This is an error message."
251
+ placeholder="olivia@untitledui.com"
252
+ tooltip="This is a tooltip"
253
+ />
254
+ </div>
255
+ </div>
256
+ );
257
+ };
258
+
259
+ export const LeadingDropdown = () => {
260
+ return (
261
+ <div className="flex flex-col gap-8">
262
+ <div className="flex flex-col gap-4">
263
+ <InputGroup
264
+ isRequired
265
+ label="Phone number"
266
+ hint="This is a hint text to help user."
267
+ leadingAddon={
268
+ <NativeSelect
269
+ aria-label="Country"
270
+ options={[
271
+ { value: "US", label: "US" },
272
+ { value: "CA", label: "CA" },
273
+ { value: "EU", label: "EU" },
274
+ ]}
275
+ />
276
+ }
277
+ >
278
+ <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" />
279
+ </InputGroup>
280
+ <InputGroup
281
+ isRequired
282
+ isDisabled
283
+ label="Phone number"
284
+ hint="This is a hint text to help user."
285
+ leadingAddon={
286
+ <NativeSelect
287
+ aria-label="Country"
288
+ options={[
289
+ { value: "US", label: "US" },
290
+ { value: "CA", label: "CA" },
291
+ { value: "EU", label: "EU" },
292
+ ]}
293
+ />
294
+ }
295
+ >
296
+ <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" />
297
+ </InputGroup>
298
+ <InputGroup
299
+ isRequired
300
+ isInvalid
301
+ label="Phone number"
302
+ hint="This is a hint text to help user."
303
+ leadingAddon={
304
+ <NativeSelect
305
+ aria-label="Country"
306
+ options={[
307
+ { value: "US", label: "US" },
308
+ { value: "CA", label: "CA" },
309
+ { value: "EU", label: "EU" },
310
+ ]}
311
+ />
312
+ }
313
+ >
314
+ <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" />
315
+ </InputGroup>
316
+ </div>
317
+ <div className="flex flex-col gap-4">
318
+ <InputGroup
319
+ isRequired
320
+ size="md"
321
+ label="Phone number"
322
+ hint="This is a hint text to help user."
323
+ leadingAddon={
324
+ <NativeSelect
325
+ aria-label="Country"
326
+ options={[
327
+ { value: "US", label: "US" },
328
+ { value: "CA", label: "CA" },
329
+ { value: "EU", label: "EU" },
330
+ ]}
331
+ />
332
+ }
333
+ >
334
+ <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" />
335
+ </InputGroup>
336
+ <InputGroup
337
+ isRequired
338
+ isDisabled
339
+ size="md"
340
+ label="Phone number"
341
+ hint="This is a hint text to help user."
342
+ leadingAddon={
343
+ <NativeSelect
344
+ aria-label="Country"
345
+ options={[
346
+ { value: "US", label: "US" },
347
+ { value: "CA", label: "CA" },
348
+ { value: "EU", label: "EU" },
349
+ ]}
350
+ />
351
+ }
352
+ >
353
+ <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" />
354
+ </InputGroup>
355
+ <InputGroup
356
+ isRequired
357
+ isInvalid
358
+ size="md"
359
+ label="Phone number"
360
+ hint="This is a hint text to help user."
361
+ leadingAddon={
362
+ <NativeSelect
363
+ aria-label="Country"
364
+ options={[
365
+ { value: "US", label: "US" },
366
+ { value: "CA", label: "CA" },
367
+ { value: "EU", label: "EU" },
368
+ ]}
369
+ />
370
+ }
371
+ >
372
+ <InputBase type="tel" placeholder="+1 (555) 000-0000" tooltip="This is a tooltip" />
373
+ </InputGroup>
374
+ </div>
375
+ </div>
376
+ );
377
+ };
378
+
379
+ export const TrailingDropdown = () => {
380
+ return (
381
+ <div className="flex flex-col gap-8">
382
+ <div className="flex flex-col gap-4">
383
+ <InputGroup
384
+ isRequired
385
+ prefix="$"
386
+ label="Phone number"
387
+ hint="This is a hint text to help user."
388
+ trailingAddon={
389
+ <NativeSelect
390
+ aria-label="Country"
391
+ options={[
392
+ { value: "US", label: "US" },
393
+ { value: "CA", label: "CA" },
394
+ { value: "EU", label: "EU" },
395
+ ]}
396
+ />
397
+ }
398
+ >
399
+ <InputBase type="tel" placeholder="1,000.00" tooltip="This is a tooltip" />
400
+ </InputGroup>
401
+ <InputGroup
402
+ isRequired
403
+ isDisabled
404
+ prefix="$"
405
+ label="Phone number"
406
+ hint="This is a hint text to help user."
407
+ trailingAddon={
408
+ <NativeSelect
409
+ aria-label="Country"
410
+ options={[
411
+ { value: "US", label: "US" },
412
+ { value: "CA", label: "CA" },
413
+ { value: "EU", label: "EU" },
414
+ ]}
415
+ />
416
+ }
417
+ >
418
+ <InputBase type="tel" placeholder="1,000.00" tooltip="This is a tooltip" />
419
+ </InputGroup>
420
+ <InputGroup
421
+ isRequired
422
+ isInvalid
423
+ prefix="$"
424
+ label="Phone number"
425
+ hint="This is a hint text to help user."
426
+ trailingAddon={
427
+ <NativeSelect
428
+ aria-label="Country"
429
+ options={[
430
+ { value: "US", label: "US" },
431
+ { value: "CA", label: "CA" },
432
+ { value: "EU", label: "EU" },
433
+ ]}
434
+ />
435
+ }
436
+ >
437
+ <InputBase type="tel" placeholder="1,000.00" tooltip="This is a tooltip" />
438
+ </InputGroup>
439
+ </div>
440
+ <div className="flex flex-col gap-4">
441
+ <InputGroup
442
+ isRequired
443
+ size="md"
444
+ prefix="$"
445
+ label="Phone number"
446
+ hint="This is a hint text to help user."
447
+ trailingAddon={
448
+ <NativeSelect
449
+ options={[
450
+ { value: "US", label: "US" },
451
+ { value: "CA", label: "CA" },
452
+ { value: "EU", label: "EU" },
453
+ ]}
454
+ />
455
+ }
456
+ >
457
+ <InputBase type="tel" placeholder="1,000.00" tooltip="This is a tooltip" />
458
+ </InputGroup>
459
+ <InputGroup
460
+ isRequired
461
+ isDisabled
462
+ size="md"
463
+ prefix="$"
464
+ label="Phone number"
465
+ hint="This is a hint text to help user."
466
+ trailingAddon={
467
+ <NativeSelect
468
+ aria-label="Country"
469
+ options={[
470
+ { value: "US", label: "US" },
471
+ { value: "CA", label: "CA" },
472
+ { value: "EU", label: "EU" },
473
+ ]}
474
+ />
475
+ }
476
+ >
477
+ <InputBase type="tel" placeholder="1,000.00" tooltip="This is a tooltip" />
478
+ </InputGroup>
479
+ <InputGroup
480
+ isRequired
481
+ isInvalid
482
+ size="md"
483
+ prefix="$"
484
+ label="Phone number"
485
+ hint="This is a hint text to help user."
486
+ trailingAddon={
487
+ <NativeSelect
488
+ aria-label="Country"
489
+ options={[
490
+ { value: "US", label: "US" },
491
+ { value: "CA", label: "CA" },
492
+ { value: "EU", label: "EU" },
493
+ ]}
494
+ />
495
+ }
496
+ >
497
+ <InputBase type="tel" placeholder="1,000.00" tooltip="This is a tooltip" />
498
+ </InputGroup>
499
+ </div>
500
+ </div>
501
+ );
502
+ };
503
+
504
+ export const LeadingText = () => {
505
+ return (
506
+ <div className="flex flex-col gap-8">
507
+ <div className="flex flex-col gap-4">
508
+ <InputGroup isRequired label="Website" hint="This is a hint text to help user." leadingAddon={<InputGroup.Prefix>https://</InputGroup.Prefix>}>
509
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
510
+ </InputGroup>
511
+ <InputGroup
512
+ isRequired
513
+ isDisabled
514
+ label="Website"
515
+ hint="This is a hint text to help user."
516
+ leadingAddon={<InputGroup.Prefix>https://</InputGroup.Prefix>}
517
+ >
518
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
519
+ </InputGroup>
520
+ <InputGroup
521
+ isRequired
522
+ isInvalid
523
+ label="Website"
524
+ hint="This is a hint text to help user."
525
+ leadingAddon={<InputGroup.Prefix>https://</InputGroup.Prefix>}
526
+ >
527
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
528
+ </InputGroup>
529
+ </div>
530
+ <div className="flex flex-col gap-4">
531
+ <InputGroup
532
+ isRequired
533
+ size="md"
534
+ label="Website"
535
+ hint="This is a hint text to help user."
536
+ leadingAddon={<InputGroup.Prefix>https://</InputGroup.Prefix>}
537
+ >
538
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
539
+ </InputGroup>
540
+ <InputGroup
541
+ isRequired
542
+ isDisabled
543
+ size="md"
544
+ label="Website"
545
+ hint="This is a hint text to help user."
546
+ leadingAddon={<InputGroup.Prefix>https://</InputGroup.Prefix>}
547
+ >
548
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
549
+ </InputGroup>
550
+ <InputGroup
551
+ isRequired
552
+ isInvalid
553
+ size="md"
554
+ label="Website"
555
+ hint="This is a hint text to help user."
556
+ leadingAddon={<InputGroup.Prefix>https://</InputGroup.Prefix>}
557
+ >
558
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
559
+ </InputGroup>
560
+ </div>
561
+ </div>
562
+ );
563
+ };
564
+
565
+ export const PaymentInputs = () => {
566
+ return (
567
+ <div className="flex flex-col gap-8">
568
+ <div className="flex flex-col gap-4">
569
+ <PaymentInput
570
+ isRequired
571
+ label="Card number"
572
+ placeholder="1234 1234 1234 1234"
573
+ hint="This is a hint text to help user."
574
+ size="sm"
575
+ tooltip="This is a tooltip"
576
+ />
577
+ <PaymentInput
578
+ isRequired
579
+ label="Card number"
580
+ placeholder="1234 1234 1234 1234"
581
+ hint="This is a hint text to help user."
582
+ size="sm"
583
+ isDisabled
584
+ tooltip="This is a tooltip"
585
+ />
586
+ <PaymentInput
587
+ isInvalid
588
+ isRequired
589
+ label="Card number"
590
+ placeholder="1234 1234 1234 1234"
591
+ hint="This is an error message."
592
+ size="sm"
593
+ tooltip="This is a tooltip"
594
+ />
595
+ </div>
596
+ <div className="flex flex-col gap-4">
597
+ <PaymentInput
598
+ isRequired
599
+ size="md"
600
+ label="Card number"
601
+ placeholder="1234 1234 1234 1234"
602
+ hint="This is a hint text to help user."
603
+ tooltip="This is a tooltip"
604
+ />
605
+ <PaymentInput
606
+ isRequired
607
+ size="md"
608
+ label="Card number"
609
+ placeholder="1234 1234 1234 1234"
610
+ hint="This is a hint text to help user."
611
+ isDisabled
612
+ tooltip="This is a tooltip"
613
+ />
614
+ <PaymentInput
615
+ isRequired
616
+ size="md"
617
+ isInvalid
618
+ label="Card number"
619
+ placeholder="1234 1234 1234 1234"
620
+ hint="This is an error message."
621
+ tooltip="This is a tooltip"
622
+ />
623
+ </div>
624
+ </div>
625
+ );
626
+ };
627
+
628
+ export const TrailingButton = () => {
629
+ const { copy, copied } = useClipboard();
630
+ const [inputValue1, setInputValue1] = useState("");
631
+ const [inputValue2, setInputValue2] = useState("");
632
+ const [inputValue3, setInputValue3] = useState("");
633
+ const [inputValue4, setInputValue4] = useState("");
634
+ const [inputValue5, setInputValue5] = useState("");
635
+ const [inputValue6, setInputValue6] = useState("");
636
+
637
+ return (
638
+ <div className="flex flex-col gap-8">
639
+ <div className="flex flex-col gap-4">
640
+ <InputGroup
641
+ isRequired
642
+ label="Website"
643
+ hint="This is a hint text to help user."
644
+ onChange={setInputValue1}
645
+ trailingAddon={
646
+ <Button
647
+ color="secondary"
648
+ iconLeading={copied === "input-1" ? Check : Copy01}
649
+ onClick={() => copy(inputValue1 || "www.untitledui.com", "input-1")}
650
+ >
651
+ Copy
652
+ </Button>
653
+ }
654
+ >
655
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
656
+ </InputGroup>
657
+
658
+ <InputGroup
659
+ isRequired
660
+ isDisabled
661
+ label="Website"
662
+ hint="This is a hint text to help user."
663
+ onChange={setInputValue2}
664
+ trailingAddon={
665
+ <Button
666
+ color="secondary"
667
+ iconLeading={copied === "input-2" ? Check : Copy01}
668
+ onClick={() => copy(inputValue2 || "www.untitledui.com", "input-2")}
669
+ >
670
+ Copy
671
+ </Button>
672
+ }
673
+ >
674
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
675
+ </InputGroup>
676
+ <InputGroup
677
+ isRequired
678
+ isInvalid
679
+ label="Website"
680
+ hint="This is a hint text to help user."
681
+ onChange={setInputValue3}
682
+ trailingAddon={
683
+ <Button
684
+ color="secondary"
685
+ iconLeading={copied === "input-3" ? Check : Copy01}
686
+ onClick={() => copy(inputValue3 || "www.untitledui.com", "input-3")}
687
+ >
688
+ Copy
689
+ </Button>
690
+ }
691
+ >
692
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
693
+ </InputGroup>
694
+ </div>
695
+ <div className="flex flex-col gap-4">
696
+ <InputGroup
697
+ isRequired
698
+ label="Website"
699
+ size="md"
700
+ hint="This is a hint text to help user."
701
+ onChange={setInputValue4}
702
+ trailingAddon={
703
+ <Button
704
+ color="secondary"
705
+ size="md"
706
+ iconLeading={copied === "input-4" ? Check : Copy01}
707
+ onClick={() => copy(inputValue4 || "www.untitledui.com", "input-4")}
708
+ >
709
+ Copy
710
+ </Button>
711
+ }
712
+ >
713
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
714
+ </InputGroup>
715
+ <InputGroup
716
+ isRequired
717
+ isDisabled
718
+ label="Website"
719
+ size="md"
720
+ hint="This is a hint text to help user."
721
+ onChange={setInputValue5}
722
+ trailingAddon={
723
+ <Button
724
+ color="secondary"
725
+ size="md"
726
+ iconLeading={copied === "input-5" ? Check : Copy01}
727
+ onClick={() => copy(inputValue5 || "www.untitledui.com", "input-5")}
728
+ >
729
+ Copy
730
+ </Button>
731
+ }
732
+ >
733
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
734
+ </InputGroup>
735
+ <InputGroup
736
+ isRequired
737
+ isInvalid
738
+ label="Website"
739
+ size="md"
740
+ hint="This is a hint text to help user."
741
+ onChange={setInputValue6}
742
+ trailingAddon={
743
+ <Button
744
+ color="secondary"
745
+ size="md"
746
+ iconLeading={copied === "input-6" ? Check : Copy01}
747
+ onClick={() => copy(inputValue6 || "www.untitledui.com", "input-6")}
748
+ >
749
+ Copy
750
+ </Button>
751
+ }
752
+ >
753
+ <InputBase placeholder="www.untitledui.com" tooltip="This is a tooltip" />
754
+ </InputGroup>
755
+ </div>
756
+ </div>
757
+ );
758
+ };