refactor(ui): re-pull label, textarea, separator and skeleton from the registry

ui/litellm-dashboard/src/components/ui/label.tsx

@@ -4,19 +4,17 @@ import * as React from "react";
 
 import { cn } from "@/lib/cva.config";
 
-const Label = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<"label">>(
-  ({ className, ...props }, ref) => (
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
     <label
-      ref={ref}
       data-slot="label"
       className={cn(
         "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",
         className,
       )}
       {...props}
     />
-  ),
-);
-Label.displayName = "Label";
+  );
+}
 
 export { Label };

ui/litellm-dashboard/src/components/ui/ref-forwarding.test.tsx

@@ -11,6 +11,7 @@ import { Label } from "./label";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table";
+import { Textarea } from "./textarea";
 import { UiLoadingSpinner } from "./ui-loading-spinner";
 
 describe("ui primitives forward refs to their DOM node", () => {
@@ -50,6 +51,12 @@ describe("ui primitives forward refs to their DOM node", () => {
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
 
+  it("Textarea", () => {
+    const ref = React.createRef<HTMLTextAreaElement>();
+    render(<Textarea ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
+  });
+
   it("UiLoadingSpinner", () => {
     const ref = React.createRef<SVGSVGElement>();
     render(<UiLoadingSpinner ref={ref} />);

ui/litellm-dashboard/src/components/ui/separator.tsx

@@ -1,14 +1,12 @@
 "use client";
 
 import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
-import * as React from "react";
 
 import { cn } from "@/lib/cva.config";
 
-const Separator = React.forwardRef<React.ComponentRef<typeof SeparatorPrimitive>, SeparatorPrimitive.Props>(
-  ({ className, orientation = "horizontal", ...props }, ref) => (
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
+  return (
     <SeparatorPrimitive
-      ref={ref}
       data-slot="separator"
       orientation={orientation}
       className={cn(
@@ -17,8 +15,7 @@ const Separator = React.forwardRef<React.ComponentRef<typeof SeparatorPrimitive>
       )}
       {...props}
     />
-  ),
-);
-Separator.displayName = "Separator";
+  );
+}
 
 export { Separator };

ui/litellm-dashboard/src/components/ui/skeleton.tsx

@@ -1,12 +1,7 @@
-import * as React from "react";
-
 import { cn } from "@/lib/cva.config";
 
-const Skeleton = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} data-slot="skeleton" className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
-  ),
-);
-Skeleton.displayName = "Skeleton";
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="skeleton" className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+}
 
 export { Skeleton };

ui/litellm-dashboard/src/components/ui/textarea.tsx

@@ -2,19 +2,17 @@ import * as React from "react";
 
 import { cn } from "@/lib/cva.config";
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
-  ({ className, ...props }, ref) => (
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
     <textarea
-      ref={ref}
       data-slot="textarea"
       className={cn(
         "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}
     />
-  ),
-);
-Textarea.displayName = "Textarea";
+  );
+}
 
 export { Textarea };