@greatapps/greatchat-ui 0.1.5 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +106 -5
- package/dist/index.js +1787 -1116
- package/dist/index.js.map +1 -1
- package/package.json +17 -13
- package/src/components/channel-card.tsx +1 -1
- package/src/components/channel-create-dialog.tsx +126 -0
- package/src/components/channel-edit-dialog.tsx +132 -0
- package/src/components/channels-page.tsx +242 -0
- package/src/components/chat-dashboard.tsx +433 -0
- package/src/components/chat-input.tsx +1 -2
- package/src/components/chat-view.tsx +1 -8
- package/src/components/contact-avatar.tsx +1 -2
- package/src/components/contact-form-dialog.tsx +139 -0
- package/src/components/contact-info-panel.tsx +1 -4
- package/src/components/contacts-page.tsx +41 -0
- package/src/components/contacts-table.tsx +216 -0
- package/src/components/data-table.tsx +185 -0
- package/src/components/inbox-item.tsx +6 -4
- package/src/components/inbox-page.tsx +167 -0
- package/src/components/inbox-sidebar.tsx +1 -5
- package/src/components/message-bubble.tsx +4 -6
- package/src/components/new-conversation-dialog.tsx +2 -6
- package/src/components/whatsapp-icon.tsx +21 -0
- package/src/components/whatsapp-qr-dialog.tsx +147 -0
- package/src/components/whatsapp-status-badge.tsx +1 -1
- package/src/index.ts +37 -2
- package/src/components/ui/alert-dialog.tsx +0 -167
- package/src/components/ui/avatar.tsx +0 -51
- package/src/components/ui/badge.tsx +0 -44
- package/src/components/ui/button.tsx +0 -62
- package/src/components/ui/command.tsx +0 -106
- package/src/components/ui/dialog.tsx +0 -133
- package/src/components/ui/dropdown-menu.tsx +0 -173
- package/src/components/ui/input.tsx +0 -19
- package/src/components/ui/scroll-area.tsx +0 -50
- package/src/components/ui/select.tsx +0 -156
- package/src/components/ui/separator.tsx +0 -26
- package/src/components/ui/skeleton.tsx +0 -16
- package/src/components/ui/tabs.tsx +0 -64
- package/src/components/ui/textarea.tsx +0 -18
- package/src/components/ui/tooltip.tsx +0 -58
- package/src/lib/utils.ts +0 -6
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Dialog as DialogPrimitive } from "radix-ui";
|
|
3
|
-
import { X } from "lucide-react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
6
|
-
|
|
7
|
-
function Dialog({
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
|
10
|
-
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function DialogTrigger({
|
|
14
|
-
...props
|
|
15
|
-
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
|
16
|
-
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function DialogPortal({
|
|
20
|
-
...props
|
|
21
|
-
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
|
22
|
-
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function DialogClose({
|
|
26
|
-
...props
|
|
27
|
-
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
|
28
|
-
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function DialogOverlay({
|
|
32
|
-
className,
|
|
33
|
-
...props
|
|
34
|
-
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
|
35
|
-
return (
|
|
36
|
-
<DialogPrimitive.Overlay
|
|
37
|
-
data-slot="dialog-overlay"
|
|
38
|
-
className={cn(
|
|
39
|
-
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
40
|
-
className,
|
|
41
|
-
)}
|
|
42
|
-
{...props}
|
|
43
|
-
/>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function DialogContent({
|
|
48
|
-
className,
|
|
49
|
-
children,
|
|
50
|
-
...props
|
|
51
|
-
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
|
|
52
|
-
return (
|
|
53
|
-
<DialogPortal>
|
|
54
|
-
<DialogOverlay />
|
|
55
|
-
<DialogPrimitive.Content
|
|
56
|
-
data-slot="dialog-content"
|
|
57
|
-
className={cn(
|
|
58
|
-
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
|
59
|
-
className,
|
|
60
|
-
)}
|
|
61
|
-
{...props}
|
|
62
|
-
>
|
|
63
|
-
{children}
|
|
64
|
-
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
|
65
|
-
<X className="h-4 w-4" />
|
|
66
|
-
<span className="sr-only">Close</span>
|
|
67
|
-
</DialogPrimitive.Close>
|
|
68
|
-
</DialogPrimitive.Content>
|
|
69
|
-
</DialogPortal>
|
|
70
|
-
);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
74
|
-
return (
|
|
75
|
-
<div
|
|
76
|
-
data-slot="dialog-header"
|
|
77
|
-
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
|
78
|
-
{...props}
|
|
79
|
-
/>
|
|
80
|
-
);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
84
|
-
return (
|
|
85
|
-
<div
|
|
86
|
-
data-slot="dialog-footer"
|
|
87
|
-
className={cn(
|
|
88
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
|
|
89
|
-
className,
|
|
90
|
-
)}
|
|
91
|
-
{...props}
|
|
92
|
-
/>
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
function DialogTitle({
|
|
97
|
-
className,
|
|
98
|
-
...props
|
|
99
|
-
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
|
100
|
-
return (
|
|
101
|
-
<DialogPrimitive.Title
|
|
102
|
-
data-slot="dialog-title"
|
|
103
|
-
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
|
|
104
|
-
{...props}
|
|
105
|
-
/>
|
|
106
|
-
);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
function DialogDescription({
|
|
110
|
-
className,
|
|
111
|
-
...props
|
|
112
|
-
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
|
113
|
-
return (
|
|
114
|
-
<DialogPrimitive.Description
|
|
115
|
-
data-slot="dialog-description"
|
|
116
|
-
className={cn("text-sm text-muted-foreground", className)}
|
|
117
|
-
{...props}
|
|
118
|
-
/>
|
|
119
|
-
);
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
export {
|
|
123
|
-
Dialog,
|
|
124
|
-
DialogPortal,
|
|
125
|
-
DialogOverlay,
|
|
126
|
-
DialogClose,
|
|
127
|
-
DialogTrigger,
|
|
128
|
-
DialogContent,
|
|
129
|
-
DialogHeader,
|
|
130
|
-
DialogFooter,
|
|
131
|
-
DialogTitle,
|
|
132
|
-
DialogDescription,
|
|
133
|
-
};
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
|
|
3
|
-
import { Check, ChevronRight } from "lucide-react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
6
|
-
|
|
7
|
-
function DropdownMenu({
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
|
10
|
-
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function DropdownMenuTrigger({
|
|
14
|
-
...props
|
|
15
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
|
16
|
-
return (
|
|
17
|
-
<DropdownMenuPrimitive.Trigger
|
|
18
|
-
data-slot="dropdown-menu-trigger"
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function DropdownMenuContent({
|
|
25
|
-
className,
|
|
26
|
-
align = "start",
|
|
27
|
-
sideOffset = 4,
|
|
28
|
-
...props
|
|
29
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
|
30
|
-
return (
|
|
31
|
-
<DropdownMenuPrimitive.Portal>
|
|
32
|
-
<DropdownMenuPrimitive.Content
|
|
33
|
-
data-slot="dropdown-menu-content"
|
|
34
|
-
sideOffset={sideOffset}
|
|
35
|
-
align={align}
|
|
36
|
-
className={cn(
|
|
37
|
-
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 z-50 overflow-x-hidden overflow-y-auto",
|
|
38
|
-
className,
|
|
39
|
-
)}
|
|
40
|
-
{...props}
|
|
41
|
-
/>
|
|
42
|
-
</DropdownMenuPrimitive.Portal>
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
function DropdownMenuGroup({
|
|
47
|
-
...props
|
|
48
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
|
49
|
-
return (
|
|
50
|
-
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
|
51
|
-
);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function DropdownMenuItem({
|
|
55
|
-
className,
|
|
56
|
-
inset,
|
|
57
|
-
variant = "default",
|
|
58
|
-
...props
|
|
59
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
|
60
|
-
inset?: boolean;
|
|
61
|
-
variant?: "default" | "destructive";
|
|
62
|
-
}) {
|
|
63
|
-
return (
|
|
64
|
-
<DropdownMenuPrimitive.Item
|
|
65
|
-
data-slot="dropdown-menu-item"
|
|
66
|
-
data-inset={inset}
|
|
67
|
-
data-variant={variant}
|
|
68
|
-
className={cn(
|
|
69
|
-
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
70
|
-
className,
|
|
71
|
-
)}
|
|
72
|
-
{...props}
|
|
73
|
-
/>
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
function DropdownMenuCheckboxItem({
|
|
78
|
-
className,
|
|
79
|
-
children,
|
|
80
|
-
checked,
|
|
81
|
-
...props
|
|
82
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
|
83
|
-
return (
|
|
84
|
-
<DropdownMenuPrimitive.CheckboxItem
|
|
85
|
-
data-slot="dropdown-menu-checkbox-item"
|
|
86
|
-
className={cn(
|
|
87
|
-
"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
88
|
-
className,
|
|
89
|
-
)}
|
|
90
|
-
checked={checked}
|
|
91
|
-
{...props}
|
|
92
|
-
>
|
|
93
|
-
<span className="absolute right-2 flex items-center justify-center pointer-events-none">
|
|
94
|
-
<DropdownMenuPrimitive.ItemIndicator>
|
|
95
|
-
<Check />
|
|
96
|
-
</DropdownMenuPrimitive.ItemIndicator>
|
|
97
|
-
</span>
|
|
98
|
-
{children}
|
|
99
|
-
</DropdownMenuPrimitive.CheckboxItem>
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
function DropdownMenuSeparator({
|
|
104
|
-
className,
|
|
105
|
-
...props
|
|
106
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
|
107
|
-
return (
|
|
108
|
-
<DropdownMenuPrimitive.Separator
|
|
109
|
-
data-slot="dropdown-menu-separator"
|
|
110
|
-
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
|
111
|
-
{...props}
|
|
112
|
-
/>
|
|
113
|
-
);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
function DropdownMenuSub({
|
|
117
|
-
...props
|
|
118
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
|
119
|
-
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
function DropdownMenuSubTrigger({
|
|
123
|
-
className,
|
|
124
|
-
inset,
|
|
125
|
-
children,
|
|
126
|
-
...props
|
|
127
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
128
|
-
inset?: boolean;
|
|
129
|
-
}) {
|
|
130
|
-
return (
|
|
131
|
-
<DropdownMenuPrimitive.SubTrigger
|
|
132
|
-
data-slot="dropdown-menu-sub-trigger"
|
|
133
|
-
data-inset={inset}
|
|
134
|
-
className={cn(
|
|
135
|
-
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
136
|
-
className,
|
|
137
|
-
)}
|
|
138
|
-
{...props}
|
|
139
|
-
>
|
|
140
|
-
{children}
|
|
141
|
-
<ChevronRight className="ml-auto" />
|
|
142
|
-
</DropdownMenuPrimitive.SubTrigger>
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
function DropdownMenuSubContent({
|
|
147
|
-
className,
|
|
148
|
-
...props
|
|
149
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
|
150
|
-
return (
|
|
151
|
-
<DropdownMenuPrimitive.SubContent
|
|
152
|
-
data-slot="dropdown-menu-sub-content"
|
|
153
|
-
className={cn(
|
|
154
|
-
"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 z-50 overflow-hidden",
|
|
155
|
-
className,
|
|
156
|
-
)}
|
|
157
|
-
{...props}
|
|
158
|
-
/>
|
|
159
|
-
);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
export {
|
|
163
|
-
DropdownMenu,
|
|
164
|
-
DropdownMenuTrigger,
|
|
165
|
-
DropdownMenuContent,
|
|
166
|
-
DropdownMenuGroup,
|
|
167
|
-
DropdownMenuItem,
|
|
168
|
-
DropdownMenuCheckboxItem,
|
|
169
|
-
DropdownMenuSeparator,
|
|
170
|
-
DropdownMenuSub,
|
|
171
|
-
DropdownMenuSubTrigger,
|
|
172
|
-
DropdownMenuSubContent,
|
|
173
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils";
|
|
4
|
-
|
|
5
|
-
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
|
6
|
-
return (
|
|
7
|
-
<input
|
|
8
|
-
type={type}
|
|
9
|
-
data-slot="input"
|
|
10
|
-
className={cn(
|
|
11
|
-
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
12
|
-
className,
|
|
13
|
-
)}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export { Input };
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils";
|
|
5
|
-
|
|
6
|
-
function ScrollArea({
|
|
7
|
-
className,
|
|
8
|
-
children,
|
|
9
|
-
...props
|
|
10
|
-
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
|
11
|
-
return (
|
|
12
|
-
<ScrollAreaPrimitive.Root
|
|
13
|
-
data-slot="scroll-area"
|
|
14
|
-
className={cn("relative", className)}
|
|
15
|
-
{...props}
|
|
16
|
-
>
|
|
17
|
-
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] [&>div]:!block">
|
|
18
|
-
{children}
|
|
19
|
-
</ScrollAreaPrimitive.Viewport>
|
|
20
|
-
<ScrollBar />
|
|
21
|
-
<ScrollAreaPrimitive.Corner />
|
|
22
|
-
</ScrollAreaPrimitive.Root>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function ScrollBar({
|
|
27
|
-
className,
|
|
28
|
-
orientation = "vertical",
|
|
29
|
-
...props
|
|
30
|
-
}: React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>) {
|
|
31
|
-
return (
|
|
32
|
-
<ScrollAreaPrimitive.Scrollbar
|
|
33
|
-
data-slot="scroll-bar"
|
|
34
|
-
orientation={orientation}
|
|
35
|
-
className={cn(
|
|
36
|
-
"flex touch-none p-px transition-colors select-none",
|
|
37
|
-
orientation === "vertical" &&
|
|
38
|
-
"h-full w-2.5 border-l border-l-transparent",
|
|
39
|
-
orientation === "horizontal" &&
|
|
40
|
-
"h-2.5 flex-col border-t border-t-transparent",
|
|
41
|
-
className,
|
|
42
|
-
)}
|
|
43
|
-
{...props}
|
|
44
|
-
>
|
|
45
|
-
<ScrollAreaPrimitive.Thumb className="relative flex-1 rounded-full bg-border" />
|
|
46
|
-
</ScrollAreaPrimitive.Scrollbar>
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export { ScrollArea, ScrollBar };
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Select as SelectPrimitive } from "radix-ui";
|
|
3
|
-
import { Check, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
6
|
-
|
|
7
|
-
function Select({
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
|
|
10
|
-
return <SelectPrimitive.Root data-slot="select" {...props} />;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function SelectGroup({
|
|
14
|
-
className,
|
|
15
|
-
...props
|
|
16
|
-
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
|
|
17
|
-
return (
|
|
18
|
-
<SelectPrimitive.Group
|
|
19
|
-
data-slot="select-group"
|
|
20
|
-
className={cn("scroll-my-1 p-1", className)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function SelectValue({
|
|
27
|
-
...props
|
|
28
|
-
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
|
|
29
|
-
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function SelectTrigger({
|
|
33
|
-
className,
|
|
34
|
-
size = "default",
|
|
35
|
-
children,
|
|
36
|
-
...props
|
|
37
|
-
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
|
|
38
|
-
size?: "sm" | "default";
|
|
39
|
-
}) {
|
|
40
|
-
return (
|
|
41
|
-
<SelectPrimitive.Trigger
|
|
42
|
-
data-slot="select-trigger"
|
|
43
|
-
data-size={size}
|
|
44
|
-
className={cn(
|
|
45
|
-
"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
46
|
-
className,
|
|
47
|
-
)}
|
|
48
|
-
{...props}
|
|
49
|
-
>
|
|
50
|
-
{children}
|
|
51
|
-
<SelectPrimitive.Icon asChild>
|
|
52
|
-
<ChevronsUpDown className="text-muted-foreground size-4 pointer-events-none" />
|
|
53
|
-
</SelectPrimitive.Icon>
|
|
54
|
-
</SelectPrimitive.Trigger>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function SelectContent({
|
|
59
|
-
className,
|
|
60
|
-
children,
|
|
61
|
-
position = "item-aligned",
|
|
62
|
-
align = "center",
|
|
63
|
-
...props
|
|
64
|
-
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
|
|
65
|
-
return (
|
|
66
|
-
<SelectPrimitive.Portal>
|
|
67
|
-
<SelectPrimitive.Content
|
|
68
|
-
data-slot="select-content"
|
|
69
|
-
className={cn(
|
|
70
|
-
"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) overflow-x-hidden overflow-y-auto",
|
|
71
|
-
position === "popper" &&
|
|
72
|
-
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
73
|
-
className,
|
|
74
|
-
)}
|
|
75
|
-
position={position}
|
|
76
|
-
align={align}
|
|
77
|
-
{...props}
|
|
78
|
-
>
|
|
79
|
-
<SelectScrollUpButton />
|
|
80
|
-
<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
|
|
81
|
-
<SelectScrollDownButton />
|
|
82
|
-
</SelectPrimitive.Content>
|
|
83
|
-
</SelectPrimitive.Portal>
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function SelectItem({
|
|
88
|
-
className,
|
|
89
|
-
children,
|
|
90
|
-
...props
|
|
91
|
-
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
|
|
92
|
-
return (
|
|
93
|
-
<SelectPrimitive.Item
|
|
94
|
-
data-slot="select-item"
|
|
95
|
-
className={cn(
|
|
96
|
-
"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
97
|
-
className,
|
|
98
|
-
)}
|
|
99
|
-
{...props}
|
|
100
|
-
>
|
|
101
|
-
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
|
|
102
|
-
<SelectPrimitive.ItemIndicator>
|
|
103
|
-
<Check className="pointer-events-none" />
|
|
104
|
-
</SelectPrimitive.ItemIndicator>
|
|
105
|
-
</span>
|
|
106
|
-
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
107
|
-
</SelectPrimitive.Item>
|
|
108
|
-
);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
function SelectScrollUpButton({
|
|
112
|
-
className,
|
|
113
|
-
...props
|
|
114
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
|
|
115
|
-
return (
|
|
116
|
-
<SelectPrimitive.ScrollUpButton
|
|
117
|
-
data-slot="select-scroll-up-button"
|
|
118
|
-
className={cn(
|
|
119
|
-
"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
|
|
120
|
-
className,
|
|
121
|
-
)}
|
|
122
|
-
{...props}
|
|
123
|
-
>
|
|
124
|
-
<ChevronUp />
|
|
125
|
-
</SelectPrimitive.ScrollUpButton>
|
|
126
|
-
);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
function SelectScrollDownButton({
|
|
130
|
-
className,
|
|
131
|
-
...props
|
|
132
|
-
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
|
|
133
|
-
return (
|
|
134
|
-
<SelectPrimitive.ScrollDownButton
|
|
135
|
-
data-slot="select-scroll-down-button"
|
|
136
|
-
className={cn(
|
|
137
|
-
"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
|
|
138
|
-
className,
|
|
139
|
-
)}
|
|
140
|
-
{...props}
|
|
141
|
-
>
|
|
142
|
-
<ChevronDown />
|
|
143
|
-
</SelectPrimitive.ScrollDownButton>
|
|
144
|
-
);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
export {
|
|
148
|
-
Select,
|
|
149
|
-
SelectContent,
|
|
150
|
-
SelectGroup,
|
|
151
|
-
SelectItem,
|
|
152
|
-
SelectScrollDownButton,
|
|
153
|
-
SelectScrollUpButton,
|
|
154
|
-
SelectTrigger,
|
|
155
|
-
SelectValue,
|
|
156
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Separator as SeparatorPrimitive } from "radix-ui";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils";
|
|
5
|
-
|
|
6
|
-
function Separator({
|
|
7
|
-
className,
|
|
8
|
-
orientation = "horizontal",
|
|
9
|
-
decorative = true,
|
|
10
|
-
...props
|
|
11
|
-
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
|
12
|
-
return (
|
|
13
|
-
<SeparatorPrimitive.Root
|
|
14
|
-
data-slot="separator"
|
|
15
|
-
decorative={decorative}
|
|
16
|
-
orientation={orientation}
|
|
17
|
-
className={cn(
|
|
18
|
-
"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
19
|
-
className,
|
|
20
|
-
)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export { Separator };
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { cn } from "../../lib/utils";
|
|
2
|
-
|
|
3
|
-
function Skeleton({
|
|
4
|
-
className,
|
|
5
|
-
...props
|
|
6
|
-
}: React.ComponentProps<"div">) {
|
|
7
|
-
return (
|
|
8
|
-
<div
|
|
9
|
-
data-slot="skeleton"
|
|
10
|
-
className={cn("bg-muted rounded-md animate-pulse", className)}
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export { Skeleton };
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Tabs as TabsPrimitive } from "radix-ui";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../../lib/utils";
|
|
5
|
-
|
|
6
|
-
function Tabs({
|
|
7
|
-
className,
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
|
10
|
-
return (
|
|
11
|
-
<TabsPrimitive.Root
|
|
12
|
-
data-slot="tabs"
|
|
13
|
-
className={cn("flex flex-col gap-2", className)}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function TabsList({
|
|
20
|
-
className,
|
|
21
|
-
...props
|
|
22
|
-
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
|
23
|
-
return (
|
|
24
|
-
<TabsPrimitive.List
|
|
25
|
-
data-slot="tabs-list"
|
|
26
|
-
className={cn(
|
|
27
|
-
"inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
|
28
|
-
className,
|
|
29
|
-
)}
|
|
30
|
-
{...props}
|
|
31
|
-
/>
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function TabsTrigger({
|
|
36
|
-
className,
|
|
37
|
-
...props
|
|
38
|
-
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
|
39
|
-
return (
|
|
40
|
-
<TabsPrimitive.Trigger
|
|
41
|
-
data-slot="tabs-trigger"
|
|
42
|
-
className={cn(
|
|
43
|
-
"inline-flex items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4",
|
|
44
|
-
className,
|
|
45
|
-
)}
|
|
46
|
-
{...props}
|
|
47
|
-
/>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function TabsContent({
|
|
52
|
-
className,
|
|
53
|
-
...props
|
|
54
|
-
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
|
55
|
-
return (
|
|
56
|
-
<TabsPrimitive.Content
|
|
57
|
-
data-slot="tabs-content"
|
|
58
|
-
className={cn("flex-1 outline-none", className)}
|
|
59
|
-
{...props}
|
|
60
|
-
/>
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../../lib/utils";
|
|
4
|
-
|
|
5
|
-
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
|
6
|
-
return (
|
|
7
|
-
<textarea
|
|
8
|
-
data-slot="textarea"
|
|
9
|
-
className={cn(
|
|
10
|
-
"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
11
|
-
className,
|
|
12
|
-
)}
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { Textarea };
|