@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.
- package/README.md +460 -380
- package/components/ai-elements/agent.tsx +141 -0
- package/components/ai-elements/artifact.tsx +148 -0
- package/components/ai-elements/attachments.tsx +426 -0
- package/components/ai-elements/audio-player.tsx +231 -0
- package/components/ai-elements/canvas.tsx +26 -0
- package/components/ai-elements/chain-of-thought.tsx +222 -0
- package/components/ai-elements/checkpoint.tsx +71 -0
- package/components/ai-elements/code-block.tsx +562 -0
- package/components/ai-elements/commit.tsx +458 -0
- package/components/ai-elements/confirmation.tsx +174 -0
- package/components/ai-elements/connection.tsx +28 -0
- package/components/ai-elements/context.tsx +409 -0
- package/components/ai-elements/controls.tsx +18 -0
- package/components/ai-elements/conversation.tsx +168 -0
- package/components/ai-elements/edge.tsx +143 -0
- package/components/ai-elements/environment-variables.tsx +324 -0
- package/components/ai-elements/file-tree.tsx +304 -0
- package/components/ai-elements/image.tsx +24 -0
- package/components/ai-elements/index.ts +51 -0
- package/components/ai-elements/inline-citation.tsx +296 -0
- package/components/ai-elements/jsx-preview.tsx +310 -0
- package/components/ai-elements/message.tsx +360 -0
- package/components/ai-elements/mic-selector.tsx +375 -0
- package/components/ai-elements/model-selector.tsx +213 -0
- package/components/ai-elements/node.tsx +71 -0
- package/components/ai-elements/open-in-chat.tsx +370 -0
- package/components/ai-elements/package-info.tsx +239 -0
- package/components/ai-elements/panel.tsx +15 -0
- package/components/ai-elements/persona.tsx +306 -0
- package/components/ai-elements/plan.tsx +147 -0
- package/components/ai-elements/prompt-input.tsx +1463 -0
- package/components/ai-elements/queue.tsx +274 -0
- package/components/ai-elements/reasoning.tsx +228 -0
- package/components/ai-elements/sandbox.tsx +132 -0
- package/components/ai-elements/schema-display.tsx +471 -0
- package/components/ai-elements/shimmer.tsx +77 -0
- package/components/ai-elements/snippet.tsx +145 -0
- package/components/ai-elements/sources.tsx +77 -0
- package/components/ai-elements/speech-input.tsx +323 -0
- package/components/ai-elements/stack-trace.tsx +528 -0
- package/components/ai-elements/suggestion.tsx +57 -0
- package/components/ai-elements/task.tsx +87 -0
- package/components/ai-elements/terminal.tsx +273 -0
- package/components/ai-elements/test-results.tsx +496 -0
- package/components/ai-elements/tool.tsx +173 -0
- package/components/ai-elements/toolbar.tsx +16 -0
- package/components/ai-elements/transcription.tsx +125 -0
- package/components/ai-elements/voice-selector.tsx +524 -0
- package/components/ai-elements/web-preview.tsx +281 -0
- package/components/index.ts +3 -0
- package/{accordion.tsx → components/ui/accordion.tsx} +66 -66
- package/{alert-dialog.tsx → components/ui/alert-dialog.tsx} +196 -196
- package/{alert.tsx → components/ui/alert.tsx} +66 -66
- package/{aspect-ratio.tsx → components/ui/aspect-ratio.tsx} +11 -11
- package/{avatar.tsx → components/ui/avatar.tsx} +53 -53
- package/{badge.tsx → components/ui/badge.tsx} +46 -46
- package/{breadcrumb.tsx → components/ui/breadcrumb.tsx} +109 -109
- package/{button-group.tsx → components/ui/button-group.tsx} +83 -83
- package/{button.tsx → components/ui/button.tsx} +60 -60
- package/{calendar.tsx → components/ui/calendar.tsx} +219 -219
- package/{card.tsx → components/ui/card.tsx} +92 -92
- package/{carousel.tsx → components/ui/carousel.tsx} +241 -241
- package/{chart.tsx → components/ui/chart.tsx} +374 -374
- package/{checkbox.tsx → components/ui/checkbox.tsx} +32 -32
- package/{collapsible.tsx → components/ui/collapsible.tsx} +33 -33
- package/{command.tsx → components/ui/command.tsx} +184 -184
- package/{context-menu.tsx → components/ui/context-menu.tsx} +252 -252
- package/{dialog.tsx → components/ui/dialog.tsx} +143 -143
- package/{direction.tsx → components/ui/direction.tsx} +22 -22
- package/{drawer.tsx → components/ui/drawer.tsx} +135 -135
- package/{dropdown-menu.tsx → components/ui/dropdown-menu.tsx} +257 -257
- package/{empty.tsx → components/ui/empty.tsx} +104 -104
- package/{field.tsx → components/ui/field.tsx} +248 -248
- package/{form.tsx → components/ui/form.tsx} +167 -167
- package/{hover-card.tsx → components/ui/hover-card.tsx} +44 -44
- package/{icon.tsx → components/ui/icon.tsx} +55 -55
- package/components/ui/index.ts +59 -0
- package/{input-group.tsx → components/ui/input-group.tsx} +170 -170
- package/{input-otp.tsx → components/ui/input-otp.tsx} +77 -77
- package/{input.tsx → components/ui/input.tsx} +21 -21
- package/{item.tsx → components/ui/item.tsx} +193 -193
- package/{kbd.tsx → components/ui/kbd.tsx} +28 -28
- package/{label.tsx → components/ui/label.tsx} +24 -24
- package/{menubar.tsx → components/ui/menubar.tsx} +276 -276
- package/{native-select.tsx → components/ui/native-select.tsx} +62 -62
- package/{navigation-menu.tsx → components/ui/navigation-menu.tsx} +168 -168
- package/{pagination.tsx → components/ui/pagination.tsx} +127 -127
- package/{popover.tsx → components/ui/popover.tsx} +89 -89
- package/{progress.tsx → components/ui/progress.tsx} +31 -31
- package/{radio-group.tsx → components/ui/radio-group.tsx} +45 -45
- package/{resizable.tsx → components/ui/resizable.tsx} +53 -53
- package/{scroll-area.tsx → components/ui/scroll-area.tsx} +58 -58
- package/{select.tsx → components/ui/select.tsx} +187 -187
- package/{separator.tsx → components/ui/separator.tsx} +28 -28
- package/{sheet.tsx → components/ui/sheet.tsx} +139 -139
- package/{sidebar.tsx → components/ui/sidebar.tsx} +724 -724
- package/{skeleton.tsx → components/ui/skeleton.tsx} +13 -13
- package/{slider.tsx → components/ui/slider.tsx} +63 -63
- package/{sonner.tsx → components/ui/sonner.tsx} +40 -40
- package/{spinner.tsx → components/ui/spinner.tsx} +16 -16
- package/{switch.tsx → components/ui/switch.tsx} +35 -35
- package/{table.tsx → components/ui/table.tsx} +116 -116
- package/{tabs.tsx → components/ui/tabs.tsx} +66 -66
- package/{textarea.tsx → components/ui/textarea.tsx} +18 -18
- package/{toggle-group.tsx → components/ui/toggle-group.tsx} +83 -83
- package/{toggle.tsx → components/ui/toggle.tsx} +47 -47
- package/{tooltip.tsx → components/ui/tooltip.tsx} +61 -61
- package/hooks/index.ts +1 -1
- package/hooks/use-mobile.ts +19 -19
- package/index.ts +3 -59
- package/lib/index.ts +1 -1
- package/lib/utils.ts +6 -6
- package/package.json +79 -1
- package/styles.css +124 -124
- package/tsconfig.json +0 -12
- package/tsconfig.tsbuildinfo +0 -1
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
-
|
|
5
|
-
import { cn } from "
|
|
6
|
-
|
|
7
|
-
const badgeVariants = cva(
|
|
8
|
-
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
default:
|
|
13
|
-
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
14
|
-
secondary:
|
|
15
|
-
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
16
|
-
destructive:
|
|
17
|
-
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
18
|
-
outline:
|
|
19
|
-
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
defaultVariants: {
|
|
23
|
-
variant: "default",
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
);
|
|
27
|
-
|
|
28
|
-
function Badge({
|
|
29
|
-
className,
|
|
30
|
-
variant,
|
|
31
|
-
asChild = false,
|
|
32
|
-
...props
|
|
33
|
-
}: React.ComponentProps<"span"> &
|
|
34
|
-
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
|
35
|
-
const Comp = asChild ? Slot : "span";
|
|
36
|
-
|
|
37
|
-
return (
|
|
38
|
-
<Comp
|
|
39
|
-
data-slot="badge"
|
|
40
|
-
className={cn(badgeVariants({ variant }), className)}
|
|
41
|
-
{...props}
|
|
42
|
-
/>
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export { Badge, badgeVariants };
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
+
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
|
|
7
|
+
const badgeVariants = cva(
|
|
8
|
+
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default:
|
|
13
|
+
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
14
|
+
secondary:
|
|
15
|
+
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
16
|
+
destructive:
|
|
17
|
+
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
18
|
+
outline:
|
|
19
|
+
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: {
|
|
23
|
+
variant: "default",
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
function Badge({
|
|
29
|
+
className,
|
|
30
|
+
variant,
|
|
31
|
+
asChild = false,
|
|
32
|
+
...props
|
|
33
|
+
}: React.ComponentProps<"span"> &
|
|
34
|
+
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
|
35
|
+
const Comp = asChild ? Slot : "span";
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<Comp
|
|
39
|
+
data-slot="badge"
|
|
40
|
+
className={cn(badgeVariants({ variant }), className)}
|
|
41
|
+
{...props}
|
|
42
|
+
/>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export { Badge, badgeVariants };
|
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { ChevronRight, MoreHorizontal } from "lucide-react"
|
|
3
|
-
import { Slot } from "radix-ui"
|
|
4
|
-
|
|
5
|
-
import { cn } from "
|
|
6
|
-
|
|
7
|
-
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
|
8
|
-
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
|
12
|
-
return (
|
|
13
|
-
<ol
|
|
14
|
-
data-slot="breadcrumb-list"
|
|
15
|
-
className={cn(
|
|
16
|
-
"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
|
|
17
|
-
className
|
|
18
|
-
)}
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
)
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
|
25
|
-
return (
|
|
26
|
-
<li
|
|
27
|
-
data-slot="breadcrumb-item"
|
|
28
|
-
className={cn("inline-flex items-center gap-1.5", className)}
|
|
29
|
-
{...props}
|
|
30
|
-
/>
|
|
31
|
-
)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
function BreadcrumbLink({
|
|
35
|
-
asChild,
|
|
36
|
-
className,
|
|
37
|
-
...props
|
|
38
|
-
}: React.ComponentProps<"a"> & {
|
|
39
|
-
asChild?: boolean
|
|
40
|
-
}) {
|
|
41
|
-
const Comp = asChild ? Slot.Root : "a"
|
|
42
|
-
|
|
43
|
-
return (
|
|
44
|
-
<Comp
|
|
45
|
-
data-slot="breadcrumb-link"
|
|
46
|
-
className={cn("transition-colors hover:text-foreground", className)}
|
|
47
|
-
{...props}
|
|
48
|
-
/>
|
|
49
|
-
)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
|
53
|
-
return (
|
|
54
|
-
<span
|
|
55
|
-
data-slot="breadcrumb-page"
|
|
56
|
-
role="link"
|
|
57
|
-
aria-disabled="true"
|
|
58
|
-
aria-current="page"
|
|
59
|
-
className={cn("font-normal text-foreground", className)}
|
|
60
|
-
{...props}
|
|
61
|
-
/>
|
|
62
|
-
)
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
function BreadcrumbSeparator({
|
|
66
|
-
children,
|
|
67
|
-
className,
|
|
68
|
-
...props
|
|
69
|
-
}: React.ComponentProps<"li">) {
|
|
70
|
-
return (
|
|
71
|
-
<li
|
|
72
|
-
data-slot="breadcrumb-separator"
|
|
73
|
-
role="presentation"
|
|
74
|
-
aria-hidden="true"
|
|
75
|
-
className={cn("[&>svg]:size-3.5", className)}
|
|
76
|
-
{...props}
|
|
77
|
-
>
|
|
78
|
-
{children ?? <ChevronRight />}
|
|
79
|
-
</li>
|
|
80
|
-
)
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
function BreadcrumbEllipsis({
|
|
84
|
-
className,
|
|
85
|
-
...props
|
|
86
|
-
}: React.ComponentProps<"span">) {
|
|
87
|
-
return (
|
|
88
|
-
<span
|
|
89
|
-
data-slot="breadcrumb-ellipsis"
|
|
90
|
-
role="presentation"
|
|
91
|
-
aria-hidden="true"
|
|
92
|
-
className={cn("flex size-9 items-center justify-center", className)}
|
|
93
|
-
{...props}
|
|
94
|
-
>
|
|
95
|
-
<MoreHorizontal className="size-4" />
|
|
96
|
-
<span className="sr-only">More</span>
|
|
97
|
-
</span>
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
export {
|
|
102
|
-
Breadcrumb,
|
|
103
|
-
BreadcrumbList,
|
|
104
|
-
BreadcrumbItem,
|
|
105
|
-
BreadcrumbLink,
|
|
106
|
-
BreadcrumbPage,
|
|
107
|
-
BreadcrumbSeparator,
|
|
108
|
-
BreadcrumbEllipsis,
|
|
109
|
-
}
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
import { ChevronRight, MoreHorizontal } from "lucide-react"
|
|
3
|
+
import { Slot } from "radix-ui"
|
|
4
|
+
|
|
5
|
+
import { cn } from "../../lib/utils"
|
|
6
|
+
|
|
7
|
+
function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
|
|
8
|
+
return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
|
12
|
+
return (
|
|
13
|
+
<ol
|
|
14
|
+
data-slot="breadcrumb-list"
|
|
15
|
+
className={cn(
|
|
16
|
+
"flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
|
25
|
+
return (
|
|
26
|
+
<li
|
|
27
|
+
data-slot="breadcrumb-item"
|
|
28
|
+
className={cn("inline-flex items-center gap-1.5", className)}
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function BreadcrumbLink({
|
|
35
|
+
asChild,
|
|
36
|
+
className,
|
|
37
|
+
...props
|
|
38
|
+
}: React.ComponentProps<"a"> & {
|
|
39
|
+
asChild?: boolean
|
|
40
|
+
}) {
|
|
41
|
+
const Comp = asChild ? Slot.Root : "a"
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<Comp
|
|
45
|
+
data-slot="breadcrumb-link"
|
|
46
|
+
className={cn("transition-colors hover:text-foreground", className)}
|
|
47
|
+
{...props}
|
|
48
|
+
/>
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
|
53
|
+
return (
|
|
54
|
+
<span
|
|
55
|
+
data-slot="breadcrumb-page"
|
|
56
|
+
role="link"
|
|
57
|
+
aria-disabled="true"
|
|
58
|
+
aria-current="page"
|
|
59
|
+
className={cn("font-normal text-foreground", className)}
|
|
60
|
+
{...props}
|
|
61
|
+
/>
|
|
62
|
+
)
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
function BreadcrumbSeparator({
|
|
66
|
+
children,
|
|
67
|
+
className,
|
|
68
|
+
...props
|
|
69
|
+
}: React.ComponentProps<"li">) {
|
|
70
|
+
return (
|
|
71
|
+
<li
|
|
72
|
+
data-slot="breadcrumb-separator"
|
|
73
|
+
role="presentation"
|
|
74
|
+
aria-hidden="true"
|
|
75
|
+
className={cn("[&>svg]:size-3.5", className)}
|
|
76
|
+
{...props}
|
|
77
|
+
>
|
|
78
|
+
{children ?? <ChevronRight />}
|
|
79
|
+
</li>
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
function BreadcrumbEllipsis({
|
|
84
|
+
className,
|
|
85
|
+
...props
|
|
86
|
+
}: React.ComponentProps<"span">) {
|
|
87
|
+
return (
|
|
88
|
+
<span
|
|
89
|
+
data-slot="breadcrumb-ellipsis"
|
|
90
|
+
role="presentation"
|
|
91
|
+
aria-hidden="true"
|
|
92
|
+
className={cn("flex size-9 items-center justify-center", className)}
|
|
93
|
+
{...props}
|
|
94
|
+
>
|
|
95
|
+
<MoreHorizontal className="size-4" />
|
|
96
|
+
<span className="sr-only">More</span>
|
|
97
|
+
</span>
|
|
98
|
+
)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
export {
|
|
102
|
+
Breadcrumb,
|
|
103
|
+
BreadcrumbList,
|
|
104
|
+
BreadcrumbItem,
|
|
105
|
+
BreadcrumbLink,
|
|
106
|
+
BreadcrumbPage,
|
|
107
|
+
BreadcrumbSeparator,
|
|
108
|
+
BreadcrumbEllipsis,
|
|
109
|
+
}
|
|
@@ -1,83 +1,83 @@
|
|
|
1
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
2
|
-
import { Slot } from "radix-ui"
|
|
3
|
-
|
|
4
|
-
import { cn } from "
|
|
5
|
-
import { Separator } from "./separator"
|
|
6
|
-
|
|
7
|
-
const buttonGroupVariants = cva(
|
|
8
|
-
"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
orientation: {
|
|
12
|
-
horizontal:
|
|
13
|
-
"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
|
14
|
-
vertical:
|
|
15
|
-
"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
defaultVariants: {
|
|
19
|
-
orientation: "horizontal",
|
|
20
|
-
},
|
|
21
|
-
}
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
function ButtonGroup({
|
|
25
|
-
className,
|
|
26
|
-
orientation,
|
|
27
|
-
...props
|
|
28
|
-
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
|
|
29
|
-
return (
|
|
30
|
-
<div
|
|
31
|
-
role="group"
|
|
32
|
-
data-slot="button-group"
|
|
33
|
-
data-orientation={orientation}
|
|
34
|
-
className={cn(buttonGroupVariants({ orientation }), className)}
|
|
35
|
-
{...props}
|
|
36
|
-
/>
|
|
37
|
-
)
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function ButtonGroupText({
|
|
41
|
-
className,
|
|
42
|
-
asChild = false,
|
|
43
|
-
...props
|
|
44
|
-
}: React.ComponentProps<"div"> & {
|
|
45
|
-
asChild?: boolean
|
|
46
|
-
}) {
|
|
47
|
-
const Comp = asChild ? Slot.Root : "div"
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<Comp
|
|
51
|
-
className={cn(
|
|
52
|
-
"flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
53
|
-
className
|
|
54
|
-
)}
|
|
55
|
-
{...props}
|
|
56
|
-
/>
|
|
57
|
-
)
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
function ButtonGroupSeparator({
|
|
61
|
-
className,
|
|
62
|
-
orientation = "vertical",
|
|
63
|
-
...props
|
|
64
|
-
}: React.ComponentProps<typeof Separator>) {
|
|
65
|
-
return (
|
|
66
|
-
<Separator
|
|
67
|
-
data-slot="button-group-separator"
|
|
68
|
-
orientation={orientation}
|
|
69
|
-
className={cn(
|
|
70
|
-
"relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
|
|
71
|
-
className
|
|
72
|
-
)}
|
|
73
|
-
{...props}
|
|
74
|
-
/>
|
|
75
|
-
)
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export {
|
|
79
|
-
ButtonGroup,
|
|
80
|
-
ButtonGroupSeparator,
|
|
81
|
-
ButtonGroupText,
|
|
82
|
-
buttonGroupVariants,
|
|
83
|
-
}
|
|
1
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
|
2
|
+
import { Slot } from "radix-ui"
|
|
3
|
+
|
|
4
|
+
import { cn } from "../../lib/utils"
|
|
5
|
+
import { Separator } from "./separator"
|
|
6
|
+
|
|
7
|
+
const buttonGroupVariants = cva(
|
|
8
|
+
"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
orientation: {
|
|
12
|
+
horizontal:
|
|
13
|
+
"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
|
14
|
+
vertical:
|
|
15
|
+
"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
defaultVariants: {
|
|
19
|
+
orientation: "horizontal",
|
|
20
|
+
},
|
|
21
|
+
}
|
|
22
|
+
)
|
|
23
|
+
|
|
24
|
+
function ButtonGroup({
|
|
25
|
+
className,
|
|
26
|
+
orientation,
|
|
27
|
+
...props
|
|
28
|
+
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
|
|
29
|
+
return (
|
|
30
|
+
<div
|
|
31
|
+
role="group"
|
|
32
|
+
data-slot="button-group"
|
|
33
|
+
data-orientation={orientation}
|
|
34
|
+
className={cn(buttonGroupVariants({ orientation }), className)}
|
|
35
|
+
{...props}
|
|
36
|
+
/>
|
|
37
|
+
)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function ButtonGroupText({
|
|
41
|
+
className,
|
|
42
|
+
asChild = false,
|
|
43
|
+
...props
|
|
44
|
+
}: React.ComponentProps<"div"> & {
|
|
45
|
+
asChild?: boolean
|
|
46
|
+
}) {
|
|
47
|
+
const Comp = asChild ? Slot.Root : "div"
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<Comp
|
|
51
|
+
className={cn(
|
|
52
|
+
"flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
53
|
+
className
|
|
54
|
+
)}
|
|
55
|
+
{...props}
|
|
56
|
+
/>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function ButtonGroupSeparator({
|
|
61
|
+
className,
|
|
62
|
+
orientation = "vertical",
|
|
63
|
+
...props
|
|
64
|
+
}: React.ComponentProps<typeof Separator>) {
|
|
65
|
+
return (
|
|
66
|
+
<Separator
|
|
67
|
+
data-slot="button-group-separator"
|
|
68
|
+
orientation={orientation}
|
|
69
|
+
className={cn(
|
|
70
|
+
"relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
|
|
71
|
+
className
|
|
72
|
+
)}
|
|
73
|
+
{...props}
|
|
74
|
+
/>
|
|
75
|
+
)
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export {
|
|
79
|
+
ButtonGroup,
|
|
80
|
+
ButtonGroupSeparator,
|
|
81
|
+
ButtonGroupText,
|
|
82
|
+
buttonGroupVariants,
|
|
83
|
+
}
|
|
@@ -1,60 +1,60 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
-
|
|
5
|
-
import { cn } from "
|
|
6
|
-
|
|
7
|
-
const buttonVariants = cva(
|
|
8
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
9
|
-
{
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
13
|
-
destructive:
|
|
14
|
-
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
15
|
-
outline:
|
|
16
|
-
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
17
|
-
secondary:
|
|
18
|
-
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
19
|
-
ghost:
|
|
20
|
-
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
21
|
-
link: "text-primary underline-offset-4 hover:underline",
|
|
22
|
-
},
|
|
23
|
-
size: {
|
|
24
|
-
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
25
|
-
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
26
|
-
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
27
|
-
icon: "size-9",
|
|
28
|
-
"icon-sm": "size-8",
|
|
29
|
-
"icon-lg": "size-10",
|
|
30
|
-
},
|
|
31
|
-
},
|
|
32
|
-
defaultVariants: {
|
|
33
|
-
variant: "default",
|
|
34
|
-
size: "default",
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
);
|
|
38
|
-
|
|
39
|
-
function Button({
|
|
40
|
-
className,
|
|
41
|
-
variant,
|
|
42
|
-
size,
|
|
43
|
-
asChild = false,
|
|
44
|
-
...props
|
|
45
|
-
}: React.ComponentProps<"button"> &
|
|
46
|
-
VariantProps<typeof buttonVariants> & {
|
|
47
|
-
asChild?: boolean;
|
|
48
|
-
}) {
|
|
49
|
-
const Comp = asChild ? Slot : "button";
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<Comp
|
|
53
|
-
data-slot="button"
|
|
54
|
-
className={cn(buttonVariants({ variant, size, className }))}
|
|
55
|
-
{...props}
|
|
56
|
-
/>
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export { Button, buttonVariants };
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
3
|
+
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
+
|
|
5
|
+
import { cn } from "../../lib/utils";
|
|
6
|
+
|
|
7
|
+
const buttonVariants = cva(
|
|
8
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
13
|
+
destructive:
|
|
14
|
+
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
15
|
+
outline:
|
|
16
|
+
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
17
|
+
secondary:
|
|
18
|
+
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
19
|
+
ghost:
|
|
20
|
+
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
21
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
22
|
+
},
|
|
23
|
+
size: {
|
|
24
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
25
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
26
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
27
|
+
icon: "size-9",
|
|
28
|
+
"icon-sm": "size-8",
|
|
29
|
+
"icon-lg": "size-10",
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
defaultVariants: {
|
|
33
|
+
variant: "default",
|
|
34
|
+
size: "default",
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
function Button({
|
|
40
|
+
className,
|
|
41
|
+
variant,
|
|
42
|
+
size,
|
|
43
|
+
asChild = false,
|
|
44
|
+
...props
|
|
45
|
+
}: React.ComponentProps<"button"> &
|
|
46
|
+
VariantProps<typeof buttonVariants> & {
|
|
47
|
+
asChild?: boolean;
|
|
48
|
+
}) {
|
|
49
|
+
const Comp = asChild ? Slot : "button";
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<Comp
|
|
53
|
+
data-slot="button"
|
|
54
|
+
className={cn(buttonVariants({ variant, size, className }))}
|
|
55
|
+
{...props}
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export { Button, buttonVariants };
|