{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "title": "Item",
  "description": "A flexible row: media, title, description and actions.",
  "dependencies": [
    "class-variance-authority",
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/item.tsx",
      "content": "import * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst itemVariants = cva(\"group/item flex items-center gap-3 rounded-xl text-sm outline-none transition-colors duration-150 focus-visible:ring-3 focus-visible:ring-ring/50\", {\n  variants: {\n    variant: {\n      default: \"bg-transparent\",\n      outline: \"border border-border\",\n      muted: \"bg-muted/50\",\n    },\n    size: { sm: \"p-2.5\", md: \"p-3.5\" },\n  },\n  defaultVariants: { variant: \"default\", size: \"md\" },\n});\n\n/** A flexible row for settings, lists and search results: media, title, description and actions. */\nfunction Item({ className, variant, size, asChild, ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return <Comp data-slot=\"item\" className={cn(itemVariants({ variant, size }), \"[a&]:hover:bg-accent\", className)} {...props} />;\n}\n\nfunction ItemMedia({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"item-media\" className={cn(\"grid size-9 shrink-0 place-items-center overflow-hidden rounded-lg bg-muted [&_svg]:size-4\", className)} {...props} />;\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"item-content\" className={cn(\"grid min-w-0 flex-1 gap-0.5\", className)} {...props} />;\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"item-title\" className={cn(\"truncate font-medium\", className)} {...props} />;\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"item-description\" className={cn(\"line-clamp-2 text-muted-foreground\", className)} {...props} />;\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"item-actions\" className={cn(\"flex shrink-0 items-center gap-2\", className)} {...props} />;\n}\n\nexport { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, itemVariants };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/item",
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}