@a2v2ai/uikit 0.0.38 → 0.0.39

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 (183) hide show
  1. package/Alert/Alert.d.ts +13 -0
  2. package/Alert/Alert.js +25 -0
  3. package/AlertDialog/AlertDialog.d.ts +43 -0
  4. package/AlertDialog/AlertDialog.js +71 -0
  5. package/Avatar/Avatar.d.ts +14 -0
  6. package/Avatar/Avatar.js +25 -0
  7. package/Badge/Badge.d.ts +11 -0
  8. package/Badge/Badge.js +23 -0
  9. package/Breadcrumb/Breadcrumb.d.ts +19 -0
  10. package/Breadcrumb/Breadcrumb.js +23 -0
  11. package/Button/Button.d.ts +23 -0
  12. package/Button/Button.js +52 -0
  13. package/Calendar/Calendar.d.ts +20 -0
  14. package/Calendar/Calendar.js +78 -0
  15. package/Card/Card.d.ts +16 -0
  16. package/Card/Card.js +28 -0
  17. package/Carousel/Carousel.d.ts +37 -0
  18. package/Carousel/Carousel.js +132 -0
  19. package/ChatBubble/ChatBubble.d.ts +33 -0
  20. package/ChatBubble/ChatBubble.js +107 -0
  21. package/Checkbox/Checkbox.d.ts +12 -0
  22. package/Checkbox/Checkbox.js +20 -0
  23. package/DataTable/DataTable.d.ts +35 -0
  24. package/DataTable/DataTable.js +51 -0
  25. package/Drawer/Drawer.d.ts +33 -0
  26. package/Drawer/Drawer.js +55 -0
  27. package/DropdownMenu/DropdownMenu.d.ts +27 -0
  28. package/DropdownMenu/DropdownMenu.js +35 -0
  29. package/ErrorMessage/ErrorMessage.d.ts +27 -0
  30. package/ErrorMessage/ErrorMessage.js +14 -0
  31. package/Flex/Flex.d.ts +31 -0
  32. package/Flex/Flex.js +64 -0
  33. package/IconButton/IconButton.d.ts +23 -0
  34. package/IconButton/IconButton.js +48 -0
  35. package/Input/Input.d.ts +27 -0
  36. package/Input/Input.js +42 -0
  37. package/InputOTP/InputOTP.d.ts +20 -0
  38. package/InputOTP/InputOTP.js +44 -0
  39. package/Label/Label.d.ts +13 -0
  40. package/Label/Label.js +19 -0
  41. package/Loader/Loader.d.ts +21 -0
  42. package/Loader/Loader.js +30 -0
  43. package/Menubar/Menubar.d.ts +26 -0
  44. package/Menubar/Menubar.js +54 -0
  45. package/Menubar/index.d.ts +1 -0
  46. package/Menubar/index.js +1 -0
  47. package/Pagination/Pagination.d.ts +35 -0
  48. package/Pagination/Pagination.js +37 -0
  49. package/Popover/Popover.d.ts +7 -0
  50. package/Popover/Popover.js +10 -0
  51. package/Progress/Progress.d.ts +17 -0
  52. package/Progress/Progress.js +33 -0
  53. package/RadioGroup/RadioGroup.d.ts +13 -0
  54. package/RadioGroup/RadioGroup.js +26 -0
  55. package/ScrollArea/ScrollArea.d.ts +5 -0
  56. package/ScrollArea/ScrollArea.js +11 -0
  57. package/Select/Select.d.ts +29 -0
  58. package/Select/Select.js +50 -0
  59. package/Separator/Separator.d.ts +4 -0
  60. package/Separator/Separator.js +7 -0
  61. package/Sidebar/Sidebar.d.ts +48 -0
  62. package/Sidebar/Sidebar.js +116 -0
  63. package/Sidebar/index.d.ts +2 -0
  64. package/Sidebar/index.js +1 -0
  65. package/Skeleton/Skeleton.d.ts +4 -0
  66. package/Skeleton/Skeleton.js +7 -0
  67. package/Slider/Slider.d.ts +6 -0
  68. package/Slider/Slider.js +7 -0
  69. package/Spinner/Spinner.d.ts +19 -0
  70. package/Spinner/Spinner.js +31 -0
  71. package/Switch/Switch.d.ts +12 -0
  72. package/Switch/Switch.js +30 -0
  73. package/Table/Table.d.ts +10 -0
  74. package/Table/Table.js +20 -0
  75. package/Tabs/Tabs.d.ts +15 -0
  76. package/Tabs/Tabs.js +24 -0
  77. package/Textarea/Textarea.d.ts +19 -0
  78. package/Textarea/Textarea.js +31 -0
  79. package/Toast/Toast.d.ts +12 -0
  80. package/Toast/Toast.js +25 -0
  81. package/Tooltip/Tooltip.d.ts +17 -0
  82. package/Tooltip/Tooltip.js +29 -0
  83. package/Typography/Typography.d.ts +20 -0
  84. package/Typography/Typography.js +71 -0
  85. package/helpers.d.ts +4 -0
  86. package/helpers.js +5 -0
  87. package/icons.d.ts +1 -0
  88. package/{icons.ts → icons.js} +1 -1
  89. package/index.css +68 -0
  90. package/index.d.ts +42 -0
  91. package/index.js +45 -0
  92. package/lib/typography-types.d.ts +4 -0
  93. package/lib/typography-types.js +118 -0
  94. package/lib/utils.d.ts +3 -0
  95. package/lib/utils.js +14 -0
  96. package/package.json +1 -1
  97. package/Alert/Alert.stories.tsx +0 -121
  98. package/Alert/Alert.tsx +0 -71
  99. package/AlertDialog/AlertDialog.stories.tsx +0 -665
  100. package/AlertDialog/AlertDialog.tsx +0 -241
  101. package/Avatar/Avatar.stories.tsx +0 -128
  102. package/Avatar/Avatar.tsx +0 -71
  103. package/Badge/Badge.stories.tsx +0 -76
  104. package/Badge/Badge.tsx +0 -39
  105. package/Breadcrumb/Breadcrumb.stories.tsx +0 -231
  106. package/Breadcrumb/Breadcrumb.tsx +0 -114
  107. package/Button/Button.stories.tsx +0 -684
  108. package/Button/Button.tsx +0 -107
  109. package/Calendar/Calendar.stories.tsx +0 -291
  110. package/Calendar/Calendar.tsx +0 -246
  111. package/Card/Card.stories.tsx +0 -136
  112. package/Card/Card.tsx +0 -96
  113. package/Carousel/Carousel.stories.tsx +0 -256
  114. package/Carousel/Carousel.tsx +0 -301
  115. package/ChatBubble/ChatBubble.stories.tsx +0 -339
  116. package/ChatBubble/ChatBubble.tsx +0 -179
  117. package/Checkbox/Checkbox.stories.tsx +0 -137
  118. package/Checkbox/Checkbox.tsx +0 -53
  119. package/DataTable/DataTable.stories.tsx +0 -400
  120. package/DataTable/DataTable.tsx +0 -207
  121. package/Drawer/Drawer.stories.tsx +0 -721
  122. package/Drawer/Drawer.tsx +0 -201
  123. package/DropdownMenu/DropdownMenu.stories.tsx +0 -251
  124. package/DropdownMenu/DropdownMenu.tsx +0 -199
  125. package/ErrorMessage/ErrorMessage.stories.tsx +0 -159
  126. package/ErrorMessage/ErrorMessage.tsx +0 -55
  127. package/Flex/Flex.stories.tsx +0 -390
  128. package/Flex/Flex.tsx +0 -102
  129. package/IconButton/IconButton.stories.tsx +0 -566
  130. package/IconButton/IconButton.tsx +0 -95
  131. package/Input/Input.stories.tsx +0 -566
  132. package/Input/Input.tsx +0 -168
  133. package/InputOTP/InputOTP.stories.tsx +0 -246
  134. package/InputOTP/InputOTP.tsx +0 -127
  135. package/Label/Label.stories.tsx +0 -110
  136. package/Label/Label.tsx +0 -44
  137. package/Loader/Loader.stories.tsx +0 -170
  138. package/Loader/Loader.tsx +0 -62
  139. package/Menubar/Menubar.stories.tsx +0 -382
  140. package/Menubar/Menubar.tsx +0 -274
  141. package/Menubar/index.ts +0 -18
  142. package/Pagination/Pagination.stories.tsx +0 -196
  143. package/Pagination/Pagination.tsx +0 -122
  144. package/Popover/Popover.stories.tsx +0 -133
  145. package/Popover/Popover.tsx +0 -31
  146. package/Progress/Progress.stories.tsx +0 -146
  147. package/Progress/Progress.tsx +0 -67
  148. package/RadioGroup/RadioGroup.stories.tsx +0 -159
  149. package/RadioGroup/RadioGroup.tsx +0 -68
  150. package/ScrollArea/ScrollArea.stories.tsx +0 -136
  151. package/ScrollArea/ScrollArea.tsx +0 -46
  152. package/Select/Select.stories.tsx +0 -378
  153. package/Select/Select.tsx +0 -230
  154. package/Separator/Separator.stories.tsx +0 -110
  155. package/Separator/Separator.tsx +0 -29
  156. package/Sidebar/Sidebar.stories.tsx +0 -340
  157. package/Sidebar/Sidebar.tsx +0 -414
  158. package/Sidebar/index.ts +0 -28
  159. package/Skeleton/Skeleton.stories.tsx +0 -117
  160. package/Skeleton/Skeleton.tsx +0 -16
  161. package/Slider/Slider.stories.tsx +0 -216
  162. package/Slider/Slider.tsx +0 -29
  163. package/Spinner/Spinner.stories.tsx +0 -210
  164. package/Spinner/Spinner.tsx +0 -78
  165. package/Switch/Switch.stories.tsx +0 -146
  166. package/Switch/Switch.tsx +0 -59
  167. package/Table/Table.stories.tsx +0 -510
  168. package/Table/Table.tsx +0 -114
  169. package/Tabs/Tabs.stories.tsx +0 -197
  170. package/Tabs/Tabs.tsx +0 -74
  171. package/Textarea/Textarea.stories.tsx +0 -187
  172. package/Textarea/Textarea.tsx +0 -73
  173. package/Toast/Toast.stories.tsx +0 -285
  174. package/Toast/Toast.tsx +0 -59
  175. package/Tooltip/Tooltip.stories.tsx +0 -463
  176. package/Tooltip/Tooltip.tsx +0 -96
  177. package/Typography/Typography.stories.tsx +0 -425
  178. package/Typography/Typography.tsx +0 -106
  179. package/helpers.ts +0 -5
  180. package/index.ts +0 -217
  181. package/lib/typography-types.ts +0 -223
  182. package/lib/utils.ts +0 -15
  183. package/tsconfig.json +0 -22
