@openconsole/shadcn 0.2.4 → 0.2.6

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,187 +1,187 @@
1
- "use client";
2
-
3
- import * as SelectPrimitive from "@radix-ui/react-select";
4
- import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
5
- import * as React from "react";
6
-
7
- import { cn } from "./lib/utils";
8
-
9
- function Select({
10
- ...props
11
- }: React.ComponentProps<typeof SelectPrimitive.Root>) {
12
- return <SelectPrimitive.Root data-slot="select" {...props} />;
13
- }
14
-
15
- function SelectGroup({
16
- ...props
17
- }: React.ComponentProps<typeof SelectPrimitive.Group>) {
18
- return <SelectPrimitive.Group data-slot="select-group" {...props} />;
19
- }
20
-
21
- function SelectValue({
22
- ...props
23
- }: React.ComponentProps<typeof SelectPrimitive.Value>) {
24
- return <SelectPrimitive.Value data-slot="select-value" {...props} />;
25
- }
26
-
27
- function SelectTrigger({
28
- className,
29
- size = "default",
30
- children,
31
- ...props
32
- }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
33
- size?: "sm" | "default";
34
- }) {
35
- return (
36
- <SelectPrimitive.Trigger
37
- data-slot="select-trigger"
38
- data-size={size}
39
- className={cn(
40
- "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
41
- className,
42
- )}
43
- {...props}
44
- >
45
- {children}
46
- <SelectPrimitive.Icon asChild>
47
- <ChevronDownIcon className="size-4 opacity-50" />
48
- </SelectPrimitive.Icon>
49
- </SelectPrimitive.Trigger>
50
- );
51
- }
52
-
53
- function SelectContent({
54
- className,
55
- children,
56
- position = "popper",
57
- align = "center",
58
- ...props
59
- }: React.ComponentProps<typeof SelectPrimitive.Content>) {
60
- return (
61
- <SelectPrimitive.Portal>
62
- <SelectPrimitive.Content
63
- data-slot="select-content"
64
- className={cn(
65
- "bg-popover text-popover-foreground 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-[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 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
66
- position === "popper" &&
67
- "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
68
- className,
69
- )}
70
- position={position}
71
- align={align}
72
- {...props}
73
- >
74
- <SelectScrollUpButton />
75
- <SelectPrimitive.Viewport
76
- className={cn(
77
- "p-1",
78
- position === "popper" &&
79
- "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
80
- )}
81
- >
82
- {children}
83
- </SelectPrimitive.Viewport>
84
- <SelectScrollDownButton />
85
- </SelectPrimitive.Content>
86
- </SelectPrimitive.Portal>
87
- );
88
- }
89
-
90
- function SelectLabel({
91
- className,
92
- ...props
93
- }: React.ComponentProps<typeof SelectPrimitive.Label>) {
94
- return (
95
- <SelectPrimitive.Label
96
- data-slot="select-label"
97
- className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
98
- {...props}
99
- />
100
- );
101
- }
102
-
103
- function SelectItem({
104
- className,
105
- children,
106
- ...props
107
- }: React.ComponentProps<typeof SelectPrimitive.Item>) {
108
- return (
109
- <SelectPrimitive.Item
110
- data-slot="select-item"
111
- className={cn(
112
- "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
113
- className,
114
- )}
115
- {...props}
116
- >
117
- <span className="absolute right-2 flex size-3.5 items-center justify-center">
118
- <SelectPrimitive.ItemIndicator>
119
- <CheckIcon className="size-4" />
120
- </SelectPrimitive.ItemIndicator>
121
- </span>
122
- <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
123
- </SelectPrimitive.Item>
124
- );
125
- }
126
-
127
- function SelectSeparator({
128
- className,
129
- ...props
130
- }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
131
- return (
132
- <SelectPrimitive.Separator
133
- data-slot="select-separator"
134
- className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
135
- {...props}
136
- />
137
- );
138
- }
139
-
140
- function SelectScrollUpButton({
141
- className,
142
- ...props
143
- }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
144
- return (
145
- <SelectPrimitive.ScrollUpButton
146
- data-slot="select-scroll-up-button"
147
- className={cn(
148
- "flex cursor-default items-center justify-center py-1",
149
- className,
150
- )}
151
- {...props}
152
- >
153
- <ChevronUpIcon className="size-4" />
154
- </SelectPrimitive.ScrollUpButton>
155
- );
156
- }
157
-
158
- function SelectScrollDownButton({
159
- className,
160
- ...props
161
- }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
162
- return (
163
- <SelectPrimitive.ScrollDownButton
164
- data-slot="select-scroll-down-button"
165
- className={cn(
166
- "flex cursor-default items-center justify-center py-1",
167
- className,
168
- )}
169
- {...props}
170
- >
171
- <ChevronDownIcon className="size-4" />
172
- </SelectPrimitive.ScrollDownButton>
173
- );
174
- }
175
-
176
- export {
177
- Select,
178
- SelectContent,
179
- SelectGroup,
180
- SelectItem,
181
- SelectLabel,
182
- SelectScrollDownButton,
183
- SelectScrollUpButton,
184
- SelectSeparator,
185
- SelectTrigger,
186
- SelectValue,
187
- };
1
+ "use client";
2
+
3
+ import * as SelectPrimitive from "@radix-ui/react-select";
4
+ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
5
+ import * as React from "react";
6
+
7
+ import { cn } from "../../lib/utils";
8
+
9
+ function Select({
10
+ ...props
11
+ }: React.ComponentProps<typeof SelectPrimitive.Root>) {
12
+ return <SelectPrimitive.Root data-slot="select" {...props} />;
13
+ }
14
+
15
+ function SelectGroup({
16
+ ...props
17
+ }: React.ComponentProps<typeof SelectPrimitive.Group>) {
18
+ return <SelectPrimitive.Group data-slot="select-group" {...props} />;
19
+ }
20
+
21
+ function SelectValue({
22
+ ...props
23
+ }: React.ComponentProps<typeof SelectPrimitive.Value>) {
24
+ return <SelectPrimitive.Value data-slot="select-value" {...props} />;
25
+ }
26
+
27
+ function SelectTrigger({
28
+ className,
29
+ size = "default",
30
+ children,
31
+ ...props
32
+ }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
33
+ size?: "sm" | "default";
34
+ }) {
35
+ return (
36
+ <SelectPrimitive.Trigger
37
+ data-slot="select-trigger"
38
+ data-size={size}
39
+ className={cn(
40
+ "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
41
+ className,
42
+ )}
43
+ {...props}
44
+ >
45
+ {children}
46
+ <SelectPrimitive.Icon asChild>
47
+ <ChevronDownIcon className="size-4 opacity-50" />
48
+ </SelectPrimitive.Icon>
49
+ </SelectPrimitive.Trigger>
50
+ );
51
+ }
52
+
53
+ function SelectContent({
54
+ className,
55
+ children,
56
+ position = "popper",
57
+ align = "center",
58
+ ...props
59
+ }: React.ComponentProps<typeof SelectPrimitive.Content>) {
60
+ return (
61
+ <SelectPrimitive.Portal>
62
+ <SelectPrimitive.Content
63
+ data-slot="select-content"
64
+ className={cn(
65
+ "bg-popover text-popover-foreground 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-[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 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
66
+ position === "popper" &&
67
+ "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
68
+ className,
69
+ )}
70
+ position={position}
71
+ align={align}
72
+ {...props}
73
+ >
74
+ <SelectScrollUpButton />
75
+ <SelectPrimitive.Viewport
76
+ className={cn(
77
+ "p-1",
78
+ position === "popper" &&
79
+ "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
80
+ )}
81
+ >
82
+ {children}
83
+ </SelectPrimitive.Viewport>
84
+ <SelectScrollDownButton />
85
+ </SelectPrimitive.Content>
86
+ </SelectPrimitive.Portal>
87
+ );
88
+ }
89
+
90
+ function SelectLabel({
91
+ className,
92
+ ...props
93
+ }: React.ComponentProps<typeof SelectPrimitive.Label>) {
94
+ return (
95
+ <SelectPrimitive.Label
96
+ data-slot="select-label"
97
+ className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
98
+ {...props}
99
+ />
100
+ );
101
+ }
102
+
103
+ function SelectItem({
104
+ className,
105
+ children,
106
+ ...props
107
+ }: React.ComponentProps<typeof SelectPrimitive.Item>) {
108
+ return (
109
+ <SelectPrimitive.Item
110
+ data-slot="select-item"
111
+ className={cn(
112
+ "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
113
+ className,
114
+ )}
115
+ {...props}
116
+ >
117
+ <span className="absolute right-2 flex size-3.5 items-center justify-center">
118
+ <SelectPrimitive.ItemIndicator>
119
+ <CheckIcon className="size-4" />
120
+ </SelectPrimitive.ItemIndicator>
121
+ </span>
122
+ <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
123
+ </SelectPrimitive.Item>
124
+ );
125
+ }
126
+
127
+ function SelectSeparator({
128
+ className,
129
+ ...props
130
+ }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
131
+ return (
132
+ <SelectPrimitive.Separator
133
+ data-slot="select-separator"
134
+ className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
135
+ {...props}
136
+ />
137
+ );
138
+ }
139
+
140
+ function SelectScrollUpButton({
141
+ className,
142
+ ...props
143
+ }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
144
+ return (
145
+ <SelectPrimitive.ScrollUpButton
146
+ data-slot="select-scroll-up-button"
147
+ className={cn(
148
+ "flex cursor-default items-center justify-center py-1",
149
+ className,
150
+ )}
151
+ {...props}
152
+ >
153
+ <ChevronUpIcon className="size-4" />
154
+ </SelectPrimitive.ScrollUpButton>
155
+ );
156
+ }
157
+
158
+ function SelectScrollDownButton({
159
+ className,
160
+ ...props
161
+ }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
162
+ return (
163
+ <SelectPrimitive.ScrollDownButton
164
+ data-slot="select-scroll-down-button"
165
+ className={cn(
166
+ "flex cursor-default items-center justify-center py-1",
167
+ className,
168
+ )}
169
+ {...props}
170
+ >
171
+ <ChevronDownIcon className="size-4" />
172
+ </SelectPrimitive.ScrollDownButton>
173
+ );
174
+ }
175
+
176
+ export {
177
+ Select,
178
+ SelectContent,
179
+ SelectGroup,
180
+ SelectItem,
181
+ SelectLabel,
182
+ SelectScrollDownButton,
183
+ SelectScrollUpButton,
184
+ SelectSeparator,
185
+ SelectTrigger,
186
+ SelectValue,
187
+ };
@@ -1,28 +1,28 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import * as SeparatorPrimitive from "@radix-ui/react-separator";
5
-
6
- import { cn } from "./lib/utils";
7
-
8
- function Separator({
9
- className,
10
- orientation = "horizontal",
11
- decorative = true,
12
- ...props
13
- }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14
- return (
15
- <SeparatorPrimitive.Root
16
- data-slot="separator"
17
- decorative={decorative}
18
- orientation={orientation}
19
- className={cn(
20
- "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
21
- className,
22
- )}
23
- {...props}
24
- />
25
- );
26
- }
27
-
28
- export { Separator };
1
+ "use client";
2
+
3
+ import * as React from "react";
4
+ import * as SeparatorPrimitive from "@radix-ui/react-separator";
5
+
6
+ import { cn } from "../../lib/utils";
7
+
8
+ function Separator({
9
+ className,
10
+ orientation = "horizontal",
11
+ decorative = true,
12
+ ...props
13
+ }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14
+ return (
15
+ <SeparatorPrimitive.Root
16
+ data-slot="separator"
17
+ decorative={decorative}
18
+ orientation={orientation}
19
+ className={cn(
20
+ "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
21
+ className,
22
+ )}
23
+ {...props}
24
+ />
25
+ );
26
+ }
27
+
28
+ export { Separator };