@codrstudio/openclaude-chat 0.1.0 → 0.2.0
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/components/StreamingIndicator.js +5 -5
- package/dist/display/DisplayReactRenderer.js +12 -12
- package/dist/display/react-sandbox/bootstrap.js +150 -150
- package/dist/styles.css +1 -2
- package/package.json +64 -61
- package/src/components/Chat.tsx +107 -107
- package/src/components/ErrorNote.tsx +35 -35
- package/src/components/LazyRender.tsx +42 -42
- package/src/components/Markdown.tsx +114 -114
- package/src/components/MessageBubble.tsx +107 -107
- package/src/components/MessageInput.tsx +421 -421
- package/src/components/MessageList.tsx +153 -153
- package/src/components/StreamingIndicator.tsx +19 -19
- package/src/display/AlertRenderer.tsx +23 -23
- package/src/display/CarouselRenderer.tsx +141 -141
- package/src/display/ChartRenderer.tsx +195 -195
- package/src/display/ChoiceButtonsRenderer.tsx +114 -114
- package/src/display/CodeBlockRenderer.tsx +49 -49
- package/src/display/ComparisonTableRenderer.tsx +132 -132
- package/src/display/DataTableRenderer.tsx +144 -144
- package/src/display/DisplayReactRenderer.tsx +269 -269
- package/src/display/FileCardRenderer.tsx +55 -55
- package/src/display/GalleryRenderer.tsx +65 -65
- package/src/display/ImageViewerRenderer.tsx +114 -114
- package/src/display/LinkPreviewRenderer.tsx +74 -74
- package/src/display/MapViewRenderer.tsx +75 -75
- package/src/display/MetricCardRenderer.tsx +29 -29
- package/src/display/PriceHighlightRenderer.tsx +62 -62
- package/src/display/ProductCardRenderer.tsx +112 -112
- package/src/display/ProgressStepsRenderer.tsx +59 -59
- package/src/display/SourcesListRenderer.tsx +47 -47
- package/src/display/SpreadsheetRenderer.tsx +86 -86
- package/src/display/StepTimelineRenderer.tsx +75 -75
- package/src/display/index.ts +21 -21
- package/src/display/react-sandbox/bootstrap.ts +155 -155
- package/src/display/registry.ts +84 -84
- package/src/display/sdk-types.ts +217 -217
- package/src/hooks/ChatProvider.tsx +21 -21
- package/src/hooks/useIsMobile.ts +15 -15
- package/src/hooks/useOpenClaudeChat.ts +476 -476
- package/src/index.ts +76 -76
- package/src/lib/utils.ts +6 -6
- package/src/parts/PartErrorBoundary.tsx +51 -51
- package/src/parts/PartRenderer.tsx +145 -145
- package/src/parts/ReasoningBlock.tsx +41 -41
- package/src/parts/ToolActivity.tsx +78 -78
- package/src/parts/ToolResult.tsx +79 -79
- package/src/styles.css +2 -2
- package/src/types.ts +41 -41
- package/src/ui/alert.tsx +77 -77
- package/src/ui/badge.tsx +36 -36
- package/src/ui/button.tsx +54 -54
- package/src/ui/card.tsx +68 -68
- package/src/ui/collapsible.tsx +7 -7
- package/src/ui/dialog.tsx +122 -122
- package/src/ui/dropdown-menu.tsx +76 -76
- package/src/ui/input.tsx +24 -24
- package/src/ui/progress.tsx +36 -36
- package/src/ui/scroll-area.tsx +48 -48
- package/src/ui/separator.tsx +31 -31
- package/src/ui/skeleton.tsx +9 -9
- package/src/ui/table.tsx +114 -114
package/src/ui/input.tsx
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils"
|
|
4
|
-
|
|
5
|
-
const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
|
|
6
|
-
({ className, type, ...props }, ref) => (
|
|
7
|
-
<input
|
|
8
|
-
type={type}
|
|
9
|
-
className={cn(
|
|
10
|
-
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
|
|
11
|
-
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
|
|
12
|
-
"placeholder:text-muted-foreground",
|
|
13
|
-
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
|
|
14
|
-
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
15
|
-
className,
|
|
16
|
-
)}
|
|
17
|
-
ref={ref}
|
|
18
|
-
{...props}
|
|
19
|
-
/>
|
|
20
|
-
),
|
|
21
|
-
)
|
|
22
|
-
Input.displayName = "Input"
|
|
23
|
-
|
|
24
|
-
export { Input }
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
|
|
3
|
+
import { cn } from "../lib/utils"
|
|
4
|
+
|
|
5
|
+
const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
|
|
6
|
+
({ className, type, ...props }, ref) => (
|
|
7
|
+
<input
|
|
8
|
+
type={type}
|
|
9
|
+
className={cn(
|
|
10
|
+
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
|
|
11
|
+
"file:border-0 file:bg-transparent file:text-sm file:font-medium",
|
|
12
|
+
"placeholder:text-muted-foreground",
|
|
13
|
+
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
|
|
14
|
+
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
15
|
+
className,
|
|
16
|
+
)}
|
|
17
|
+
ref={ref}
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
),
|
|
21
|
+
)
|
|
22
|
+
Input.displayName = "Input"
|
|
23
|
+
|
|
24
|
+
export { Input }
|
package/src/ui/progress.tsx
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
|
|
4
|
-
interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
-
value?: number;
|
|
6
|
-
max?: number;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
|
|
10
|
-
({ className, value = 0, max = 100, ...props }, ref) => {
|
|
11
|
-
const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<div
|
|
15
|
-
ref={ref}
|
|
16
|
-
role="progressbar"
|
|
17
|
-
aria-valuenow={value}
|
|
18
|
-
aria-valuemin={0}
|
|
19
|
-
aria-valuemax={max}
|
|
20
|
-
className={cn(
|
|
21
|
-
"relative h-2 w-full overflow-hidden rounded-full bg-secondary",
|
|
22
|
-
className
|
|
23
|
-
)}
|
|
24
|
-
{...props}
|
|
25
|
-
>
|
|
26
|
-
<div
|
|
27
|
-
className="h-full bg-primary transition-all"
|
|
28
|
-
style={{ width: `${percentage}%` }}
|
|
29
|
-
/>
|
|
30
|
-
</div>
|
|
31
|
-
);
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
Progress.displayName = "Progress";
|
|
35
|
-
|
|
36
|
-
export { Progress };
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
|
|
4
|
+
interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
value?: number;
|
|
6
|
+
max?: number;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
|
|
10
|
+
({ className, value = 0, max = 100, ...props }, ref) => {
|
|
11
|
+
const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<div
|
|
15
|
+
ref={ref}
|
|
16
|
+
role="progressbar"
|
|
17
|
+
aria-valuenow={value}
|
|
18
|
+
aria-valuemin={0}
|
|
19
|
+
aria-valuemax={max}
|
|
20
|
+
className={cn(
|
|
21
|
+
"relative h-2 w-full overflow-hidden rounded-full bg-secondary",
|
|
22
|
+
className
|
|
23
|
+
)}
|
|
24
|
+
{...props}
|
|
25
|
+
>
|
|
26
|
+
<div
|
|
27
|
+
className="h-full bg-primary transition-all"
|
|
28
|
+
style={{ width: `${percentage}%` }}
|
|
29
|
+
/>
|
|
30
|
+
</div>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
Progress.displayName = "Progress";
|
|
35
|
+
|
|
36
|
+
export { Progress };
|
package/src/ui/scroll-area.tsx
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
|
4
|
-
import * as React from "react"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../lib/utils"
|
|
7
|
-
|
|
8
|
-
const ScrollArea = React.forwardRef<
|
|
9
|
-
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
|
10
|
-
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
|
11
|
-
>(({ className, children, ...props }, ref) => (
|
|
12
|
-
<ScrollAreaPrimitive.Root
|
|
13
|
-
ref={ref}
|
|
14
|
-
className={cn("relative overflow-hidden", className)}
|
|
15
|
-
{...props}
|
|
16
|
-
>
|
|
17
|
-
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
|
18
|
-
{children}
|
|
19
|
-
</ScrollAreaPrimitive.Viewport>
|
|
20
|
-
<ScrollBar />
|
|
21
|
-
<ScrollAreaPrimitive.Corner />
|
|
22
|
-
</ScrollAreaPrimitive.Root>
|
|
23
|
-
))
|
|
24
|
-
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
|
25
|
-
|
|
26
|
-
const ScrollBar = React.forwardRef<
|
|
27
|
-
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
|
28
|
-
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
29
|
-
>(({ className, orientation = "vertical", ...props }, ref) => (
|
|
30
|
-
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
|
31
|
-
ref={ref}
|
|
32
|
-
orientation={orientation}
|
|
33
|
-
className={cn(
|
|
34
|
-
"flex touch-none select-none transition-colors",
|
|
35
|
-
orientation === "vertical" &&
|
|
36
|
-
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
|
37
|
-
orientation === "horizontal" &&
|
|
38
|
-
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
|
39
|
-
className
|
|
40
|
-
)}
|
|
41
|
-
{...props}
|
|
42
|
-
>
|
|
43
|
-
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
|
44
|
-
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
45
|
-
))
|
|
46
|
-
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
|
47
|
-
|
|
48
|
-
export { ScrollArea, ScrollBar }
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
|
4
|
+
import * as React from "react"
|
|
5
|
+
|
|
6
|
+
import { cn } from "../lib/utils"
|
|
7
|
+
|
|
8
|
+
const ScrollArea = React.forwardRef<
|
|
9
|
+
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
|
10
|
+
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
|
11
|
+
>(({ className, children, ...props }, ref) => (
|
|
12
|
+
<ScrollAreaPrimitive.Root
|
|
13
|
+
ref={ref}
|
|
14
|
+
className={cn("relative overflow-hidden", className)}
|
|
15
|
+
{...props}
|
|
16
|
+
>
|
|
17
|
+
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
|
18
|
+
{children}
|
|
19
|
+
</ScrollAreaPrimitive.Viewport>
|
|
20
|
+
<ScrollBar />
|
|
21
|
+
<ScrollAreaPrimitive.Corner />
|
|
22
|
+
</ScrollAreaPrimitive.Root>
|
|
23
|
+
))
|
|
24
|
+
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
|
25
|
+
|
|
26
|
+
const ScrollBar = React.forwardRef<
|
|
27
|
+
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
|
28
|
+
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
29
|
+
>(({ className, orientation = "vertical", ...props }, ref) => (
|
|
30
|
+
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
|
31
|
+
ref={ref}
|
|
32
|
+
orientation={orientation}
|
|
33
|
+
className={cn(
|
|
34
|
+
"flex touch-none select-none transition-colors",
|
|
35
|
+
orientation === "vertical" &&
|
|
36
|
+
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
|
37
|
+
orientation === "horizontal" &&
|
|
38
|
+
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
|
39
|
+
className
|
|
40
|
+
)}
|
|
41
|
+
{...props}
|
|
42
|
+
>
|
|
43
|
+
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
|
44
|
+
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
45
|
+
))
|
|
46
|
+
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
|
47
|
+
|
|
48
|
+
export { ScrollArea, ScrollBar }
|
package/src/ui/separator.tsx
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
|
4
|
-
import * as React from "react"
|
|
5
|
-
|
|
6
|
-
import { cn } from "../lib/utils"
|
|
7
|
-
|
|
8
|
-
const Separator = React.forwardRef<
|
|
9
|
-
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
|
10
|
-
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
|
11
|
-
>(
|
|
12
|
-
(
|
|
13
|
-
{ className, orientation = "horizontal", decorative = true, ...props },
|
|
14
|
-
ref
|
|
15
|
-
) => (
|
|
16
|
-
<SeparatorPrimitive.Root
|
|
17
|
-
ref={ref}
|
|
18
|
-
decorative={decorative}
|
|
19
|
-
orientation={orientation}
|
|
20
|
-
className={cn(
|
|
21
|
-
"shrink-0 bg-border",
|
|
22
|
-
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
23
|
-
className
|
|
24
|
-
)}
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
)
|
|
28
|
-
)
|
|
29
|
-
Separator.displayName = SeparatorPrimitive.Root.displayName
|
|
30
|
-
|
|
31
|
-
export { Separator }
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
|
4
|
+
import * as React from "react"
|
|
5
|
+
|
|
6
|
+
import { cn } from "../lib/utils"
|
|
7
|
+
|
|
8
|
+
const Separator = React.forwardRef<
|
|
9
|
+
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
|
10
|
+
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
|
11
|
+
>(
|
|
12
|
+
(
|
|
13
|
+
{ className, orientation = "horizontal", decorative = true, ...props },
|
|
14
|
+
ref
|
|
15
|
+
) => (
|
|
16
|
+
<SeparatorPrimitive.Root
|
|
17
|
+
ref={ref}
|
|
18
|
+
decorative={decorative}
|
|
19
|
+
orientation={orientation}
|
|
20
|
+
className={cn(
|
|
21
|
+
"shrink-0 bg-border",
|
|
22
|
+
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
23
|
+
className
|
|
24
|
+
)}
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
)
|
|
28
|
+
)
|
|
29
|
+
Separator.displayName = SeparatorPrimitive.Root.displayName
|
|
30
|
+
|
|
31
|
+
export { Separator }
|
package/src/ui/skeleton.tsx
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils"
|
|
4
|
-
|
|
5
|
-
function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
6
|
-
return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export { Skeleton }
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
|
|
3
|
+
import { cn } from "../lib/utils"
|
|
4
|
+
|
|
5
|
+
function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
|
6
|
+
return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export { Skeleton }
|
package/src/ui/table.tsx
CHANGED
|
@@ -1,114 +1,114 @@
|
|
|
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
|
-
"border-t bg-muted/50 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
|
-
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
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
|
-
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
|
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",
|
|
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("mt-4 text-sm text-muted-foreground", 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
|
+
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
|
+
"border-t bg-muted/50 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
|
+
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
|
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
|
+
"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
|
|
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",
|
|
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("mt-4 text-sm text-muted-foreground", 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
|
+
}
|