Skip to content

Commit e717dd8

Browse files
lead-matrixlead-matrix
committed
fix: resolve build errors by correcting UI component exports and Radix UI imports
1 parent a5fcd61 commit e717dd8

File tree

8 files changed

+230
-51
lines changed

8 files changed

+230
-51
lines changed

‎components/ui/badge.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react"
22
import { cva, type VariantProps } from "class-variance-authority"
3-
import { Slot } from "radix-ui"
3+
import { Slot } from "@radix-ui/react-slot"
44

55
import { cn } from "@/lib/utils"
66

@@ -33,7 +33,7 @@ function Badge({
3333
...props
3434
}: React.ComponentProps<"span"> &
3535
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
36-
const Comp = asChild ? Slot.Root : "span"
36+
const Comp = asChild ? Slot : "span"
3737

3838
return (
3939
<Comp

‎components/ui/button.tsx‎

Lines changed: 53 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,57 @@
1-
import React from 'react';
2-
import './Button.css'; // Optional: If you want to include styles.
1+
import * as React from "react"
2+
import { Slot } from "@radix-ui/react-slot"
3+
import { cva, type VariantProps } from "class-variance-authority"
34

4-
interface ButtonProps {
5-
label: string;
6-
onClick: () => void;
7-
disabled?: boolean;
5+
import { cn } from "@/lib/utils"
6+
7+
const buttonVariants = cva(
8+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
9+
{
10+
variants: {
11+
variant: {
12+
default:
13+
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
14+
destructive:
15+
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16+
outline:
17+
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18+
secondary:
19+
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20+
ghost: "hover:bg-accent hover:text-accent-foreground",
21+
link: "text-primary underline-offset-4 hover:underline",
22+
},
23+
size: {
24+
default: "h-9 px-4 py-2",
25+
sm: "h-8 rounded-md px-3 text-xs",
26+
lg: "h-10 rounded-md px-8",
27+
icon: "h-9 w-9",
28+
},
29+
},
30+
defaultVariants: {
31+
variant: "default",
32+
size: "default",
33+
},
34+
}
35+
)
36+
37+
export interface ButtonProps
38+
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39+
VariantProps<typeof buttonVariants> {
40+
asChild?: boolean
841
}
942

10-
const Button: React.FC<ButtonProps> = ({ label, onClick, disabled }) => {
11-
return (
12-
<button className="button" onClick={onClick} disabled={disabled}>
13-
{label}
14-
</button>
15-
);
16-
};
43+
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44+
({ className, variant, size, asChild = false, ...props }, ref) => {
45+
const Comp = asChild ? Slot : "button"
46+
return (
47+
<Comp
48+
className={cn(buttonVariants({ variant, size, className }))}
49+
ref={ref}
50+
{...props}
51+
/>
52+
)
53+
}
54+
)
55+
Button.displayName = "Button"
1756

18-
export default Button;
57+
export { Button, buttonVariants }

‎components/ui/dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import * as React from "react"
44
import { XIcon } from "lucide-react"
5-
import { Dialog as DialogPrimitive } from "radix-ui"
5+
import * as DialogPrimitive from "@radix-ui/react-dialog"
66

77
import { cn } from "@/lib/utils"
88
import { Button } from "@/components/ui/button"

‎components/ui/label.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client"
22

33
import * as React from "react"
4-
import { Label as LabelPrimitive } from "radix-ui"
4+
import * as LabelPrimitive from "@radix-ui/react-label"
55

66
import { cn } from "@/lib/utils"
77

‎components/ui/scroll-area.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client"
22

33
import * as React from "react"
4-
import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
4+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
55

66
import { cn } from "@/lib/utils"
77

@@ -40,9 +40,9 @@ function ScrollBar({
4040
className={cn(
4141
"flex touch-none p-px transition-colors select-none",
4242
orientation === "vertical" &&
43-
"h-full w-2.5 border-l border-l-transparent",
43+
"h-full w-2.5 border-l border-l-transparent",
4444
orientation === "horizontal" &&
45-
"h-2.5 flex-col border-t border-t-transparent",
45+
"h-2.5 flex-col border-t border-t-transparent",
4646
className
4747
)}
4848
{...props}

‎components/ui/separator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client"
22

33
import * as React from "react"
4-
import { Separator as SeparatorPrimitive } from "radix-ui"
4+
import * as SeparatorPrimitive from "@radix-ui/react-separator"
55

66
import { cn } from "@/lib/utils"
77

‎components/ui/sheet.tsx‎

Lines changed: 140 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,140 @@
1-
import { Sheet } from "shadcn/ui";
2-
3-
const SheetComponent = () => {
4-
return (
5-
<Sheet>
6-
<Sheet.Trigger>Open Sheet</Sheet.Trigger>
7-
<Sheet.Content>
8-
<Sheet.Close>Close</Sheet.Close>
9-
<h1>Sheet Content</h1>
10-
</Sheet.Content>
11-
</Sheet>
12-
);
13-
};
14-
15-
export default SheetComponent;
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as SheetPrimitive from "@radix-ui/react-dialog"
5+
import { cva, type VariantProps } from "class-variance-authority"
6+
import { X } from "lucide-react"
7+
8+
import { cn } from "@/lib/utils"
9+
10+
const Sheet = SheetPrimitive.Root
11+
12+
const SheetTrigger = SheetPrimitive.Trigger
13+
14+
const SheetClose = SheetPrimitive.Close
15+
16+
const SheetPortal = SheetPrimitive.Portal
17+
18+
const SheetOverlay = React.forwardRef<
19+
React.ElementRef<typeof SheetPrimitive.Overlay>,
20+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
21+
>(({ className, ...props }, ref) => (
22+
<SheetPrimitive.Overlay
23+
className={cn(
24+
"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",
25+
className
26+
)}
27+
{...props}
28+
ref={ref}
29+
/>
30+
))
31+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
32+
33+
const sheetVariants = cva(
34+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
35+
{
36+
variants: {
37+
side: {
38+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
39+
bottom:
40+
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
41+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
42+
right:
43+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
44+
},
45+
},
46+
defaultVariants: {
47+
side: "right",
48+
},
49+
}
50+
)
51+
52+
interface SheetContentProps
53+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
54+
VariantProps<typeof sheetVariants> { }
55+
56+
const SheetContent = React.forwardRef<
57+
React.ElementRef<typeof SheetPrimitive.Content>,
58+
SheetContentProps
59+
>(({ side = "right", className, children, ...props }, ref) => (
60+
<SheetPortal>
61+
<SheetOverlay />
62+
<SheetPrimitive.Content
63+
ref={ref}
64+
className={cn(sheetVariants({ side }), className)}
65+
{...props}
66+
>
67+
{children}
68+
<SheetPrimitive.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-secondary">
69+
<X className="h-4 w-4" />
70+
<span className="sr-only">Close</span>
71+
</SheetPrimitive.Close>
72+
</SheetPrimitive.Content>
73+
</SheetPortal>
74+
))
75+
SheetContent.displayName = SheetPrimitive.Content.displayName
76+
77+
const SheetHeader = ({
78+
className,
79+
...props
80+
}: React.HTMLAttributes<HTMLDivElement>) => (
81+
<div
82+
className={cn(
83+
"flex flex-col space-y-2 text-center sm:text-left",
84+
className
85+
)}
86+
{...props}
87+
/>
88+
)
89+
SheetHeader.displayName = "SheetHeader"
90+
91+
const SheetFooter = ({
92+
className,
93+
...props
94+
}: React.HTMLAttributes<HTMLDivElement>) => (
95+
<div
96+
className={cn(
97+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
98+
className
99+
)}
100+
{...props}
101+
/>
102+
)
103+
SheetFooter.displayName = "SheetFooter"
104+
105+
const SheetTitle = React.forwardRef<
106+
React.ElementRef<typeof SheetPrimitive.Title>,
107+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108+
>(({ className, ...props }, ref) => (
109+
<SheetPrimitive.Title
110+
ref={ref}
111+
className={cn("text-lg font-semibold text-foreground", className)}
112+
{...props}
113+
/>
114+
))
115+
SheetTitle.displayName = SheetPrimitive.Title.displayName
116+
117+
const SheetDescription = React.forwardRef<
118+
React.ElementRef<typeof SheetPrimitive.Description>,
119+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120+
>(({ className, ...props }, ref) => (
121+
<SheetPrimitive.Description
122+
ref={ref}
123+
className={cn("text-sm text-muted-foreground", className)}
124+
{...props}
125+
/>
126+
))
127+
SheetDescription.displayName = SheetPrimitive.Description.displayName
128+
129+
export {
130+
Sheet,
131+
SheetPortal,
132+
SheetOverlay,
133+
SheetTrigger,
134+
SheetClose,
135+
SheetContent,
136+
SheetHeader,
137+
SheetFooter,
138+
SheetTitle,
139+
SheetDescription,
140+
}

‎components/ui/switch.tsx‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,29 @@
1-
import * as React from 'react';
2-
import * as RadixSwitch from '@radix-ui/react-switch';
3-
import './Switch.css'; // add a CSS file for styling if needed
4-
5-
const Switch = React.forwardRef((props, ref) => {
6-
return (
7-
<RadixSwitch.Root ref={ref} className="SwitchRoot" {...props}>
8-
<RadixSwitch.Thumb className="SwitchThumb" />
9-
</RadixSwitch.Root>
10-
);
11-
});
12-
13-
Switch.displayName = 'Switch';
14-
export default Switch;
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as SwitchPrimitives from "@radix-ui/react-switch"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
const Switch = React.forwardRef<
9+
React.ElementRef<typeof SwitchPrimitives.Root>,
10+
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
11+
>(({ className, ...props }, ref) => (
12+
<SwitchPrimitives.Root
13+
className={cn(
14+
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gold-primary data-[state=unchecked]:bg-zinc-800",
15+
className
16+
)}
17+
{...props}
18+
ref={ref}
19+
>
20+
<SwitchPrimitives.Thumb
21+
className={cn(
22+
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
23+
)}
24+
/>
25+
</SwitchPrimitives.Root>
26+
))
27+
Switch.displayName = SwitchPrimitives.Root.displayName
28+
29+
export { Switch }

0 commit comments

Comments
 (0)