@@ -1,231 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react"
2
- import { Slash } from "lucide-react"
3
- import {
4
- Breadcrumb,
5
- BreadcrumbList,
6
- BreadcrumbItem,
7
- BreadcrumbLink,
8
- BreadcrumbPage,
9
- BreadcrumbSeparator,
10
- BreadcrumbEllipsis,
11
- } from "./Breadcrumb"
12
- import {
13
- DropdownMenu,
14
- DropdownMenuTrigger,
15
- DropdownMenuContent,
16
- DropdownMenuItem,
17
- } from "../DropdownMenu/DropdownMenu"
18
- import { Typography } from "../Typography/Typography"
19
- import { Flex } from "../Flex/Flex"
20
-
21
- const meta: Meta<typeof Breadcrumb> = {
22
- title: "Components/Breadcrumb",
23
- component: Breadcrumb,
24
- parameters: {
25
- layout: "centered",
26
- },
27
- tags: ["autodocs"],
28
- }
29
-
30
- export default meta
31
- type Story = StoryObj<typeof Breadcrumb>
32
-
33
- export const Default: Story = {
34
- render: () => (
35
- <Breadcrumb>
36
- <BreadcrumbList>
37
- <BreadcrumbItem>
38
- <BreadcrumbLink href="/">Home</BreadcrumbLink>
39
- </BreadcrumbItem>
40
- <BreadcrumbSeparator />
41
- <BreadcrumbItem>
42
- <BreadcrumbLink href="/components">Components</BreadcrumbLink>
43
- </BreadcrumbItem>
44
- <BreadcrumbSeparator />
45
- <BreadcrumbItem>
46
- <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
47
- </BreadcrumbItem>
48
- </BreadcrumbList>
49
- </Breadcrumb>
50
- ),
51
- }
52
-
53
- export const WithCustomSeparator: Story = {
54
- render: () => (
55
- <Breadcrumb>
56
- <BreadcrumbList>
57
- <BreadcrumbItem>
58
- <BreadcrumbLink href="/">Home</BreadcrumbLink>
59
- </BreadcrumbItem>
60
- <BreadcrumbSeparator>
61
- <Slash />
62
- </BreadcrumbSeparator>
63
- <BreadcrumbItem>
64
- <BreadcrumbLink href="/components">Components</BreadcrumbLink>
65
- </BreadcrumbItem>
66
- <BreadcrumbSeparator>
67
- <Slash />
68
- </BreadcrumbSeparator>
69
- <BreadcrumbItem>
70
- <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
71
- </BreadcrumbItem>
72
- </BreadcrumbList>
73
- </Breadcrumb>
74
- ),
75
- }
76
-
77
- export const WithEllipsis: Story = {
78
- render: () => (
79
- <Breadcrumb>
80
- <BreadcrumbList>
81
- <BreadcrumbItem>
82
- <BreadcrumbLink href="/">Home</BreadcrumbLink>
83
- </BreadcrumbItem>
84
- <BreadcrumbSeparator />
85
- <BreadcrumbItem>
86
- <BreadcrumbEllipsis />
87
- </BreadcrumbItem>
88
- <BreadcrumbSeparator />
89
- <BreadcrumbItem>
90
- <BreadcrumbLink href="/components">Components</BreadcrumbLink>
91
- </BreadcrumbItem>
92
- <BreadcrumbSeparator />
93
- <BreadcrumbItem>
94
- <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
95
- </BreadcrumbItem>
96
- </BreadcrumbList>
97
- </Breadcrumb>
98
- ),
99
- }
100
-
101
- export const WithDropdown: Story = {
102
- render: () => (
103
- <Breadcrumb>
104
- <BreadcrumbList>
105
- <BreadcrumbItem>
106
- <BreadcrumbLink href="/">Home</BreadcrumbLink>
107
- </BreadcrumbItem>
108
- <BreadcrumbSeparator />
109
- <BreadcrumbItem>
110
- <DropdownMenu>
111
- <DropdownMenuTrigger className="flex items-center gap-1">
112
- <BreadcrumbEllipsis className="h-4 w-4" />
113
- <span className="sr-only">Toggle menu</span>
114
- </DropdownMenuTrigger>
115
- <DropdownMenuContent align="start">
116
- <DropdownMenuItem>Documentation</DropdownMenuItem>
117
- <DropdownMenuItem>Themes</DropdownMenuItem>
118
- <DropdownMenuItem>GitHub</DropdownMenuItem>
119
- </DropdownMenuContent>
120
- </DropdownMenu>
121
- </BreadcrumbItem>
122
- <BreadcrumbSeparator />
123
- <BreadcrumbItem>
124
- <BreadcrumbLink href="/components">Components</BreadcrumbLink>
125
- </BreadcrumbItem>
126
- <BreadcrumbSeparator />
127
- <BreadcrumbItem>
128
- <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
129
- </BreadcrumbItem>
130
- </BreadcrumbList>
131
- </Breadcrumb>
132
- ),
133
- }
134
-
135
- export const LongPath: Story = {
136
- render: () => (
137
- <Breadcrumb>
138
- <BreadcrumbList>
139
- <BreadcrumbItem>
140
- <BreadcrumbLink href="/">Home</BreadcrumbLink>
141
- </BreadcrumbItem>
142
- <BreadcrumbSeparator />
143
- <BreadcrumbItem>
144
- <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
145
- </BreadcrumbItem>
146
- <BreadcrumbSeparator />
147
- <BreadcrumbItem>
148
- <BreadcrumbLink href="/dashboard/settings">Settings</BreadcrumbLink>
149
- </BreadcrumbItem>
150
- <BreadcrumbSeparator />
151
- <BreadcrumbItem>
152
- <BreadcrumbLink href="/dashboard/settings/profile">Profile</BreadcrumbLink>
153
- </BreadcrumbItem>
154
- <BreadcrumbSeparator />
155
- <BreadcrumbItem>
156
- <BreadcrumbPage>Edit</BreadcrumbPage>
157
- </BreadcrumbItem>
158
- </BreadcrumbList>
159
- </Breadcrumb>
160
- ),
161
- }
162
-
163
- export const AllVariants: Story = {
164
- render: () => (
165
- <Flex gap={8}>
166
- <div>
167
- <Typography variant="h4" className="mb-4">Default Breadcrumb</Typography>
168
- <Breadcrumb>
169
- <BreadcrumbList>
170
- <BreadcrumbItem>
171
- <BreadcrumbLink href="/">Home</BreadcrumbLink>
172
- </BreadcrumbItem>
173
- <BreadcrumbSeparator />
174
- <BreadcrumbItem>
175
- <BreadcrumbLink href="/products">Products</BreadcrumbLink>
176
- </BreadcrumbItem>
177
- <BreadcrumbSeparator />
178
- <BreadcrumbItem>
179
- <BreadcrumbPage>Category</BreadcrumbPage>
180
- </BreadcrumbItem>
181
- </BreadcrumbList>
182
- </Breadcrumb>
183
- </div>
184
-
185
- <div>
186
- <Typography variant="h4" className="mb-4">With Slash Separator</Typography>
187
- <Breadcrumb>
188
- <BreadcrumbList>
189
- <BreadcrumbItem>
190
- <BreadcrumbLink href="/">Home</BreadcrumbLink>
191
- </BreadcrumbItem>
192
- <BreadcrumbSeparator>
193
- <Slash />
194
- </BreadcrumbSeparator>
195
- <BreadcrumbItem>
196
- <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
197
- </BreadcrumbItem>
198
- <BreadcrumbSeparator>
199
- <Slash />
200
- </BreadcrumbSeparator>
201
- <BreadcrumbItem>
202
- <BreadcrumbPage>Guide</BreadcrumbPage>
203
- </BreadcrumbItem>
204
- </BreadcrumbList>
205
- </Breadcrumb>
206
- </div>
207
-
208
- <div>
209
- <Typography variant="h4" className="mb-4">With Ellipsis</Typography>
210
- <Breadcrumb>
211
- <BreadcrumbList>
212
- <BreadcrumbItem>
213
- <BreadcrumbLink href="/">Home</BreadcrumbLink>
214
- </BreadcrumbItem>
215
- <BreadcrumbSeparator />
216
- <BreadcrumbItem>
217
- <BreadcrumbEllipsis />
218
- </BreadcrumbItem>
219
- <BreadcrumbSeparator />
220
- <BreadcrumbItem>
221
- <BreadcrumbPage>Current Page</BreadcrumbPage>
222
- </BreadcrumbItem>
223
- </BreadcrumbList>
224
- </Breadcrumb>
225
- </div>
226
- </Flex>
227
- ),
228
- parameters: {
229
- layout: "padded",
230
- },
231
- }
@@ -1,114 +0,0 @@
1
- import * as React from "react"
2
- import { Slot } from "@radix-ui/react-slot"
3
- import { ChevronRight, MoreHorizontal } from "lucide-react"
4
- import { cn } from "../lib/utils"
5
-
6
- const Breadcrumb = React.forwardRef<
7
- HTMLElement,
8
- React.ComponentPropsWithoutRef<"nav"> & {
9
- separator?: React.ReactNode
10
- }
11
- >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
12
- Breadcrumb.displayName = "Breadcrumb"
13
-
14
- const BreadcrumbList = React.forwardRef<
15
- HTMLOListElement,
16
- React.ComponentPropsWithoutRef<"ol">
17
- >(({ className, ...props }, ref) => (
18
- <ol
19
- ref={ref}
20
- className={cn(
21
- "flex flex-wrap items-center gap-1.5 break-words text-sm text-grey-500 sm:gap-2.5",
22
- className
23
- )}
24
- {...props}
25
- />
26
- ))
27
- BreadcrumbList.displayName = "BreadcrumbList"
28
-
29
- const BreadcrumbItem = React.forwardRef<
30
- HTMLLIElement,
31
- React.ComponentPropsWithoutRef<"li">
32
- >(({ className, ...props }, ref) => (
33
- <li
34
- ref={ref}
35
- className={cn("inline-flex items-center gap-1.5", className)}
36
- {...props}
37
- />
38
- ))
39
- BreadcrumbItem.displayName = "BreadcrumbItem"
40
-
41
- const BreadcrumbLink = React.forwardRef<
42
- HTMLAnchorElement,
43
- React.ComponentPropsWithoutRef<"a"> & {
44
- asChild?: boolean
45
- }
46
- >(({ asChild, className, ...props }, ref) => {
47
- const Comp = asChild ? Slot : "a"
48
-
49
- return (
50
- <Comp
51
- ref={ref}
52
- className={cn("transition-colors hover:text-main-950", className)}
53
- {...props}
54
- />
55
- )
56
- })
57
- BreadcrumbLink.displayName = "BreadcrumbLink"
58
-
59
- const BreadcrumbPage = React.forwardRef<
60
- HTMLSpanElement,
61
- React.ComponentPropsWithoutRef<"span">
62
- >(({ className, ...props }, ref) => (
63
- <span
64
- ref={ref}
65
- role="link"
66
- aria-disabled="true"
67
- aria-current="page"
68
- className={cn("font-normal text-main-950", className)}
69
- {...props}
70
- />
71
- ))
72
- BreadcrumbPage.displayName = "BreadcrumbPage"
73
-
74
- const BreadcrumbSeparator = ({
75
- children,
76
- className,
77
- ...props
78
- }: React.ComponentProps<"li">) => (
79
- <li
80
- role="presentation"
81
- aria-hidden="true"
82
- className={cn("[&>svg]:size-3.5", className)}
83
- {...props}
84
- >
85
- {children ?? <ChevronRight />}
86
- </li>
87
- )
88
- BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
89
-
90
- const BreadcrumbEllipsis = ({
91
- className,
92
- ...props
93
- }: React.ComponentProps<"span">) => (
94
- <span
95
- role="presentation"
96
- aria-hidden="true"
97
- className={cn("flex h-9 w-9 items-center justify-center", className)}
98
- {...props}
99
- >
100
- <MoreHorizontal className="size-4" />
101
- <span className="sr-only">More</span>
102
- </span>
103
- )
104
- BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
105
-
106
- export {
107
- Breadcrumb,
108
- BreadcrumbList,
109
- BreadcrumbItem,
110
- BreadcrumbLink,
111
- BreadcrumbPage,
112
- BreadcrumbSeparator,
113
- BreadcrumbEllipsis,
114
- }