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.
Files changed (58) hide show
  1. package/README.md +53 -1
  2. package/package.json +3 -1
  3. package/skills/ui-ux/SKILL.md +2 -2
  4. package/src/core/doctor.js +122 -0
  5. package/src/core/loop.js +301 -12
  6. package/src/core/provider.js +93 -10
  7. package/src/core/stuck.js +269 -0
  8. package/src/tools/browser.js +121 -59
  9. package/src/tools/deploy.js +283 -0
  10. package/src/tools/files.js +91 -8
  11. package/src/tools/index.js +44 -10
  12. package/src/tools/scaffold.js +61 -1
  13. package/src/tools/shell.js +89 -1
  14. package/src/ui/activity.js +203 -0
  15. package/src/ui/plain.js +22 -3
  16. package/src/ui/screen.js +65 -19
  17. package/templates/next-shadcn/TEMPLATE.md +53 -9
  18. package/templates/next-shadcn/_package-lock.json +1335 -148
  19. package/templates/next-shadcn/components.json +1 -1
  20. package/templates/next-shadcn/next.config.ts +2 -1
  21. package/templates/next-shadcn/package.json +4 -2
  22. package/templates/next-shadcn/presets/citrus.json +77 -0
  23. package/templates/next-shadcn/presets/graphite.json +77 -0
  24. package/templates/next-shadcn/presets/grove.json +77 -0
  25. package/templates/next-shadcn/presets/ocean.json +78 -0
  26. package/templates/next-shadcn/presets/sunset.json +77 -0
  27. package/templates/next-shadcn/presets/violet.json +77 -0
  28. package/templates/next-shadcn/src/components/ui/accordion.tsx +80 -0
  29. package/templates/next-shadcn/src/components/ui/alert-dialog.tsx +34 -22
  30. package/templates/next-shadcn/src/components/ui/avatar.tsx +7 -4
  31. package/templates/next-shadcn/src/components/ui/badge.tsx +15 -18
  32. package/templates/next-shadcn/src/components/ui/button.tsx +12 -3
  33. package/templates/next-shadcn/src/components/ui/calendar.tsx +1 -0
  34. package/templates/next-shadcn/src/components/ui/checkbox.tsx +6 -2
  35. package/templates/next-shadcn/src/components/ui/collapsible.tsx +33 -0
  36. package/templates/next-shadcn/src/components/ui/command.tsx +1 -2
  37. package/templates/next-shadcn/src/components/ui/dialog.tsx +34 -26
  38. package/templates/next-shadcn/src/components/ui/dropdown-menu.tsx +115 -114
  39. package/templates/next-shadcn/src/components/ui/hover-card.tsx +43 -0
  40. package/templates/next-shadcn/src/components/ui/input-group.tsx +2 -4
  41. package/templates/next-shadcn/src/components/ui/input.tsx +1 -2
  42. package/templates/next-shadcn/src/components/ui/label.tsx +6 -2
  43. package/templates/next-shadcn/src/components/ui/popover.tsx +27 -28
  44. package/templates/next-shadcn/src/components/ui/progress.tsx +11 -63
  45. package/templates/next-shadcn/src/components/ui/radio-group.tsx +43 -0
  46. package/templates/next-shadcn/src/components/ui/scroll-area.tsx +6 -6
  47. package/templates/next-shadcn/src/components/ui/select.tsx +55 -64
  48. package/templates/next-shadcn/src/components/ui/separator.tsx +6 -3
  49. package/templates/next-shadcn/src/components/ui/sheet.tsx +35 -26
  50. package/templates/next-shadcn/src/components/ui/slider.tsx +58 -0
  51. package/templates/next-shadcn/src/components/ui/switch.tsx +3 -2
  52. package/templates/next-shadcn/src/components/ui/table.tsx +115 -0
  53. package/templates/next-shadcn/src/components/ui/tabs.tsx +16 -8
  54. package/templates/next-shadcn/src/components/ui/toggle-group.tsx +89 -0
  55. package/templates/next-shadcn/src/components/ui/toggle.tsx +46 -0
  56. package/templates/next-shadcn/src/components/ui/tooltip.tsx +24 -33
  57. package/templates/next-shadcn/src/lib/utils.ts +6 -1
  58. 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 { ChevronRightIcon, CheckIcon } from "lucide-react"
