Item

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