@codrstudio/openclaude-chat 0.1.0 → 0.1.9
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/components/StreamingIndicator.js +5 -5
- package/dist/display/DisplayReactRenderer.js +12 -12
- package/dist/display/react-sandbox/bootstrap.js +150 -150
- package/dist/styles.css +1 -2
- package/package.json +64 -61
- package/src/components/Chat.tsx +107 -107
- package/src/components/ErrorNote.tsx +35 -35
- package/src/components/LazyRender.tsx +42 -42
- package/src/components/Markdown.tsx +114 -114
- package/src/components/MessageBubble.tsx +107 -107
- package/src/components/MessageInput.tsx +421 -421
- package/src/components/MessageList.tsx +153 -153
- package/src/components/StreamingIndicator.tsx +19 -19
- package/src/display/AlertRenderer.tsx +23 -23
- package/src/display/CarouselRenderer.tsx +141 -141
- package/src/display/ChartRenderer.tsx +195 -195
- package/src/display/ChoiceButtonsRenderer.tsx +114 -114
- package/src/display/CodeBlockRenderer.tsx +49 -49
- package/src/display/ComparisonTableRenderer.tsx +132 -132
- package/src/display/DataTableRenderer.tsx +144 -144
- package/src/display/DisplayReactRenderer.tsx +269 -269
- package/src/display/FileCardRenderer.tsx +55 -55
- package/src/display/GalleryRenderer.tsx +65 -65
- package/src/display/ImageViewerRenderer.tsx +114 -114
- package/src/display/LinkPreviewRenderer.tsx +74 -74
- package/src/display/MapViewRenderer.tsx +75 -75
- package/src/display/MetricCardRenderer.tsx +29 -29
- package/src/display/PriceHighlightRenderer.tsx +62 -62
- package/src/display/ProductCardRenderer.tsx +112 -112
- package/src/display/ProgressStepsRenderer.tsx +59 -59
- package/src/display/SourcesListRenderer.tsx +47 -47
- package/src/display/SpreadsheetRenderer.tsx +86 -86
- package/src/display/StepTimelineRenderer.tsx +75 -75
- package/src/display/index.ts +21 -21
- package/src/display/react-sandbox/bootstrap.ts +155 -155
- package/src/display/registry.ts +84 -84
- package/src/display/sdk-types.ts +217 -217
- package/src/hooks/ChatProvider.tsx +21 -21
- package/src/hooks/useIsMobile.ts +15 -15
- package/src/hooks/useOpenClaudeChat.ts +476 -476
- package/src/index.ts +76 -76
- package/src/lib/utils.ts +6 -6
- package/src/parts/PartErrorBoundary.tsx +51 -51
- package/src/parts/PartRenderer.tsx +145 -145
- package/src/parts/ReasoningBlock.tsx +41 -41
- package/src/parts/ToolActivity.tsx +78 -78
- package/src/parts/ToolResult.tsx +79 -79
- package/src/styles.css +2 -2
- package/src/types.ts +41 -41
- package/src/ui/alert.tsx +77 -77
- package/src/ui/badge.tsx +36 -36
- package/src/ui/button.tsx +54 -54
- package/src/ui/card.tsx +68 -68
- package/src/ui/collapsible.tsx +7 -7
- package/src/ui/dialog.tsx +122 -122
- package/src/ui/dropdown-menu.tsx +76 -76
- package/src/ui/input.tsx +24 -24
- package/src/ui/progress.tsx +36 -36
- package/src/ui/scroll-area.tsx +48 -48
- package/src/ui/separator.tsx +31 -31
- package/src/ui/skeleton.tsx +9 -9
- package/src/ui/table.tsx +114 -114
package/src/ui/button.tsx
CHANGED
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
2
|
-
import * as React from "react"
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils"
|
|
5
|
-
|
|
6
|
-
const buttonVariants = cva(
|
|
7
|
-
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
12
|
-
destructive:
|
|
13
|
-
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
14
|
-
outline:
|
|
15
|
-
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
16
|
-
secondary:
|
|
17
|
-
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
18
|
-
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
19
|
-
link: "text-primary underline-offset-4 hover:underline",
|
|
20
|
-
},
|
|
21
|
-
size: {
|
|
22
|
-
default: "h-10 px-4 py-2",
|
|
23
|
-
sm: "h-9 rounded-md px-3",
|
|
24
|
-
lg: "h-11 rounded-md px-8",
|
|
25
|
-
icon: "h-10 w-10",
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
defaultVariants: {
|
|
29
|
-
variant: "default",
|
|
30
|
-
size: "default",
|
|
31
|
-
},
|
|
32
|
-
}
|
|
33
|
-
)
|
|
34
|
-
|
|
35
|
-
export interface ButtonProps
|
|
36
|
-
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
37
|
-
VariantProps<typeof buttonVariants> {
|
|
38
|
-
asChild?: boolean
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
42
|
-
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
43
|
-
return (
|
|
44
|
-
<button
|
|
45
|
-
className={cn(buttonVariants({ variant, size, className }))}
|
|
46
|
-
ref={ref}
|
|
47
|
-
{...props}
|
|
48
|
-
/>
|
|
49
|
-
)
|
|
50
|
-
}
|
|
51
|
-
)
|
|
52
|
-
Button.displayName = "Button"
|
|
53
|
-
|
|
54
|
-
export { Button, buttonVariants }
|
|
1
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
|
2
|
+
import * as React from "react"
|
|
3
|
+
|
|
4
|
+
import { cn } from "../lib/utils"
|
|
5
|
+
|
|
6
|
+
const buttonVariants = cva(
|
|
7
|
+
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
12
|
+
destructive:
|
|
13
|
+
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
14
|
+
outline:
|
|
15
|
+
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
16
|
+
secondary:
|
|
17
|
+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
18
|
+
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
19
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
20
|
+
},
|
|
21
|
+
size: {
|
|
22
|
+
default: "h-10 px-4 py-2",
|
|
23
|
+
sm: "h-9 rounded-md px-3",
|
|
24
|
+
lg: "h-11 rounded-md px-8",
|
|
25
|
+
icon: "h-10 w-10",
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
defaultVariants: {
|
|
29
|
+
variant: "default",
|
|
30
|
+
size: "default",
|
|
31
|
+
},
|
|
32
|
+
}
|
|
33
|
+
)
|
|
34
|
+
|
|
35
|
+
export interface ButtonProps
|
|
36
|
+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
37
|
+
VariantProps<typeof buttonVariants> {
|
|
38
|
+
asChild?: boolean
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
42
|
+
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
43
|
+
return (
|
|
44
|
+
<button
|
|
45
|
+
className={cn(buttonVariants({ variant, size, className }))}
|
|
46
|
+
ref={ref}
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
)
|
|
52
|
+
Button.displayName = "Button"
|
|
53
|
+
|
|
54
|
+
export { Button, buttonVariants }
|
package/src/ui/card.tsx
CHANGED
|
@@ -1,68 +1,68 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils"
|
|
4
|
-
|
|
5
|
-
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|
6
|
-
return (
|
|
7
|
-
<div
|
|
8
|
-
data-slot="card"
|
|
9
|
-
className={cn(
|
|
10
|
-
"rounded-xl border bg-card text-card-foreground shadow",
|
|
11
|
-
className
|
|
12
|
-
)}
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
19
|
-
return (
|
|
20
|
-
<div
|
|
21
|
-
data-slot="card-header"
|
|
22
|
-
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
|
23
|
-
{...props}
|
|
24
|
-
/>
|
|
25
|
-
)
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
29
|
-
return (
|
|
30
|
-
<div
|
|
31
|
-
data-slot="card-title"
|
|
32
|
-
className={cn("font-semibold leading-none tracking-tight", className)}
|
|
33
|
-
{...props}
|
|
34
|
-
/>
|
|
35
|
-
)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
39
|
-
return (
|
|
40
|
-
<div
|
|
41
|
-
data-slot="card-description"
|
|
42
|
-
className={cn("text-sm text-muted-foreground", className)}
|
|
43
|
-
{...props}
|
|
44
|
-
/>
|
|
45
|
-
)
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
49
|
-
return (
|
|
50
|
-
<div
|
|
51
|
-
data-slot="card-content"
|
|
52
|
-
className={cn("p-6 pt-0", className)}
|
|
53
|
-
{...props}
|
|
54
|
-
/>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
59
|
-
return (
|
|
60
|
-
<div
|
|
61
|
-
data-slot="card-footer"
|
|
62
|
-
className={cn("flex items-center p-6 pt-0", className)}
|
|
63
|
-
{...props}
|
|
64
|
-
/>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
|
|
3
|
+
import { cn } from "../lib/utils"
|
|
4
|
+
|
|
5
|
+
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
|
6
|
+
return (
|
|
7
|
+
<div
|
|
8
|
+
data-slot="card"
|
|
9
|
+
className={cn(
|
|
10
|
+
"rounded-xl border bg-card text-card-foreground shadow",
|
|
11
|
+
className
|
|
12
|
+
)}
|
|
13
|
+
{...props}
|
|
14
|
+
/>
|
|
15
|
+
)
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
19
|
+
return (
|
|
20
|
+
<div
|
|
21
|
+
data-slot="card-header"
|
|
22
|
+
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
29
|
+
return (
|
|
30
|
+
<div
|
|
31
|
+
data-slot="card-title"
|
|
32
|
+
className={cn("font-semibold leading-none tracking-tight", className)}
|
|
33
|
+
{...props}
|
|
34
|
+
/>
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
|
39
|
+
return (
|
|
40
|
+
<div
|
|
41
|
+
data-slot="card-description"
|
|
42
|
+
className={cn("text-sm text-muted-foreground", className)}
|
|
43
|
+
{...props}
|
|
44
|
+
/>
|
|
45
|
+
)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
|
49
|
+
return (
|
|
50
|
+
<div
|
|
51
|
+
data-slot="card-content"
|
|
52
|
+
className={cn("p-6 pt-0", className)}
|
|
53
|
+
{...props}
|
|
54
|
+
/>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
59
|
+
return (
|
|
60
|
+
<div
|
|
61
|
+
data-slot="card-footer"
|
|
62
|
+
className={cn("flex items-center p-6 pt-0", className)}
|
|
63
|
+
{...props}
|
|
64
|
+
/>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
package/src/ui/collapsible.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
export {
|
|
4
|
-
Root as Collapsible,
|
|
5
|
-
Trigger as CollapsibleTrigger,
|
|
6
|
-
Content as CollapsibleContent,
|
|
7
|
-
} from "@radix-ui/react-collapsible";
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
export {
|
|
4
|
+
Root as Collapsible,
|
|
5
|
+
Trigger as CollapsibleTrigger,
|
|
6
|
+
Content as CollapsibleContent,
|
|
7
|
+
} from "@radix-ui/react-collapsible";
|
package/src/ui/dialog.tsx
CHANGED
|
@@ -1,122 +1,122 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
|
4
|
-
import { X } from "lucide-react"
|
|
5
|
-
import * as React from "react"
|
|
6
|
-
|
|
7
|
-
import { cn } from "../lib/utils"
|
|
8
|
-
|
|
9
|
-
const Dialog = DialogPrimitive.Root
|
|
10
|
-
|
|
11
|
-
const DialogTrigger = DialogPrimitive.Trigger
|
|
12
|
-
|
|
13
|
-
const DialogPortal = DialogPrimitive.Portal
|
|
14
|
-
|
|
15
|
-
const DialogClose = DialogPrimitive.Close
|
|
16
|
-
|
|
17
|
-
const DialogOverlay = React.forwardRef<
|
|
18
|
-
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
|
19
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
|
20
|
-
>(({ className, ...props }, ref) => (
|
|
21
|
-
<DialogPrimitive.Overlay
|
|
22
|
-
ref={ref}
|
|
23
|
-
className={cn(
|
|
24
|
-
"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",
|
|
25
|
-
className
|
|
26
|
-
)}
|
|
27
|
-
{...props}
|
|
28
|
-
/>
|
|
29
|
-
))
|
|
30
|
-
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
|
31
|
-
|
|
32
|
-
const DialogContent = React.forwardRef<
|
|
33
|
-
React.ElementRef<typeof DialogPrimitive.Content>,
|
|
34
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
|
35
|
-
>(({ className, children, ...props }, ref) => (
|
|
36
|
-
<DialogPortal>
|
|
37
|
-
<DialogOverlay />
|
|
38
|
-
<DialogPrimitive.Content
|
|
39
|
-
ref={ref}
|
|
40
|
-
className={cn(
|
|
41
|
-
"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",
|
|
42
|
-
className
|
|
43
|
-
)}
|
|
44
|
-
{...props}
|
|
45
|
-
>
|
|
46
|
-
{children}
|
|
47
|
-
<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">
|
|
48
|
-
<X className="h-4 w-4" />
|
|
49
|
-
<span className="sr-only">Close</span>
|
|
50
|
-
</DialogPrimitive.Close>
|
|
51
|
-
</DialogPrimitive.Content>
|
|
52
|
-
</DialogPortal>
|
|
53
|
-
))
|
|
54
|
-
DialogContent.displayName = DialogPrimitive.Content.displayName
|
|
55
|
-
|
|
56
|
-
const DialogHeader = ({
|
|
57
|
-
className,
|
|
58
|
-
...props
|
|
59
|
-
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
60
|
-
<div
|
|
61
|
-
className={cn(
|
|
62
|
-
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
63
|
-
className
|
|
64
|
-
)}
|
|
65
|
-
{...props}
|
|
66
|
-
/>
|
|
67
|
-
)
|
|
68
|
-
DialogHeader.displayName = "DialogHeader"
|
|
69
|
-
|
|
70
|
-
const DialogFooter = ({
|
|
71
|
-
className,
|
|
72
|
-
...props
|
|
73
|
-
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
74
|
-
<div
|
|
75
|
-
className={cn(
|
|
76
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
77
|
-
className
|
|
78
|
-
)}
|
|
79
|
-
{...props}
|
|
80
|
-
/>
|
|
81
|
-
)
|
|
82
|
-
DialogFooter.displayName = "DialogFooter"
|
|
83
|
-
|
|
84
|
-
const DialogTitle = React.forwardRef<
|
|
85
|
-
React.ElementRef<typeof DialogPrimitive.Title>,
|
|
86
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
|
87
|
-
>(({ className, ...props }, ref) => (
|
|
88
|
-
<DialogPrimitive.Title
|
|
89
|
-
ref={ref}
|
|
90
|
-
className={cn(
|
|
91
|
-
"text-lg font-semibold leading-none tracking-tight",
|
|
92
|
-
className
|
|
93
|
-
)}
|
|
94
|
-
{...props}
|
|
95
|
-
/>
|
|
96
|
-
))
|
|
97
|
-
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
|
98
|
-
|
|
99
|
-
const DialogDescription = React.forwardRef<
|
|
100
|
-
React.ElementRef<typeof DialogPrimitive.Description>,
|
|
101
|
-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
|
102
|
-
>(({ className, ...props }, ref) => (
|
|
103
|
-
<DialogPrimitive.Description
|
|
104
|
-
ref={ref}
|
|
105
|
-
className={cn("text-sm text-muted-foreground", className)}
|
|
106
|
-
{...props}
|
|
107
|
-
/>
|
|
108
|
-
))
|
|
109
|
-
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
|
110
|
-
|
|
111
|
-
export {
|
|
112
|
-
Dialog,
|
|
113
|
-
DialogClose,
|
|
114
|
-
DialogContent,
|
|
115
|
-
DialogDescription,
|
|
116
|
-
DialogFooter,
|
|
117
|
-
DialogHeader,
|
|
118
|
-
DialogOverlay,
|
|
119
|
-
DialogPortal,
|
|
120
|
-
DialogTitle,
|
|
121
|
-
DialogTrigger,
|
|
122
|
-
}
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
|
4
|
+
import { X } from "lucide-react"
|
|
5
|
+
import * as React from "react"
|
|
6
|
+
|
|
7
|
+
import { cn } from "../lib/utils"
|
|
8
|
+
|
|
9
|
+
const Dialog = DialogPrimitive.Root
|
|
10
|
+
|
|
11
|
+
const DialogTrigger = DialogPrimitive.Trigger
|
|
12
|
+
|
|
13
|
+
const DialogPortal = DialogPrimitive.Portal
|
|
14
|
+
|
|
15
|
+
const DialogClose = DialogPrimitive.Close
|
|
16
|
+
|
|
17
|
+
const DialogOverlay = React.forwardRef<
|
|
18
|
+
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
|
19
|
+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
|
20
|
+
>(({ className, ...props }, ref) => (
|
|
21
|
+
<DialogPrimitive.Overlay
|
|
22
|
+
ref={ref}
|
|
23
|
+
className={cn(
|
|
24
|
+
"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",
|
|
25
|
+
className
|
|
26
|
+
)}
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
))
|
|
30
|
+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
|
31
|
+
|
|
32
|
+
const DialogContent = React.forwardRef<
|
|
33
|
+
React.ElementRef<typeof DialogPrimitive.Content>,
|
|
34
|
+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
|
35
|
+
>(({ className, children, ...props }, ref) => (
|
|
36
|
+
<DialogPortal>
|
|
37
|
+
<DialogOverlay />
|
|
38
|
+
<DialogPrimitive.Content
|
|
39
|
+
ref={ref}
|
|
40
|
+
className={cn(
|
|
41
|
+
"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",
|
|
42
|
+
className
|
|
43
|
+
)}
|
|
44
|
+
{...props}
|
|
45
|
+
>
|
|
46
|
+
{children}
|
|
47
|
+
<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">
|
|
48
|
+
<X className="h-4 w-4" />
|
|
49
|
+
<span className="sr-only">Close</span>
|
|
50
|
+
</DialogPrimitive.Close>
|
|
51
|
+
</DialogPrimitive.Content>
|
|
52
|
+
</DialogPortal>
|
|
53
|
+
))
|
|
54
|
+
DialogContent.displayName = DialogPrimitive.Content.displayName
|
|
55
|
+
|
|
56
|
+
const DialogHeader = ({
|
|
57
|
+
className,
|
|
58
|
+
...props
|
|
59
|
+
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
60
|
+
<div
|
|
61
|
+
className={cn(
|
|
62
|
+
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
63
|
+
className
|
|
64
|
+
)}
|
|
65
|
+
{...props}
|
|
66
|
+
/>
|
|
67
|
+
)
|
|
68
|
+
DialogHeader.displayName = "DialogHeader"
|
|
69
|
+
|
|
70
|
+
const DialogFooter = ({
|
|
71
|
+
className,
|
|
72
|
+
...props
|
|
73
|
+
}: React.HTMLAttributes<HTMLDivElement>) => (
|
|
74
|
+
<div
|
|
75
|
+
className={cn(
|
|
76
|
+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
77
|
+
className
|
|
78
|
+
)}
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
)
|
|
82
|
+
DialogFooter.displayName = "DialogFooter"
|
|
83
|
+
|
|
84
|
+
const DialogTitle = React.forwardRef<
|
|
85
|
+
React.ElementRef<typeof DialogPrimitive.Title>,
|
|
86
|
+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
|
87
|
+
>(({ className, ...props }, ref) => (
|
|
88
|
+
<DialogPrimitive.Title
|
|
89
|
+
ref={ref}
|
|
90
|
+
className={cn(
|
|
91
|
+
"text-lg font-semibold leading-none tracking-tight",
|
|
92
|
+
className
|
|
93
|
+
)}
|
|
94
|
+
{...props}
|
|
95
|
+
/>
|
|
96
|
+
))
|
|
97
|
+
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
|
98
|
+
|
|
99
|
+
const DialogDescription = React.forwardRef<
|
|
100
|
+
React.ElementRef<typeof DialogPrimitive.Description>,
|
|
101
|
+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
|
102
|
+
>(({ className, ...props }, ref) => (
|
|
103
|
+
<DialogPrimitive.Description
|
|
104
|
+
ref={ref}
|
|
105
|
+
className={cn("text-sm text-muted-foreground", className)}
|
|
106
|
+
{...props}
|
|
107
|
+
/>
|
|
108
|
+
))
|
|
109
|
+
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
|
110
|
+
|
|
111
|
+
export {
|
|
112
|
+
Dialog,
|
|
113
|
+
DialogClose,
|
|
114
|
+
DialogContent,
|
|
115
|
+
DialogDescription,
|
|
116
|
+
DialogFooter,
|
|
117
|
+
DialogHeader,
|
|
118
|
+
DialogOverlay,
|
|
119
|
+
DialogPortal,
|
|
120
|
+
DialogTitle,
|
|
121
|
+
DialogTrigger,
|
|
122
|
+
}
|
package/src/ui/dropdown-menu.tsx
CHANGED
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
|
4
|
-
import * as React from "react"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../lib/utils"
|
|
7
|
-
|
|
8
|
-
const DropdownMenu = DropdownMenuPrimitive.Root
|
|
9
|
-
|
|
10
|
-
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
|
11
|
-
|
|
12
|
-
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
|
13
|
-
|
|
14
|
-
const DropdownMenuContent = React.forwardRef<
|
|
15
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
|
16
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
|
17
|
-
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
18
|
-
<DropdownMenuPortal>
|
|
19
|
-
<DropdownMenuPrimitive.Content
|
|
20
|
-
ref={ref}
|
|
21
|
-
sideOffset={sideOffset}
|
|
22
|
-
className={cn(
|
|
23
|
-
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
|
24
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
25
|
-
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
26
|
-
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
27
|
-
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
|
|
28
|
-
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
29
|
-
className,
|
|
30
|
-
)}
|
|
31
|
-
{...props}
|
|
32
|
-
/>
|
|
33
|
-
</DropdownMenuPortal>
|
|
34
|
-
))
|
|
35
|
-
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
|
36
|
-
|
|
37
|
-
const DropdownMenuItem = React.forwardRef<
|
|
38
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
|
39
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
|
40
|
-
inset?: boolean
|
|
41
|
-
}
|
|
42
|
-
>(({ className, inset, ...props }, ref) => (
|
|
43
|
-
<DropdownMenuPrimitive.Item
|
|
44
|
-
ref={ref}
|
|
45
|
-
className={cn(
|
|
46
|
-
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
|
|
47
|
-
"focus:bg-accent focus:text-accent-foreground",
|
|
48
|
-
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
49
|
-
inset && "pl-8",
|
|
50
|
-
className,
|
|
51
|
-
)}
|
|
52
|
-
{...props}
|
|
53
|
-
/>
|
|
54
|
-
))
|
|
55
|
-
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
|
56
|
-
|
|
57
|
-
const DropdownMenuSeparator = React.forwardRef<
|
|
58
|
-
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
|
59
|
-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
|
60
|
-
>(({ className, ...props }, ref) => (
|
|
61
|
-
<DropdownMenuPrimitive.Separator
|
|
62
|
-
ref={ref}
|
|
63
|
-
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
|
64
|
-
{...props}
|
|
65
|
-
/>
|
|
66
|
-
))
|
|
67
|
-
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
|
68
|
-
|
|
69
|
-
export {
|
|
70
|
-
DropdownMenu,
|
|
71
|
-
DropdownMenuContent,
|
|
72
|
-
DropdownMenuItem,
|
|
73
|
-
DropdownMenuPortal,
|
|
74
|
-
DropdownMenuSeparator,
|
|
75
|
-
DropdownMenuTrigger,
|
|
76
|
-
}
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
|
4
|
+
import * as React from "react"
|
|
5
|
+
|
|
6
|
+
import { cn } from "../lib/utils"
|
|
7
|
+
|
|
8
|
+
const DropdownMenu = DropdownMenuPrimitive.Root
|
|
9
|
+
|
|
10
|
+
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
|
11
|
+
|
|
12
|
+
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
|
13
|
+
|
|
14
|
+
const DropdownMenuContent = React.forwardRef<
|
|
15
|
+
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
|
16
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
|
17
|
+
>(({ className, sideOffset = 4, ...props }, ref) => (
|
|
18
|
+
<DropdownMenuPortal>
|
|
19
|
+
<DropdownMenuPrimitive.Content
|
|
20
|
+
ref={ref}
|
|
21
|
+
sideOffset={sideOffset}
|
|
22
|
+
className={cn(
|
|
23
|
+
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
|
|
24
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
25
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
26
|
+
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
27
|
+
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
|
|
28
|
+
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
29
|
+
className,
|
|
30
|
+
)}
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
</DropdownMenuPortal>
|
|
34
|
+
))
|
|
35
|
+
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
|
36
|
+
|
|
37
|
+
const DropdownMenuItem = React.forwardRef<
|
|
38
|
+
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
|
39
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
|
40
|
+
inset?: boolean
|
|
41
|
+
}
|
|
42
|
+
>(({ className, inset, ...props }, ref) => (
|
|
43
|
+
<DropdownMenuPrimitive.Item
|
|
44
|
+
ref={ref}
|
|
45
|
+
className={cn(
|
|
46
|
+
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
|
|
47
|
+
"focus:bg-accent focus:text-accent-foreground",
|
|
48
|
+
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
49
|
+
inset && "pl-8",
|
|
50
|
+
className,
|
|
51
|
+
)}
|
|
52
|
+
{...props}
|
|
53
|
+
/>
|
|
54
|
+
))
|
|
55
|
+
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
|
56
|
+
|
|
57
|
+
const DropdownMenuSeparator = React.forwardRef<
|
|
58
|
+
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
|
59
|
+
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
|
60
|
+
>(({ className, ...props }, ref) => (
|
|
61
|
+
<DropdownMenuPrimitive.Separator
|
|
62
|
+
ref={ref}
|
|
63
|
+
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
|
64
|
+
{...props}
|
|
65
|
+
/>
|
|
66
|
+
))
|
|
67
|
+
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
|
68
|
+
|
|
69
|
+
export {
|
|
70
|
+
DropdownMenu,
|
|
71
|
+
DropdownMenuContent,
|
|
72
|
+
DropdownMenuItem,
|
|
73
|
+
DropdownMenuPortal,
|
|
74
|
+
DropdownMenuSeparator,
|
|
75
|
+
DropdownMenuTrigger,
|
|
76
|
+
}
|