@tanstack/cta-ui 0.15.2 → 0.15.4
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/dist/assets/index-BLGJkAxX.css +1 -0
- package/dist/assets/index-DPjMQkKx.js +208 -0
- package/dist/assets/index-DPjMQkKx.js.map +1 -0
- package/dist/index.html +3 -2
- package/index.html +1 -0
- package/lib/engine-handling/create-app-wrapper.ts +3 -4
- package/lib/engine-handling/generate-initial-payload.ts +12 -20
- package/lib/engine-handling/server-environment.ts +2 -2
- package/lib/index.ts +33 -15
- package/lib-dist/engine-handling/create-app-wrapper.js +3 -2
- package/lib-dist/engine-handling/generate-initial-payload.d.ts +8 -6
- package/lib-dist/engine-handling/generate-initial-payload.js +9 -14
- package/lib-dist/engine-handling/server-environment.d.ts +3 -3
- package/lib-dist/index.d.ts +1 -0
- package/lib-dist/index.js +29 -11
- package/package.json +3 -32
- package/src/index.tsx +2 -42
- package/src/main.tsx +0 -1
- package/src/styles.css +2 -0
- package/src/types.d.ts +13 -8
- package/dist/assets/index-BktnQA5a.js +0 -213
- package/dist/assets/index-BktnQA5a.js.map +0 -1
- package/dist/assets/index-CpoUtYXp.css +0 -1
- package/dist/logo-color-100w.png +0 -0
- package/dist/logo192.png +0 -0
- package/dist/logo512.png +0 -0
- package/dist/tailwind.svg +0 -1
- package/dist/tanstack.png +0 -0
- package/dist/typescript.svg +0 -1
- package/lib/engine-handling/framework-registration.ts +0 -11
- package/lib-dist/engine-handling/framework-registration.d.ts +0 -1
- package/lib-dist/engine-handling/framework-registration.js +0 -10
- package/public/logo-color-100w.png +0 -0
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/tailwind.svg +0 -1
- package/public/tanstack.png +0 -0
- package/public/typescript.svg +0 -1
- package/src/components/StatusList.tsx +0 -22
- package/src/components/add-on-info-dialog.tsx +0 -39
- package/src/components/background-animation.tsx +0 -229
- package/src/components/cta-sidebar.tsx +0 -50
- package/src/components/custom-add-on-dialog.tsx +0 -79
- package/src/components/file-navigator.tsx +0 -203
- package/src/components/file-tree.tsx +0 -35
- package/src/components/file-viewer.tsx +0 -67
- package/src/components/header.tsx +0 -31
- package/src/components/sidebar-items/add-ons.tsx +0 -94
- package/src/components/sidebar-items/mode-selector.tsx +0 -57
- package/src/components/sidebar-items/project-name.tsx +0 -28
- package/src/components/sidebar-items/run-add-ons.tsx +0 -71
- package/src/components/sidebar-items/run-create-app.tsx +0 -82
- package/src/components/sidebar-items/starter.tsx +0 -123
- package/src/components/sidebar-items/typescript-switch.tsx +0 -52
- package/src/components/starters-carousel.tsx +0 -45
- package/src/components/startup-dialog.tsx +0 -71
- package/src/components/toaster.tsx +0 -29
- package/src/components/ui/button.tsx +0 -61
- package/src/components/ui/carousel.tsx +0 -239
- package/src/components/ui/checkbox.tsx +0 -30
- package/src/components/ui/dialog.tsx +0 -138
- package/src/components/ui/dropdown-menu.tsx +0 -255
- package/src/components/ui/input.tsx +0 -21
- package/src/components/ui/label.tsx +0 -22
- package/src/components/ui/popover.tsx +0 -46
- package/src/components/ui/separator.tsx +0 -28
- package/src/components/ui/sheet.tsx +0 -137
- package/src/components/ui/sidebar.tsx +0 -726
- package/src/components/ui/skeleton.tsx +0 -13
- package/src/components/ui/sonner.tsx +0 -23
- package/src/components/ui/switch.tsx +0 -29
- package/src/components/ui/table.tsx +0 -114
- package/src/components/ui/tabs.tsx +0 -64
- package/src/components/ui/toggle-group.tsx +0 -71
- package/src/components/ui/toggle.tsx +0 -49
- package/src/components/ui/tooltip.tsx +0 -61
- package/src/components/ui/tree-view.tsx +0 -497
- package/src/file-classes.ts +0 -54
- package/src/hooks/use-mobile.ts +0 -19
- package/src/hooks/use-mounted.ts +0 -9
- package/src/hooks/use-preferred-reduced-motion.ts +0 -27
- package/src/hooks/use-streaming-status.ts +0 -70
- package/src/lib/api.ts +0 -92
- package/src/lib/utils.ts +0 -6
- package/src/store/add-ons.ts +0 -81
- package/src/store/project.ts +0 -347
- package/tests/store/add-ons.test.ts +0 -222
- package/vitest.config.ts +0 -6
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { cn } from "@/lib/utils"
|
|
2
|
-
|
|
3
|
-
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
|
4
|
-
return (
|
|
5
|
-
<div
|
|
6
|
-
data-slot="skeleton"
|
|
7
|
-
className={cn("bg-accent animate-pulse rounded-md", className)}
|
|
8
|
-
{...props}
|
|
9
|
-
/>
|
|
10
|
-
)
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export { Skeleton }
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { useTheme } from "next-themes"
|
|
2
|
-
import { Toaster as Sonner, ToasterProps } from "sonner"
|
|
3
|
-
|
|
4
|
-
const Toaster = ({ ...props }: ToasterProps) => {
|
|
5
|
-
const { theme = "system" } = useTheme()
|
|
6
|
-
|
|
7
|
-
return (
|
|
8
|
-
<Sonner
|
|
9
|
-
theme={theme as ToasterProps["theme"]}
|
|
10
|
-
className="toaster group"
|
|
11
|
-
style={
|
|
12
|
-
{
|
|
13
|
-
"--normal-bg": "var(--popover)",
|
|
14
|
-
"--normal-text": "var(--popover-foreground)",
|
|
15
|
-
"--normal-border": "var(--border)",
|
|
16
|
-
} as React.CSSProperties
|
|
17
|
-
}
|
|
18
|
-
{...props}
|
|
19
|
-
/>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export { Toaster }
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
import * as SwitchPrimitive from '@radix-ui/react-switch'
|
|
3
|
-
|
|
4
|
-
import { cn } from '@/lib/utils'
|
|
5
|
-
|
|
6
|
-
function Switch({
|
|
7
|
-
className,
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
|
|
10
|
-
return (
|
|
11
|
-
<SwitchPrimitive.Root
|
|
12
|
-
data-slot="switch"
|
|
13
|
-
className={cn(
|
|
14
|
-
'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 border-1 border-gray-500/30',
|
|
15
|
-
className,
|
|
16
|
-
)}
|
|
17
|
-
{...props}
|
|
18
|
-
>
|
|
19
|
-
<SwitchPrimitive.Thumb
|
|
20
|
-
data-slot="switch-thumb"
|
|
21
|
-
className={cn(
|
|
22
|
-
'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
|
|
23
|
-
)}
|
|
24
|
-
/>
|
|
25
|
-
</SwitchPrimitive.Root>
|
|
26
|
-
)
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export { Switch }
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "@/lib/utils"
|
|
4
|
-
|
|
5
|
-
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
|
6
|
-
return (
|
|
7
|
-
<div
|
|
8
|
-
data-slot="table-container"
|
|
9
|
-
className="relative w-full overflow-x-auto"
|
|
10
|
-
>
|
|
11
|
-
<table
|
|
12
|
-
data-slot="table"
|
|
13
|
-
className={cn("w-full caption-bottom text-sm", className)}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
</div>
|
|
17
|
-
)
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
|
21
|
-
return (
|
|
22
|
-
<thead
|
|
23
|
-
data-slot="table-header"
|
|
24
|
-
className={cn("[&_tr]:border-b", className)}
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
|
31
|
-
return (
|
|
32
|
-
<tbody
|
|
33
|
-
data-slot="table-body"
|
|
34
|
-
className={cn("[&_tr:last-child]:border-0", className)}
|
|
35
|
-
{...props}
|
|
36
|
-
/>
|
|
37
|
-
)
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
|
41
|
-
return (
|
|
42
|
-
<tfoot
|
|
43
|
-
data-slot="table-footer"
|
|
44
|
-
className={cn(
|
|
45
|
-
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
|
46
|
-
className
|
|
47
|
-
)}
|
|
48
|
-
{...props}
|
|
49
|
-
/>
|
|
50
|
-
)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
|
54
|
-
return (
|
|
55
|
-
<tr
|
|
56
|
-
data-slot="table-row"
|
|
57
|
-
className={cn(
|
|
58
|
-
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
|
59
|
-
className
|
|
60
|
-
)}
|
|
61
|
-
{...props}
|
|
62
|
-
/>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
|
67
|
-
return (
|
|
68
|
-
<th
|
|
69
|
-
data-slot="table-head"
|
|
70
|
-
className={cn(
|
|
71
|
-
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
72
|
-
className
|
|
73
|
-
)}
|
|
74
|
-
{...props}
|
|
75
|
-
/>
|
|
76
|
-
)
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
|
80
|
-
return (
|
|
81
|
-
<td
|
|
82
|
-
data-slot="table-cell"
|
|
83
|
-
className={cn(
|
|
84
|
-
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
|
85
|
-
className
|
|
86
|
-
)}
|
|
87
|
-
{...props}
|
|
88
|
-
/>
|
|
89
|
-
)
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
function TableCaption({
|
|
93
|
-
className,
|
|
94
|
-
...props
|
|
95
|
-
}: React.ComponentProps<"caption">) {
|
|
96
|
-
return (
|
|
97
|
-
<caption
|
|
98
|
-
data-slot="table-caption"
|
|
99
|
-
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
|
100
|
-
{...props}
|
|
101
|
-
/>
|
|
102
|
-
)
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
export {
|
|
106
|
-
Table,
|
|
107
|
-
TableHeader,
|
|
108
|
-
TableBody,
|
|
109
|
-
TableFooter,
|
|
110
|
-
TableHead,
|
|
111
|
-
TableRow,
|
|
112
|
-
TableCell,
|
|
113
|
-
TableCaption,
|
|
114
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
|
3
|
-
|
|
4
|
-
import { cn } from "@/lib/utils"
|
|
5
|
-
|
|
6
|
-
function Tabs({
|
|
7
|
-
className,
|
|
8
|
-
...props
|
|
9
|
-
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
|
10
|
-
return (
|
|
11
|
-
<TabsPrimitive.Root
|
|
12
|
-
data-slot="tabs"
|
|
13
|
-
className={cn("flex flex-col gap-2", className)}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
)
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function TabsList({
|
|
20
|
-
className,
|
|
21
|
-
...props
|
|
22
|
-
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
|
23
|
-
return (
|
|
24
|
-
<TabsPrimitive.List
|
|
25
|
-
data-slot="tabs-list"
|
|
26
|
-
className={cn(
|
|
27
|
-
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
|
28
|
-
className
|
|
29
|
-
)}
|
|
30
|
-
{...props}
|
|
31
|
-
/>
|
|
32
|
-
)
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function TabsTrigger({
|
|
36
|
-
className,
|
|
37
|
-
...props
|
|
38
|
-
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
|
39
|
-
return (
|
|
40
|
-
<TabsPrimitive.Trigger
|
|
41
|
-
data-slot="tabs-trigger"
|
|
42
|
-
className={cn(
|
|
43
|
-
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
44
|
-
className
|
|
45
|
-
)}
|
|
46
|
-
{...props}
|
|
47
|
-
/>
|
|
48
|
-
)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function TabsContent({
|
|
52
|
-
className,
|
|
53
|
-
...props
|
|
54
|
-
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
|
55
|
-
return (
|
|
56
|
-
<TabsPrimitive.Content
|
|
57
|
-
data-slot="tabs-content"
|
|
58
|
-
className={cn("flex-1 outline-none", className)}
|
|
59
|
-
{...props}
|
|
60
|
-
/>
|
|
61
|
-
)
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
|
|
3
|
-
import type { VariantProps } from 'class-variance-authority'
|
|
4
|
-
|
|
5
|
-
import { cn } from '@/lib/utils'
|
|
6
|
-
import { toggleVariants } from '@/components/ui/toggle'
|
|
7
|
-
|
|
8
|
-
const ToggleGroupContext = React.createContext<
|
|
9
|
-
VariantProps<typeof toggleVariants>
|
|
10
|
-
>({
|
|
11
|
-
size: 'default',
|
|
12
|
-
variant: 'default',
|
|
13
|
-
})
|
|
14
|
-
|
|
15
|
-
function ToggleGroup({
|
|
16
|
-
className,
|
|
17
|
-
variant,
|
|
18
|
-
size,
|
|
19
|
-
children,
|
|
20
|
-
...props
|
|
21
|
-
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
|
|
22
|
-
VariantProps<typeof toggleVariants>) {
|
|
23
|
-
return (
|
|
24
|
-
<ToggleGroupPrimitive.Root
|
|
25
|
-
data-slot="toggle-group"
|
|
26
|
-
data-variant={variant}
|
|
27
|
-
data-size={size}
|
|
28
|
-
className={cn(
|
|
29
|
-
'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
|
|
30
|
-
className,
|
|
31
|
-
)}
|
|
32
|
-
{...props}
|
|
33
|
-
>
|
|
34
|
-
<ToggleGroupContext.Provider value={{ variant, size }}>
|
|
35
|
-
{children}
|
|
36
|
-
</ToggleGroupContext.Provider>
|
|
37
|
-
</ToggleGroupPrimitive.Root>
|
|
38
|
-
)
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function ToggleGroupItem({
|
|
42
|
-
className,
|
|
43
|
-
children,
|
|
44
|
-
variant,
|
|
45
|
-
size,
|
|
46
|
-
...props
|
|
47
|
-
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
|
|
48
|
-
VariantProps<typeof toggleVariants>) {
|
|
49
|
-
const context = React.useContext(ToggleGroupContext)
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<ToggleGroupPrimitive.Item
|
|
53
|
-
data-slot="toggle-group-item"
|
|
54
|
-
data-variant={context.variant || variant}
|
|
55
|
-
data-size={context.size || size}
|
|
56
|
-
className={cn(
|
|
57
|
-
toggleVariants({
|
|
58
|
-
variant: context.variant || variant,
|
|
59
|
-
size: context.size || size,
|
|
60
|
-
}),
|
|
61
|
-
'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
|
|
62
|
-
className,
|
|
63
|
-
)}
|
|
64
|
-
{...props}
|
|
65
|
-
>
|
|
66
|
-
{children}
|
|
67
|
-
</ToggleGroupPrimitive.Item>
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
export { ToggleGroup, ToggleGroupItem }
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
'use client'
|
|
2
|
-
|
|
3
|
-
import * as React from 'react'
|
|
4
|
-
import * as TogglePrimitive from '@radix-ui/react-toggle'
|
|
5
|
-
import { cva } from 'class-variance-authority'
|
|
6
|
-
|
|
7
|
-
import type { VariantProps } from 'class-variance-authority'
|
|
8
|
-
|
|
9
|
-
import { cn } from '@/lib/utils'
|
|
10
|
-
|
|
11
|
-
const toggleVariants = cva(
|
|
12
|
-
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
|
13
|
-
{
|
|
14
|
-
variants: {
|
|
15
|
-
variant: {
|
|
16
|
-
default: 'bg-transparent',
|
|
17
|
-
outline:
|
|
18
|
-
'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
|
|
19
|
-
},
|
|
20
|
-
size: {
|
|
21
|
-
default: 'h-9 px-2 min-w-9',
|
|
22
|
-
sm: 'h-8 px-1.5 min-w-8',
|
|
23
|
-
lg: 'h-10 px-2.5 min-w-10',
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
defaultVariants: {
|
|
27
|
-
variant: 'default',
|
|
28
|
-
size: 'default',
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
)
|
|
32
|
-
|
|
33
|
-
function Toggle({
|
|
34
|
-
className,
|
|
35
|
-
variant,
|
|
36
|
-
size,
|
|
37
|
-
...props
|
|
38
|
-
}: React.ComponentProps<typeof TogglePrimitive.Root> &
|
|
39
|
-
VariantProps<typeof toggleVariants>) {
|
|
40
|
-
return (
|
|
41
|
-
<TogglePrimitive.Root
|
|
42
|
-
data-slot="toggle"
|
|
43
|
-
className={cn(toggleVariants({ variant, size, className }))}
|
|
44
|
-
{...props}
|
|
45
|
-
/>
|
|
46
|
-
)
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export { Toggle, toggleVariants }
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
|
5
|
-
|
|
6
|
-
import { cn } from "@/lib/utils"
|
|
7
|
-
|
|
8
|
-
function TooltipProvider({
|
|
9
|
-
delayDuration = 0,
|
|
10
|
-
...props
|
|
11
|
-
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
|
|
12
|
-
return (
|
|
13
|
-
<TooltipPrimitive.Provider
|
|
14
|
-
data-slot="tooltip-provider"
|
|
15
|
-
delayDuration={delayDuration}
|
|
16
|
-
{...props}
|
|
17
|
-
/>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function Tooltip({
|
|
22
|
-
...props
|
|
23
|
-
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
|
|
24
|
-
return (
|
|
25
|
-
<TooltipProvider>
|
|
26
|
-
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
|
27
|
-
</TooltipProvider>
|
|
28
|
-
)
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function TooltipTrigger({
|
|
32
|
-
...props
|
|
33
|
-
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
|
|
34
|
-
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function TooltipContent({
|
|
38
|
-
className,
|
|
39
|
-
sideOffset = 0,
|
|
40
|
-
children,
|
|
41
|
-
...props
|
|
42
|
-
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
|
|
43
|
-
return (
|
|
44
|
-
<TooltipPrimitive.Portal>
|
|
45
|
-
<TooltipPrimitive.Content
|
|
46
|
-
data-slot="tooltip-content"
|
|
47
|
-
sideOffset={sideOffset}
|
|
48
|
-
className={cn(
|
|
49
|
-
"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
|
|
50
|
-
className
|
|
51
|
-
)}
|
|
52
|
-
{...props}
|
|
53
|
-
>
|
|
54
|
-
{children}
|
|
55
|
-
<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
|
|
56
|
-
</TooltipPrimitive.Content>
|
|
57
|
-
</TooltipPrimitive.Portal>
|
|
58
|
-
)
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|