@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.
Files changed (62) hide show
  1. package/dist/components/StreamingIndicator.js +5 -5
  2. package/dist/display/DisplayReactRenderer.js +12 -12
  3. package/dist/display/react-sandbox/bootstrap.js +150 -150
  4. package/dist/styles.css +1 -2
  5. package/package.json +64 -61
  6. package/src/components/Chat.tsx +107 -107
  7. package/src/components/ErrorNote.tsx +35 -35
  8. package/src/components/LazyRender.tsx +42 -42
  9. package/src/components/Markdown.tsx +114 -114
  10. package/src/components/MessageBubble.tsx +107 -107
  11. package/src/components/MessageInput.tsx +421 -421
  12. package/src/components/MessageList.tsx +153 -153
  13. package/src/components/StreamingIndicator.tsx +19 -19
  14. package/src/display/AlertRenderer.tsx +23 -23
  15. package/src/display/CarouselRenderer.tsx +141 -141
  16. package/src/display/ChartRenderer.tsx +195 -195
  17. package/src/display/ChoiceButtonsRenderer.tsx +114 -114
  18. package/src/display/CodeBlockRenderer.tsx +49 -49
  19. package/src/display/ComparisonTableRenderer.tsx +132 -132
  20. package/src/display/DataTableRenderer.tsx +144 -144
  21. package/src/display/DisplayReactRenderer.tsx +269 -269
  22. package/src/display/FileCardRenderer.tsx +55 -55
  23. package/src/display/GalleryRenderer.tsx +65 -65
  24. package/src/display/ImageViewerRenderer.tsx +114 -114
  25. package/src/display/LinkPreviewRenderer.tsx +74 -74
  26. package/src/display/MapViewRenderer.tsx +75 -75
  27. package/src/display/MetricCardRenderer.tsx +29 -29
  28. package/src/display/PriceHighlightRenderer.tsx +62 -62
  29. package/src/display/ProductCardRenderer.tsx +112 -112
  30. package/src/display/ProgressStepsRenderer.tsx +59 -59
  31. package/src/display/SourcesListRenderer.tsx +47 -47
  32. package/src/display/SpreadsheetRenderer.tsx +86 -86
  33. package/src/display/StepTimelineRenderer.tsx +75 -75
  34. package/src/display/index.ts +21 -21
  35. package/src/display/react-sandbox/bootstrap.ts +155 -155
  36. package/src/display/registry.ts +84 -84
  37. package/src/display/sdk-types.ts +217 -217
  38. package/src/hooks/ChatProvider.tsx +21 -21
  39. package/src/hooks/useIsMobile.ts +15 -15
  40. package/src/hooks/useOpenClaudeChat.ts +476 -476
  41. package/src/index.ts +76 -76
  42. package/src/lib/utils.ts +6 -6
  43. package/src/parts/PartErrorBoundary.tsx +51 -51
  44. package/src/parts/PartRenderer.tsx +145 -145
  45. package/src/parts/ReasoningBlock.tsx +41 -41
  46. package/src/parts/ToolActivity.tsx +78 -78
  47. package/src/parts/ToolResult.tsx +79 -79
  48. package/src/styles.css +2 -2
  49. package/src/types.ts +41 -41
  50. package/src/ui/alert.tsx +77 -77
  51. package/src/ui/badge.tsx +36 -36
  52. package/src/ui/button.tsx +54 -54
  53. package/src/ui/card.tsx +68 -68
  54. package/src/ui/collapsible.tsx +7 -7
  55. package/src/ui/dialog.tsx +122 -122
  56. package/src/ui/dropdown-menu.tsx +76 -76
  57. package/src/ui/input.tsx +24 -24
  58. package/src/ui/progress.tsx +36 -36
  59. package/src/ui/scroll-area.tsx +48 -48
  60. package/src/ui/separator.tsx +31 -31
  61. package/src/ui/skeleton.tsx +9 -9
  62. 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 }
@@ -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
+ }
@@ -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
+ }