revert back to zod

components/ui/aspect-ratio.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+import type { ComponentPropsWithoutRef } from "react";
+
+const AspectRatio = ({ ...rest }: ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>) => {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...rest} />;
+};
+
+export default AspectRatio;

components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+export const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Badge = ({
+  className,
+  variant,
+  asChild = false,
+  ...rest
+}: ComponentPropsWithoutRef<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) => {
+  const Comp = asChild ? Slot : "span";
+
+  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...rest} />;
+};
+
+export default Badge;

components/ui/card.tsx

@@ -0,0 +1,53 @@
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+const Card = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
+  return (
+    <div
+      data-slot="card"
+      className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)}
+      {...rest}
+    />
+  );
+};
+
+const CardHeader = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...rest}
+    />
+  );
+};
+
+const CardTitle = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
+  return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...rest} />;
+};
+
+const CardDescription = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
+  return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...rest} />;
+};
+
+const CardAction = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...rest}
+    />
+  );
+};
+
+const CardContent = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
+  return <div data-slot="card-content" className={cn("px-6", className)} {...rest} />;
+};
+
+const CardFooter = ({ className, ...rest }: ComponentPropsWithoutRef<"div">) => {
+  return <div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...rest} />;
+};
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

components/ui/scroll-area.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+
+const ScrollArea = ({ className, children, ...rest }: ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>) => {
+  return (
+    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...rest}>
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+};
+
+const ScrollBar = ({
+  className,
+  orientation = "vertical",
+  ...rest
+}: ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) => {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...rest}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+};
+
+export { ScrollArea, ScrollBar };