{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "title": "Item",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A flexible list row with media, title, description and actions, in outline, muted and plain variants, that can also render as a link.",
  "dependencies": [
    "radix-ui",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/item.tsx",
      "content": "// Ballmac UI: Item. https://ui.ballmac.com/components/item\n// Based on shadcn/ui Item (MIT, Copyright (c) 2023 shadcn), adding a compact size, an interactive hover state, and a list-aware group.\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\n\ntype ItemGroupProps = React.ComponentProps<\"div\">;\n/** A vertical stack of items. Pass `role=\"list\"` here and `role=\"listitem\"` on each non-link item when the rows are a real list. */\nfunction ItemGroup({ className, ...props }: ItemGroupProps) {\n  return (\n    <div\n      data-slot=\"item-group\"\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\ntype ItemSeparatorProps = React.ComponentProps<\"div\">;\nfunction ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n  return (\n    <div\n      data-slot=\"item-separator\"\n      aria-hidden=\"true\"\n      className={cn(\"h-px w-full bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-lg border text-sm outline-none transition-colors duration-150 focus-visible:ring-[3px] focus-visible:ring-ring/50 [a&]:hover:bg-accent/60 [button&]:hover:bg-accent/60 [a&]:cursor-pointer [button&]:cursor-pointer [button&]:text-start\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border bg-card\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-4 p-4\",\n        sm: \"gap-3 px-3 py-2.5\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"default\" },\n  },\n);\n\ntype ItemProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & {\n    /** Render the child (a link or button) with item styles and behavior. */\n    asChild?: boolean;\n  };\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: ItemProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-9 rounded-lg border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-lg [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\ntype ItemMediaProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemMediaVariants>;\nfunction ItemMedia({ className, variant = \"default\", ...props }: ItemMediaProps) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\ntype ItemContentProps = React.ComponentProps<\"div\">;\nfunction ItemContent({ className, ...props }: ItemContentProps) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  );\n}\n\ntype ItemTitleProps = React.ComponentProps<\"div\">;\nfunction ItemTitle({ className, ...props }: ItemTitleProps) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\"flex w-fit max-w-full items-center gap-2 text-sm leading-snug font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\ntype ItemDescriptionProps = React.ComponentProps<\"p\">;\nfunction ItemDescription({ className, ...props }: ItemDescriptionProps) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\"line-clamp-2 text-sm leading-normal text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\ntype ItemActionsProps = React.ComponentProps<\"div\">;\nfunction ItemActions({ className, ...props }: ItemActionsProps) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex shrink-0 items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\ntype ItemHeaderProps = React.ComponentProps<\"div\">;\nfunction ItemHeader({ className, ...props }: ItemHeaderProps) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\ntype ItemFooterProps = React.ComponentProps<\"div\">;\nfunction ItemFooter({ className, ...props }: ItemFooterProps) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Item,\n  ItemGroup,\n  ItemSeparator,\n  ItemMedia,\n  ItemContent,\n  ItemTitle,\n  ItemDescription,\n  ItemActions,\n  ItemHeader,\n  ItemFooter,\n  itemVariants,\n  type ItemProps,\n  type ItemGroupProps,\n  type ItemSeparatorProps,\n  type ItemMediaProps,\n  type ItemContentProps,\n  type ItemTitleProps,\n  type ItemDescriptionProps,\n  type ItemActionsProps,\n  type ItemHeaderProps,\n  type ItemFooterProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/item.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "list",
      "row",
      "media",
      "layout"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Compose rows from ItemMedia, ItemContent, ItemTitle, ItemDescription and ItemActions. asChild styles a link or button as a whole-row target.",
      "whenToUse": [
        "Settings, connected accounts and file lists",
        "Rows with an icon or avatar, text and an action"
      ],
      "whenNotToUse": [
        "Tabular data with columns; use table",
        "Long card layouts; use card"
      ],
      "composesWith": [
        "badge",
        "avatar",
        "button"
      ],
      "a11y": [
        {
          "keys": "Tab / Enter",
          "action": "When rendered as a link or button, behaves as one"
        }
      ],
      "customization": [
        "variant: default | outline | muted",
        "size: default | sm",
        "ItemMedia variant: default | icon | image"
      ]
    },
    "source": {
      "name": "shadcn/ui Item",
      "url": "https://github.com/shadcn-ui/ui",
      "license": "MIT",
      "copyright": "Copyright (c) 2023 shadcn",
      "modified": true
    },
    "examples": [
      "item-demo",
      "item-states"
    ],
    "url": "https://ui.ballmac.com/components/item"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}