{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "item",
  "title": "Item",
  "author": "Matthew Blode",
  "description": "A flexible list item component for menus, settings, and data rows.",
  "dependencies": ["@base-ui/react"],
  "registryDependencies": ["separator"],
  "files": [
    {
      "path": "ui/item.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva } from \"class-variance-authority\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst ItemGroup = ({ className, ...props }: React.ComponentProps<\"ul\">) => (\n  <ul\n    className={cn(\"group/item-group flex flex-col\", className)}\n    data-slot=\"item-group\"\n    {...props}\n  />\n);\n\nconst ItemSeparator = ({ className, ...props }: React.ComponentProps<typeof Separator>) => (\n  <Separator\n    className={cn(\"my-0\", className)}\n    data-slot=\"item-separator\"\n    orientation=\"horizontal\"\n    {...props}\n  />\n);\n\nconst itemVariants = cva(\n  \"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50\",\n  {\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"gap-4 p-4\",\n        sm: \"gap-2.5 px-4 py-3\",\n      },\n      variant: {\n        default: \"bg-transparent\",\n        muted: \"bg-muted/50\",\n        outline: \"border-border\",\n      },\n    },\n  },\n);\n\nconst Item = ({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) =>\n  useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ className, size, variant })),\n      },\n      asChild ? props : { ...props, children },\n    ),\n    render: asChild ? (children as React.ReactElement) : undefined,\n    state: {\n      size,\n      slot: \"item\",\n      variant,\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    defaultVariants: {\n      variant: \"default\",\n    },\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n  },\n);\n\nconst ItemMedia = ({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) => (\n  <div\n    className={cn(itemMediaVariants({ className, variant }))}\n    data-slot=\"item-media\"\n    data-variant={variant}\n    {...props}\n  />\n);\n\nconst ItemContent = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\n    data-slot=\"item-content\"\n    {...props}\n  />\n);\n\nconst ItemTitle = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\"flex w-fit items-center gap-2 font-medium text-sm leading-snug\", className)}\n    data-slot=\"item-title\"\n    {...props}\n  />\n);\n\nconst ItemDescription = ({ className, ...props }: React.ComponentProps<\"p\">) => (\n  <p\n    className={cn(\n      \"line-clamp-2 text-balance font-normal text-muted-foreground text-sm leading-normal\",\n      \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n      className,\n    )}\n    data-slot=\"item-description\"\n    {...props}\n  />\n);\n\nconst ItemActions = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div className={cn(\"flex items-center gap-2\", className)} data-slot=\"item-actions\" {...props} />\n);\n\nconst ItemHeader = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n    data-slot=\"item-header\"\n    {...props}\n  />\n);\n\nconst ItemFooter = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n    data-slot=\"item-footer\"\n    {...props}\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",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}