5
+ import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
6
+ import { CheckIcon, ChevronRightIcon } from "lucide-react"
7
7
 
8
- function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
9
- return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
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({ ...props }: MenuPrimitive.Portal.Props) {
13
- return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
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({ ...props }: MenuPrimitive.Trigger.Props) {
17
- return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
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
- }: MenuPrimitive.Popup.Props &
28
- Pick<
29
- MenuPrimitive.Positioner.Props,
30
- "align" | "alignOffset" | "side" | "sideOffset"
31
- >) {
38
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
32
39
  return (
33
- <MenuPrimitive.Portal>
34
- <MenuPrimitive.Positioner
35
- className="isolate z-50 outline-none"
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
- <MenuPrimitive.Popup
42
- data-slot="dropdown-menu-content"
43
- className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--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 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
44
- {...props}
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({ ...props }: MenuPrimitive.Group.Props) {
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
- }: MenuPrimitive.GroupLabel.Props & {
60
- inset?: boolean
61
- }) {
54
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
62
55
  return (
63
- <MenuPrimitive.GroupLabel
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
- }: MenuPrimitive.Item.Props & {
65
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
81
66
  inset?: boolean
82
67
  variant?: "default" | "destructive"
83
68
  }) {
84
69
  return (
85
- <MenuPrimitive.Item
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
- }: MenuPrimitive.CheckboxItem.Props & {
89
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
154
90
  inset?: boolean
155
91
  }) {
156
92
  return (
157
- <MenuPrimitive.CheckboxItem
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
- <MenuPrimitive.CheckboxItemIndicator>
107
+ <DropdownMenuPrimitive.ItemIndicator>
172
108
  <CheckIcon
173
109
  />
174
- </MenuPrimitive.CheckboxItemIndicator>
110
+ </DropdownMenuPrimitive.ItemIndicator>
175
111
  </span>
176
112
  {children}
177
- </MenuPrimitive.CheckboxItem>
113
+ </DropdownMenuPrimitive.CheckboxItem>
178
114
  )
179
115
  }
180
116
 
181
- function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
117
+ function DropdownMenuRadioGroup({
118
+ ...props
119
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
182
120
  return (
183
- <MenuPrimitive.RadioGroup
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
- }: MenuPrimitive.RadioItem.Props & {
133
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
196
134
  inset?: boolean
197
135
  }) {
198
136
  return (
199
- <MenuPrimitive.RadioItem
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
- <MenuPrimitive.RadioItemIndicator>
150
+ <DropdownMenuPrimitive.ItemIndicator>
213
151
  <CheckIcon
214
152
  />
215
- </MenuPrimitive.RadioItemIndicator>
153
+ </DropdownMenuPrimitive.ItemIndicator>
216
154
  </span>
217
155
  {children}
218
- </MenuPrimitive.RadioItem>
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
- }: MenuPrimitive.Separator.Props) {
183
+ }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
226
184
  return (
227
- <MenuPrimitive.Separator
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" | "type"> &
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
- <InputPrimitive
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({ className, ...props }: React.ComponentProps<"label">) {
7
+ function Label({
8
+ className,
9
+ ...props
10
+ }: React.ComponentProps<typeof LabelPrimitive.Root>) {
7
11
  return (
8
- <label
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({ ...props }: PopoverPrimitive.Root.Props) {
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({ ...props }: PopoverPrimitive.Trigger.Props) {
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.Popup.Props &
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.Positioner
27
+ <PopoverPrimitive.Content
28
+ data-slot="popover-content"
30
29
  align={align}
31
- alignOffset={alignOffset}
32
- side={side}
33
30
  sideOffset={sideOffset}
34
- className="isolate z-50"
35
- >
36
- <PopoverPrimitive.Popup
37
- data-slot="popover-content"
38
- className={cn(
39
- "z-50 flex w-72 origin-(--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=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
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 }: PopoverPrimitive.Title.Props) {
57
+ function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
60
58
  return (
61
- <PopoverPrimitive.Title
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
- }: PopoverPrimitive.Description.Props) {
70
+ }: React.ComponentProps<"p">) {
73
71
  return (
74
- <PopoverPrimitive.Description
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 { Progress as ProgressPrimitive } from "@base-ui/react/progress"
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.Props) {
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 }