@townco/ui 0.1.16 → 0.1.17
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.
|
@@ -1,98 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
2
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
2
3
|
import { X } from "lucide-react";
|
|
3
4
|
import * as React from "react";
|
|
4
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { cn } from "../lib/utils.js";
|
|
6
|
-
|
|
7
6
|
const Dialog = DialogPrimitive.Root;
|
|
8
7
|
const DialogTrigger = DialogPrimitive.Trigger;
|
|
9
8
|
const DialogPortal = DialogPrimitive.Portal;
|
|
10
9
|
const DialogClose = DialogPrimitive.Close;
|
|
11
|
-
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) =>
|
|
12
|
-
_jsx(DialogPrimitive.Overlay, {
|
|
13
|
-
ref: ref,
|
|
14
|
-
className: cn(
|
|
15
|
-
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
16
|
-
className,
|
|
17
|
-
),
|
|
18
|
-
...props,
|
|
19
|
-
}),
|
|
20
|
-
);
|
|
10
|
+
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
|
|
21
11
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
|
22
|
-
const DialogContent = React.forwardRef(
|
|
23
|
-
({ className, children, ...props }, ref) =>
|
|
24
|
-
_jsxs(DialogPortal, {
|
|
25
|
-
children: [
|
|
26
|
-
_jsx(DialogOverlay, {}),
|
|
27
|
-
_jsxs(DialogPrimitive.Content, {
|
|
28
|
-
ref: ref,
|
|
29
|
-
className: cn(
|
|
30
|
-
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
|
31
|
-
className,
|
|
32
|
-
),
|
|
33
|
-
...props,
|
|
34
|
-
children: [
|
|
35
|
-
children,
|
|
36
|
-
_jsxs(DialogPrimitive.Close, {
|
|
37
|
-
className:
|
|
38
|
-
"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
|
|
39
|
-
children: [
|
|
40
|
-
_jsx(X, { className: "h-4 w-4" }),
|
|
41
|
-
_jsx("span", { className: "sr-only", children: "Close" }),
|
|
42
|
-
],
|
|
43
|
-
}),
|
|
44
|
-
],
|
|
45
|
-
}),
|
|
46
|
-
],
|
|
47
|
-
}),
|
|
48
|
-
);
|
|
12
|
+
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(X, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
|
|
49
13
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
|
50
|
-
const DialogHeader = ({ className, ...props }) =>
|
|
51
|
-
_jsx("div", {
|
|
52
|
-
className: cn(
|
|
53
|
-
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
54
|
-
className,
|
|
55
|
-
),
|
|
56
|
-
...props,
|
|
57
|
-
});
|
|
14
|
+
const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
|
|
58
15
|
DialogHeader.displayName = "DialogHeader";
|
|
59
|
-
const DialogFooter = ({ className, ...props }) =>
|
|
60
|
-
_jsx("div", {
|
|
61
|
-
className: cn(
|
|
62
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
63
|
-
className,
|
|
64
|
-
),
|
|
65
|
-
...props,
|
|
66
|
-
});
|
|
16
|
+
const DialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
|
|
67
17
|
DialogFooter.displayName = "DialogFooter";
|
|
68
|
-
const DialogTitle = React.forwardRef(({ className, ...props }, ref) =>
|
|
69
|
-
_jsx(DialogPrimitive.Title, {
|
|
70
|
-
ref: ref,
|
|
71
|
-
className: cn(
|
|
72
|
-
"text-lg font-semibold leading-none tracking-tight",
|
|
73
|
-
className,
|
|
74
|
-
),
|
|
75
|
-
...props,
|
|
76
|
-
}),
|
|
77
|
-
);
|
|
18
|
+
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props })));
|
|
78
19
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
|
79
|
-
const DialogDescription = React.forwardRef(({ className, ...props }, ref) =>
|
|
80
|
-
_jsx(DialogPrimitive.Description, {
|
|
81
|
-
ref: ref,
|
|
82
|
-
className: cn("text-sm text-muted-foreground", className),
|
|
83
|
-
...props,
|
|
84
|
-
}),
|
|
85
|
-
);
|
|
20
|
+
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
|
|
86
21
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
|
87
|
-
export {
|
|
88
|
-
Dialog,
|
|
89
|
-
DialogPortal,
|
|
90
|
-
DialogOverlay,
|
|
91
|
-
DialogClose,
|
|
92
|
-
DialogTrigger,
|
|
93
|
-
DialogContent,
|
|
94
|
-
DialogHeader,
|
|
95
|
-
DialogFooter,
|
|
96
|
-
DialogTitle,
|
|
97
|
-
DialogDescription,
|
|
98
|
-
};
|
|
22
|
+
export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
|
|
@@ -1,17 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
2
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
2
3
|
import * as React from "react";
|
|
3
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
|
|
6
|
-
const Label = React.forwardRef(({ className, ...props }, ref) =>
|
|
7
|
-
_jsx(LabelPrimitive.Root, {
|
|
8
|
-
ref: ref,
|
|
9
|
-
className: cn(
|
|
10
|
-
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
|
11
|
-
className,
|
|
12
|
-
),
|
|
13
|
-
...props,
|
|
14
|
-
}),
|
|
15
|
-
);
|
|
5
|
+
const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className), ...props })));
|
|
16
6
|
Label.displayName = LabelPrimitive.Root.displayName;
|
|
17
7
|
export { Label };
|
|
@@ -1,132 +1,26 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
2
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
2
3
|
import { Check, ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
|
|
3
4
|
import * as React from "react";
|
|
4
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
5
|
import { cn } from "../lib/utils.js";
|
|
6
|
-
|
|
7
6
|
const Select = SelectPrimitive.Root;
|
|
8
7
|
const SelectGroup = SelectPrimitive.Group;
|
|
9
8
|
const SelectValue = SelectPrimitive.Value;
|
|
10
|
-
const SelectTrigger = React.forwardRef(
|
|
11
|
-
({ className, children, ...props }, ref) =>
|
|
12
|
-
_jsxs(SelectPrimitive.Trigger, {
|
|
13
|
-
ref: ref,
|
|
14
|
-
className: cn(
|
|
15
|
-
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
|
16
|
-
className,
|
|
17
|
-
),
|
|
18
|
-
...props,
|
|
19
|
-
children: [
|
|
20
|
-
children,
|
|
21
|
-
_jsx(SelectPrimitive.Icon, {
|
|
22
|
-
asChild: true,
|
|
23
|
-
children: _jsx(ChevronsUpDown, { className: "h-4 w-4 opacity-50" }),
|
|
24
|
-
}),
|
|
25
|
-
],
|
|
26
|
-
}),
|
|
27
|
-
);
|
|
9
|
+
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronsUpDown, { className: "h-4 w-4 opacity-50" }) })] })));
|
|
28
10
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
29
|
-
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
|
|
30
|
-
_jsx(SelectPrimitive.ScrollUpButton, {
|
|
31
|
-
ref: ref,
|
|
32
|
-
className: cn(
|
|
33
|
-
"flex cursor-default items-center justify-center py-1",
|
|
34
|
-
className,
|
|
35
|
-
),
|
|
36
|
-
...props,
|
|
37
|
-
children: _jsx(ChevronUp, { className: "h-4 w-4" }),
|
|
38
|
-
}),
|
|
39
|
-
);
|
|
11
|
+
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
|
|
40
12
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
41
|
-
const SelectScrollDownButton = React.forwardRef(
|
|
42
|
-
({ className, ...props }, ref) =>
|
|
43
|
-
_jsx(SelectPrimitive.ScrollDownButton, {
|
|
44
|
-
ref: ref,
|
|
45
|
-
className: cn(
|
|
46
|
-
"flex cursor-default items-center justify-center py-1",
|
|
47
|
-
className,
|
|
48
|
-
),
|
|
49
|
-
...props,
|
|
50
|
-
children: _jsx(ChevronDown, { className: "h-4 w-4" }),
|
|
51
|
-
}),
|
|
52
|
-
);
|
|
13
|
+
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
|
|
53
14
|
SelectScrollDownButton.displayName =
|
|
54
|
-
|
|
55
|
-
const SelectContent = React.forwardRef(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
children: _jsxs(SelectPrimitive.Content, {
|
|
59
|
-
ref: ref,
|
|
60
|
-
className: cn(
|
|
61
|
-
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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",
|
|
62
|
-
position === "popper" &&
|
|
63
|
-
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
|
64
|
-
className,
|
|
65
|
-
),
|
|
66
|
-
position: position,
|
|
67
|
-
...props,
|
|
68
|
-
children: [
|
|
69
|
-
_jsx(SelectScrollUpButton, {}),
|
|
70
|
-
_jsx(SelectPrimitive.Viewport, {
|
|
71
|
-
className: cn(
|
|
72
|
-
"p-1",
|
|
73
|
-
position === "popper" &&
|
|
74
|
-
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
|
|
75
|
-
),
|
|
76
|
-
children: children,
|
|
77
|
-
}),
|
|
78
|
-
_jsx(SelectScrollDownButton, {}),
|
|
79
|
-
],
|
|
80
|
-
}),
|
|
81
|
-
}),
|
|
82
|
-
);
|
|
15
|
+
SelectPrimitive.ScrollDownButton.displayName;
|
|
16
|
+
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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", position === "popper" &&
|
|
17
|
+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
|
|
18
|
+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
|
|
83
19
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
84
|
-
const SelectLabel = React.forwardRef(({ className, ...props }, ref) =>
|
|
85
|
-
_jsx(SelectPrimitive.Label, {
|
|
86
|
-
ref: ref,
|
|
87
|
-
className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
|
|
88
|
-
...props,
|
|
89
|
-
}),
|
|
90
|
-
);
|
|
20
|
+
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className), ...props })));
|
|
91
21
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
92
|
-
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
|
|
93
|
-
_jsxs(SelectPrimitive.Item, {
|
|
94
|
-
ref: ref,
|
|
95
|
-
className: cn(
|
|
96
|
-
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
97
|
-
className,
|
|
98
|
-
),
|
|
99
|
-
...props,
|
|
100
|
-
children: [
|
|
101
|
-
_jsx("span", {
|
|
102
|
-
className:
|
|
103
|
-
"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
|
|
104
|
-
children: _jsx(SelectPrimitive.ItemIndicator, {
|
|
105
|
-
children: _jsx(Check, { className: "h-4 w-4" }),
|
|
106
|
-
}),
|
|
107
|
-
}),
|
|
108
|
-
_jsx(SelectPrimitive.ItemText, { children: children }),
|
|
109
|
-
],
|
|
110
|
-
}),
|
|
111
|
-
);
|
|
22
|
+
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
|
|
112
23
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
113
|
-
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) =>
|
|
114
|
-
_jsx(SelectPrimitive.Separator, {
|
|
115
|
-
ref: ref,
|
|
116
|
-
className: cn("-mx-1 my-1 h-px bg-muted", className),
|
|
117
|
-
...props,
|
|
118
|
-
}),
|
|
119
|
-
);
|
|
24
|
+
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
|
|
120
25
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
121
|
-
export {
|
|
122
|
-
Select,
|
|
123
|
-
SelectGroup,
|
|
124
|
-
SelectValue,
|
|
125
|
-
SelectTrigger,
|
|
126
|
-
SelectContent,
|
|
127
|
-
SelectLabel,
|
|
128
|
-
SelectItem,
|
|
129
|
-
SelectSeparator,
|
|
130
|
-
SelectScrollUpButton,
|
|
131
|
-
SelectScrollDownButton,
|
|
132
|
-
};
|
|
26
|
+
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
|
|
@@ -1,40 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
2
|
import * as TabsPrimitive from "@radix-ui/react-tabs";
|
|
2
3
|
import * as React from "react";
|
|
3
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
4
|
import { cn } from "../lib/utils.js";
|
|
5
|
-
|
|
6
5
|
const Tabs = TabsPrimitive.Root;
|
|
7
|
-
const TabsList = React.forwardRef(({ className, ...props }, ref) =>
|
|
8
|
-
_jsx(TabsPrimitive.List, {
|
|
9
|
-
ref: ref,
|
|
10
|
-
className: cn(
|
|
11
|
-
"inline-flex h-10 items-center rounded-md bg-muted p-1 text-muted-foreground gap-1",
|
|
12
|
-
className,
|
|
13
|
-
),
|
|
14
|
-
...props,
|
|
15
|
-
}),
|
|
16
|
-
);
|
|
6
|
+
const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn("inline-flex h-10 items-center rounded-md bg-muted p-1 text-muted-foreground gap-1", className), ...props })));
|
|
17
7
|
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
18
|
-
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) =>
|
|
19
|
-
_jsx(TabsPrimitive.Trigger, {
|
|
20
|
-
ref: ref,
|
|
21
|
-
className: cn(
|
|
22
|
-
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
|
|
23
|
-
className,
|
|
24
|
-
),
|
|
25
|
-
...props,
|
|
26
|
-
}),
|
|
27
|
-
);
|
|
8
|
+
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", className), ...props })));
|
|
28
9
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
|
|
29
|
-
const TabsContent = React.forwardRef(({ className, ...props }, ref) =>
|
|
30
|
-
_jsx(TabsPrimitive.Content, {
|
|
31
|
-
ref: ref,
|
|
32
|
-
className: cn(
|
|
33
|
-
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
34
|
-
className,
|
|
35
|
-
),
|
|
36
|
-
...props,
|
|
37
|
-
}),
|
|
38
|
-
);
|
|
10
|
+
const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className), ...props })));
|
|
39
11
|
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
40
12
|
export { Tabs, TabsList, TabsTrigger, TabsContent };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import JsonView from "@uiw/react-json-view";
|
|
2
3
|
import { Wrench } from "lucide-react";
|
|
3
4
|
import { useState } from "react";
|
|
4
|
-
import ReactJson from "react-json-view";
|
|
5
5
|
/**
|
|
6
6
|
* Tool call status badge styles
|
|
7
7
|
*/
|
|
@@ -33,7 +33,7 @@ export function ToolCall({ toolCall }) {
|
|
|
33
33
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
34
34
|
return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", className: "flex items-center gap-1.5 cursor-pointer bg-transparent border-none p-0 text-left group w-fit", onClick: () => setIsExpanded(!isExpanded), "aria-expanded": isExpanded, children: [_jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded ${statusStyles[toolCall.status]}`, children: [_jsx(Wrench, { className: "h-3 w-3" }), _jsx("span", { children: toolCall.title }), toolCall.status === "completed" && _jsx("span", { children: "\u2713" })] }), _jsx("span", { className: "text-gray-400 text-xs opacity-0 group-hover:opacity-100 transition-opacity", children: isExpanded ? "▲" : "▼" })] }), isExpanded && (_jsxs("div", { className: "mt-2 space-y-3 text-sm border border-gray-200 rounded-md p-3 bg-white shadow-sm max-w-full", children: [toolCall.locations && toolCall.locations.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Files" }), _jsx("ul", { className: "space-y-1", children: toolCall.locations.map((loc) => (_jsxs("li", { className: "font-mono text-xs text-gray-700 bg-gray-50 px-2 py-1 rounded", children: [loc.path, loc.line !== null &&
|
|
35
35
|
loc.line !== undefined &&
|
|
36
|
-
`:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Input" }), _jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(
|
|
36
|
+
`:${loc.line}`] }, `${loc.path}:${loc.line ?? ""}`))) })] })), toolCall.rawInput && Object.keys(toolCall.rawInput).length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Input" }), _jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(JsonView, { value: toolCall.rawInput, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: { fontSize: "11px", backgroundColor: "transparent" } }) })] })), toolCall.content && toolCall.content.length > 0 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-1.5", children: "Output" }), _jsx("div", { className: "space-y-2", children: toolCall.content.map((block, idx) => {
|
|
37
37
|
// Generate a stable key based on content
|
|
38
38
|
const getBlockKey = () => {
|
|
39
39
|
if (block.type === "diff" && "path" in block) {
|
|
@@ -56,12 +56,12 @@ export function ToolCall({ toolCall }) {
|
|
|
56
56
|
// Try to parse as JSON
|
|
57
57
|
try {
|
|
58
58
|
const parsed = JSON.parse(text);
|
|
59
|
-
// If it's an object or array, render with
|
|
59
|
+
// If it's an object or array, render with JsonView
|
|
60
60
|
if (typeof parsed === "object" && parsed !== null) {
|
|
61
|
-
return (_jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(
|
|
61
|
+
return (_jsx("div", { className: "bg-gray-50 p-2 rounded border border-gray-200", children: _jsx(JsonView, { value: parsed, collapsed: false, displayDataTypes: false, displayObjectSize: false, enableClipboard: true, style: {
|
|
62
62
|
fontSize: "11px",
|
|
63
63
|
backgroundColor: "transparent",
|
|
64
|
-
}
|
|
64
|
+
} }) }, key));
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
catch {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@townco/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.17",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"@radix-ui/react-select": "^2.2.6",
|
|
47
47
|
"@radix-ui/react-slot": "^1.2.4",
|
|
48
48
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
49
|
+
"@uiw/react-json-view": "^2.0.0-alpha.39",
|
|
49
50
|
"bun": "^1.3.1",
|
|
50
51
|
"class-variance-authority": "^0.7.1",
|
|
51
52
|
"clsx": "^2.1.1",
|
|
52
53
|
"lucide-react": "^0.552.0",
|
|
53
|
-
"react-json-view": "^1.21.3",
|
|
54
54
|
"react-markdown": "^10.1.0",
|
|
55
55
|
"react-resizable-panels": "^3.0.6",
|
|
56
56
|
"remark-gfm": "^4.0.1",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"@tailwindcss/postcss": "^4.1.17",
|
|
64
|
-
"@townco/tsconfig": "0.1.
|
|
64
|
+
"@townco/tsconfig": "0.1.14",
|
|
65
65
|
"@types/node": "^24.10.0",
|
|
66
66
|
"@types/react": "^19.2.2",
|
|
67
67
|
"ink": "^6.4.0",
|