List

import { List, ListItem, ListItemIcon, ListItemText } from "@/components/ui/list";

export default function Example() {
  return <List />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const List = forwardRef(({ className, ...props }, ref) => (
  <ul ref={ref} className={cn("space-y-1", className)} {...props} />
));
List.displayName = "List";

const ListItem = forwardRef(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent", className)} {...props} />
));
ListItem.displayName = "ListItem";

const ListItemIcon = forwardRef(({ className, ...props }, ref) => (
  <span ref={ref} className={cn("flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground", className)} {...props} />
));
ListItemIcon.displayName = "ListItemIcon";

const ListItemText = forwardRef(({ className, primary, secondary, ...props }, ref) => (
  <div ref={ref} className={cn("flex-1 min-w-0", className)} {...props}>
    {primary && <div className="truncate font-medium">{primary}</div>}
    {secondary && <div className="truncate text-xs text-muted-foreground">{secondary}</div>}
  </div>
));
ListItemText.displayName = "ListItemText";

export { List, ListItem, ListItemIcon, ListItemText };