{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "title": "Item",
  "description": "Flexible row for lists: media, title, description and actions, with outline and muted variants.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/separator.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/item/item.tsx",
      "content": "import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type * as React from 'react'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\trole=\"list\"\n\t\t\tdata-slot=\"item-group\"\n\t\t\tclassName={cn(\n\t\t\t\t'group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n\treturn <Separator data-slot=\"item-separator\" orientation=\"horizontal\" className={cn('my-2', className)} {...props} />\n}\n\nconst itemVariants = cva(\n\t'group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted',\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: 'border-transparent',\n\t\t\t\toutline: 'border-border',\n\t\t\t\tmuted: 'border-transparent bg-muted/50',\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: 'gap-2.5 px-3 py-2.5',\n\t\t\t\tsm: 'gap-2.5 px-3 py-2.5',\n\t\t\t\txs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'default',\n\t\t\tsize: 'default',\n\t\t},\n\t},\n)\n\nfunction Item({\n\tclassName,\n\tvariant = 'default',\n\tsize = 'default',\n\trender,\n\t...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof itemVariants>) {\n\treturn useRender({\n\t\tdefaultTagName: 'div',\n\t\tprops: mergeProps<'div'>(\n\t\t\t{\n\t\t\t\tclassName: cn(itemVariants({ variant, size, className })),\n\t\t\t},\n\t\t\tprops,\n\t\t),\n\t\trender,\n\t\tstate: {\n\t\t\tslot: 'item',\n\t\t\tvariant,\n\t\t\tsize,\n\t\t},\n\t})\n}\n\nconst itemMediaVariants = cva(\n\t'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\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: 'bg-transparent',\n\t\t\t\ticon: \"[&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\timage:\n\t\t\t\t\t'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: 'default',\n\t\t},\n\t},\n)\n\nfunction ItemMedia({\n\tclassName,\n\tvariant = 'default',\n\t...props\n}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-media\"\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(itemMediaVariants({ variant, className }))}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-content\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-title\"\n\t\t\tclassName={cn(\n\t\t\t\t'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"item-description\"\n\t\t\tclassName={cn(\n\t\t\t\t'line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn <div data-slot=\"item-actions\" className={cn('flex items-center gap-2', className)} {...props} />\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-header\"\n\t\t\tclassName={cn('flex basis-full items-center justify-between gap-2', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-footer\"\n\t\t\tclassName={cn('flex basis-full items-center justify-between gap-2', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport {\n\tItem,\n\tItemMedia,\n\tItemContent,\n\tItemActions,\n\tItemGroup,\n\tItemSeparator,\n\tItemTitle,\n\tItemDescription,\n\tItemHeader,\n\tItemFooter,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/item.tsx"
    }
  ],
  "meta": {
    "new": true
  },
  "type": "registry:ui"
}