Item

1import { mergeProps } from "@base-ui/react/merge-props";
2import { useRender } from "@base-ui/react/use-render";
3import { cva } from "class-variance-authority";
4import type { VariantProps } from "class-variance-authority";
5import type * as React from "react";
6 
7import { cn } from "@/lib/utils";
8import { Separator } from "@/components/ui/separator";
9 
10const ItemGroup = ({ className, ...props }: React.ComponentProps<"ul">) => (
11  <ul
12    className={cn("group/item-group flex flex-col", className)}
13    data-slot="item-group"
14    {...props}
15  />
16);
17 
18const ItemSeparator = ({ className, ...props }: React.ComponentProps<typeof Separator>) => (
19  <Separator
20    className={cn("my-0", className)}
21    data-slot="item-separator"
22    orientation="horizontal"
23    {...props}
24  />
25);
26 
27const itemVariants = cva(
28  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
29  {
30    defaultVariants: {
31      size: "default",
32      variant: "default",
33    },
34    variants: {
35      size: {
36        default: "gap-4 p-4",
37        sm: "gap-2.5 px-4 py-3",
38      },
39      variant: {
40        default: "bg-transparent",
41        muted: "bg-muted/50",
42        outline: "border-border",
43      },
44    },
45  },
46);
47 
48const Item = ({
49  className,
50  variant = "default",
51  size = "default",
52  asChild = false,
53  children,
54  ...props
55}: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) =>
56  useRender({
57    defaultTagName: "div",
58    props: mergeProps<"div">(
59      {
60        className: cn(itemVariants({ className, size, variant })),
61      },
62      asChild ? props : { ...props, children },
63    ),
64    render: asChild ? (children as React.ReactElement) : undefined,
65    state: {
66      size,
67      slot: "item",
68      variant,
69    },
70  });
71 
72const itemMediaVariants = cva(
73  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
74  {
75    defaultVariants: {
76      variant: "default",
77    },
78    variants: {
79      variant: {
80        default: "bg-transparent",
81        icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
82        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
83      },
84    },
85// … truncated