ucode-agent 1.5.0 → 1.6.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/README.md +53 -1
- package/package.json +3 -1
- package/skills/ui-ux/SKILL.md +2 -2
- package/src/core/doctor.js +122 -0
- package/src/core/loop.js +301 -12
- package/src/core/provider.js +93 -10
- package/src/core/stuck.js +269 -0
- package/src/tools/browser.js +121 -59
- package/src/tools/deploy.js +283 -0
- package/src/tools/files.js +91 -8
- package/src/tools/index.js +44 -10
- package/src/tools/scaffold.js +61 -1
- package/src/tools/shell.js +89 -1
- package/src/ui/activity.js +203 -0
- package/src/ui/plain.js +22 -3
- package/src/ui/screen.js +65 -19
- package/templates/next-shadcn/TEMPLATE.md +53 -9
- package/templates/next-shadcn/_package-lock.json +1335 -148
- package/templates/next-shadcn/components.json +1 -1
- package/templates/next-shadcn/next.config.ts +2 -1
- package/templates/next-shadcn/package.json +4 -2
- package/templates/next-shadcn/presets/citrus.json +77 -0
- package/templates/next-shadcn/presets/graphite.json +77 -0
- package/templates/next-shadcn/presets/grove.json +77 -0
- package/templates/next-shadcn/presets/ocean.json +78 -0
- package/templates/next-shadcn/presets/sunset.json +77 -0
- package/templates/next-shadcn/presets/violet.json +77 -0
- package/templates/next-shadcn/src/components/ui/accordion.tsx +80 -0
- package/templates/next-shadcn/src/components/ui/alert-dialog.tsx +34 -22
- package/templates/next-shadcn/src/components/ui/avatar.tsx +7 -4
- package/templates/next-shadcn/src/components/ui/badge.tsx +15 -18
- package/templates/next-shadcn/src/components/ui/button.tsx +12 -3
- package/templates/next-shadcn/src/components/ui/calendar.tsx +1 -0
- package/templates/next-shadcn/src/components/ui/checkbox.tsx +6 -2
- package/templates/next-shadcn/src/components/ui/collapsible.tsx +33 -0
- package/templates/next-shadcn/src/components/ui/command.tsx +1 -2
- package/templates/next-shadcn/src/components/ui/dialog.tsx +34 -26
- package/templates/next-shadcn/src/components/ui/dropdown-menu.tsx +115 -114
- package/templates/next-shadcn/src/components/ui/hover-card.tsx +43 -0
- package/templates/next-shadcn/src/components/ui/input-group.tsx +2 -4
- package/templates/next-shadcn/src/components/ui/input.tsx +1 -2
- package/templates/next-shadcn/src/components/ui/label.tsx +6 -2
- package/templates/next-shadcn/src/components/ui/popover.tsx +27 -28
- package/templates/next-shadcn/src/components/ui/progress.tsx +11 -63
- package/templates/next-shadcn/src/components/ui/radio-group.tsx +43 -0
- package/templates/next-shadcn/src/components/ui/scroll-area.tsx +6 -6
- package/templates/next-shadcn/src/components/ui/select.tsx +55 -64
- package/templates/next-shadcn/src/components/ui/separator.tsx +6 -3
- package/templates/next-shadcn/src/components/ui/sheet.tsx +35 -26
- package/templates/next-shadcn/src/components/ui/slider.tsx +58 -0
- package/templates/next-shadcn/src/components/ui/switch.tsx +3 -2
- package/templates/next-shadcn/src/components/ui/table.tsx +115 -0
- package/templates/next-shadcn/src/components/ui/tabs.tsx +16 -8
- package/templates/next-shadcn/src/components/ui/toggle-group.tsx +89 -0
- package/templates/next-shadcn/src/components/ui/toggle.tsx +46 -0
- package/templates/next-shadcn/src/components/ui/tooltip.tsx +24 -33
- package/templates/next-shadcn/src/lib/utils.ts +6 -1
- package/ucode.js +8 -1
|
@@ -1,74 +1,59 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
3
|
import * as React from "react"
|
|
4
|
-
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
|
5
4
|
import { cn } from "cn"
|
|
6
|
-
import {
|
|
5
|
+
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
|
|
6
|
+
import { CheckIcon, ChevronRightIcon } from "lucide-react"
|
|
7
7
|
|
|
8
|
-
function DropdownMenu({
|
|
9
|
-
|
|
8
|
+
function DropdownMenu({
|
|
9
|
+
...props
|
|
10
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
|
11
|
+
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
|
10
12
|
}
|
|
11
13
|
|
|
12
|
-
function DropdownMenuPortal({
|
|
13
|
-
|
|
14
|
+
function DropdownMenuPortal({
|
|
15
|
+
...props
|
|
16
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
|
17
|
+
return (
|
|
18
|
+
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
|
19
|
+
)
|
|
14
20
|
}
|
|
15
21
|
|
|
16
|
-
function DropdownMenuTrigger({
|
|
17
|
-
|
|
22
|
+
function DropdownMenuTrigger({
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
|
25
|
+
return (
|
|
26
|
+
<DropdownMenuPrimitive.Trigger
|
|
27
|
+
data-slot="dropdown-menu-trigger"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
)
|
|
18
31
|
}
|
|
19
32
|
|
|
20
33
|
function DropdownMenuContent({
|
|
34
|
+
className,
|
|
21
35
|
align = "start",
|
|
22
|
-
alignOffset = 0,
|
|
23
|
-
side = "bottom",
|
|
24
36
|
sideOffset = 4,
|
|
25
|
-
className,
|
|
26
37
|
...props
|
|
27
|
-
}:
|
|
28
|
-
Pick<
|
|
29
|
-
MenuPrimitive.Positioner.Props,
|
|
30
|
-
"align" | "alignOffset" | "side" | "sideOffset"
|
|
31
|
-
>) {
|
|
38
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
|
32
39
|
return (
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
align={align}
|
|
37
|
-
alignOffset={alignOffset}
|
|
38
|
-
side={side}
|
|
40
|
+
<DropdownMenuPrimitive.Portal>
|
|
41
|
+
<DropdownMenuPrimitive.Content
|
|
42
|
+
data-slot="dropdown-menu-content"
|
|
39
43
|
sideOffset={sideOffset}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
/>
|
|
46
|
-
</MenuPrimitive.Positioner>
|
|
47
|
-
</MenuPrimitive.Portal>
|
|
44
|
+
align={align}
|
|
45
|
+
className={cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 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 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
</DropdownMenuPrimitive.Portal>
|
|
48
49
|
)
|
|
49
50
|
}
|
|
50
51
|
|
|
51
|
-
function DropdownMenuGroup({
|
|
52
|
-
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function DropdownMenuLabel({
|
|
56
|
-
className,
|
|
57
|
-
inset,
|
|
52
|
+
function DropdownMenuGroup({
|
|
58
53
|
...props
|
|
59
|
-
}:
|
|
60
|
-
inset?: boolean
|
|
61
|
-
}) {
|
|
54
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
|
62
55
|
return (
|
|
63
|
-
<
|
|
64
|
-
data-slot="dropdown-menu-label"
|
|
65
|
-
data-inset={inset}
|
|
66
|
-
className={cn(
|
|
67
|
-
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
|
68
|
-
className
|
|
69
|
-
)}
|
|
70
|
-
{...props}
|
|
71
|
-
/>
|
|
56
|
+
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
|
72
57
|
)
|
|
73
58
|
}
|
|
74
59
|
|
|
@@ -77,12 +62,12 @@ function DropdownMenuItem({
|
|
|
77
62
|
inset,
|
|
78
63
|
variant = "default",
|
|
79
64
|
...props
|
|
80
|
-
}:
|
|
65
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
|
81
66
|
inset?: boolean
|
|
82
67
|
variant?: "default" | "destructive"
|
|
83
68
|
}) {
|
|
84
69
|
return (
|
|
85
|
-
<
|
|
70
|
+
<DropdownMenuPrimitive.Item
|
|
86
71
|
data-slot="dropdown-menu-item"
|
|
87
72
|
data-inset={inset}
|
|
88
73
|
data-variant={variant}
|
|
@@ -95,66 +80,17 @@ function DropdownMenuItem({
|
|
|
95
80
|
)
|
|
96
81
|
}
|
|
97
82
|
|
|
98
|
-
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
|
99
|
-
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function DropdownMenuSubTrigger({
|
|
103
|
-
className,
|
|
104
|
-
inset,
|
|
105
|
-
children,
|
|
106
|
-
...props
|
|
107
|
-
}: MenuPrimitive.SubmenuTrigger.Props & {
|
|
108
|
-
inset?: boolean
|
|
109
|
-
}) {
|
|
110
|
-
return (
|
|
111
|
-
<MenuPrimitive.SubmenuTrigger
|
|
112
|
-
data-slot="dropdown-menu-sub-trigger"
|
|
113
|
-
data-inset={inset}
|
|
114
|
-
className={cn(
|
|
115
|
-
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
116
|
-
className
|
|
117
|
-
)}
|
|
118
|
-
{...props}
|
|
119
|
-
>
|
|
120
|
-
{children}
|
|
121
|
-
<ChevronRightIcon className="ml-auto" />
|
|
122
|
-
</MenuPrimitive.SubmenuTrigger>
|
|
123
|
-
)
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function DropdownMenuSubContent({
|
|
127
|
-
align = "start",
|
|
128
|
-
alignOffset = -3,
|
|
129
|
-
side = "right",
|
|
130
|
-
sideOffset = 0,
|
|
131
|
-
className,
|
|
132
|
-
...props
|
|
133
|
-
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
|
134
|
-
return (
|
|
135
|
-
<DropdownMenuContent
|
|
136
|
-
data-slot="dropdown-menu-sub-content"
|
|
137
|
-
className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
|
138
|
-
align={align}
|
|
139
|
-
alignOffset={alignOffset}
|
|
140
|
-
side={side}
|
|
141
|
-
sideOffset={sideOffset}
|
|
142
|
-
{...props}
|
|
143
|
-
/>
|
|
144
|
-
)
|
|
145
|
-
}
|
|
146
|
-
|
|
147
83
|
function DropdownMenuCheckboxItem({
|
|
148
84
|
className,
|
|
149
85
|
children,
|
|
150
86
|
checked,
|
|
151
87
|
inset,
|
|
152
88
|
...props
|
|
153
|
-
}:
|
|
89
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
|
|
154
90
|
inset?: boolean
|
|
155
91
|
}) {
|
|
156
92
|
return (
|
|
157
|
-
<
|
|
93
|
+
<DropdownMenuPrimitive.CheckboxItem
|
|
158
94
|
data-slot="dropdown-menu-checkbox-item"
|
|
159
95
|
data-inset={inset}
|
|
160
96
|
className={cn(
|
|
@@ -168,19 +104,21 @@ function DropdownMenuCheckboxItem({
|
|
|
168
104
|
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
|
169
105
|
data-slot="dropdown-menu-checkbox-item-indicator"
|
|
170
106
|
>
|
|
171
|
-
<
|
|
107
|
+
<DropdownMenuPrimitive.ItemIndicator>
|
|
172
108
|
<CheckIcon
|
|
173
109
|
/>
|
|
174
|
-
</
|
|
110
|
+
</DropdownMenuPrimitive.ItemIndicator>
|
|
175
111
|
</span>
|
|
176
112
|
{children}
|
|
177
|
-
</
|
|
113
|
+
</DropdownMenuPrimitive.CheckboxItem>
|
|
178
114
|
)
|
|
179
115
|
}
|
|
180
116
|
|
|
181
|
-
function DropdownMenuRadioGroup({
|
|
117
|
+
function DropdownMenuRadioGroup({
|
|
118
|
+
...props
|
|
119
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
|
182
120
|
return (
|
|
183
|
-
<
|
|
121
|
+
<DropdownMenuPrimitive.RadioGroup
|
|
184
122
|
data-slot="dropdown-menu-radio-group"
|
|
185
123
|
{...props}
|
|
186
124
|
/>
|
|
@@ -192,11 +130,11 @@ function DropdownMenuRadioItem({
|
|
|
192
130
|
children,
|
|
193
131
|
inset,
|
|
194
132
|
...props
|
|
195
|
-
}:
|
|
133
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
|
|
196
134
|
inset?: boolean
|
|
197
135
|
}) {
|
|
198
136
|
return (
|
|
199
|
-
<
|
|
137
|
+
<DropdownMenuPrimitive.RadioItem
|
|
200
138
|
data-slot="dropdown-menu-radio-item"
|
|
201
139
|
data-inset={inset}
|
|
202
140
|
className={cn(
|
|
@@ -209,22 +147,42 @@ function DropdownMenuRadioItem({
|
|
|
209
147
|
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
|
210
148
|
data-slot="dropdown-menu-radio-item-indicator"
|
|
211
149
|
>
|
|
212
|
-
<
|
|
150
|
+
<DropdownMenuPrimitive.ItemIndicator>
|
|
213
151
|
<CheckIcon
|
|
214
152
|
/>
|
|
215
|
-
</
|
|
153
|
+
</DropdownMenuPrimitive.ItemIndicator>
|
|
216
154
|
</span>
|
|
217
155
|
{children}
|
|
218
|
-
</
|
|
156
|
+
</DropdownMenuPrimitive.RadioItem>
|
|
157
|
+
)
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
function DropdownMenuLabel({
|
|
161
|
+
className,
|
|
162
|
+
inset,
|
|
163
|
+
...props
|
|
164
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
|
165
|
+
inset?: boolean
|
|
166
|
+
}) {
|
|
167
|
+
return (
|
|
168
|
+
<DropdownMenuPrimitive.Label
|
|
169
|
+
data-slot="dropdown-menu-label"
|
|
170
|
+
data-inset={inset}
|
|
171
|
+
className={cn(
|
|
172
|
+
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
|
173
|
+
className
|
|
174
|
+
)}
|
|
175
|
+
{...props}
|
|
176
|
+
/>
|
|
219
177
|
)
|
|
220
178
|
}
|
|
221
179
|
|
|
222
180
|
function DropdownMenuSeparator({
|
|
223
181
|
className,
|
|
224
182
|
...props
|
|
225
|
-
}:
|
|
183
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
|
226
184
|
return (
|
|
227
|
-
<
|
|
185
|
+
<DropdownMenuPrimitive.Separator
|
|
228
186
|
data-slot="dropdown-menu-separator"
|
|
229
187
|
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
|
230
188
|
{...props}
|
|
@@ -248,6 +206,49 @@ function DropdownMenuShortcut({
|
|
|
248
206
|
)
|
|
249
207
|
}
|
|
250
208
|
|
|
209
|
+
function DropdownMenuSub({
|
|
210
|
+
...props
|
|
211
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
|
212
|
+
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
function DropdownMenuSubTrigger({
|
|
216
|
+
className,
|
|
217
|
+
inset,
|
|
218
|
+
children,
|
|
219
|
+
...props
|
|
220
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
221
|
+
inset?: boolean
|
|
222
|
+
}) {
|
|
223
|
+
return (
|
|
224
|
+
<DropdownMenuPrimitive.SubTrigger
|
|
225
|
+
data-slot="dropdown-menu-sub-trigger"
|
|
226
|
+
data-inset={inset}
|
|
227
|
+
className={cn(
|
|
228
|
+
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
229
|
+
className
|
|
230
|
+
)}
|
|
231
|
+
{...props}
|
|
232
|
+
>
|
|
233
|
+
{children}
|
|
234
|
+
<ChevronRightIcon className="ml-auto" />
|
|
235
|
+
</DropdownMenuPrimitive.SubTrigger>
|
|
236
|
+
)
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
function DropdownMenuSubContent({
|
|
240
|
+
className,
|
|
241
|
+
...props
|
|
242
|
+
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
|
243
|
+
return (
|
|
244
|
+
<DropdownMenuPrimitive.SubContent
|
|
245
|
+
data-slot="dropdown-menu-sub-content"
|
|
246
|
+
className={cn("z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
|
247
|
+
{...props}
|
|
248
|
+
/>
|
|
249
|
+
)
|
|
250
|
+
}
|
|
251
|
+
|
|
251
252
|
export {
|
|
252
253
|
DropdownMenu,
|
|
253
254
|
DropdownMenuPortal,
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { cn } from "cn"
|
|
5
|
+
import { HoverCard as HoverCardPrimitive } from "radix-ui"
|
|
6
|
+
|
|
7
|
+
function HoverCard({
|
|
8
|
+
...props
|
|
9
|
+
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
|
|
10
|
+
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function HoverCardTrigger({
|
|
14
|
+
...props
|
|
15
|
+
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
|
|
16
|
+
return (
|
|
17
|
+
<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function HoverCardContent({
|
|
22
|
+
className,
|
|
23
|
+
align = "center",
|
|
24
|
+
sideOffset = 4,
|
|
25
|
+
...props
|
|
26
|
+
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
|
|
27
|
+
return (
|
|
28
|
+
<HoverCardPrimitive.Portal data-slot="hover-card-portal">
|
|
29
|
+
<HoverCardPrimitive.Content
|
|
30
|
+
data-slot="hover-card-content"
|
|
31
|
+
align={align}
|
|
32
|
+
sideOffset={sideOffset}
|
|
33
|
+
className={cn(
|
|
34
|
+
"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
35
|
+
className
|
|
36
|
+
)}
|
|
37
|
+
{...props}
|
|
38
|
+
/>
|
|
39
|
+
</HoverCardPrimitive.Portal>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export { HoverCard, HoverCardTrigger, HoverCardContent }
|
|
@@ -89,10 +89,8 @@ function InputGroupButton({
|
|
|
89
89
|
variant = "ghost",
|
|
90
90
|
size = "xs",
|
|
91
91
|
...props
|
|
92
|
-
}: Omit<React.ComponentProps<typeof Button>, "size"
|
|
93
|
-
VariantProps<typeof inputGroupButtonVariants>
|
|
94
|
-
type?: "button" | "submit" | "reset"
|
|
95
|
-
}) {
|
|
92
|
+
}: Omit<React.ComponentProps<typeof Button>, "size"> &
|
|
93
|
+
VariantProps<typeof inputGroupButtonVariants>) {
|
|
96
94
|
return (
|
|
97
95
|
<Button
|
|
98
96
|
type={type}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import * as React from "react"
|
|
2
|
-
import { Input as InputPrimitive } from "@base-ui/react/input"
|
|
3
2
|
import { cn } from "cn"
|
|
4
3
|
|
|
5
4
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
|
6
5
|
return (
|
|
7
|
-
<
|
|
6
|
+
<input
|
|
8
7
|
type={type}
|
|
9
8
|
data-slot="input"
|
|
10
9
|
className={cn(
|
|
@@ -2,10 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from "react"
|
|
4
4
|
import { cn } from "cn"
|
|
5
|
+
import { Label as LabelPrimitive } from "radix-ui"
|
|
5
6
|
|
|
6
|
-
function Label({
|
|
7
|
+
function Label({
|
|
8
|
+
className,
|
|
9
|
+
...props
|
|
10
|
+
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
|
7
11
|
return (
|
|
8
|
-
<
|
|
12
|
+
<LabelPrimitive.Root
|
|
9
13
|
data-slot="label"
|
|
10
14
|
className={cn(
|
|
11
15
|
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
@@ -1,51 +1,49 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
3
|
import * as React from "react"
|
|
4
|
-
import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
|
|
5
4
|
import { cn } from "cn"
|
|
5
|
+
import { Popover as PopoverPrimitive } from "radix-ui"
|
|
6
6
|
|
|
7
|
-
function Popover({
|
|
7
|
+
function Popover({
|
|
8
|
+
...props
|
|
9
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
|
8
10
|
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
|
9
11
|
}
|
|
10
12
|
|
|
11
|
-
function PopoverTrigger({
|
|
13
|
+
function PopoverTrigger({
|
|
14
|
+
...props
|
|
15
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
|
12
16
|
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
function PopoverContent({
|
|
16
20
|
className,
|
|
17
21
|
align = "center",
|
|
18
|
-
alignOffset = 0,
|
|
19
|
-
side = "bottom",
|
|
20
22
|
sideOffset = 4,
|
|
21
23
|
...props
|
|
22
|
-
}: PopoverPrimitive.
|
|
23
|
-
Pick<
|
|
24
|
-
PopoverPrimitive.Positioner.Props,
|
|
25
|
-
"align" | "alignOffset" | "side" | "sideOffset"
|
|
26
|
-
>) {
|
|
24
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
|
27
25
|
return (
|
|
28
26
|
<PopoverPrimitive.Portal>
|
|
29
|
-
<PopoverPrimitive.
|
|
27
|
+
<PopoverPrimitive.Content
|
|
28
|
+
data-slot="popover-content"
|
|
30
29
|
align={align}
|
|
31
|
-
alignOffset={alignOffset}
|
|
32
|
-
side={side}
|
|
33
30
|
sideOffset={sideOffset}
|
|
34
|
-
className=
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
className
|
|
41
|
-
)}
|
|
42
|
-
{...props}
|
|
43
|
-
/>
|
|
44
|
-
</PopoverPrimitive.Positioner>
|
|
31
|
+
className={cn(
|
|
32
|
+
"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
33
|
+
className
|
|
34
|
+
)}
|
|
35
|
+
{...props}
|
|
36
|
+
/>
|
|
45
37
|
</PopoverPrimitive.Portal>
|
|
46
38
|
)
|
|
47
39
|
}
|
|
48
40
|
|
|
41
|
+
function PopoverAnchor({
|
|
42
|
+
...props
|
|
43
|
+
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
|
44
|
+
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
|
|
45
|
+
}
|
|
46
|
+
|
|
49
47
|
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
50
48
|
return (
|
|
51
49
|
<div
|
|
@@ -56,9 +54,9 @@ function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
56
54
|
)
|
|
57
55
|
}
|
|
58
56
|
|
|
59
|
-
function PopoverTitle({ className, ...props }:
|
|
57
|
+
function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
|
|
60
58
|
return (
|
|
61
|
-
<
|
|
59
|
+
<div
|
|
62
60
|
data-slot="popover-title"
|
|
63
61
|
className={cn("font-medium", className)}
|
|
64
62
|
{...props}
|
|
@@ -69,9 +67,9 @@ function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
|
|
|
69
67
|
function PopoverDescription({
|
|
70
68
|
className,
|
|
71
69
|
...props
|
|
72
|
-
}:
|
|
70
|
+
}: React.ComponentProps<"p">) {
|
|
73
71
|
return (
|
|
74
|
-
<
|
|
72
|
+
<p
|
|
75
73
|
data-slot="popover-description"
|
|
76
74
|
className={cn("text-muted-foreground", className)}
|
|
77
75
|
{...props}
|
|
@@ -81,6 +79,7 @@ function PopoverDescription({
|
|
|
81
79
|
|
|
82
80
|
export {
|
|
83
81
|
Popover,
|
|
82
|
+
PopoverAnchor,
|
|
84
83
|
PopoverContent,
|
|
85
84
|
PopoverDescription,
|
|
86
85
|
PopoverHeader,
|
|
@@ -1,82 +1,30 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import * as React from "react"
|
|
4
4
|
import { cn } from "cn"
|
|
5
|
+
import { Progress as ProgressPrimitive } from "radix-ui"
|
|
5
6
|
|
|
6
7
|
function Progress({
|
|
7
8
|
className,
|
|
8
|
-
children,
|
|
9
9
|
value,
|
|
10
10
|
...props
|
|
11
|
-
}: ProgressPrimitive.Root
|
|
11
|
+
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
|
|
12
12
|
return (
|
|
13
13
|
<ProgressPrimitive.Root
|
|
14
|
-
value={value}
|
|
15
14
|
data-slot="progress"
|
|
16
|
-
className={cn("flex flex-wrap gap-3", className)}
|
|
17
|
-
{...props}
|
|
18
|
-
>
|
|
19
|
-
{children}
|
|
20
|
-
<ProgressTrack>
|
|
21
|
-
<ProgressIndicator />
|
|
22
|
-
</ProgressTrack>
|
|
23
|
-
</ProgressPrimitive.Root>
|
|
24
|
-
)
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
|
|
28
|
-
return (
|
|
29
|
-
<ProgressPrimitive.Track
|
|
30
15
|
className={cn(
|
|
31
16
|
"relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
|
|
32
17
|
className
|
|
33
18
|
)}
|
|
34
|
-
data-slot="progress-track"
|
|
35
|
-
{...props}
|
|
36
|
-
/>
|
|
37
|
-
)
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function ProgressIndicator({
|
|
41
|
-
className,
|
|
42
|
-
...props
|
|
43
|
-
}: ProgressPrimitive.Indicator.Props) {
|
|
44
|
-
return (
|
|
45
|
-
<ProgressPrimitive.Indicator
|
|
46
|
-
data-slot="progress-indicator"
|
|
47
|
-
className={cn("h-full bg-primary transition-all", className)}
|
|
48
|
-
{...props}
|
|
49
|
-
/>
|
|
50
|
-
)
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
|
|
54
|
-
return (
|
|
55
|
-
<ProgressPrimitive.Label
|
|
56
|
-
className={cn("text-sm font-medium", className)}
|
|
57
|
-
data-slot="progress-label"
|
|
58
|
-
{...props}
|
|
59
|
-
/>
|
|
60
|
-
)
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
|
|
64
|
-
return (
|
|
65
|
-
<ProgressPrimitive.Value
|
|
66
|
-
className={cn(
|
|
67
|
-
"ml-auto text-sm text-muted-foreground tabular-nums",
|
|
68
|
-
className
|
|
69
|
-
)}
|
|
70
|
-
data-slot="progress-value"
|
|
71
19
|
{...props}
|
|
72
|
-
|
|
20
|
+
>
|
|
21
|
+
<ProgressPrimitive.Indicator
|
|
22
|
+
data-slot="progress-indicator"
|
|
23
|
+
className="size-full flex-1 bg-primary transition-all"
|
|
24
|
+
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
|
25
|
+
/>
|
|
26
|
+
</ProgressPrimitive.Root>
|
|
73
27
|
)
|
|
74
28
|
}
|
|
75
29
|
|
|
76
|
-
export {
|
|
77
|
-
Progress,
|
|
78
|
-
ProgressTrack,
|
|
79
|
-
ProgressIndicator,
|
|
80
|
-
ProgressLabel,
|
|
81
|
-
ProgressValue,
|
|
82
|
-
}
|
|
30
|
+
export { Progress }
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { cn } from "cn"
|
|
5
|
+
import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
|
|
6
|
+
|
|
7
|
+
function RadioGroup({
|
|
8
|
+
className,
|
|
9
|
+
...props
|
|
10
|
+
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
|
11
|
+
return (
|
|
12
|
+
<RadioGroupPrimitive.Root
|
|
13
|
+
data-slot="radio-group"
|
|
14
|
+
className={cn("grid w-full gap-2", className)}
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function RadioGroupItem({
|
|
21
|
+
className,
|
|
22
|
+
...props
|
|
23
|
+
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
|
24
|
+
return (
|
|
25
|
+
<RadioGroupPrimitive.Item
|
|
26
|
+
data-slot="radio-group-item"
|
|
27
|
+
className={cn(
|
|
28
|
+
"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
|
|
29
|
+
className
|
|
30
|
+
)}
|
|
31
|
+
{...props}
|
|
32
|
+
>
|
|
33
|
+
<RadioGroupPrimitive.Indicator
|
|
34
|
+
data-slot="radio-group-indicator"
|
|
35
|
+
className="flex size-4 items-center justify-center"
|
|
36
|
+
>
|
|
37
|
+
<span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
|
|
38
|
+
</RadioGroupPrimitive.Indicator>
|
|
39
|
+
</RadioGroupPrimitive.Item>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export { RadioGroup, RadioGroupItem }
|