Item

1import * as React from "react";2import { Slot } from "radix-ui";3import { cva, type VariantProps } from "class-variance-authority";4​5import { cn } from "@/lib/utils";6import { Separator } from "@/components/ui/separator";7​8// A row of content (Figma 427:2715): an email in the inbox list (sender and date over the subject and a purple preview),9// a webhook event (a tag and an arrow over the event name and a purple count), a rail row (a 22px filled glyph and a10// 14px label, 38px tall at size sm). `default` is bare and washes lilac under the pointer; a selected item11// (aria-current or data-selected) sits on the lilac with 8px corners. `outline` takes the field edge, `muted` the lilac.12function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {13  return <div role="list" data-slot="item-group" className={cn("group/item-group flex flex-col", className)} {...props} />;14}15​16function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {17  return <Separator data-slot="item-separator" orientation="horizontal" className={cn("my-0.5", className)} {...props} />;18}19​20const itemVariants = cva(21  "group/item flex flex-wrap items-center rounded-control border border-transparent font-sans text-body leading-body text-fg outline-none transition-colors duration-150 ease-out focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus-ring aria-[current=page]:bg-subtle aria-[current=true]:bg-subtle data-[selected=true]:bg-subtle motion-reduce:transition-none [a]:hover:bg-subtle [button]:hover:bg-subtle",22  {23    variants: {24      variant: {25        default: "bg-transparent",26        outline: "border-line-field bg-surface",27        muted: "bg-subtle [a]:hover:bg-subtle-hover [button]:hover:bg-subtle-hover",28      },29      size: {30        default: "gap-3 p-3",31        sm: "min-h-9.5 gap-2.5 px-3 py-1.5",32        xs: "gap-2 px-2 py-1",33      },34    },35    defaultVariants: { variant: "default", size: "default" },36  },37);38​39function Item({ className, variant = "default", size = "default", asChild = false, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {40  const Comp = asChild ? Slot.Root : "div";41  return <Comp data-slot="item" data-variant={variant} data-size={size} className={cn(itemVariants({ variant, size, className }))} {...props} />;42}43​44const itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none", {45  variants: {46    variant: {47      default: "bg-transparent",48      icon: "text-icon-default [&_svg:not([class*='size-'])]:size-6",49      image: "size-10 overflow-hidden rounded-control [&_img]:size-full [&_img]:object-cover",50    },51  },52  defaultVariants: { variant: "default" },53});54​55function ItemMedia({ className, variant = "default", ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {56  return <div data-slot="item-media" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props} />;57}58​59function ItemContent({ className, ...props }: React.ComponentProps<"div">) {60  return <div data-slot="item-content" className={cn("flex min-w-0 flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)} {...props} />;61}62​63function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {64  return <div data-slot="item-title" className={cn("flex w-fit min-w-0 items-center gap-2 text-body leading-tight text-fg", className)} {...props} />;65}66​67/** The purple line under a title (a preview, a count), clamped to two lines. */68function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {69  return <p data-slot="item-description" className={cn("line-clamp-2 text-body leading-tight font-normal text-balance text-fg-brand [&>a]:underline [&>a]:underline-offset-4", className)} {...props} />;70}71​72function ItemActions({ className, ...props }: React.ComponentProps<"div">) {73  return <div data-slot="item-actions" className={cn("flex items-center gap-1", className)} {...props} />;74}75​76/** The top line of an item: what it is at the left (sender, tag), when or where at the right (date, arrow). */77function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {78  return <div data-slot="item-header" className={cn("flex basis-full items-center justify-between gap-2 text-body leading-tight", className)} {...props} />;79}80​81function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {82  return <div data-slot="item-footer" className={cn("flex basis-full items-center justify-between gap-2", className)} {...props} />;83}84​85export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };