@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/dropdown/dropdown.demo.tsx ADDED
@@ -0,0 +1,137 @@
1
+ "use client";
2
+
3
+ import { ChevronDown, Container, HelpCircle, LayersTwo01, LogOut01, Settings01, User01 } from "@untitledui/icons";
4
+ import { Button as AriaButton } from "react-aria-components";
5
+ import { Avatar } from "@/components/base/avatar/avatar";
6
+ import { AvatarLabelGroup } from "@/components/base/avatar/avatar-label-group";
7
+ import { Button } from "@/components/base/buttons/button";
8
+ import { Dropdown } from "@/components/base/dropdown/dropdown";
9
+ import { cx } from "@/utils/cx";
10
+
11
+ export const DropdownButton = () => (
12
+ <Dropdown.Root>
13
+ <Button className="group" color="secondary" iconTrailing={ChevronDown}>
14
+ Account
15
+ </Button>
16
+
17
+ <Dropdown.Popover>
18
+ <div className="flex gap-3 border-b border-secondary p-3">
19
+ <AvatarLabelGroup
20
+ size="md"
21
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
22
+ status="online"
23
+ title="Olivia Rhye"
24
+ subtitle="olivia@untitledui.com"
25
+ />
26
+ </div>
27
+ <Dropdown.Menu>
28
+ <Dropdown.Section>
29
+ <Dropdown.Item addon="⌘K->P" icon={User01}>
30
+ View profile
31
+ </Dropdown.Item>
32
+ <Dropdown.Item addon="⌘S" icon={Settings01}>
33
+ Settings
34
+ </Dropdown.Item>
35
+ </Dropdown.Section>
36
+ <Dropdown.Separator />
37
+ <Dropdown.Section>
38
+ <Dropdown.Item icon={LayersTwo01}>Changelog</Dropdown.Item>
39
+ <Dropdown.Item icon={HelpCircle}>Support</Dropdown.Item>
40
+ <Dropdown.Item icon={Container}>API</Dropdown.Item>
41
+ </Dropdown.Section>
42
+ <Dropdown.Separator />
43
+ <Dropdown.Section>
44
+ <Dropdown.Item addon="⌥⇧Q" icon={LogOut01}>
45
+ Log out
46
+ </Dropdown.Item>
47
+ </Dropdown.Section>
48
+ </Dropdown.Menu>
49
+ </Dropdown.Popover>
50
+ </Dropdown.Root>
51
+ );
52
+
53
+ export const DropdownIcon = () => (
54
+ <Dropdown.Root>
55
+ <Dropdown.DotsButton />
56
+
57
+ <Dropdown.Popover>
58
+ <div className="flex gap-3 border-b border-secondary p-3">
59
+ <AvatarLabelGroup
60
+ size="md"
61
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
62
+ status="online"
63
+ title="Olivia Rhye"
64
+ subtitle="olivia@untitledui.com"
65
+ />
66
+ </div>
67
+ <Dropdown.Menu>
68
+ <Dropdown.Section>
69
+ <Dropdown.Item addon="⌘K->P" icon={User01}>
70
+ View profile
71
+ </Dropdown.Item>
72
+ <Dropdown.Item addon="⌘S" icon={Settings01}>
73
+ Settings
74
+ </Dropdown.Item>
75
+ </Dropdown.Section>
76
+ <Dropdown.Separator />
77
+ <Dropdown.Section>
78
+ <Dropdown.Item icon={LayersTwo01}>Changelog</Dropdown.Item>
79
+ <Dropdown.Item icon={HelpCircle}>Support</Dropdown.Item>
80
+ <Dropdown.Item icon={Container}>API</Dropdown.Item>
81
+ </Dropdown.Section>
82
+ <Dropdown.Separator />
83
+ <Dropdown.Section>
84
+ <Dropdown.Item addon="⌥⇧Q" icon={LogOut01}>
85
+ Log out
86
+ </Dropdown.Item>
87
+ </Dropdown.Section>
88
+ </Dropdown.Menu>
89
+ </Dropdown.Popover>
90
+ </Dropdown.Root>
91
+ );
92
+
93
+ export const DropdownAvatar = () => (
94
+ <Dropdown.Root>
95
+ <AriaButton
96
+ className={({ isPressed, isFocusVisible }) =>
97
+ cx("group relative inline-flex cursor-pointer rounded-full outline-focus-ring", (isPressed || isFocusVisible) && "outline-2 outline-offset-2")
98
+ }
99
+ >
100
+ <Avatar alt="Olivia Rhye" src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80" size="md" />
101
+ </AriaButton>
102
+
103
+ <Dropdown.Popover>
104
+ <div className="flex gap-3 border-b border-secondary p-3">
105
+ <AvatarLabelGroup
106
+ size="md"
107
+ src="https://www.untitledui.com/images/avatars/olivia-rhye?fm=webp&q=80"
108
+ status="online"
109
+ title="Olivia Rhye"
110
+ subtitle="olivia@untitledui.com"
111
+ />
112
+ </div>
113
+ <Dropdown.Menu>
114
+ <Dropdown.Section>
115
+ <Dropdown.Item addon="⌘K->P" icon={User01}>
116
+ View profile
117
+ </Dropdown.Item>
118
+ <Dropdown.Item addon="⌘S" icon={Settings01}>
119
+ Settings
120
+ </Dropdown.Item>
121
+ </Dropdown.Section>
122
+ <Dropdown.Separator />
123
+ <Dropdown.Section>
124
+ <Dropdown.Item icon={LayersTwo01}>Changelog</Dropdown.Item>
125
+ <Dropdown.Item icon={HelpCircle}>Support</Dropdown.Item>
126
+ <Dropdown.Item icon={Container}>API</Dropdown.Item>
127
+ </Dropdown.Section>
128
+ <Dropdown.Separator />
129
+ <Dropdown.Section>
130
+ <Dropdown.Item addon="⌥⇧Q" icon={LogOut01}>
131
+ Log out
132
+ </Dropdown.Item>
133
+ </Dropdown.Section>
134
+ </Dropdown.Menu>
135
+ </Dropdown.Popover>
136
+ </Dropdown.Root>
137
+ );
package/components/base/dropdown/dropdown.story.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import type { FC } from "react";
2
+ import * as Dropdowns from "@/components/base/dropdown/dropdown.demo";
3
+
4
+ export default {
5
+ title: "Base components/Dropdowns",
6
+ decorators: [
7
+ (Story: FC) => (
8
+ <div className="flex min-h-screen w-full items-start justify-center bg-primary p-8">
9
+ <Story />
10
+ </div>
11
+ ),
12
+ ],
13
+ };
14
+
15
+ export const DropdownButton = () => <Dropdowns.DropdownButton />;
16
+ DropdownButton.storyName = "Dropdown button";
17
+
18
+ export const DropdownIcon = () => <Dropdowns.DropdownIcon />;
19
+ DropdownIcon.storyName = "Dropdown icon";
20
+
21
+ export const DropdownAvatar = () => <Dropdowns.DropdownAvatar />;
22
+ DropdownAvatar.storyName = "Dropdown avatar";