@openconsole/shadcn 0.2.6 → 0.2.7

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 (113) hide show
  1. package/components/index.ts +1 -2
  2. package/components/ui/accordion.tsx +66 -66
  3. package/components/ui/alert-dialog.tsx +196 -196
  4. package/components/ui/alert.tsx +66 -66
  5. package/components/ui/aspect-ratio.tsx +11 -11
  6. package/components/ui/avatar.tsx +53 -53
  7. package/components/ui/badge.tsx +46 -46
  8. package/components/ui/breadcrumb.tsx +109 -109
  9. package/components/ui/button-group.tsx +83 -83
  10. package/components/ui/button.tsx +60 -60
  11. package/components/ui/calendar.tsx +219 -219
  12. package/components/ui/card.tsx +92 -92
  13. package/components/ui/carousel.tsx +241 -241
  14. package/components/ui/chart.tsx +374 -374
  15. package/components/ui/checkbox.tsx +32 -32
  16. package/components/ui/collapsible.tsx +33 -33
  17. package/components/ui/command.tsx +184 -184
  18. package/components/ui/context-menu.tsx +252 -252
  19. package/components/ui/dialog.tsx +143 -143
  20. package/components/ui/direction.tsx +22 -22
  21. package/components/ui/drawer.tsx +135 -135
  22. package/components/ui/dropdown-menu.tsx +257 -257
  23. package/components/ui/empty.tsx +104 -104
  24. package/components/ui/field.tsx +248 -248
  25. package/components/ui/form.tsx +167 -167
  26. package/components/ui/hover-card.tsx +44 -44
  27. package/components/ui/index.ts +59 -59
  28. package/components/ui/input-group.tsx +170 -170
  29. package/components/ui/input-otp.tsx +77 -77
  30. package/components/ui/input.tsx +21 -21
  31. package/components/ui/item.tsx +193 -193
  32. package/components/ui/kbd.tsx +28 -28
  33. package/components/ui/label.tsx +24 -24
  34. package/components/ui/menubar.tsx +276 -276
  35. package/components/ui/native-select.tsx +62 -62
  36. package/components/ui/navigation-menu.tsx +168 -168
  37. package/components/ui/pagination.tsx +127 -127
  38. package/components/ui/popover.tsx +89 -89
  39. package/components/ui/progress.tsx +31 -31
  40. package/components/ui/radio-group.tsx +45 -45
  41. package/components/ui/resizable.tsx +53 -53
  42. package/components/ui/scroll-area.tsx +58 -58
  43. package/components/ui/select.tsx +187 -187
  44. package/components/ui/separator.tsx +28 -28
  45. package/components/ui/sheet.tsx +139 -139
  46. package/components/ui/sidebar.tsx +724 -724
  47. package/components/ui/skeleton.tsx +13 -13
  48. package/components/ui/slider.tsx +63 -63
  49. package/components/ui/sonner.tsx +40 -40
  50. package/components/ui/spinner.tsx +16 -16
  51. package/components/ui/switch.tsx +35 -35
  52. package/components/ui/table.tsx +116 -116
  53. package/components/ui/tabs.tsx +66 -66
  54. package/components/ui/textarea.tsx +18 -18
  55. package/components/ui/toggle-group.tsx +83 -83
  56. package/components/ui/toggle.tsx +47 -47
  57. package/components/ui/tooltip.tsx +61 -61
  58. package/hooks/index.ts +1 -1
  59. package/hooks/use-mobile.ts +19 -19
  60. package/index.ts +3 -3
  61. package/lib/index.ts +1 -1
  62. package/lib/utils.ts +6 -6
  63. package/package.json +1 -1
  64. package/styles.css +124 -124
  65. package/components/ai-elements/agent.tsx +0 -141
  66. package/components/ai-elements/artifact.tsx +0 -148
  67. package/components/ai-elements/attachments.tsx +0 -426
  68. package/components/ai-elements/audio-player.tsx +0 -231
  69. package/components/ai-elements/canvas.tsx +0 -26
  70. package/components/ai-elements/chain-of-thought.tsx +0 -222
  71. package/components/ai-elements/checkpoint.tsx +0 -71
  72. package/components/ai-elements/code-block.tsx +0 -562
  73. package/components/ai-elements/commit.tsx +0 -458
  74. package/components/ai-elements/confirmation.tsx +0 -174
  75. package/components/ai-elements/connection.tsx +0 -28
  76. package/components/ai-elements/context.tsx +0 -409
  77. package/components/ai-elements/controls.tsx +0 -18
  78. package/components/ai-elements/conversation.tsx +0 -168
  79. package/components/ai-elements/edge.tsx +0 -143
  80. package/components/ai-elements/environment-variables.tsx +0 -324
  81. package/components/ai-elements/file-tree.tsx +0 -304
  82. package/components/ai-elements/image.tsx +0 -24
  83. package/components/ai-elements/index.ts +0 -51
  84. package/components/ai-elements/inline-citation.tsx +0 -296
  85. package/components/ai-elements/jsx-preview.tsx +0 -310
  86. package/components/ai-elements/message.tsx +0 -360
  87. package/components/ai-elements/mic-selector.tsx +0 -375
  88. package/components/ai-elements/model-selector.tsx +0 -213
  89. package/components/ai-elements/node.tsx +0 -71
  90. package/components/ai-elements/open-in-chat.tsx +0 -370
  91. package/components/ai-elements/package-info.tsx +0 -239
  92. package/components/ai-elements/panel.tsx +0 -15
  93. package/components/ai-elements/persona.tsx +0 -306
  94. package/components/ai-elements/plan.tsx +0 -147
  95. package/components/ai-elements/prompt-input.tsx +0 -1463
  96. package/components/ai-elements/queue.tsx +0 -274
  97. package/components/ai-elements/reasoning.tsx +0 -228
  98. package/components/ai-elements/sandbox.tsx +0 -132
  99. package/components/ai-elements/schema-display.tsx +0 -471
  100. package/components/ai-elements/shimmer.tsx +0 -77
  101. package/components/ai-elements/snippet.tsx +0 -145
  102. package/components/ai-elements/sources.tsx +0 -77
  103. package/components/ai-elements/speech-input.tsx +0 -323
  104. package/components/ai-elements/stack-trace.tsx +0 -528
  105. package/components/ai-elements/suggestion.tsx +0 -57
  106. package/components/ai-elements/task.tsx +0 -87
  107. package/components/ai-elements/terminal.tsx +0 -273
  108. package/components/ai-elements/test-results.tsx +0 -496
  109. package/components/ai-elements/tool.tsx +0 -173
  110. package/components/ai-elements/toolbar.tsx +0 -16
  111. package/components/ai-elements/transcription.tsx +0 -125
  112. package/components/ai-elements/voice-selector.tsx +0 -524
  113. package/components/ai-elements/web-preview.tsx +0 -281
@@ -1,89 +1,89 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { Popover as PopoverPrimitive } from "radix-ui"
5
-
6
- import { cn } from "../../lib/utils"
7
-
8
- function Popover({
9
- ...props
10
- }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
11
- return <PopoverPrimitive.Root data-slot="popover" {...props} />
12
- }
13
-
14
- function PopoverTrigger({
15
- ...props
16
- }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
17
- return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
18
- }
19
-
20
- function PopoverContent({
21
- className,
22
- align = "center",
23
- sideOffset = 4,
24
- ...props
25
- }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
26
- return (
27
- <PopoverPrimitive.Portal>
28
- <PopoverPrimitive.Content
29
- data-slot="popover-content"
30
- align={align}
31
- sideOffset={sideOffset}
32
- className={cn(
33
- "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
34
- className
35
- )}
36
- {...props}
37
- />
38
- </PopoverPrimitive.Portal>
39
- )
40
- }
41
-
42
- function PopoverAnchor({
43
- ...props
44
- }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
45
- return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
46
- }
47
-
48
- function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
49
- return (
50
- <div
51
- data-slot="popover-header"
52
- className={cn("flex flex-col gap-1 text-sm", className)}
53
- {...props}
54
- />
55
- )
56
- }
57
-
58
- function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
59
- return (
60
- <div
61
- data-slot="popover-title"
62
- className={cn("font-medium", className)}
63
- {...props}
64
- />
65
- )
66
- }
67
-
68
- function PopoverDescription({
69
- className,
70
- ...props
71
- }: React.ComponentProps<"p">) {
72
- return (
73
- <p
74
- data-slot="popover-description"
75
- className={cn("text-muted-foreground", className)}
76
- {...props}
77
- />
78
- )
79
- }
80
-
81
- export {
82
- Popover,
83
- PopoverTrigger,
84
- PopoverContent,
85
- PopoverAnchor,
86
- PopoverHeader,
87
- PopoverTitle,
88
- PopoverDescription,
89
- }
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import { Popover as PopoverPrimitive } from "radix-ui"
5
+
6
+ import { cn } from "../../lib/utils"
7
+
8
+ function Popover({
9
+ ...props
10
+ }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
11
+ return <PopoverPrimitive.Root data-slot="popover" {...props} />
12
+ }
13
+
14
+ function PopoverTrigger({
15
+ ...props
16
+ }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
17
+ return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
18
+ }
19
+
20
+ function PopoverContent({
21
+ className,
22
+ align = "center",
23
+ sideOffset = 4,
24
+ ...props
25
+ }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
26
+ return (
27
+ <PopoverPrimitive.Portal>
28
+ <PopoverPrimitive.Content
29
+ data-slot="popover-content"
30
+ align={align}
31
+ sideOffset={sideOffset}
32
+ className={cn(
33
+ "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
34
+ className
35
+ )}
36
+ {...props}
37
+ />
38
+ </PopoverPrimitive.Portal>
39
+ )
40
+ }
41
+
42
+ function PopoverAnchor({
43
+ ...props
44
+ }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
45
+ return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
46
+ }
47
+
48
+ function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
49
+ return (
50
+ <div
51
+ data-slot="popover-header"
52
+ className={cn("flex flex-col gap-1 text-sm", className)}
53
+ {...props}
54
+ />
55
+ )
56
+ }
57
+
58
+ function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
59
+ return (
60
+ <div
61
+ data-slot="popover-title"
62
+ className={cn("font-medium", className)}
63
+ {...props}
64
+ />
65
+ )
66
+ }
67
+
68
+ function PopoverDescription({
69
+ className,
70
+ ...props
71
+ }: React.ComponentProps<"p">) {
72
+ return (
73
+ <p
74
+ data-slot="popover-description"
75
+ className={cn("text-muted-foreground", className)}
76
+ {...props}
77
+ />
78
+ )
79
+ }
80
+
81
+ export {
82
+ Popover,
83
+ PopoverTrigger,
84
+ PopoverContent,
85
+ PopoverAnchor,
86
+ PopoverHeader,
87
+ PopoverTitle,
88
+ PopoverDescription,
89
+ }
@@ -1,31 +1,31 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { Progress as ProgressPrimitive } from "radix-ui"
5
-
6
- import { cn } from "../../lib/utils"
7
-
8
- function Progress({
9
- className,
10
- value,
11
- ...props
12
- }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
13
- return (
14
- <ProgressPrimitive.Root
15
- data-slot="progress"
16
- className={cn(
17
- "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
18
- className
19
- )}
20
- {...props}
21
- >
22
- <ProgressPrimitive.Indicator
23
- data-slot="progress-indicator"
24
- className="h-full w-full flex-1 bg-primary transition-all"
25
- style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
26
- />
27
- </ProgressPrimitive.Root>
28
- )
29
- }
30
-
31
- export { Progress }
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import { Progress as ProgressPrimitive } from "radix-ui"
5
+
6
+ import { cn } from "../../lib/utils"
7
+
8
+ function Progress({
9
+ className,
10
+ value,
11
+ ...props
12
+ }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
13
+ return (
14
+ <ProgressPrimitive.Root
15
+ data-slot="progress"
16
+ className={cn(
17
+ "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
18
+ className
19
+ )}
20
+ {...props}
21
+ >
22
+ <ProgressPrimitive.Indicator
23
+ data-slot="progress-indicator"
24
+ className="h-full w-full flex-1 bg-primary transition-all"
25
+ style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
26
+ />
27
+ </ProgressPrimitive.Root>
28
+ )
29
+ }
30
+
31
+ export { Progress }
@@ -1,45 +1,45 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { CircleIcon } from "lucide-react"
5
- import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
6
-
7
- import { cn } from "../../lib/utils"
8
-
9
- function RadioGroup({
10
- className,
11
- ...props
12
- }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
13
- return (
14
- <RadioGroupPrimitive.Root
15
- data-slot="radio-group"
16
- className={cn("grid gap-3", className)}
17
- {...props}
18
- />
19
- )
20
- }
21
-
22
- function RadioGroupItem({
23
- className,
24
- ...props
25
- }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
26
- return (
27
- <RadioGroupPrimitive.Item
28
- data-slot="radio-group-item"
29
- className={cn(
30
- "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
31
- className
32
- )}
33
- {...props}
34
- >
35
- <RadioGroupPrimitive.Indicator
36
- data-slot="radio-group-indicator"
37
- className="relative flex items-center justify-center"
38
- >
39
- <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
40
- </RadioGroupPrimitive.Indicator>
41
- </RadioGroupPrimitive.Item>
42
- )
43
- }
44
-
45
- export { RadioGroup, RadioGroupItem }
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import { CircleIcon } from "lucide-react"
5
+ import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
6
+
7
+ import { cn } from "../../lib/utils"
8
+
9
+ function RadioGroup({
10
+ className,
11
+ ...props
12
+ }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
13
+ return (
14
+ <RadioGroupPrimitive.Root
15
+ data-slot="radio-group"
16
+ className={cn("grid gap-3", className)}
17
+ {...props}
18
+ />
19
+ )
20
+ }
21
+
22
+ function RadioGroupItem({
23
+ className,
24
+ ...props
25
+ }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
26
+ return (
27
+ <RadioGroupPrimitive.Item
28
+ data-slot="radio-group-item"
29
+ className={cn(
30
+ "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
31
+ className
32
+ )}
33
+ {...props}
34
+ >
35
+ <RadioGroupPrimitive.Indicator
36
+ data-slot="radio-group-indicator"
37
+ className="relative flex items-center justify-center"
38
+ >
39
+ <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
40
+ </RadioGroupPrimitive.Indicator>
41
+ </RadioGroupPrimitive.Item>
42
+ )
43
+ }
44
+
45
+ export { RadioGroup, RadioGroupItem }
@@ -1,53 +1,53 @@
1
- "use client"
2
-
3
- import { GripVerticalIcon } from "lucide-react"
4
- import * as ResizablePrimitive from "react-resizable-panels"
5
-
6
- import { cn } from "../../lib/utils"
7
-
8
- function ResizablePanelGroup({
9
- className,
10
- ...props
11
- }: ResizablePrimitive.GroupProps) {
12
- return (
13
- <ResizablePrimitive.Group
14
- data-slot="resizable-panel-group"
15
- className={cn(
16
- "flex h-full w-full aria-[orientation=vertical]:flex-col",
17
- className
18
- )}
19
- {...props}
20
- />
21
- )
22
- }
23
-
24
- function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
25
- return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
26
- }
27
-
28
- function ResizableHandle({
29
- withHandle,
30
- className,
31
- ...props
32
- }: ResizablePrimitive.SeparatorProps & {
33
- withHandle?: boolean
34
- }) {
35
- return (
36
- <ResizablePrimitive.Separator
37
- data-slot="resizable-handle"
38
- className={cn(
39
- "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
40
- className
41
- )}
42
- {...props}
43
- >
44
- {withHandle && (
45
- <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
46
- <GripVerticalIcon className="size-2.5" />
47
- </div>
48
- )}
49
- </ResizablePrimitive.Separator>
50
- )
51
- }
52
-
53
- export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
1
+ "use client"
2
+
3
+ import { GripVerticalIcon } from "lucide-react"
4
+ import * as ResizablePrimitive from "react-resizable-panels"
5
+
6
+ import { cn } from "../../lib/utils"
7
+
8
+ function ResizablePanelGroup({
9
+ className,
10
+ ...props
11
+ }: ResizablePrimitive.GroupProps) {
12
+ return (
13
+ <ResizablePrimitive.Group
14
+ data-slot="resizable-panel-group"
15
+ className={cn(
16
+ "flex h-full w-full aria-[orientation=vertical]:flex-col",
17
+ className
18
+ )}
19
+ {...props}
20
+ />
21
+ )
22
+ }
23
+
24
+ function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
25
+ return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
26
+ }
27
+
28
+ function ResizableHandle({
29
+ withHandle,
30
+ className,
31
+ ...props
32
+ }: ResizablePrimitive.SeparatorProps & {
33
+ withHandle?: boolean
34
+ }) {
35
+ return (
36
+ <ResizablePrimitive.Separator
37
+ data-slot="resizable-handle"
38
+ className={cn(
39
+ "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
40
+ className
41
+ )}
42
+ {...props}
43
+ >
44
+ {withHandle && (
45
+ <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
46
+ <GripVerticalIcon className="size-2.5" />
47
+ </div>
48
+ )}
49
+ </ResizablePrimitive.Separator>
50
+ )
51
+ }
52
+
53
+ export { ResizableHandle, ResizablePanel, ResizablePanelGroup }
@@ -1,58 +1,58 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
5
-
6
- import { cn } from "../../lib/utils"
7
-
8
- function ScrollArea({
9
- className,
10
- children,
11
- ...props
12
- }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
13
- return (
14
- <ScrollAreaPrimitive.Root
15
- data-slot="scroll-area"
16
- className={cn("relative", className)}
17
- {...props}
18
- >
19
- <ScrollAreaPrimitive.Viewport
20
- data-slot="scroll-area-viewport"
21
- className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
22
- >
23
- {children}
24
- </ScrollAreaPrimitive.Viewport>
25
- <ScrollBar />
26
- <ScrollAreaPrimitive.Corner />
27
- </ScrollAreaPrimitive.Root>
28
- )
29
- }
30
-
31
- function ScrollBar({
32
- className,
33
- orientation = "vertical",
34
- ...props
35
- }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
36
- return (
37
- <ScrollAreaPrimitive.ScrollAreaScrollbar
38
- data-slot="scroll-area-scrollbar"
39
- orientation={orientation}
40
- className={cn(
41
- "flex touch-none p-px transition-colors select-none",
42
- orientation === "vertical" &&
43
- "h-full w-2.5 border-l border-l-transparent",
44
- orientation === "horizontal" &&
45
- "h-2.5 flex-col border-t border-t-transparent",
46
- className
47
- )}
48
- {...props}
49
- >
50
- <ScrollAreaPrimitive.ScrollAreaThumb
51
- data-slot="scroll-area-thumb"
52
- className="relative flex-1 rounded-full bg-border"
53
- />
54
- </ScrollAreaPrimitive.ScrollAreaScrollbar>
55
- )
56
- }
57
-
58
- export { ScrollArea, ScrollBar }
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
5
+
6
+ import { cn } from "../../lib/utils"
7
+
8
+ function ScrollArea({
9
+ className,
10
+ children,
11
+ ...props
12
+ }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
13
+ return (
14
+ <ScrollAreaPrimitive.Root
15
+ data-slot="scroll-area"
16
+ className={cn("relative", className)}
17
+ {...props}
18
+ >
19
+ <ScrollAreaPrimitive.Viewport
20
+ data-slot="scroll-area-viewport"
21
+ className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
22
+ >
23
+ {children}
24
+ </ScrollAreaPrimitive.Viewport>
25
+ <ScrollBar />
26
+ <ScrollAreaPrimitive.Corner />
27
+ </ScrollAreaPrimitive.Root>
28
+ )
29
+ }
30
+
31
+ function ScrollBar({
32
+ className,
33
+ orientation = "vertical",
34
+ ...props
35
+ }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
36
+ return (
37
+ <ScrollAreaPrimitive.ScrollAreaScrollbar
38
+ data-slot="scroll-area-scrollbar"
39
+ orientation={orientation}
40
+ className={cn(
41
+ "flex touch-none p-px transition-colors select-none",
42
+ orientation === "vertical" &&
43
+ "h-full w-2.5 border-l border-l-transparent",
44
+ orientation === "horizontal" &&
45
+ "h-2.5 flex-col border-t border-t-transparent",
46
+ className
47
+ )}
48
+ {...props}
49
+ >
50
+ <ScrollAreaPrimitive.ScrollAreaThumb
51
+ data-slot="scroll-area-thumb"
52
+ className="relative flex-1 rounded-full bg-border"
53
+ />
54
+ </ScrollAreaPrimitive.ScrollAreaScrollbar>
55
+ )
56
+ }
57
+
58
+ export { ScrollArea, ScrollBar }