Item

1import * as React from "react";
2import { Slot } from "@radix-ui/react-slot";
3import { cva, type VariantProps } from "class-variance-authority";
4 
5import { cn } from "@/lib/utils";
6 
7const itemVariants = cva(
8  "group/item relative flex w-full items-center gap-4 rounded-2xl border text-left outline-none transition-[background-color,border-color,box-shadow,transform] duration-200 focus-visible:ring-2 focus-visible:ring-ring/45 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45",
9  {
10    variants: {
11      variant: {
12        default: "border-transparent bg-transparent hover:bg-foreground/[.04]",
13        outline:
14          "border-foreground/10 bg-background/65 shadow-[inset_0_1px_0_color-mix(in_oklch,var(--background)_70%,transparent)] hover:border-foreground/16 hover:bg-foreground/[.025]",
15        muted:
16          "border-transparent bg-foreground/[.04] hover:bg-foreground/[.065]",
17      },
18      size: {
19        default: "p-4",
20        sm: "gap-3 rounded-xl p-3",
21      },
22    },
23    defaultVariants: { variant: "default", size: "default" },
24  },
25);
26 
27function Item({
28  className,
29  variant,
30  size,
31  asChild = false,
32  ...props
33}: React.ComponentProps<"div"> &
34  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
35  const Comp = asChild ? Slot : "div";
36  return (
37    <Comp
38      data-slot="item"
39      data-variant={variant}
40      data-size={size}
41      className={cn(itemVariants({ variant, size }), className)}
42      {...props}
43    />
44  );
45}
46 
47function ItemMedia({
48  className,
49  variant = "default",
50  ...props
51}: React.ComponentProps<"div"> & { variant?: "default" | "icon" | "image" }) {
52  return (
53    <div
54      data-slot="item-media"
55      data-variant={variant}
56      className={cn(
57        "flex shrink-0 items-center justify-center text-muted-foreground data-[variant=icon]:size-10 data-[variant=icon]:rounded-xl data-[variant=icon]:bg-primary/10 data-[variant=icon]:text-primary data-[variant=image]:size-12 data-[variant=image]:overflow-hidden data-[variant=image]:rounded-xl [&_svg]:size-5 [&_img]:size-full [&_img]:object-cover",
58        className,
59      )}
60      {...props}
61    />
62  );
63}
64 
65function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
66  return (
67    <div
68      data-slot="item-content"
69      className={cn("min-w-0 flex-1 space-y-1", className)}
70      {...props}
71    />
72  );
73}
74 
75function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
76  return (
77    <div
78      data-slot="item-title"
79// … truncated