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