{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ui-item","type":"registry:component","title":"Item","description":"List item primitive with media, content, and actions.","version":"1.0.0","status":"ga","files":[{"path":"src/components/ui/item.tsx","type":"registry:component","content":"import * as React from 'react'\n\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nimport { cn } from '@/lib/utils'\nimport { Separator } from '@/components/ui/separator'\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div role='list' data-slot='item-group' className={cn('group/item-group flex flex-col', className)} {...props} />\n  )\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return <Separator data-slot='item-separator' orientation='horizontal' className={cn('my-0', className)} {...props} />\n}\n\nconst itemVariants = cva(\n  'group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border-border',\n        muted: 'bg-muted/50'\n      },\n      size: {\n        default: 'gap-4 p-4',\n        sm: 'gap-2.5 px-4 py-3'\n      }\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default'\n    }\n  }\n)\n\nfunction Item({\n  className,\n  variant = 'default',\n  size = 'default',\n  asChild = false,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      data-slot='item'\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4\",\n        image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover'\n      }\n    },\n    defaultVariants: {\n      variant: 'default'\n    }\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot='item-media'\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-content'\n      className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-title'\n      className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot='item-description'\n      className={cn(\n        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot='item-actions' className={cn('flex items-center gap-2', className)} {...props} />\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-header'\n      className={cn('flex basis-full items-center justify-between gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='item-footer'\n      className={cn('flex basis-full items-center justify-between gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter\n}\n"}]}