@openconsole/shadcn 0.2.4 → 0.2.5

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 (117) hide show
  1. package/README.md +460 -380
  2. package/components/ai-elements/agent.tsx +141 -0
  3. package/components/ai-elements/artifact.tsx +148 -0
  4. package/components/ai-elements/attachments.tsx +426 -0
  5. package/components/ai-elements/audio-player.tsx +231 -0
  6. package/components/ai-elements/canvas.tsx +26 -0
  7. package/components/ai-elements/chain-of-thought.tsx +222 -0
  8. package/components/ai-elements/checkpoint.tsx +71 -0
  9. package/components/ai-elements/code-block.tsx +562 -0
  10. package/components/ai-elements/commit.tsx +458 -0
  11. package/components/ai-elements/confirmation.tsx +174 -0
  12. package/components/ai-elements/connection.tsx +28 -0
  13. package/components/ai-elements/context.tsx +409 -0
  14. package/components/ai-elements/controls.tsx +18 -0
  15. package/components/ai-elements/conversation.tsx +168 -0
  16. package/components/ai-elements/edge.tsx +143 -0
  17. package/components/ai-elements/environment-variables.tsx +324 -0
  18. package/components/ai-elements/file-tree.tsx +304 -0
  19. package/components/ai-elements/image.tsx +24 -0
  20. package/components/ai-elements/index.ts +51 -0
  21. package/components/ai-elements/inline-citation.tsx +296 -0
  22. package/components/ai-elements/jsx-preview.tsx +310 -0
  23. package/components/ai-elements/message.tsx +360 -0
  24. package/components/ai-elements/mic-selector.tsx +375 -0
  25. package/components/ai-elements/model-selector.tsx +213 -0
  26. package/components/ai-elements/node.tsx +71 -0
  27. package/components/ai-elements/open-in-chat.tsx +370 -0
  28. package/components/ai-elements/package-info.tsx +239 -0
  29. package/components/ai-elements/panel.tsx +15 -0
  30. package/components/ai-elements/persona.tsx +306 -0
  31. package/components/ai-elements/plan.tsx +147 -0
  32. package/components/ai-elements/prompt-input.tsx +1463 -0
  33. package/components/ai-elements/queue.tsx +274 -0
  34. package/components/ai-elements/reasoning.tsx +228 -0
  35. package/components/ai-elements/sandbox.tsx +132 -0
  36. package/components/ai-elements/schema-display.tsx +471 -0
  37. package/components/ai-elements/shimmer.tsx +77 -0
  38. package/components/ai-elements/snippet.tsx +145 -0
  39. package/components/ai-elements/sources.tsx +77 -0
  40. package/components/ai-elements/speech-input.tsx +323 -0
  41. package/components/ai-elements/stack-trace.tsx +528 -0
  42. package/components/ai-elements/suggestion.tsx +57 -0
  43. package/components/ai-elements/task.tsx +87 -0
  44. package/components/ai-elements/terminal.tsx +273 -0
  45. package/components/ai-elements/test-results.tsx +496 -0
  46. package/components/ai-elements/tool.tsx +173 -0
  47. package/components/ai-elements/toolbar.tsx +16 -0
  48. package/components/ai-elements/transcription.tsx +125 -0
  49. package/components/ai-elements/voice-selector.tsx +524 -0
  50. package/components/ai-elements/web-preview.tsx +281 -0
  51. package/components/index.ts +3 -0
  52. package/{accordion.tsx → components/ui/accordion.tsx} +66 -66
  53. package/{alert-dialog.tsx → components/ui/alert-dialog.tsx} +196 -196
  54. package/{alert.tsx → components/ui/alert.tsx} +66 -66
  55. package/{aspect-ratio.tsx → components/ui/aspect-ratio.tsx} +11 -11
  56. package/{avatar.tsx → components/ui/avatar.tsx} +53 -53
  57. package/{badge.tsx → components/ui/badge.tsx} +46 -46
  58. package/{breadcrumb.tsx → components/ui/breadcrumb.tsx} +109 -109
  59. package/{button-group.tsx → components/ui/button-group.tsx} +83 -83
  60. package/{button.tsx → components/ui/button.tsx} +60 -60
  61. package/{calendar.tsx → components/ui/calendar.tsx} +219 -219
  62. package/{card.tsx → components/ui/card.tsx} +92 -92
  63. package/{carousel.tsx → components/ui/carousel.tsx} +241 -241
  64. package/{chart.tsx → components/ui/chart.tsx} +374 -374
  65. package/{checkbox.tsx → components/ui/checkbox.tsx} +32 -32
  66. package/{collapsible.tsx → components/ui/collapsible.tsx} +33 -33
  67. package/{command.tsx → components/ui/command.tsx} +184 -184
  68. package/{context-menu.tsx → components/ui/context-menu.tsx} +252 -252
  69. package/{dialog.tsx → components/ui/dialog.tsx} +143 -143
  70. package/{direction.tsx → components/ui/direction.tsx} +22 -22
  71. package/{drawer.tsx → components/ui/drawer.tsx} +135 -135
  72. package/{dropdown-menu.tsx → components/ui/dropdown-menu.tsx} +257 -257
  73. package/{empty.tsx → components/ui/empty.tsx} +104 -104
  74. package/{field.tsx → components/ui/field.tsx} +248 -248
  75. package/{form.tsx → components/ui/form.tsx} +167 -167
  76. package/{hover-card.tsx → components/ui/hover-card.tsx} +44 -44
  77. package/{icon.tsx → components/ui/icon.tsx} +55 -55
  78. package/components/ui/index.ts +59 -0
  79. package/{input-group.tsx → components/ui/input-group.tsx} +170 -170
  80. package/{input-otp.tsx → components/ui/input-otp.tsx} +77 -77
  81. package/{input.tsx → components/ui/input.tsx} +21 -21
  82. package/{item.tsx → components/ui/item.tsx} +193 -193
  83. package/{kbd.tsx → components/ui/kbd.tsx} +28 -28
  84. package/{label.tsx → components/ui/label.tsx} +24 -24
  85. package/{menubar.tsx → components/ui/menubar.tsx} +276 -276
  86. package/{native-select.tsx → components/ui/native-select.tsx} +62 -62
  87. package/{navigation-menu.tsx → components/ui/navigation-menu.tsx} +168 -168
  88. package/{pagination.tsx → components/ui/pagination.tsx} +127 -127
  89. package/{popover.tsx → components/ui/popover.tsx} +89 -89
  90. package/{progress.tsx → components/ui/progress.tsx} +31 -31
  91. package/{radio-group.tsx → components/ui/radio-group.tsx} +45 -45
  92. package/{resizable.tsx → components/ui/resizable.tsx} +53 -53
  93. package/{scroll-area.tsx → components/ui/scroll-area.tsx} +58 -58
  94. package/{select.tsx → components/ui/select.tsx} +187 -187
  95. package/{separator.tsx → components/ui/separator.tsx} +28 -28
  96. package/{sheet.tsx → components/ui/sheet.tsx} +139 -139
  97. package/{sidebar.tsx → components/ui/sidebar.tsx} +724 -724
  98. package/{skeleton.tsx → components/ui/skeleton.tsx} +13 -13
  99. package/{slider.tsx → components/ui/slider.tsx} +63 -63
  100. package/{sonner.tsx → components/ui/sonner.tsx} +40 -40
  101. package/{spinner.tsx → components/ui/spinner.tsx} +16 -16
  102. package/{switch.tsx → components/ui/switch.tsx} +35 -35
  103. package/{table.tsx → components/ui/table.tsx} +116 -116
  104. package/{tabs.tsx → components/ui/tabs.tsx} +66 -66
  105. package/{textarea.tsx → components/ui/textarea.tsx} +18 -18
  106. package/{toggle-group.tsx → components/ui/toggle-group.tsx} +83 -83
  107. package/{toggle.tsx → components/ui/toggle.tsx} +47 -47
  108. package/{tooltip.tsx → components/ui/tooltip.tsx} +61 -61
  109. package/hooks/index.ts +1 -1
  110. package/hooks/use-mobile.ts +19 -19
  111. package/index.ts +3 -59
  112. package/lib/index.ts +1 -1
  113. package/lib/utils.ts +6 -6
  114. package/package.json +79 -1
  115. package/styles.css +124 -124
  116. package/tsconfig.json +0 -12
  117. package/tsconfig.tsbuildinfo +0 -1
@@ -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 }