{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "title": "Item",
  "description": "A flexible item component for displaying content.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/item.jsx",
      "content": "import * as React from \"react\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/registry/optics/separator\";\n\nfunction ItemGroup({ className = \"\", ...props }) {\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\"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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 }) {\n\treturn (\n\t\t<Separator\n\t\t\tdata-slot=\"item-separator\"\n\t\t\torientation=\"horizontal\"\n\t\t\tclassName={cn(\"my-2\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst itemVariants = cva(\n\t\"[a]:hover:bg-muted rounded-md border text-xs/relaxed w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\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: \"bg-muted/50 border-transparent\",\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.5 px-2.5 py-2 [[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 = undefined,\n\t...props\n}) {\n\treturn useRender({\n\t\tdefaultTagName: \"div\",\n\t\tprops: mergeProps(\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\"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_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-8 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({ className = \"\", variant = \"default\", ...props }) {\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 }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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 }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-title\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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 }) {\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"item-description\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground text-left text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]: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 ItemActions({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-actions\"\n\t\t\tclassName={cn(\"gap-2 flex items-center\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ItemHeader({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-2 flex basis-full items-center justify-between\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ItemFooter({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"item-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-2 flex basis-full items-center justify-between\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nItem.displayName = \"Item\";\nItemMedia.displayName = \"ItemMedia\";\nItemContent.displayName = \"ItemContent\";\nItemActions.displayName = \"ItemActions\";\nItemGroup.displayName = \"ItemGroup\";\nItemSeparator.displayName = \"ItemSeparator\";\nItemTitle.displayName = \"ItemTitle\";\nItemDescription.displayName = \"ItemDescription\";\nItemHeader.displayName = \"ItemHeader\";\nItemFooter.displayName = \"ItemFooter\";\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:component",
      "target": "components/optics/item.jsx"
    }
  ],
  "type": "registry:component"
}